Есть ли способ заставить текстовые символы переходить в верхнюю часть ограничивающей рамки в HTML5?

Вот элемент Label в HTML, и красный пунктирный контур показывает его ограничивающую рамку. Обратите внимание, что символы не на одном уровне с верхним краем ограничивающей рамки:

line-height:1.2; /* default */

введите здесь описание изображения
Вот JSFiddle, показывающий изображение выше http://jsfiddle.net/6gLQU/16/.

Вот тот же текст, где для стиля line-height установлено значение 1 или 100% (лучше, но все же не смыть):

line-height:1;

введите описание изображения здесь

Наконец, если я установлю стиль line-height на .8 (80%), как в этом примере кода , он ровный, за исключением небольшой, но приемлемой разницы в один пиксель в последнем тестовом тексте. Это замечательно, но если есть более одной строки текста (многострочный), то следующая строка поднимается слишком высоко, потому что это делает высоту каждой строки 80% от ее фактической высоты.

line-height:.8;

введите описание изображения здесь

Вот код JSFiddle http://jsfiddle.net/6gLQU/16/.

(Вы можете пропустить этот абзац, если не знаете Flash) В Flash TLF (FTE или Flash Text Engine), если вы добавляете текстовое поле, используя FTE или TLF в качестве механизма, текстовые символы выровнен по верхнему краю ограничивающего прямоугольника. Они выглядят как текст на последнем рисунке (символы плотно прилегают к верхней границе ограничивающей рамки).

В HTML текстовый символ не выравнивается по верхнему краю ограничивающего прямоугольника, как показано в примерах выше. При увеличении размера шрифта вы также увеличиваете зазор от верха символа до верха прямоугольника ограничивающей рамки.

В моем исследовании текста, используемого в HTML и CSS, стиль шрифта line-height будет регулировать положение символов текста внутри их ограничивающей рамки (как показано на рисунках выше). Во Flash стиль line-height не влияет на символы в первой строке текста, но корректирует следующие строки, а также в HTML (поэтому он не работает в HTML или Flash для многострочного текста).

Я определил, что если я установил line-height на 0,8 или 80% в HTML, шрифт совпадет с верхней частью ограничивающей рамки (как показано выше). Здорово! Это то, что я хочу, но это не работает для нескольких строк текста. Если имеется более одной строки, следующая строка «подтягивается» и перекрывает предыдущую, потому что, очевидно, я даю каждой строке только 80 процентов ее фактической высоты.

В любом случае, у меня вопрос:

  1. Есть ли альтернативный подход, который я могу использовать, чтобы символы HTML переходили в верхнюю часть ограничивающей рамки? Взлом, который я использую с line-height, приводит к тому, что несколько строк текста оказываются слишком близко друг к другу.
  2. Есть ли в Flash TLF параметр, позволяющий заставить его вести себя и выглядеть как текстовая строка HTML? То есть сделайте так, чтобы текстовые символы не вытягивались в верхнюю часть ограничивающей рамки (в соответствии с правилами макета HTML).

Я нашел альтернативу, в которой используется отрицательное поле для полей, но я должен ввести его вручную. Это не идеально, потому что это разные значения для каждого размера шрифта (найдены методом проб и ошибок), и он перемещает текстовое поле вверх, а не символы. С хаком line-height я могу использовать .8, и я знаю, что он будет расположен правильно.

Вот ссылка на код и изображение с отрицательным полем. Я применил его только к последнему элементу. Обратите внимание на красную границу:

font-size:64px;
line-height:1.2;
margin-top:-14px;

введите описание изображения здесь

Вот еще один тест и другой, кратный 12, с отрицательным процентом маржи. Опять же, каждое отрицательное значение маржи отличается и определяется методом проб и ошибок:

font-size:12px;
line-height:1.2;
margin-top:-.19%;

введите описание изображения здесь

Вот информация о FTE двигатель. Я читал это в течение часа и теперь понимаю, что знаю несколько из этих слов.

PS Извините, что вопрос такой длинный. Очевидно, я пытаюсь получить награду за самый длинный пост. Кроме того, я добавил два вопроса, потому что есть реальная проблема, а затем есть вопрос об обходном пути, который может не понадобиться, если реальная проблема разрешима. Я не уверен, как это называется, но кто-то сказал мне, что это обычное дело с вопросами программирования на SO. Кроме того, добавление тега Firefox, поскольку он работает в Firefox, и один из разработчиков Firefox может его увидеть и узнать, как все это работает.

Обновление 2019:
У меня где-то есть еще один вопрос по этому поводу, но принятое исправление работает для определенных шрифтов, но не для всех шрифтов.

IIUC Верхний край текстового символа, называемый глифом, называется высотой заглавных букв, а высота контейнера вокруг глифа - высотой em. Высота заглавных букв различна для каждого шрифта, поскольку шрифты имеют разные стили и созданы разными авторами.

Браузеры IIUC не позиционируются в соответствии с em или размером шрифта, а высота заглавных букв не учитывается.

Запрос функции, который у меня есть для браузеров, заключался бы в поддержке выравнивания первой строки текста абзаца или метки по высоте заглавных букв, чтобы текст был на одном уровне с верхним краем. Это может быть отрицательное поле для текста. Это заставит браузеры точно воспроизводить то, что поддерживают многие инструменты дизайна.

// something like any of these: 
align-caps-height: true;  
first-line-position: caps-height;
margin-top: caps-height;

html css firefox flash tlf
person 1.21 gigawatts    schedule 25.01.2016    source источник
comment
Разве это не ожидаемое поведение? Фактические глифы содержат пространство вокруг себя, поскольку они основаны на старых металлических / деревянных блоках. В противном случае текст выглядел бы довольно странно с нулевым интервалом между символами или строками ... нет?   -  person Paulie_D    schedule 25.01.2016
comment
В этом контексте это имеет смысл, но в средстве дизайна ограничивающая рамка определяет границу глифов. Не имеет смысла, что глифы были бы намного ниже его границ. Представьте, что вы использовали текстовый инструмент в Photoshop, и текст находился на расстоянии 14 пикселей от верха его границ. Вы могли подумать, что что-то сломалось   -  person 1.21 gigawatts    schedule 28.01.2016
comment
Но это не инструмент для создания изображений или дизайна ... это веб-страница ... и у глифов есть интервалы.   -  person Paulie_D    schedule 28.01.2016
comment
Я могу только предложить вам больше исследовать типографику. Интервал встроен не просто так.   -  person Paulie_D    schedule 28.01.2016

Ответы (1)


arrow_upward
2
arrow_downward

Расстояние между шрифтами здесь не проблема, потому что текст масштабируется равномерно. Проблема создается маржой в процентах. Поля в процентах рассчитываются как процент от ширины. Как и следовало ожидать, не будет никакой связи между процентной маржой и

Метод I

Что вы можете сделать, так это найти запас в пикселях для одного блока. Тогда пусть k = font_size/ margin для этого блока. Разделите font-size на k, чтобы получить запас по другим блокам.

Способ II

Вместо использования процентной маржи попробуйте использовать transform: translate;, используя значения em:

Соответствующий код

label { /* added properties*/
  transform: translateY(-0.2em);
}

Обновленный скрипт 1

Способ III

Я понял, хотя и немного поздно, что transform не требуется. Вы можете просто использовать margin-top: -0.2em;

Соответствующий код

label { /* added properties*/
  margin-top: -0.2em;
}

Обновленный скрипт 2

#BorderContainer1711  {
	position:absolute;
	left:32px;
	top:60px;
	width:500px;
	height:160px;
	background-color:#FFFFFF;
	background-alpha:1;
	border-width:1px;
	border-style:solid;
	border-color:#00DD00;
	color:#000000;
}

label { /* added properties*/
   margin-top: -0.2em;
}

#Label1551  {
	position:absolute;
	left:46px;
	top:60px;
	color:#000000;
	font-weight:normal;
	font-family:Arial;
	font-size:12px;
}

#Label1613  {
	position:absolute;
	left:123px;
	top:60px;
	width:61px;
	color:#000000;
	font-weight:normal;
	font-family:Arial;
	font-size:24px;
}

#Label937  {
	position:absolute;
	left:220px;
	top:60px;
	color:#000000;
	font-weight:normal;
	font-family:Arial;
	font-size:36px;
}

#Label2125  {
	position:absolute;
	left:342px;
	top:60px;
	color:#000000;
	font-weight:normal;
	font-family:Arial;
	font-size:64px;
}



*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}


*, *:before, *:after {
  outline:1px dotted red;
}
	<div id="BorderContainer1711">

	</div>
	<label id="Label1551">[12px]</label>
	<label id="Label1613">[24px]</label>
	<label id="Label937">[36px]</label>
	<label id="Label2125">[64px]<br>nextline</label>

person Max Payne    schedule 28.01.2016