Традиционный ведущий и CSS line-height - PullRequest
Новая
       23

Традиционный ведущий и CSS line-height

13 голосов
/ 01 декабря 2011

В спецификации CSS указано, что высоту строки следует применять к тексту, разделив указанное значение на два и применив результат выше и ниже строки текста.

Это значительно отличается от традиционного понимания ведения, которое обычно означает, что интервал «добавляется» только над строкой текста. (Я знаю, что это не на 100% правильно, потому что на самом деле высота строки не добавляет пробела, а задает высоту строки; однако, так проще описать проблему).

Рассмотрим пример разметки: 

<!DOCTYPE html>
<html>
    <head>

    <style type="text/css">
    p
        {
        margin:0;
        font-size: 13pt;
        line-height: 15pt;
        }
    h1
        {
        margin:0;
        font-size: 21pt;
        line-height: 30pt;
        }
    </style>

    </head>
    <body>

    <h1>Title</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
    <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    <p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
    </body>
</html>

Если бы высота строки была равна традиционному пониманию ведущего, то расстояние между <h1> и первым <p> будет равно расстоянию между <p>, потому что это расстояние определяется ведущим. Однако, это не так.

Хотя расстояние между <p> с остается неизменным (p's line-height - p's font-size = 15 - 13 = 2pt), расстояние между <h1> и первым <p> отличается: оно равно (p's line-height - p's font-size)/2 + (h1's line-height - h1's font-size)/2 = (15 - 13)/2 + (30-21)/2 = 5.5pt.

Это можно легко заметить невооруженным глазом, если указанная разметка обрабатывается браузером.

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

У меня есть 3 вопроса:

  1. Правильно ли я понимаю высоту линии, ведение и их различия?
  2. Есть ли способ поддерживать вертикальный ритм с помощью CSS (имитируя традиционное ведение с помощью CSS или нет)?
  3. (Бонусный вопрос) В чем причина того, что высота линии так сильно отличается от высоты?

ОБНОВЛЕНИЕ: Большое спасибо за ваш вклад! Обратите внимание, что я предложил свое собственное решение, и я был бы очень благодарен за любые комментарии к нему: https://stackoverflow.com/a/8335230/710356

Ответы [ 4 ]

5 голосов
/ 01 декабря 2011
  1. Да

  2. Да. Это не очень просто, но используя position:relative;, вы можете получить вещи, чтобы выстроить их правильно, например: 

     h2 {
   font-size: 36px;
   line-height: 48px;
   position: relative;
   top: 6px;
 }

    Вот незавершенное производство демо

  3. Люди, разработавшие CSS, не являются типографами. Это, вероятно, не было преднамеренным.

  4. Бонусный ответ: Вот доклад Джонатана Хофлера о проблемах с проектированием шрифтов для веба и ограничениях CSS.
1 голос
/ 01 декабря 2011

Хорошо, похоже, это работает лучше, чем мое другое решение.В нем все еще используются дополнительные <span> s внутри блочных элементов.Хитрость заключается в том, чтобы установить line-height для элемента блока на 1 и отрегулировать диапазон line-height, одновременно отменяя его с верхним и нижним margin с.Обратите внимание, что для этого необходимо установить значение inline-block.

Однако на самом деле установка полей (чтобы сделать разрыв на уровне строки между <h1> и <p>) становится довольно трудной и требует некоторой математики.Так что, я думаю, попытка использовать традиционный типографский подход к лидерству в CSS занимает слишком много времени, чтобы реально использоваться в работе разработчика.

В любом случае, вот окончательный код: 

<!DOCTYPE html>
<html>
    <head>

        <style type="text/css">

        span.p
            {
            display:inline-block;
            line-height: 32px;
            }

        span.h
            {
            display:inline-block;
            line-height: 64px;
            margin-top: -32px;
            margin-bottom: -32px;
            }

        p
            {
            margin:0;
            font-size: 26px;
            line-height: 1;
            }
        h1
            {
            margin:0;
            font-size: 42px; 
            line-height: 1;
            }
        </style>

    </head>
    <body>

    <h1><span class="h">Molloy</span></h1>
    <p><span class="p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</span></p>
    <p><span class="p">Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</span></p>
    <h1><span class="h">Lorem Ipsum is simply</span></h1>
    </body>
</html>
0 голосов
/ 04 сентября 2015

Я понимаю, что эта ветка старая, но у меня тоже была эта проблема. Если вы хотите использовать тот же типографский эффект, что и в текстовых редакторах документов, таких как Microsoft Word, то есть особый случай, связанный с высотой строки 1.

Вместо высоты строки: 1; положить высоту строки: нормальный ;. Другие значения высоты линии остаются такими же (1,5 остается на 1,5 и т. Д.).

0 голосов
/ 01 декабря 2011

Я добавляю свой собственный ответ, но я не помечаю его как «принятый», потому что я только что придумал этот метод и на самом деле не проверил его достаточно тщательно.Это также довольно грязно с точки зрения читабельности разметки.

Хитрость заключается в том, чтобы обернуть каждый элемент, к которому мы хотим применить наш заголовок, в тег <span> и установить <span>'s свойства CSS vertical-align либоmiddle или sub (они дают немного разные результаты, и я не уверен ни в том, почему и насколько они различаются) и от line-height до 0.Результат очень близок к тому, что нужно, поэтому расстояние между <h1> и <p> в приведенном выше примере становится почти правильным (не совсем, по-видимому), то есть равным <p> 'line-height.Я не очень хорошо разбираюсь с CSS, поэтому я не уверен, как это может повлиять на общий макет, приемлемо ли использование таких хаков и будет ли это кросс-браузер-дружественным.Буду благодарен, если вы прокомментируете мое решение.

Пример разметки: 

<!DOCTYPE html>
<html>
    <head>

        <style type="text/css">

        span.lh
            {
            vertical-align: sub;
            line-height:0
            }
        p
            {
            margin:0;
            font-size: 26px;
            line-height: 30px;
            }
        h1
            {
            margin:0;
            font-size: 42px; 
            line-height: 60px;
            }
        </style>

    </head>
    <body>

    <h1><span class="lh">Title</span></h1>
    <p><span class="lh">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</span></p>
    <p><span class="lh">Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</span></p>
    <h1><span class="lh">Lorem Ipsum is simply</span></h1>
    </body>
</html>
...