Стоит ли подчеркивать столкновение с текстовыми потомками?

Модуль оформления текста CSS3 включает свойство text-underline-position , которое указывает, следует ли размещать подчеркивание ниже всего текста:

или чуть ниже базовой линии, позволяя ей конфликтовать с текстовыми потомками:

Хорошо, мы все знаем, как подчеркивание следует использовать только в качестве последнего средства, но ... если вы собираетесь его использовать, какой самый распространенный способ сделать это? Каковы плюсы и минусы каждого стиля подчеркивания?

Что является наиболее распространенным?

Ну, некоторые типографы скажут, что подчеркивания, вероятно, следует избегать всего вместе , и что подчеркивание подходит только для пишущих машинок или гиперссылок в Интернете. Тем не менее, я хотел бы добавить, что творческий подход заключается в том, чтобы увидеть возможности творчески нарушать правила, поэтому насколько вы позволите этому руководству, зависит от вас.

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

На печатных машинках подчеркивание происходит на пересечении по потомкам, но немного по-другому: оно частично находится между вашими двумя примерами ( пример ). Если вы посмотрите на базовую линию спускового устройства, такую ​​как нижняя петля gили нижняя засечка p(шрифтом с засечками), именно здесь находится подчеркивание. Так что он «соединяется» с нижней частью потомков.

Плюсы и минусы

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

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

Если вы используете Интернет, подчеркивание тесно связано с гиперссылками. Поэтому следует избегать любого использования подчеркивания для текста, который не является частью ссылки. Укажите, что вы хотите обозначить другими способами - вместо этого используйте жирный шрифт , курсив или ВСЕ ЗАГЛАВНЫЕ.

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

Я очень предпочитаю базовое позиционирование с перерывом на спусках: то есть, text-decoration-skip: ink;однако, это в действительности не поддерживается в настоящее время. Я зашел так далеко, что у меня было два класса и добавили пролет к спусковым механизмам, чтобы удалить подчеркивание из них. (текст заменяется через php, поэтому не так много кода для создания).

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

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

Описаниеtext-decoration: underline в CSS 2.1 спецификации определяет его эффект как подчеркивание, без подробностей, но браузеры поддерживают его , как появляться только немного ниже базового уровня. Таким образом, это часто сокращает спуски (и диакритические знаки, помещенные ниже письма).

В текстовом проекте CSS3 есть text-underline-positionпозиция, но она не поддерживается ни одним браузером. (Согласно информации css666.com , она поддерживается IE, но, по крайней мере, в IE 9 поддержка ограничивается распознаванием свойства и принятием значения auto, начального значения - так что оно действительно не поддерживается.) Обновление : на самом деле IE (начиная с версии 6) имеет немного больше поддержки , но на самом деле позволяет просто разместить подчеркивание над текстом (!), А не под ним.

Как описано в ответе Скотта и комментарии Джунаса, вы можете использовать нижнюю границу для имитации подчеркивания, а затем у вас будет довольно хороший контроль над стилем «подчеркивание». Это может подойти, например, для подчеркнутых ссылок, которые стоят сами по себе, а не в строке. Для встроенного текста, где вы, возможно, захотите подчеркнуть, например, потому что вы печатаете HTML-текст, который содержит подчеркивание, нормальное подчеркивание CSS, вероятно, лучше - потому что такое подчеркивание более или менее соответствует традициям печати.