CSS - отображать текст при спуске вместо базовой линии? - PullRequest
8 голосов
/ 30 мая 2011

Есть ли правильный способ отображения текста на высоте спуска линии вместо ее базовой линии?

Пожалуйста, обратитесь к следующим страницам:

http://en.wikipedia.org/wiki/Baseline_(typography)

и

http://jsfiddle.net/YPPnU/

Цель состоит в том, чтобы нижняя часть моего текста (как показано на скрипке) выровнялась с нижней частью блока H1 без использования изображений.

Я понимаю, что если я использую нисходящие символы (p, q и т. Д.), То не будет смысла, но я никогда не буду использовать их для целей этого проекта. Мне нужно, чтобы символы без спусков были вровень с нижней частью блока h1.

Я пробовал различные корректировки с позиционированием и отрицательными полями, но это создает две проблемы 1) высота h1 испортилась. 2) величина отрицательного дна может варьироваться в зависимости от используемого шрифта. Есть ли «правильный» способ сделать это?

редактировать Пожалуйста, смотрите комментарии для дополнительных обновлений ....

Лучшая рабочая техника здесь: http://jsfiddle.net/YPPnU/23/

Но я бы предпочел не "угадывать" высоту строки

Кроме того, я понял, что другим вариантом будет использование веб-шрифта, в котором нижняя часть всех символов размещается при спуске вместо базовой линии, но я не могу найти его в Google. Кто-нибудь знает, существует ли такая вещь?

1 Ответ

7 голосов
/ 30 мая 2011

А как насчет vertical-align: bottom с line-height: 65%?

http://jsfiddle.net/y53uK/

...