Css толщина текста: font-size — размер текста | CSS справочник

font-size — размер текста | CSS справочник

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

Описание

CSS свойство font-size позволяет увеличивать или уменьшать размер текста. Установка размера текста, в свою очередь, может изменить размеры других элементов, так как размер текста используется для вычисления значения таких единиц измерения как em и ex.

Примечание: для изменения цвета текста используется CSS свойство color, для изменения стиля — font-style, для выравнивания — text-align, а для добавления тени — text-shadow.

Синтаксис

font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|inherit;

Значения свойства

Пример

Попробуйте изменить размер текста, кликнув на нужное значение.

div {
font-size: xx-small;
}

Свойство font-weight | CSS справочник

• HTML
  • Учебник HTML
  • Справочник тегов
  • Атрибуты событий
  • Глобальные атрибуты
  • Коды языков
  • Мнемоники
  • Цвета
  • Тесты знаний
• CSS
  • Учебник CSS
  • Справочник свойств
  • Селекторы
  • Функции
  • Правила
  • Flexbox генератор
  • Grid генератор
  • Учебник LESS
• JavaScript
  • Интерфейсы веб API
  • Объект Array
  • Объект Date
  • Объект Function
  • Объект Global
  • Объект JSON
  • Объект Math
  • Объект Number
  • Объект Object
  • Объект RegExp
  • Объект Promise
  • Объект String
• jQuery
  • Селекторы
  • События
  • Методы DOM
  • Перемещения
  • Утилиты
  • Эффекты
  • AJAX
  • Объект Callbacks
  • Объект Deferred

HTML

• HTML учебник
• Справочник тегов
• Атрибуты событий
• Глобальные атрибуты
• Мнемоники
• Коды языков
• HTML цвета
• Тесты знаний

CSS

Свойство font-size | CSS

Свойство font-size позволяет указывать размер текста CSS. Оно влияет не только на шрифт, к которому применяется, но и используется для вычисления единиц измерения em, rem и ex.

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

Значения длины (px, em, rem, ex и т. д.), используемые в свойстве font-size, не могут быть отрицательными.

.element {
  font-size: small;
}
}

Свойство, которое устанавливает в CSS размер текста, принимает следующие ключевые слова:

• xx-small;
• x-small;
• small;
• medium;
• large;
• x-large;
• xx-large.

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

Среди других абсолютных значений можно выделить mm (миллиметры), cm (сантиметры), in (дюймы), pt (пункты) и pc (пики). Один pt равен 1/72 дюйма, или одна пика равна 12 пунктам. Обычно эти единицы используются в печатных документах.

.element {
  font-size: larger;
}

Например, если свойство font-size у родительского элемента имеет значение small, то у дочернего элемента с относительным значением larger размер текста HTML CSS будет больше.

.element {
  font-size: 110%;
}

Процентные значения, как font-size со значением 110%, также являются относительными, и зависят от размера шрифта, указанного в родительском элементе. Предлагаем вам взглянуть на демо.

.element {
  font-size: 2em;
}

Единица измерения em является относительной, и вычисляется в зависимости от CSS размера текста в родительском элементе. Это означает, что дочерние элементы всегда зависят от родительских. Например:

<div>
  <h3>Заголовок</h3>
  <p>Какой-нибудь текст</p>
</div>

.container {
  font-size: 16px;
}

p {
  font-size: 1em;
}

h3 {
  font-size: 2em;
}

В приведенном выше примере у абзаца будет установлено значение font-size 16px, так как 1 x 16 = 16px, а в качестве размера текста HTML CSS заголовка будет использоваться 32px, так как 2 x 16 = 32px. Есть некоторое преимущество в том, чтобы указывать размер, ориентируясь на родительский элемент. Так мы можем оборачивать элементы в контейнеры и быть уверенными в том, что все дочерние элементы всегда будут относительны друг другу:

Посмотреть демо

Что касается единиц измерения rem, то здесь font-size всегда зависит от значения корневого элемента (или элемента html).

html {
  font-size: 16px;
}

p {
  font-size: 1.5rem;
}

В приведенном выше примере rem равен 16px (так как это значение наследуется у html-элемента) и, следовательно, размер текста CSS для всех элементов paragraph будет составлять 24px (1.5 x 16 = 24). В отличие от em-единиц параграф будет игнорировать стилизацию всех родительских элементов, кроме корневого.

Эта единица измерения поддерживается следующими браузерами:

.element {
  font-size: 20ex;
}

1ex равен высоте строчной буквы x в используемом шрифте. В примере, приведенном ниже, html-элемент установлен на 20px, а все остальные размеры определяются высотой x определенного шрифта.

Посмотреть демо

Поэкспериментируйте с приведенным выше демо, заменяя семейства шрифтов в html-элементе и таким образом изменяя размер текста CSS.

.element-one {
  font-size: 100vh;
}

.element-two {
  font-size: 100vw;
}
.

Viewport-единицы, такие как vw и vh, позволяют устанавливать размер шрифта относительно длины или ширины окна просмотра:

• 1vw = 1% от ширины окна просмотра;
• 1vh = 1% от высоты окна просмотра.

То есть, если мы посмотрим на следующий пример:

.element {
  font-size: 100vh;
}
}

то увидим, что размер текста CSS всегда должен находиться на отметке в 100% ширины окна просмотра (50vh будет означать 50%, 15vh — 15% и так далее). В приведенном ниже демо попробуйте изменить высоту, и посмотрите, как растягивается шрифт:

Посмотреть демо

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

Посмотреть демо

Эти единицы измерения поддерживаются следующими браузерами:

В нашем распоряжении имеются еще две единицы измерения, основанные на размере окна просмотра. Первая позволяет вычислять значения vh и vw, и устанавливать свойству font-size минимальное значение, а vmax позволяет определить и установить, наоборот, максимальное значение.

Единица измерения ch чем-то похожа на ex, и позволяет устанавливать размер текста CSS относительно нулевой ширины глифа:

Посмотреть демо

Эта единица измерения поддерживается следующими браузерами:

Данная публикация представляет собой перевод статьи «Font-size» , подготовленной дружной командой проекта Интернет-технологии.ру

Форматирование текста (font-weight, font-style, font-size, text-indent)

Жирность текста (font-weight)

• normal — нормальная жирность шрифта (то есть нет жирного)
• bold — текст будет выделен жирным
• bolder — текст будет жирнее, чем жирность текста у родительского элемента
• lighter — текст будет менее жирным, чем текст у родительского элемента

Тише, <span>мыши</span>, кот на крыше.

Тише, мыши, кот на крыше.

Далеко не у всех шрифтов есть весь набор градаций жирного. Обычно используются только два: bold и normal варианты. Поэтому в таких ситуациях какую цифру ни ставь, все равно получишь только 2 варианта жирности. Но через CSS можно подключить шрифты (указать адреса файлов), в которых будет все остальные градации жирности.

Курсив (font-style)

Тише, <span>мыши</span>, кот на крыше.

Тише, мыши, кот на крыше.

Размер шрифта (font-size)

• px — пикселы,
• % — проценты (от размера шрифта родительского элемента)
• em — высота шрифта элемента (единица — это сто процентов от размера шрифта родительского элемента),
• pt — пункты (по сути пиксели, но в пропорции 12pt = 16px)
• текстовые названия размеров: xx-small, x-small, smal, medium, large, x-large, xx-large
• ex — высота символа х (единица — это сто процентов),

Тише, <span>мыши</span>, кот на крыше.
Тише, <span>мыши</span>, кот на крыше.
Тише, <span>мыши</span>, кот на крыше.
Тише, <span>мыши</span>, кот на крыше.
Тише, <span>мыши</span>, кот на крыше.
Тише, <span>мыши</span>, кот на крыше.

Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.

Красная строка (text-indent)

<div>
   Тише, мыши, кот на крыше,<br>
   а котята ещё выше.
</div>

Тише, мыши, кот на крыше,
а котята ещё выше.

Единицы измерения CSS для font-size: px, %, em, rem, vw, vh, vmin, vmax

Всем привет! Меня зовут Анна Блок, и сегодня мы поговорим про единицы измерения в CSS. Наверняка, многие из вас знают о таких единицах измерения, как px и %. Однако, по мимо всего прочего, мы разберем, как работают rem, em, vh, vw, vmax и vmin.

Cтатья получится большой, поэтому разобьем её на две части. Здесь мы поговорим о том, как эти единицы измерения влияют на размер шрифта, т.е на font-size. Во второй части затронем тему, насколько удобно использовать такие единицы измерения для того что бы управлять свойствами padding, margin, height, width и border-radius.

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

Pixels

Давайте начнем с самого распространенного — px (c англ. pixels). Пиксель — это базовая, абсолютная и окончательная единица измерения. Пиксель в CSS — это то, что вы видите на экране. Именно он задает значение разрешению монитора. Все значения браузер при веб-разработке пересчитывает в пиксели.

Итак, давайте разберем разметку, которая у нас есть в интерактивной форме. Например, в первом блоке, есть класс box-px за счет которого мы и будем стилизовать текст, который находится внутри.

<div>
   <h3>Pixels</h3>
   <p>font-size:16px</p>
   <p>font-size:8px</p>
   <p>font-size:32px</p>
</div>

Обратите внимание, основные классы дублируются. На всю основную стилизацию влияет класс, который стоит после box. Например, если просмотреть код CSS, то можно увидеть стилизацию .box-px .text-1.

.box-px .text-1 {
   font-size:16px;
}

В примере мы видим значение font-size:16px, то есть то, что написано в классе text-n, то и дублируется в CSS. Это сделано для наглядности. Вы должны понимать, что большинство браузеров по умолчанию имеют значение font-size: 16px. Если убрать свойство .box-px .text-1, то визуально ничего не изменится. При этом если мы вернем свойство назад, то тоже ничего не изменится, потому что это значение заложено по умолчанию в браузере. Однако, все что мы стилизуем далее — видоизменяется:

.box-px .text-2 {
   font-size:8px;
}
.box-px .text-3 {
   font-size:32px;
}

Если мы используем значение меньше 16px, то наш текст уменьшается. И наоборот: если мы будем использовать значение больше, то текст увеличится. Звучит логично, не так ли? Но как работают другие единицы изменения? Давайте разбираться дальше.

Percent

Следующее значение, которое мы рассмотрим это проценты (%). Вы же помните, что браузер по умолчанию использует значение 16px? Это значит, что все относительные единицы, которые мы будем использовать в дальнейшем тоже будут преобразовываться в проценты. Но мы этого с вами не увидим, т.к. эти процессы будут проходить внутри браузера.

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

<p>Lorem <span>Lorem<span>Lorem</span></span></p>

Для тега p добавим следующее:

p {
   font-size: 100%;
}

Если бы мы были браузерами, то высчитали значение font-size: 16px. Далее переходим к span. Стилизуем его:

p>span {
   font-size: 50%;
}

Мы увидим, что вложенный span и тот span, который находится внутри него, стали равнозначны значению 8px. Как мы это посчитали? Итак, font-size: 100% = 16px и если мы берем половину, то есть 50%, то половина этого значения и будет значение 8px.
Теперь давайте стилизуем еще большую вложенность:

p>span>span {
   font-size: 400%;
}

Если бы мы указали здесь значение 200%, вышло бы, что мы взяли 2 раза по 8px, складываем 8px + 8px = 16px. Если мы укажем здесь 400%, то здесь у нас станет значение в два раза больше, то есть 16px * 2 = 32px.

Ознакомиться подробнее с HTML и CSS можно тут:

Em

Давайте снова вернемся к нашему первому шаблону и поговорим про такую единицу измерения, как em. Выясним, как будет вести себя данное значение, если вместо пикселей мы будем указывать относительную единицу em. Для этого создадим пример, в котором внутри box будет содержаться два текста. Один будет обернут в div, другой — во вложенном div с классом post.

<div>
   Lorem Ipsum
   <div>Lorem Ipsum</div>
</div>

По умолчанию body равен font-size: 16px. Далее стилизуем post:

body {
   font-size: 16px;
}
.post {
   font-size: 1.2em;
}

Чтобы вычислить значение post, вы можете взять в руки калькулятор, либо (если вы используете систему macOS) набрать комбинацию CMD + пробел, открыть окно ввода для вычислений. Итак, нам необходимо умножить 16 на 1.2. Итого у нас получится 19.2. Это значит, что браузер выводит текст post, как 19.2px. Такую относительную единицу измерения удобнее использовать, если вам нужно изменить значение в body, например, поставить значение 30px. И тогда значение в post будет вычисляться автоматически, то есть умножаться на 1.2. При этом если бы вы работали с пикселями и написали бы в post 30px, а в body в дальнейшем написали бы 50px, то ничего бы у вас не изменилось в значении post и соответственно вам бы пришлось вводить все это вручную.

Ознакомиться подробнее с HTML и CSS можно тут:

Давайте снова вернемся к интерактивной шпаргалке. Мы можем проверить, какие единицы измерения работают в связке с body. Например, если добавить в блоке CSS,

body {
   font-size: 30px;
}

то мы сразу увидим, какие значения меняются. Например, пиксели не изменились совершенно, но при этом у нас изменился блок «проценты» и «em».
Единица измерения rem, не зависит от body, и это первое ее отличие от em.

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

<ul>
   <li> Первый уровень
      <ul>
         <li> Второй уровень
            <ul>
               <li> Третий уровень
                  <ul>
                     <li>Четвертый уровень</li>
                  </ul>
               </li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

Давайте для тега ul, зададим значение 0.8em:

ul {
   font-size: 0.8em; 
}

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

ul {
   font-size: 0.8em; 
}

ul ul {
   font-size: 1em; 
}

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

Rem

Итак, как вы уже поняли, это значение не взаимодействует с body, оно взаимодействует с основным корневым тегом html. У корневого узла есть особый селектор псевдокласса, который записывается как :root. В данном случае rem это и есть сокращение от слов «root em», то есть «корневой em». Если вы работаете с rem, то вы должны помнить, что его значения относительны не к текущему элементу, а к корневому. В данном случае совершенно не важно, где вы используете значение rem, оно никак не будет влиять на остальные значения.

Если мы вернемся к предыдущему примеру с вложенностями, то в данном случае, если мы напишем rem, эта проблема отпадёт. Вы так же можете использовать значения больше единицы, и при этом остальные уровни никак не видоизменятся. Они используют те же значения, что и первый элемент.

Ознакомиться подробнее с HTML и CSS можно тут:

Если вернуться к примеру где мы рассматривали em, то мы можем скопировать box и написать box-rem, что сделать небольшое отличие в классах:

<div>
   Lorem Ipsum
   <p>Lorem Ipsum</p>
</div>

Если в стилях запишем

.box-rem .post {
   font-size: 1.2rem;
}

то увидим, что это значение никак не видоизменится, т.к. первый «Lorem Ipsum» записан вне тегов. Он меняется по отношению к body, но при этом, если мы запишем селектор :root

:root {
   font-size: 50px;
}

то мы увидим, что значение post меняется относительно этого сектора.

Ознакомиться подробнее с HTML и CSS можно тут:

Давайте создадим еще один пример и поговорим о некоторых тонкостях с использованием rem. Давайте снова создадим box, внутри которого будет содержаться тег h3 и p

<div>
   <h3>Home</h3>
   <p>Does your lorem ipsum text long for something a little fishier? Give our generator a try… it’s fishy!</p>
</div>

То, что я сейчас покажу — это анти-пример и я не советую применять на своих проектах. И в конце я объясню почему.

Итак, запишем селектор :root.

Заодно давайте поговорим о том, как вычислить 10px с точки зрения em. Для этого открываем калькулятор. Что бы вычислить, сколько будет 10px, мы делим 10 на тот размер, который у нас установлен по умолчанию, то есть на 16px. Итого у нас получается значение 0.625. Давайте запишем:

:root {
   font-size: 0.625em;  /*=10px */
}

Далее давайте будем стилизовать h3. Начнем вычислять font-size с точки зрения rem для этого нам необходимо 14 разделить на 10 и выходит 1.4rem

h3 {
   font-size: 1.4rem; /* =14px */
}

Этот метод удобен тем, что нам не потребуется прибегать к вычислениям. Всё это возможно вычислить в уме. Но я предлагаю сделать заголовок сделать все-таки чуть больше, например, 24px. В rem значении это будет 2.4rem.

h3 {
   font-size: 2.4rem; /* =24px */
}

Как вы видите, по умолчанию, если я не буду стилизовать p, либо какие-то другие элементы, которые будут появляться на странице, например:

<ul><li>Lorem</li><li>Lorem</li><li>Lorem</li></ul>

то все они автоматом будут иметь размер шрифта 10px. Это слишком маленький размер шрифта и на экранах он будет нечитабельным, а это значит, что вам придется для каждого элемента добавлять значение font-size, из-за чего файл документа CSS значительно увеличится. В данном случае приходиться чем-то жертвовать и как мне кажется, использовать такой метод нецелесообразно.

Если вы не хотите использовать размер шрифта 10px по умолчанию, то вы можете использовать другое значение — 14px. Чтобы вычислить, сколько это будет в rem, для этого нужно 14px / 16px. Итог: 0.875rem

:root {
   font-size: 0.875em; /*=14px */
}

Теперь мы видим, что текст по умолчанию стал читабельным. Заголовок увеличился, потому что 2.4rem это уже не 24px. А сколько? Давайте посчитаем: 24px / 14px = 1.71rem. Давайте запишем:

h3 {
   font-size: 1.71rem; /* =24px */
}

В таком случае размер заголовка у нас стал таким же, как тогда когда у нас font-size составлял 10px. Конечно же, такое значение не вычислить в уме, однако работы с кодом по итогу будет значительно меньше.

Давайте предположим, что мы работаем с media-запросами. Например, размер шрифта нам нужно сделать чуть большедля планшетов и ПК устройств. То есть если мы будем использовать media-запросы то внутри мы можем записать min-width: 768px и внутри media мы запишем селектор :root с значением font-size: 1em, то есть 16px:

@media (min-width:768px) {
   :root {
      font-size: 1em;
   }
}

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

Ознакомиться подробнее с HTML и CSS можно тут:

VW / VH

Теперь давайте перейдем к следующим значениям. Это единицы измерения которые относятся к размеру экрана устройства. Все те значения, которые начинаются с буквы V, имеют в себе сокращение слова с английского «viewport» (пер. на русский «область просмотра»). Итак:

• vh = 1/100 высоты области просмотра
• vw = 1/100 ширины области просмотра
• vmin = 1/100 наименьших высоты или ширины области просмотра
• vmax = 1/100 наибольших высоты или ширины области просмотра

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

Итак, если рассмотреть пример, который мы видим здесь, и начать уменьшать экран, то можно увидеть, как vw уменьшается по ширине. При этом vh зависит от высоты, поэтому его значения никак не меняются. Если менять высоту экрана, то можно увидеть, что значения в блоке vh меняются в зависимости от высоты, а vw совершенно никак не реагирует. Запись

.box-vw .text-1 {
   font-size: 2vw;
}

значит, что на экране монитора, у которого будет значение 1200px, элемент будет равен 24px. Откуда берется это значение? Это 2% от 1200px, то есть 1200px * 0.02 = 24px. При этом если взять, например, планшет, который в среднем составляет ширину 768px, то размер шрифта составит примерно 15px, то есть это 2% от 768px.
Значения vmin и vmax не применимы к font-size поэтому их уже рассмотрим в следующей части, но знайте, что эти значения есть и они работают в связке с vw и vh, однако их можно использовать не всегда, а только в том случае если они необходимы. И не забывайте про поддержку этих значений.

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

Смотреть видео:

Размер шрифта в css: font-size

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

Всегда размер отличается у заголовков, подзаголовков и простого текста.

В языке CSS есть свойство, которое позволяет задаваться размеры: «font-size».

К примеру, зададим основной размер шрифта для сайта:

body{font-size: 14px;}

Мы указали, что по умолчанию размер шрифта на сайте равно 14px.

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

font-size: 14px; // в пикселях
font-size: 12pt; // в пунктах
font-size: 120%; // в процентах
font-size: 1.2em; // В соотношении
font-size: small; // Ключевым словом

Когда мы указываем размер в процентах или в соотношении, размер отталкивает от размера по умолчанию. К примеру, если у нас в <body> размер шрифта 14px, а для <p> мы указываем 110%, то эти проценты считаются от 14px у <body>, аналогично и с соотношением.

Ключевые слова:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

Таблица рекомендуемых размеров шрифтов для сайта

text-decoration-Thickness — CSS: Каскадные таблицы стилей

Свойство CSS text-decoration-Thickness устанавливает толщину обводки декоративной линии, которая используется в тексте в элементе, таком как сквозная линия, подчеркивание или наложение.

 
толщина украшения текста: авто;
толщина украшения текста: от шрифта;


толщина украшения текста: 0,1 мкм;
толщина украшения текста: 3 пикселя;


толщина текстового оформления: 10%;


толщина украшения текста: наследование;
толщина украшения текста: начальная;
толщина-украшения-текста: не задано;
  

Значения

авто

Браузер выбирает подходящую ширину для линии оформления текста.

от-шрифт

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

<длина>

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

<процент>

Задает толщину линии оформления текста как <процент> из 1em в текущем шрифте.Процент наследуется как относительное значение и, следовательно, масштабируется с изменениями шрифта. Браузер должен использовать минимум 1 пиксель устройства. Для данного применения этого свойства толщина постоянна по всему блоку, к которому оно применяется, даже если есть дочерние элементы с другим размером шрифта.

  авто | from-font | <длина> | <процент>  

Различная толщина

HTML

  
 Вот текст с красным подчеркиванием в 1 пиксель.
 У этого есть красная линия подчеркивания 5 пикселей. 
 Здесь используется эквивалентное сокращение. 
  

CSS

  .thin {
  текст-украшение-строка: подчеркивание;
  стиль оформления текста: твердый;
  цвет оформления текста: красный;
  толщина украшения текста: 1px;
}

.thick {
  текст-украшение-строка: подчеркивание;
  стиль оформления текста: сплошной;
  цвет оформления текста: красный;
  толщина украшения текста: 5 пикселей;
}

.shorthand {
  текст-украшение: подчеркивание сплошным красным 5px;
}  

Результаты

Примечание : свойство раньше называлось text-decoration-width , но в 2019 году было обновлено до text-decoration-Thickness .

Таблицы BCD загружаются только в браузере

text-decoration-Thickness — CSS: Feuilles de style en cascade

Собственный CSS Толщина текста-декорации Определение размера или большого размера линии декора, используемого в тексте (la ligne qui raye, souligne ou surligne le texte).

 
толщина украшения текста: авто;
толщина украшения текста: от шрифта;


толщина украшения текста: 0,1 мкм;
толщина украшения текста: 3 пикселя;


толщина украшения текста: наследование;
толщина украшения текста: начальная;
толщина-украшения-текста: не задано;
  

Valeurs

авто

Le navigateur choisit l’épaisseur pour la ligne de decoration.

от-шрифт

Si le fichier de la police indique une épaisseur preférée, c’est cette valeur qui est utilisée. Si le fichier ne contient pas cette information, cette valeur est synonyme de auto .

<длина>

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

Syntaxe formelle

HTML

  
 Voici du texte avec un soulignement rouge de 2px.
 Celui est souligné et surligné. 
 Ce texte sera souligné avec une ligne bleue de 1px si la formula raccourcie est pri charge. 
  

CSS

  .longhand {
  текст-украшение-строка: подчеркивание;
  стиль оформления текста: сплошной;
  цвет оформления текста: красный;
  толщина украшения текста: 2 пикселя;
}

.under-and-over {
  текст-украшение-строка: подчеркивание поверх;
  стиль оформления текста: сплошной;
  цвет оформления текста: оранжевый;
  толщина украшения текста: 0.2рем;
}

.shorthand {
  text-decoration: подчеркните сплошным синим цветом 1px;
}  

Результат

Примечание: Cette propriété était initialement intitulée text-decoration-width mais fut renommée en 2019 en text-decoration-Thick .

Таблицы BCD загружаются только в браузер.

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

1. Введение

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

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

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

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

Этот модуль заменяет и расширяет декорирование текста функции, определенные в [CSS-TEXT-DECOR-3].

Все свойства в этом модуле может применяться к псевдоэлементам :: first-line и :: first-letter.

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

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

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

1,3. Терминология

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

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

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

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

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

Обратите внимание, что CSS 2.1 требует всегда пропускать поля, границы и отступы. На Уровне 3 и выше по умолчанию пропускаются только поля, границы и заполнение рамки украшения. В будущем CSS2.1 может быть обновлен, чтобы соответствовать этому новому значению по умолчанию.

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

 цитата {текст-украшение: подчеркивание; цвет синий; }
em {display: block; }
цитируй {цвет: фуксия; }
 

 <цитата>
 

  
   Помогите помогите!
    Я под шляпой! 

    —GwieF 
  
 

 

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

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

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

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

Примечание: если это не требуется для цвета, стиля и толщины линий устанавливается объявлениями ниже в каскаде, безопаснее использовать сокращение text-decoration вместо этого longhand.

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

нет

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

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

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

черта

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

сквозной

Каждая строка текста проходит по середине.

мигает

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

орфографическая ошибка

Это значение указывает тип оформления текста используется пользовательским агентом для выделения орфографических ошибок.Его внешний вид определяется UA, и может зависеть от платформы. Часто это подчеркивается красной волнистой линией.

грамматическая ошибка

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

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

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

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

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

Значения имеют то же значение, что и для свойств стиля границы [CSS-BACKGROUNDS-3]. wavy обозначает волнистую линию.

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

Это свойство, которое является подсвойством сокращения text-decoration, устанавливает цвет подчеркивания, надстрочного и сквозного перехода указан в элементе с text-decoration-line, и влияет на все украшения, происходящие из этого элемента даже если в дочерних полях указан другой цвет.

2.4. Толщина линии оформления текста: свойство

Это свойство, которое является подсвойством сокращения text-decoration, устанавливает толщину обводки подчеркиваний, надстрочных и сквозных линий указан в элементе с text-decoration-line, и влияет на все украшения, происходящие из этого элемента даже если в дочерних полях указана другая толщина.

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

авто

UA выбирает подходящую толщину для линий оформления текста; Смотри ниже.

от-шрифт

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

<длина>

Задает толщину линий оформления текста как фиксированную длину.UA должен ограничить фактическое значение одним пикселем устройства.

Примечание: длина наследуется как фиксированное значение, и не будет масштабироваться вместе со шрифтом.

<процент>

Задает смещение подчеркивания в процентах от 1em. UA должен ограничить фактическое значение одним пикселем устройства.

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

2.4.1. Автоматическая толщина линий оформления текста

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

2,5. Определение положения и толщины декоративных линий

Этот раздел скопирован из ранних черновиков Уровня оформления текста 3. Он все еще находится на рассмотрении и нуждается в интеграции с text-underline-offset и text-decoration-Thickness.

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

Затем рассчитываются позиции оформления линий. на строку следующим образом (обработка чрезмерно расположенных подчеркиваний как надстрочных и нижние верхние линии как нижние строки):

по линиям

Выровняйте декоративный элемент линии относительно самого высокого края EM-box рассматриваемого текста.

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

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

без букв под чертой

Расположите декоративный элемент линии относительно самого нижнего края EM-box рассматриваемого текста.

сквозных

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

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

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

В трех фрагментах подчеркнутого текста проводится подчеркивание последовательно ниже и толще, как отношение большого текста к мелкому текст увеличивается.

Используя тот же пример, сквозная строка во втором фрагменте, вместо усреднения двух размеров шрифта, разделите сквозную линию на два сегмента:

Однако в обоих случаях верхний индекс из-за сдвига вертикального выравнивания не влияет на положение строки.

2,6. Сокращение оформления текста: свойство text-decoration

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

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

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

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

2,7. Text Underline Position: свойство text-underline-position

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

: root: lang (ja), [lang | = ja],: root: lang (ko), [lang | = ko] {позиция подчеркивания текста: внизу справа; }
: root: lang (zh), [lang | = zh] {положение подчеркивания текста: внизу слева; }
 

Если указано только left или right, подразумевается также auto.Значения имеют следующие значения:

авто

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

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

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

от-шрифт

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

под

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

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

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

слева

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

правый

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

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

2,8. Смещение подчеркивания текста: свойство

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

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

авто

UA выбирает соответствующее смещение для подчеркивания.

Однако это смещение должно быть нулевым. если был указан from-font и UA смог извлечь подходящую метрику для использования от шрифта.

<длина>

Задает смещение подчеркивания как фиксированную длину.

Примечание: длина наследуется как фиксированное значение, и не будет масштабироваться вместе со шрифтом.

<процент>

Задает смещение подчеркивания в процентах от 1em.

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

Когда значение свойства text-decoration-line равно орфографической или грамматической, UA может игнорировать значение text-underline-position.

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

Нулевая позиция подчеркивания зависит от значения text-underline-position, как описано ниже.

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

Все автоматические настройки, сделанные для размещения потомков, сохраняются; text-underline-offset является дополнением к ним.

2.8.2. Использование метрик шрифта для автоматического позиционирования

Некоторые форматы шрифтов (например, OpenType) могут содержать информацию о правильном положении линейного украшения. UA должен использовать такую ​​информацию на основе шрифтов в выборе автоматического смещения где необходимо, и должен использовать такую ​​информацию когда from-font указан для text-underline-position.

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

2.9. Однородность линии оформления текста

Точное положение и толщина линий декора зависит от значений text-underline-position, text-underline-offset и text-decoration-width, как определено выше, и в остальном UA-определен. Однако для подчеркивания и подчеркивания UA должен использовать одну толщину и позицию на каждой линии для украшений, происходящих из одной коробки для декорирования .

Правильный и неправильный рендеринг AB C D

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

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

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

2.10. Непрерывность линии оформления текста: сокращение text-decoration-skip и его вспомогательные свойства

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

Свойство text-decoration-skip и его вложенные свойства (текст-украшение-пропустить-сам, текст-украшение-пропустить-поле, текст-украшение-пропустить-вставку, текст-украшение-пропускать-пробелы, текст-украшение-пропустить-чернила) контролировать прерывания в оформлении линии для которого элемент или предок является украшающей коробкой. Значение нет устанавливает для всех вложенных свойств значение none, и значение auto устанавливает для всех подсвойств их начальные значения.

Совместимо ли это определение с Интернетом? Нужно ли нам также добавлять значение рукописного ввода для веб-совместимости?

Обратите внимание, что эти свойства наследуют и у дочерних элементов могут быть разные настройки.

В таблицу стилей UA по умолчанию для HTML по умолчанию внесено следующее дополнение:

  ins, del {text-decoration-skip: none;}  

Когда значение свойства text-decoration-line равно орфографической или грамматической, UA может игнорировать любое или все эти свойства.

2.10.1. Пропуск пробелов: свойство text-decoration-skip-self

CSSWG решила разделить текст-декорации-пропуск на подсвойства, но этот набор значений еще не был проверен CSSWG.

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

нет

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

объекта

Пропустить этот элемент (весь его поле поля), если это атомарный встроенный (например, изображение или встроенный блок).

2.10.2. Пропуск пробелов: свойство text-decoration-skip-box

CSSWG решила разделить текст-декорации-пропуск на подсвойства, но этот набор значений еще не был проверен CSSWG.

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

нет

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

все

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

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

2.10.3. Inset Edges: свойство text-decoration-skip-inset

CSSWG решила разделить текст-декорации-пропуск на подсвойства, но этот набор значений еще не был проверен CSSWG.

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

нет

Ничего не пропускать: оформление текста рисуется от края до края блока.

авто

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

Это может быть отдельное свойство, а не часть набора text-decoration-skip. См. Также Issue 4557, о явном контроле длины строки.

2.10.4. Пропуск пробелов: свойство text-decoration-skip-space

Должно быть начальное значение none для Web-compat? Если нет, то в таблице стилей UA по умолчанию как минимум не должно быть присвоено ни одного INS и DEL.См. Также ошибку 4653.

Это свойство указывает, пропускает ли текстовое оформление какие-либо пробелы. Он контролирует все линии оформления текста, нарисованные элементом. а также любые линии оформления текста, нарисованные его предками. Значения имеют следующие значения:

нет

Проставки не пропускаются. Они оформлены так же, как и любой другой персонаж.

все

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

начало

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

конец

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

Для целей данного имущества: проставка любой типографский символьный блок со свойством Unicode White_Space [UAX44], кроме U + 202F NARROW NO-BREAK SPACE, или любой разделитель слов.

2.10.5. Пропуск глифов: свойство text-decoration-skip-ink

Это свойство определяет способ прорисовки надстрочных и подчеркиваемых линий. когда они пересекают глиф.

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

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

Это свойство применяется только к надстрочным и подчеркнутым чертам; сквозные линии всегда непрерывны.

авто

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

все

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

нет

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

В принципе, эта проблема может быть решена авторами с помощью text-underline-position: under (или, возможно, text-underline-offset) чтобы переместить подчеркивание в нижнее положение, которое не конфликтует с глифами, но это не всегда возможно, даже если пользовательский агент поддерживает эти свойства и автор осознает их потенциал.В частности, когда страница содержит произвольный пользовательский контент, автор, ответственный за дизайн, может не знать, будет ли присутствовать контент CJK. А со смешанным содержанием положение подчеркивания, предназначенное для работы с контентом CJK может выглядеть плохо, если большая часть текста написана не на основе CJK.

Следовательно, когда действует авто, UA, который реализует пропуска чернил, должен воздерживаться от этого в контекстах CJK. (Авторы, которые с по хотят, чтобы к контенту CJK применялся пропуск чернил, могут использовать значение always для явного запроса.)

В первую очередь, это означает , а не применение пропуска чернил для символов, чьи Свойство скрипта Unicode — это любой из скриптов CJK Han, Hiragana, Katakana, Bopomofo или Hangul, или для персонажей, свойство Script которых имеет значение Inherited или Common, и чье свойство ScriptExtensions включает один или несколько сценариев CJK.

Кроме того, символы со свойством сценария Unicode Common и Inherited (в первую очередь общие знаки препинания и символы) необходимо учитывать, поскольку они могут использоваться как часть запуска содержимого CJK-скрипта, и желательно обрабатывать весь текст в рамках данного сценария согласованным образом.Таким образом, UA должен преобразовать текст в запуски сценария. как описано в «Примечаниях к реализации» [UAX24] «Свойство сценария Unicode», в частности в подразделах 5.1 и 5.2. После применения описанной эвристики (или аналогичного анализа скриптов), UA должен отключить пропуск рукописного ввода для всех диапазонов текста которые определены как скрипт CJK.

Есть ли другие (не CJK) скрипты, где было бы предпочтительнее? для отключения пропуска чернил по умолчанию (когда действует авто)? Возможно Йи? Арабский? (См. Также обсуждение в выпуске 1288.)

2.10.6. Прерывание формирования

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

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

3. Дополнительные элементы управления для выделения знаков

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

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

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

См. Также вопрос о преемственности в размере / положении.

3.1. Стиль акцента: свойство

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

нет

Без упора.

с наполнением

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

открытый

Форма полая.

точка

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

круг

Отобразить большие круги как отметки. Закрашенный кружок — это U + 25CF ‘●’, а белый кружок — U + 25CB ‘○’.

двойной круг

Отобразить двойные кружки как отметки. Закрашенный двойной круг — это U + 25C9 », а открытый двойной круг — это U + 25CE ».

треугольник

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

кунжут

Кунжуты отображать в виде знаков. Кунжут с начинкой — U + FE45 », а открытый кунжут — U + FE46 ».

<строка>

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

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

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

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

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

• Разделители слов или другие символы, которые принадлежат к классам разделителей Unicode (Z *). (Но обратите внимание, что метки выделения — это , нарисованные для пробела который сочетается с любыми комбинированными персонажами.)
• Пунктуация — в частности, любые персонажи, принадлежащие Unicode P * общая категория и не NFKD нормализовать [UAX15] в любой из следующих символов:

  #	U + 0023	НОМЕРНЫЙ ЗНАК
  %	U + 0025	ЗНАК ПРОЦЕНТ
  ‰	U + 2030	ЗНАК НА МИЛЬ
  ‱	U + 2031	НА ДЕСЯТЬ ТЫСЯЧ ЗНАК
  ٪	U + 066A	Арабский знак процента
  ؉	U + 0609	АРАБСКИЙ ИНДИКАТОР НА МИЛЛЬНЫЙ ЗНАК
  ؊	U + 060A	АРАБСКИЙ ИНДИК НА ДЕСЯТЬ ТЫСЯЧ ЗНАКОВ
  и	U + 0026	АМПЕРСАНД
  ⁊	U + 204A	TIRONIAN SIGN ET
  @	U + 0040	КОММЕРЧЕСКИЙ В
  §	U + 00A7	РАЗДЕЛ ЗНАК
  ¶	U + 00B6	ЗНАК ПИЛКРОУ
  ⁋	U + 204B	ПЕРЕВЕРНУТЫЙ ЗНАК PILCROW
  ⁓	U + 2053	SWUNG DASH
  〽	U + 303D	ЗАМЕТКА ЗАМЕНА ДЕТАЛИ

• Символы, принадлежащие классам Unicode для управляющих кодов и неназначенные символы (Cc, Cf, Cn).

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

3.2. Цвет акцента: свойство

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

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

3.3. Сокращение выделенного текста: свойство выделения текста

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

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

3.4. Позиция акцента: свойство

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

более

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

под

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

правый

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

слева

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

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

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

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

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

 рубин {выделение текста: нет; } 

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

 em {выделение текста: точка; } / * Устанавливаем выделение текста для элементов  * /
em rt {дисплей: нет; } / * Скрываем рубин внутри элементов  * /
 

3.5. Выделение Mark Skip: свойство

  / * типичный стиль HTML * /
blink {
  текст-украшение-строка: мигать;
}
s, strike, del {
  оформление текста: сквозное;
}
u, ins,: link,: посещено {
  текст-оформление: подчеркивание;
}
abbr [название], аббревиатура [название] {
  оформление текста: пунктирное подчеркивание;
}

/ * отключаем наследование меток выделения текста рубиновому тексту:
  Знаки выделения должны применяться только к основному тексту * /
rt {выделение текста: нет; }

/ * установка позиции акцента по умолчанию для соответствующего языка * /
: root: lang (zh), [lang | = zh] {текст-акцент-позиция: внизу справа; }
[lang | = ja], [lang | = ko] {положение выделения текста: справа; }

/ * установить соответствующую языку позицию подчеркивания по умолчанию * /
: root: lang (ja), [lang | = ja],
: root: lang (mn), [lang | = mn],
: root: lang (ko), [lang | = ko] {положение подчеркивания текста: справа; }
: корень: язык (zh), [язык | = zh] {положение подчеркивания текста: слева; }
/ * auto выбрано (подразумевается) выше, а не ниже
   из-за проблем с совместимостью контента * /
  

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