Подтвердить что ты не робот

Традиционная лидирующая линия и высота линии CSS

Спецификация 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 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> и first <p> было бы равно расстоянию между <p> 's, так как это расстояние определяется ведущим. Однако, это не так.

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

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

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

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

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

ОБНОВЛЕНИЕ: благодарю вас за ваш вклад! Обратите внимание, что я предложил свое собственное решение, и я был бы очень благодарен за любые комментарии по нему: qaru.site/info/434894/...

4b9b3361

ОТВЕТЫ

Ответ 1

Хорошо, похоже, это работает лучше, чем мое другое решение. Он по-прежнему использует дополнительные элементы <span> внутри блока. Хитрость состоит в том, чтобы установить элемент блока line-height на 1 и отрегулировать диапазон line-height, а также отменить его сверху и снизу margin s. Обратите внимание, что для этого требуется, чтобы дисплей был установлен на 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 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>

Ответ 2

  • Да

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

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

    Вот проделанная работа демонстрация

  • Люди, которые разработали CSS, не являются типографами. Возможно, это было не намеренно.

  • Бонусный ответ: Вот рассказ Джонатана Хёфлера о проблемах с дизайном для Интернета и ограничениями CSS.

Ответ 3

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

Трюк состоит в том, чтобы обернуть каждый элемент, к которому мы хотим применить наш заголовок в теге <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 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>

Ответ 4

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

Вместо строки-высоты: 1; put line-height: normal;. Другие значения высоты строки остаются неизменными (1.5 остается равным 1,5 и т.д.).