Text color decoration: text-decoration-color — CSS: Cascading Style Sheets

text-decoration-color | CSS | WebReference

• Содержание
  • Краткая информация
  • Синтаксис
  • Значения
  • Песочница
  • Пример
  • Примечание
  • Спецификация
  • Браузеры

Устанавливает цвет линии, которая добавляется через свойство text-decoration.

Синтаксис

text-decoration-color: <цвет>

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

См. цвет.

Песочница

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

div {
  padding: 10px;
  text-decoration: underline;
  text-decoration-color: {{ playgroundValue }};
}

Пример

В данном примере ссылки подчёркиваются красной линией.

Объектная модель

Объект.style.textDecorationColor

Примечание

Firefox до версии 36 поддерживает свойство -moz-text-decoration-color.

Safari поддерживает свойство -webkit-text-decoration-color.

Спецификация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Текст и шрифт

См. также

• text-decoration
• text-decoration-line
• text-decoration-style

Рецепты

• Как сделать волнистое подчёркивание текста?
• Как сделать подчёркивание заголовка?

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 24.04.2020

Редакторы: Влад Мержевич

decoration | HTML и CSS с примерами кода

Сокращенное свойство text-decoration устанавливает внешний вид декоративных линий в тексте. Это сокращение для text-decoration-line, text-decoration-color, text-decoration-style и text-decoration-thickness.

• hanging-punctuation
• hyphens
• letter-spacing
• line-break
• overflow-wrap
• paint-order
• tab-size
• text-align
• text-align-last
• text-indent
• text-justify
• text-size-adjust
• text-transform
• white-space
• word-break
• word-spacing

• letter-spacing
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-style
• text-decoration-thickness
• text-decoration-skip
• text-decoration-skip-ink
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-indent
• text-rendering
• text-shadow
• text-underline-position
• text-transform
• white-space
• word-spacing

Синтаксис

text-decoration: none;
text-decoration: underline red;
text-decoration: underline wavy red;
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;

Определение

Поддержка браузерами

Примеры

Пример 1

Пример 2

CSS

. under {
  text-decoration: underline red;
}
.over {
  text-decoration: wavy overline lime;
}
.line {
  text-decoration: line-through;
}
.plain {
  text-decoration: none;
}
.underover {
  text-decoration: dashed underline overline;
}
.thick {
  text-decoration: solid underline purple 4px;
}
.blink {
  text-decoration: blink;
}

HTML

<p>This text has a line underneath it.</p>
<p>This text has a line over it.</p>
<p>This text has a line going through it.</p>
<p>
  This
  <a href="#">link will not be underlined</a>,
  as links generally are by default. Be careful when
  removing the text decoration on anchors since users often
  depend on the underline to denote hyperlinks.
</p>
<p>
  This text has lines above <em>and</em> below it.
</p>
<p>
  This text has a really thick purple underline in
  supporting browsers.
</p>
<p>
  This text might blink for you, depending on the browser
  you use.  
</p>

Результат

Пример 3

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>text-decoration</title>
    <style>
      a {
        /* Убираем подчеркивание у ссылок */
        text-decoration: none;
      }
      a:hover {
        /* Добавляем подчёркивание 
        при наведении курсора мыши на ссылку */
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <p>
      <a href="page/1.html">Стратегическое нападение</a>
    </p>
  </body>
</html>

См. также

• Элемент a — текст ссылки
• Элемент u — подчеркнутый текст
• Элемент s — зачеркнутый текст

Ссылки

• Свойство text-decoration ^{MDN (рус.)}
• CSS Text Decoration Module Level 4 ^{Спецификация (eng. )}
• CSS Text Decoration Level 3 ^{Спецификация (eng.)}
• CSS Level 2 (Revision 1) ^{Спецификация (eng.)}
• CSS Level 1 ^{Спецификация (eng.)}

decoration — Свойство text-decoration сокращенного CSS задает внешний вид декоративных линий

text-decoration стенографии CSS свойство определяет внешний вид декоративных линий на тексте. Это сокращение для text-decoration-line , text-decoration-color , text-decoration-style и нового свойства text-decoration-thickness .

Try it

Украшения текста прорисовываются через элементы текста потомка. Это означает, что если элемент определяет текстовое оформление, то дочерний элемент не может удалить оформление. Например, в разметке

Constituent properties

Это свойство является сокращением для следующих свойств CSS:

• text-decoration-color
• text-decoration-line
• text-decoration-style
• text-decoration-thickness

Syntax

text-decoration: underline;
text-decoration: overline red;
text-decoration: none;
/ * Глобальные значения * /
text-decoration: inherit;
text-decoration: initial;
text-decoration: revert;
text-decoration: revert-layer;
text-decoration: unset;

Свойство text-decoration указывается как одно или несколько значений, разделенных пробелами, представляющих различные свойства текстового оформления.

Values

text-decoration-line

Устанавливает используемый тип оформления, например, underline или line-through .

text-decoration-color

Устанавливает цвет декора.

text-decoration-style

Устанавливает стиль линии, используемой для оформления, например solid , wavy или dashed .

text-decoration-thickness

Устанавливает толщину линии,используемой для украшения.

Formal definition

Formal syntax

<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> || <'text-decoration-thickness'>

Examples

Демонстрация значений украшений текста

. under {
  text-decoration: underline red;
}
.over {
  text-decoration: wavy overline lime;
}
.line {
  text-decoration: line-through;
}
.plain {
  text-decoration: none;
}
.underover {
  text-decoration: dashed underline overline;
}
.thick {
  text-decoration: solid underline purple 4px;
}
.blink {
  text-decoration: blink;
}

<p>This text has a line underneath it.</p>
<p>This text has a line over it.</p>
<p>This text has a line going through it.</p>
<p>This <a href="#">link will not be underlined</a>,
    as links generally are by default. Be careful when removing
    the text decoration on anchors since users often depend on
    the underline to denote hyperlinks.</p>
<p>This text has lines above <em>and</em> below it.</p>
<p>This text has a really thick purple underline in supporting browsers.</p>
<p>This text might blink for you,
    depending on the browser you use.</p>

Specifications

Browser compatibility

See also

• Индивидуальные свойства text-decoration: text-decoration-line , text-decoration-color , text-decoration-style и text-decoration-thickness .
• text-decoration-skip-ink , text-underline-offset и text-underline-position свойства также влияют на текст-отделку, но они не включены в сокращенном.
• В list-style управления связывают появление элементов в HTML <ol> и <ul> списки.

Цвет оформления текста — попутный ветер CSS

e;
 

CSS | text-decoration-color Property - GeeksforGeeks

Модуль оформления текста CSS Уровень 3

1.

Этот подраздел не является нормативным.

Этот модуль охватывает оформление текста, т. е. украшение глифов. текста, набранного в соответствии со шрифтовыми и типографскими правилами. (См. [CSS-TEXT-3] и [CSS-FONTS-3].) Такие особенности традиционно используются не только в чисто декоративных целях, но также в некоторых случаях, чтобы показать ударение, для почтения, а также для указания редакционных изменений, таких как вставки, удаления и орфографические ошибки.

Уровни CSS 1 и 2 определяли только очень простые украшения линий (подчеркивание, надчеркивание и зачеркивание) соответствует западным типографским традициям. Уровень 3 этого модуля добавляет возможность изменять цвет, стиль, положение и непрерывность этих украшений, а также вводит знаки ударения (традиционно используемые в восточноазиатской типографике), и тени (которые были предложены, а затем перенесены с уровня 2).

1.1. Взаимодействия модулей

Этот модуль заменяет и расширяет возможности оформления текста. функции, определенные в [CSS2], глава 16.

1.2. Определения значений

Эта спецификация следует соглашениям об определении свойств CSS из [CSS2] с использованием синтаксиса определения значений из [CSS-VALUES-3]. Типы значений, не определенные в этой спецификации, определены в значениях и единицах CSS [CSS-VALUES-3]. Комбинация с другими модулями CSS может расширить определения этих типов значений.

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

1.3. Терминология

Термины «знак», «буква» и «язык содержимого», используемые в этой спецификации, определены в [CSS-TEXT-3]. Другие термины и понятия, используемые в данной спецификации, определяются в [CSS2] и [CSS-WRITING-MODES-4].

2. Оформление линий: подчеркивание, зачеркивание и зачеркивание

Следующие свойства описывают декорации строк, которые добавляются к содержимому элемента. При указании или распространении на встроенный блок эта коробка становится коробкой для украшения для этого украшения, нанесение украшения на все его фрагменты. Затем декорация распространяется на любые входящие блоки блочного уровня, разделяющие встроенный блок. (см. раздел 9.2.1.1 CSS2.1). При указании или распространении в блочном контейнере, который устанавливает встроенный контекст форматирования, украшения распространяются на анонимный встроенный блок, который обертывает все дочерние элементы встроенного уровня в потоке блочного контейнера. При указании или распространении на контейнер ruby, украшения распространяются только на рубиновую основу. Для всех других типов коробок украшения распространяются на всех дочерних элементов в потоке.

Обратите внимание, что украшения текста не распространяются ни на какие внепотоковые потомки, ни к содержимому атомарных потомков встроенного уровня, таких как встроенные блоки и встроенные таблицы. Они также не распространяются на встроенные дочерние элементы встроенных блоков, хотя украшение нанесено на такие коробки.

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

Обратите внимание, что CSS 2.1 требует всегда пропускать поля, границы и отступы. На этом уровне по умолчанию пропускаются только поля, границы и отступы декоративного блока. В будущем CSS2.1 может быть обновлен, чтобы соответствовать этому новому умолчанию. Кроме того, на уровне 4 ожидается контроль над оформлением начальных/конечных пробелов. и будет применяться по умолчанию к элементам HTML ins и del .

UA могут прерывать подчеркивание и надчеркивание там, где линия пересекает чернила глифов и на некотором расстоянии по обе стороны от контура глифа; это поведение не контролируется на этом уровне, но будет дополнительно определено на уровне 4. Однако сквозные линии должны оставаться непрерывными.

Пропуск чернил глифов

Когда UA прерывает подчеркивание или надчеркивание на границах глифа, форма линии на этой границе должна следуйте форме глифа.

Обратите внимание, что эта спецификация намеренно не предписывает конкретный метод. для «следования форме» глифа так что UA могут принять соответствующие меры для обработки эстетические и эксплуатационные характеристики. Например, UA может предполагать, что квадратные линии заканчиваются ниже определенного порога размера по соображениям производительности; или используйте трапециевидные окончания для аппроксимации кривых, особенно на украшениях с более тонкой линией. По эстетическим соображениям, ПА может также учитывать, что происходит, когда граница глифа пересекает только часть толщины линии или наклонена близко к горизонтали— точно следует кривой может привести к типографски неудобным обрывкам подчеркивания. Показывать ли линию в закрытых областях глифа еще не принято. другое соображение.

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

Относительное позиционирование потомка перемещает все оформления текста наносится на него вместе с текстом потомка; это не влияет вычисление начального положения украшения на этой линии. Свойство видимости, text-shadow, фильтры и другие графические преобразования аналогичным образом влияет на все украшения текста, примененные к этому блоку — , включая декорации, размноженные из ящика-предка — , и не влияют на расчет их начального положения или толщины. (В случае линейных украшений, нарисованных поверх атомарного встроенного или через поля/границы/отступы незаменяемого встроенного блока, они аналогично связаны с затронутым атомарным встроенным / незамещенным встроенным полем а не с декоративной коробкой.)

В следующей таблице стилей и фрагменте документа:

 blockquote { text-decoration: underline; цвет синий; }
em { дисплей: блок; }
процитировать { цвет: фуксия; }
 

 <цитата>
 

  <диапазон>
   Помогите помогите!
    Я под шапкой! 
    —ГвиФ 
  
 

 

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

Примечание. Декорации линий распространяются по дереву коробок, не по наследству, и, следовательно, не влияет на потомков при указании элемента с display:contents.

2.1. Линии оформления текста: свойство text-decoration-line

Указывает, какие линейные украшения, если таковые имеются, добавляются к элементу. Значения имеют следующие значения:

нет

Не производит и не запрещает оформление текста.

подчеркивание

Каждая строка текста подчеркнута.

сверху

Каждая строка текста имеет строку над ней (т.е. на противоположной сторону от подчеркивания).

проходной

Каждая строка текста имеет черту посередине.

мигает

Текст мигает (поочередно видимый и невидимый). Соответствующие пользовательские агенты могут просто не мигать текстом. Обратите внимание, что не мигание текста является одним из методов выполнения контрольной точки 3.3 WAI-UAAG. Это значение равно устарел в пользу анимации [CSS-ANIMATIONS-1].

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

2.2. Стиль оформления текста: свойство text-decoration-style

Это свойство определяет стиль линий, рисуемых для текстовое оформление, указанное на элементе. Ценности имеют то же значение, что и для стиля границы свойства [CSS-BACKGROUNDS-3]. волнистый указывает на волнистую линию.

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

2.3. Цвет оформления текста: свойство text-decoration-color

Это свойство указывает цвет оформления текста (подчеркивание overlines и line-throughs), заданные для элемента с text-decoration-line.

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

2.4. Text Decoration Shorthand: свойство text-decoration

Это свойство является сокращением для установки text-decoration-line, text-decoration-color, и text-decoration-style в одном объявлении. Пропущенные значения устанавливаются в их начальные значения.

Примечание. Объявление оформления текста, в котором отсутствует оба значения text-decoration-color и text-decoration-style обратно совместим с CSS уровней 1 и 2.

В следующем примере непосещенные ссылки подчеркнуты сплошным синим цветом. подчеркивание в UA CSS1 и CSS2 и подчеркивание темно-синей точкой в ​​UA CSS3.

 :ссылка {
  цвет синий;
  оформление текста: подчеркивание;
  оформление текста: подчеркивание темно-синим пунктиром; /* Игнорируется в UA CSS1/CSS2 */
}
 

Примечание. В сокращении намеренно опущено свойство text-underline-position, который является параметром, зависящим от языка/системы письма, который отключает содержимое, так что он может каскадировать и наследовать независимо из (не унаследованных) стилистических настроек стенографии оформления текста.

2.5. Text Underline Position: свойство text-underline-position

Это свойство задает позицию подчеркивания, указанную в элементе. (Это не влияет на подчеркивание, указанное элементами-предками.) Если указано только левое или правое, автоматически также подразумевается.

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

 :root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; }
:root:lang(zh), [lang|=zh] { text-underline-position: under left; }
 

Значения имеют следующие значения:

авто

Пользовательский агент может использовать любой алгоритм для определения подчеркните позицию; однако он должен быть размещен на или под алфавитная основа.

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

Типичное «алфавитное» подчеркивание располагается сразу под буквенной базовой линией

под

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

text-underline-position: под

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

: корень { положение подчеркивания текста: под; } 

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

слева

В режимах вертикальной типографики подчеркивание выравнивается так же, как подчеркивание, за исключением того, что оно всегда выравнивается по левому краю текста. Если это приводит к тому, что подчеркивание будет нарисовано на стороне «над» текст, затем надчеркивание также меняет стороны и рисуется на "нижняя" сторона.

справа

В режимах вертикальной типографики подчеркивание выравнивается так же, как подчеркивание, за исключением того, что оно всегда выравнивается по правому краю текста. Если это приводит к тому, что подчеркивание будет нарисовано на стороне «над» текст, затем надчеркивание также меняет стороны и рисуется на "нижняя" сторона.

В режимах вертикальной типографики значения text-underline-position left и right позволяют размещать подчеркивание на любом сторону текста. (В горизонтальных типографских режимах оба значения рассматривается как авто.)

Точное положение и толщина линий декораций на этом уровне определяются UA. Однако для подчеркивания и надчеркивания UA должен использовать единую толщину и позицию на каждой линии для украшений, происходящих из одной коробки для украшения.

против

Правильное и неправильное отображение ABCD

Обратите внимание, что оформление строк может охватывать элементы с разными размерами шрифта и вертикальное выравнивание, лучшая позиция для оформления строки не обязательно идеальное положение, продиктованное декоративной коробкой. Например, надчеркивание расположено на мелком шрифте. фактически станет сквозным, если элемент содержит текст со значительно большим размером шрифта. Даже для подчеркивания, если текст не выровнен по алфавиту (например, в стилях вертикального набора, текст по умолчанию выравнивается по центральной базовой линии [CSS-WRITING-MODES-4]) подчеркивание будет прорезать дочерний текст с большим размером шрифта. Таким образом, учет контента потомков UA приведет к лучшей типографике.

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

UA должны корректировать позиции строк чтобы соответствовать смещенным метрикам декорирования коробок, смещенным со значениями вертикального выравнивания, отличными от базового [CSS2], или с нижними/надстрочными индексами через вариантное положение шрифта [CSS-FONTS-3], но не должен регулировать положение или толщину линии в ответ потомкам украшающей коробки, которые так стилизованы. Это позволяет правильно оформить верхние и нижние индексы. (подчеркнуто, зачеркнуто и т. д.) но не позволяет им искажать или нарушать расположение таких украшений на их предках.

Пример подчеркивания, примененного к тексту с надстрочным индексом по сравнению с подчеркиванием, примененному к тексту, содержащему верхний индекс

Некоторые форматы шрифтов (например, OpenType) могут предоставлять информацию о соответствующем положении украшения линии. UA должен использовать такую ​​информацию (например, толщина подчеркивания, или соответствующую позицию подчеркивания в алфавитном порядке) от шрифта везде, где это уместно.

Примечание. Как правило, метрики шрифта OpenType указывают позицию буквенное подчеркивание; в некоторых случаях (особенно в шрифтах CJK), это дает позицию под левым подчеркиванием. (В этом случае показатели подчеркивания шрифта обычно коснитесь нижнего края поля em). UA может, но не обязан исправлять неправильные метрики шрифта.

3. Знаки выделения

Документы Восточной Азии традиционно используют маленькие символы рядом с каждым глифом, чтобы подчеркнуть пробег текста. Например:

Акцент (показан синим цветом для ясности) применен к тексту на японском языке

Сокращение text-emphasis-style и text-emphasis-style и text-emphasis-color, можно использовать для применения таких меток к тексту. Свойство text-emphasis-position, которое наследуется отдельно, позволяет задать положение знаков ударения по отношению к тексту.

3.1. Стиль метки выделения: свойство text-emphasis-style

Это свойство применяет метки выделения к тексту элемента. Значения имеют следующие значения:

нет

Без акцентов.

наполненный

Форма заполнена сплошным цветом.

открытый

Форма полая.

точка

Отображение маленьких кружков в качестве меток. Закрашенная точка — это U+2022 '•', а открытая точка — это U+25E6 '◦'.

круг

Отображение больших кругов в качестве меток. Закрашенный кружок — U+25CF '●', а незакрашенный кружок — U+25CB '○'.

двойной круг

Отображение двойных кругов в качестве меток. Закрашенный двойной кружок — это U+25C9 '◉', а открытый двойной кружок — это U+25CE '◎'.

треугольник

Отображение треугольников в виде меток. Закрашенный треугольник — U+25B2 '▲', а незакрашенный треугольник — U+25B3 '△'.

кунжут

Отображение кунжута в виде меток. Заполненный кунжут — U+FE45 '﹅', а открытый кунжут — U+FE46 '﹆'.

<строка>

Отобразить заданную строку в виде меток. Авторы не должны указывать более одного символа в . АП может обрезать или игнорировать строки, состоящие из более чем одного кластера графем.

Если ключевое слово формы указано, но ни заполнено, ни открыто указано, считается заполненным. Если указано только заполнено или открыто, ключевое слово shape вычисляет круг в горизонтальных типографских режимах и сезам в вертикальных типографских режимах.

Метки должны быть нарисованы с использованием настроек шрифта элемента с добавлением рубиновой функции и размер уменьшен на 50%. Однако, поскольку не все шрифты имеют все эти глифы, и некоторые шрифты используют неподходящие размеры для выделения в этих кодовых точках, UA может решить использовать шрифт, известный как подходящий для выделения, или вместо этого метки могут быть синтезированы UA. Знаки должны оставаться вертикальными в режимах вертикальной типографики: как и символы CJK, они не поворачиваются в соответствии с режимом письма. Ориентация знаков в горизонтальных типографских способах вертикального письма на этом уровне не определена. (но может быть определено на будущем уровне, если возникнут окончательные варианты использования).

Примечание. Одним из примеров хороших шрифтов для выделений является шрифт Adobe Kenten Generic OpenType с открытым исходным кодом, который специально разработан для знаков акцента.

Метки рисуются один раз для каждой единицы типографского символа. Тем не менее, акценты , а не нарисованы для:

Примечание: контроль над тем, какие символы помечаются, будет добавлен на уровне 4. (Список знаков препинания также может быть уточнен, особенно для пунктуации, отличной от CJK.)

3.2. Emphasis Mark Color: свойство text-emphasis-color

Это свойство определяет цвет переднего плана меток выделения.

Примечание: ключевое слово currentcolor вычисляет само себя и преобразуется в значение цвета после выполнения наследования. Это означает, что text-emphasis-color по умолчанию соответствует цвету текста, даже если цвет меняется между элементами.

3.3. Emphasis Mark Shorthand: свойство выделения текста

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

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

3.4. Emphasis Mark Position: свойство text-emphasis-position

Это свойство описывает, где рисуются метки акцента. Если [правильно | левый ] опущен, по умолчанию он правый. Значения имеют следующие значения:

свыше

Рисовать метки поверх текста в горизонтальных типографских режимах.

под

Рисовать метки под текстом в горизонтальных типографских режимах.

справа

Рисовать метки справа от текста в режимах вертикальной типографики.

слева

Рисовать метки слева от текста в режимах вертикальной типографики.

Знаки выделения рисуются точно так, как если бы каждый символ был присвоил метке текст рубиновой аннотации с рубиновой позицией задается text-emphasis-position и рубиновым выравниванием по центру. Обратите внимание, что это положение может быть скорректировано, если оно будет противоречить с подчеркиванием или надчеркиванием украшений.

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

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

Если к символам применяются метки ударения для которого рубин нарисован в том же положении, что и знак ударения, ударения ставятся вне рубина. Сюда входят автоматически скрытые и пустые рубиновые аннотации.

Знаки ударения применены к 4 символам, рубин также нанесен на 2 из них

Некоторые редакторы предпочитают скрывать знаки выделения, когда они конфликтуют с ruby. В HTML это можно сделать с помощью следующего правила стиля:

 ruby ​​{выделение текста: нет; } 

Некоторые другие редакторы предпочитают скрывать ruby, когда они конфликтуют со знаками выделения. В HTML это можно сделать с помощью следующего шаблона:

 em { text-emphasis: dot; } /* Установить выделение текста для элементов  */
em rt { дисплей: нет; } /* Скрыть ruby ​​внутри элементов  */
 

4. Text Shadows: свойство text-shadow

Это свойство принимает список эффектов тени, разделенных запятыми. применяется к тексту элемента. Значения интерпретируются как box-shadow [CSS-BACKGROUNDS-3]. (Но обратите внимание, что значения распространения и ключевое слово inset не допускаются. ) Каждый слой затеняет текст элемента и все его текстовые украшения. (составлены вместе).

Эффекты тени применяются спереди назад: первая тень сверху. Таким образом, тени могут накладываться друг на друга, но они никогда не накладываются на сам текст. Тень должна быть нарисована на уровне стека между границей элемента и/или фоном (если есть) и элементы текста и оформления текста. Пользовательские пользователи должны избегать отрисовки текстовых теней поверх текста. в соседних элементах, принадлежащих к тому же уровню стека и контексту стека. (Это может означать, что точный уровень стека теней зависит от того, имеет ли элемент границу или фон: таким образом, точное поведение текстовых теней в стеке определяется UA.) Не определено, затеняет ли данный теневой слой каждый глиф или украшение отдельно или если текст и/или украшения сглажены, а затем затенены.

В отличие от box-shadow тени текста не обрезаются по затененной форме и может просвечиваться, если текст частично прозрачен. Как и box-shadow, текстовые тени не влияют на макет. и не запускать прокрутку или увеличьте размер прокручиваемой области переполнения.

Примечание. Определенный здесь порядок рисования теней противоположен того, что определено в Рекомендации CSS2 1998 года.

Свойство text-shadow применяется как к ::first-line и ::first-letter псевдоэлементы.

5. Рисование текстовых украшений

5.1. Картина Орден текстовых украшений

Как и в [CSS2], украшения текста рисуются непосредственно над/под украшаемым текстом, в следующем порядке (сначала снизу):

• тени (текст-тень)
• подчеркивания (украшение текста)
• надстрочные (текстовые украшения)
• текст
• знаки выделения (выделение текста)
• сквозной (текст-оформление)

Если линейные украшения нарисованы поперек боксов или атомарных встроенных линий, они рисуются над непозиционированным содержимым и чуть ниже любых позиционированных потомков (непосредственно под слоем № 8 в Приложении E CSS2. 1).

5.2. Переполнение текстовых украшений

Оформление текста, выходящее за пределы рамки, считается переполнением чернил: они не расширяют прокручиваемую область переполнения. [CSS-переполнение-3]

Приложение A: Благодарности

г.

Эта спецификация была бы невозможна без помощи: Айман Алдалех, Берт Бос, Тантек Челик, Стивен Дич, Джон Даггетт, Мартин Дюрст, Лори Анна Эдлунд, Бен Эррез, Янив Файнберг, Арье Гиттельман, Ян Хиксон, Мартин Хейдра, Ричард Исида, Масаясу Исикава, Майкл Йохимсен, Эрик ЛеВайн, Эмброуз Ли, Хокон Виум Ли, Крис Лилли, Кен Лунде, Нат МакКалли, Шинью Мураками, Пол Нельсон, Крис Пратли, Марчин Савицки, Арнольд Шрайвер, Рахул Соннад, Мишель Суиньяр, Такао Сузуки, Фрэнк Танг, Крис Трэшер, Этан Векслер, Крис Уилсон, Масафуми Ябэ и Стив Зиллес.

Приложение B: Таблица стилей UA по умолчанию

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

 /* типичный стиль HTML */
мигать {
  строка оформления текста: мерцание;
}
с, забастовка, дель {
  оформление текста: сквозное;
}
u, ins, :ссылка, :посетили {
  оформление текста: подчеркивание;
}
аббр [название], акроним [название] {
  оформление текста: подчеркивание пунктиром;
}
/* отключить наследование меток выделения текста на ruby-текст:
  знаки ударения должны применяться только к основному тексту */
rt {выделение текста: нет; }
/* установить соответствующую языку позицию метки акцента по умолчанию */
:root:lang(zh), [lang|=zh] { text-emphasis-position: under right; }
[lang|=ja], [lang|=ko] { text-emphasis-position: over right; }
/* установить соответствующую языку позицию подчеркивания по умолчанию */
:root:яз(я), [яз|=я],
:root:яз(мн), [язык|=мн],
:root:lang(ko), [lang|=ko] { text-underline-position: right; }
:root:lang(zh), [lang|=zh] { text-underline-position: left; }
/* auto выбрано (подразумевается) выше, а не ниже
   из-за проблем с совместимостью контента */
 

Если вы обнаружите какие-либо проблемы, рекомендации по добавлению или исправления, пожалуйста, отправьте информацию на www-style@w3. org с [css-text-decor] в строке темы.

В то время как text-decoration-line: blink не может быть полностью воспроизведен с другими существующими свойствами, авторы могут добиться очень похожего эффекта с помощью следующего CSS:

 @ключевые кадры мигают {
  0% {
    видимость: скрытая;
    функция синхронизации анимации: шаг-конец;
  }
  25%, 100% {
    видимость: видимая;
  }
}
мигать {
  анимация: мигание 1с бесконечно;
}
 

Приложение C: Изменения

Изменения по сравнению с рекомендацией-кандидатом

от августа 2019 г.

Изменения включают:

• Уточнить, что text-shadow анимируется как список теней, как box-shadow. (выпуск 4375)
• Четко укажите свойства, применимые к тексту. (выпуск 5303)
• Мелкие редакционные исправления.

Изменения по сравнению с Рекомендацией-кандидатом от июля 2018 г.

Изменения включают:

• : Уточнено, что переполнение оформления текста является переполнением чернил. (выпуск 3272)
• Исправлены несоответствия в примерах правил положения подчеркивания текста. (Выпуск 3441)
• Очищены строки «Вычисленное значение» в соответствии с новыми соглашениями.

Доступно расположение комментариев.

Изменения по сравнению с рекомендацией-кандидатом

от августа 2013 г.

Значительные изменения включают:

• Отложенное оформление текста — переход на уровень 4 для внесения серьезных изменений. Определенные поведенческие по умолчанию в прозе. (Выпуск 1, Выпуск 22, Выпуск 26)
• Указано, что функция пропуска чернил не влияет на линейные проходы. (Выпуск 24)
• Рекомендуется, чтобы при пропуске рукописного ввода концы строк соответствовали форме глифа. (Выпуск 30)
• Обновлены условия, чувствительные к режиму письма, чтобы они зависели от типографского режима, для учета добавления значений sideways-lr и sideways-rl к свойству режима письма. Отмеченная ориентация меток упора под sideways-lr и sideways-rl не определена. (Выпуск 10, Выпуск 20)
• Сделано [право | left ] опция text-emphasis-position необязательна, по умолчанию вправо. (выпуск 17)
• Позиция подчеркивания текста теперь подразумевает авто, а не под, когда указано только лево или право. (Выпуск 18)
• Изменено оформление текста, чтобы пропустить начальные и конечные пробелы. (выпуск 6)
• Отмечено, что положение рубиновых аннотаций может быть скорректировано чтобы избежать конфликтов с оформлением текста. (Выпуск 21)
• Изменено начальное значение text-shadow на текущий цвет . (Выпуск 28)
• Исправлена ​​ошибка в строке «Вычисляемое значение» для text-shadow. (Выпуск 7)
• Исправлен канонический порядок значений text-shadow для соответствия реализациям. (выпуск 35)
• Определено расположение меток акцента относительно автоматически скрытых и пустых рубиновых аннотаций. (Выпуск 9)

  Если к символам применяются знаки ударения для которого рубин нарисован в том же положении, что и знак ударения, ударения ставятся вне рубина. Сюда входят автоматически скрытые и пустые рубиновые аннотации.

• Выделение текста по умолчанию пропускает пунктуацию. (Выпуск 16)
• Добавлено правило для применения рубина к шрифту выделений. (Выпуск 13)
• Различные исправления и улучшения правил UA по умолчанию для text-emphasis-position и text-underline-position. (Выпуск 11, Выпуск 12, Выпуск 18, Выпуск 19, Выпуск 36)

Требования соответствия выражаются комбинацией описательные утверждения и терминология RFC 2119. Ключевые слова «ОБЯЗАТЕЛЬНО», «НЕ ДОЛЖЕН», «ТРЕБУЕТСЯ», «ДОЛЖЕН», «НЕ ДОЛЖЕН», «ДОЛЖЕН», «НЕ ДОЛЖЕН», «РЕКОМЕНДУЕТСЯ», «МОЖЕТ» и «ДОПОЛНИТЕЛЬНО» в нормативных частях настоящего документ следует интерпретировать, как описано в RFC 2119.. Однако для удобства чтения эти слова не отображаются в верхнем регистре. буквы в этой спецификации.

Весь текст данной спецификации является нормативным, за исключением разделов явно помечены как ненормативные, примеры и примечания. [RFC2119]

Примеры в этой спецификации вводятся словами «например». или отделены от нормативного текста с помощью class="example" , следующим образом:

Информационные примечания начинаются со слова «Примечание» и отделяются от нормативный текст с class="note" , например:

Рекомендации — это нормативные разделы, оформленные так, чтобы привлечь особое внимание и отделить от другого нормативного текста с помощью , например это: UA ДОЛЖНЫ предоставлять доступную альтернативу.

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

Средство визуализации соответствует этой спецификации. если, в дополнение к интерпретации таблицы стилей, как определено соответствующие спецификации, он поддерживает все функции, определенные по этой спецификации, правильно разбирая их и рендеринга документа соответственно. Однако неспособность А. UA для правильного отображения документа из-за ограничений устройства не делает UA несовместимым. (Например, UA не требуется для цветопередачи на монохромном мониторе.)

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

Чтобы авторы могли использовать правила синтаксического анализа с прямой совместимостью для назначать резервные значения, средства визуализации CSS должны считать недействительными (и игнорировать при необходимости) любые at-правила, свойства, значения свойств, ключевые слова, и другие синтаксические конструкции, для которых они не имеют применимого уровня поддерживать. В частности, пользовательские агенты нельзя выборочно игнорировать неподдерживаемые значения компонентов и учитывать поддерживаемые значения в одном объявление многозначного свойства: если какое-либо значение считается недействительным (так как должны быть неподдерживаемые значения), CSS требует, чтобы все объявление быть проигнорировано.

Чтобы избежать конфликтов с будущими стабильными функциями CSS, CSSWG рекомендует следовать рекомендациям по реализации нестабильных функций и проприетарных расширений CSS.

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

Для установления и поддержания функциональной совместимости CSS в реализации, Рабочая группа CSS просит, чтобы неэкспериментальные Визуализаторы CSS представляют отчет о внедрении (и, при необходимости, тестовых наборов, использованных для этого отчета о реализации) в W3C до выпуск реализации без префикса любых функций CSS. Тестовые случаи отправленные в W3C, подлежат рассмотрению и исправлению со стороны CSS Рабочая группа.

Дополнительная информация о представлении тестовых примеров и отчетов о внедрении можно найти на веб-сайте Рабочей группы CSS по адресу https://www. w3.org/Style/CSS/Test/. Вопросы следует направлять в список рассылки [email protected].

Чтобы эта спецификация была улучшена до предлагаемой рекомендации, должны быть как минимум две независимые, взаимодействующие реализации каждой функции. Каждая функция может быть реализована различным набором продукты, нет требования, чтобы все функции были реализованы единый продукт. Для целей этого критерия мы определяем следующие термины:

Имя	Значение	Начальный	Применяется к	Инга.	%возраст	Тип анимации	Канонический порядок	Расчетное значение
украшение текста	<'строка-украшения-текста'> || <'стиль оформления текста'> || <'text-decoration-color'>	см. отдельные свойства	см. отдельные свойства	см. отдельные свойства	см. отдельные свойства	см. отдельные свойства	на грамматику	см. отдельные свойства
цвет текста-декорации	<цвет>	текущий цвет	все элементы	нет	н/д	по типу вычисляемого значения	на грамматику	вычисляемый цвет
строка оформления текста	нет | [подчеркнуть || надчеркивание || линейный || мигать]	нет	все элементы	нет (но см. прозу выше)	н/д	дискретный	на грамматику	указанное ключевое слово (я)
стиль оформления текста	твердый | двойной | пунктирная | пунктир | волнистый	твердый	все элементы	нет	н/д	дискретный	на грамматику	указанное ключевое слово
выделение текста	<'стиль выделения текста'> || <'text-emphasis-color'>	см. отдельные свойства	см. отдельные свойства	см. отдельные свойства	см. отдельные свойства	см. отдельные свойства	на грамматику	см. отдельные свойства
цвет выделения текста	<цвет>	текущий цвет	текст	да	н/д	по типу вычисляемого значения	на грамматику	вычисляемый цвет
положение акцента текста	[ более | под ] && [ справа | оставил ]?	справа	текст	да	н/д	дискретный	на грамматику	указанное ключевое слово (я)
стиль выделения текста	нет | [[ заполнено | открыть ] || [ точка | круг | двойной круг | треугольник | кунжут ] ] | <строка>	нет	текст	да	н/д	дискретный	на грамматику	ключевое слово нет, пара ключевых слов, представляющих форму и заливку, или строка
тень текста	нет | [ <цвет>? && <длина>{2,3} ]#	нет	текст	да	н/д	как теневой список	на грамматику	либо ключевое слово none, либо список, каждый элемент которого состоит из трех абсолютных длин плюс вычисляемый цвет
подчеркивание текста	авто | [ под || [ слева | Правильно ] ]	авто	все элементы	да	н/д	дискретный	на грамматику	указанное ключевое слово (я)

Могу ли я написать по электронной почте… text-decoration-color

Могу ли я отправить по электронной почте… text-decoration-color

Gmail

Настольная веб-почта

2020-04

iOS

2020-04

3

Андроид

2020-04

3

Мобильная веб-почта

2020-04

Перспектива

Окна

2003

2007 г.

2

2010

2

2013

2

2016

2

2019

2

Почта Windows

2020-04

2

macOS

2011

1

2016

1

Outlook.com

2020-04

iOS

2020-04

Андроид

2020-04

Яху! Почта

Настольная веб-почта

2020-04

iOS

2020-04

Андроид

2020-04

АОЛ

Настольная веб-почта

2020-04

iOS

2020-04

Андроид

2020-04

Мозилла Тандерберд

ПротонПочта

Настольная веб-почта

2020-04

iOS

2020-04

Андроид

2020-04

Быстрая почта

Настольная веб-почта

2021-07

ПРИВЕТ

Настольная веб-почта

2020-06

Апельсин

Настольная веб-почта

2020-04

2021-03

iOS

2020-04

Андроид

2020-04

LaPoste.

net

Настольная веб-почта

2021-08

СФР

Настольная веб-почта

2020-04

iOS

2020-04

Андроид

2020-04

Mail.ru

Настольная веб-почта

2020-10

Текст · Bootstrap

• Выравнивание текста
• Обтекание текстом и переполнение
• Преобразование текста
• Толщина шрифта и курсив
• Моноширинный
• Сбросить цвет
• Оформление текста

Документация и примеры распространенных текстовых утилит для управления выравниванием, обтеканием, весом и т. д.

Выравнивание текста

Легко выравнивайте текст по компонентам с помощью классов выравнивания текста.

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

 
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
 

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

Выровненный по левому краю текст на всех размерах окна просмотра.

Выровненный по центру текст на всех размерах окна просмотра.

Выровненный по правому краю текст на всех размерах окна просмотра.

Выровненный по левому краю текст на окнах просмотра размером SM (маленький) или шире.

Выровненный по левому краю текст на окнах просмотра размером MD (средний) или шире.

Выровненный по левому краю текст на окнах просмотра размером LG (большой) или шире.

Выровненный по левому краю текст на видовых экранах размером XL (очень большой) или шире.

 
Текст с выравниванием по левому краю на всех размерах окна просмотра.
Выравнивание текста по центру на всех размерах окна просмотра.
Текст с выравниванием по правому краю на всех размерах окна просмотра.
Текст, выровненный по левому краю, на окнах просмотра размером SM (маленький) или шире.
Текст с выравниванием по левому краю на окнах просмотра размером MD (средний) или шире.
Текст с выравниванием по левому краю на экранах просмотра размером LG (большой) или шире.
Выровненный по левому краю текст на окнах просмотра размером XL (очень большой) или шире.
 

Обтекание и переполнение текста

Оберните текст классом . text-wrap .

Этот текст должен переноситься.

 <дел>
  Этот текст должен обернуться.