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

Содержание

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

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

12.0+ 5.5+ 1.0+ 1.0+ 7.0+ 1.0+

Описание

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

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

Значение по умолчанию: medium
Применяется: ко всем элементам
Анимируется: да
Наследуется: да
Версия: CSS1
Синтаксис JavaScript: object.style.fontSize=»larger»

Синтаксис

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

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

Значение Описание
xx-small Сверх мелкий размер шрифта.
x-small Очень маленький размер шрифта.
small Маленький размер шрифта.
medium Средний размер шрифта.
large Большой размер шрифта.
x-large Очень большой размер шрифта.
xx-large Огромный размер шрифта.
smaller Маленький размер шрифта в сравнении с родительским элементом.
larger Большой размер шрифта в сравнении с родительским элементом.
размер Указания размера с помощью единиц измерения, используемых в CSS.
% Определение размера шрифта в процентом соотношении от родительского элемента.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

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

div {
font-size: xx-small;
}

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

basicweb.ru
  • 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-единиц параграф будет игнорировать стилизацию всех родительских элементов, кроме корневого.

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

Chrome SafariFirefox OperaIE Android iOS
РаботаетРаботаетРаботаетРаботает10+РаботаетРаботает
.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-единицы отличаются тем, что позволяют указывать высоту символов, руководствуясь шириной окна просмотра. В приведенном ниже демо вам нужно будет изменить ширину окна браузера, чтобы увидеть изменения:

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

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

Chrome SafariFirefox OperaIE Android iOS
31+7+31+27+9+4.4+7.1+

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

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

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

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

Chrome SafariFirefox OperaIE Android iOS
27+Работает10+Работает9+РаботаетРаботает

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

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

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

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

С первого взгляда свойство font-weight дублирует тег <b>. То есть делает текст жирным. Но не спешите с выводами, потому что это свойство может различать градации жирного. Для этого у него есть несколько значений:
  • normal — нормальная жирность шрифта (то есть нет жирного)
  • bold — текст будет выделен жирным
  • bolder — текст будет жирнее, чем жирность текста у родительского элемента
  • lighter — текст будет менее жирным, чем текст у родительского элемента
Приведём пример:
Тише, <span>мыши</span>, кот на крыше.
Получится такой результат:
Тише, мыши, кот на крыше.
Помимо эти названий свойство font-weight может принимать численные значения: 100, 200, 300, 400 и т.д. до 900. Чем больше цифра — тем жирнее текст. Нормальный текст без выделения жирным соответствует цифре 400. Выделенный жирным текст соответствует цифре 700.

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

Курсив (font-style)

Курсив можно получить с помощью тега <i>. Но ещё и через свойство font-style со значением italic. Приведём пример:
Тише, <span>мыши</span>, кот на крыше.
Получится такой результат:
Тише, мыши, кот на крыше.
Чтобы сделать из курсива нормальный шрифт, используйте «font-style: normal

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

Через CSS свойство 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)

Наверное, вы уже заметили, что HTML не воспринимает пробелы. То есть если в HTML коде поставить сотню пробелов между словами, а потом открыть этот HTML файл в браузере, то пробелы заменятся на один. Из-за этого и нет возможности сделать красную строку в абзаце. Но на помощь приходит CSS свойство 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

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

Тег Рекомендуемый размер В соотношении
body 14 px 1 em
p 14 px 1 em
h2 32 px 2 em
h3 24 px 1.5 em
h3 19 px 1.17 em

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 загружаются только в браузер.

Таблица совместимости с этой страницей, созданная с использованием структурных элементов. Si vous souhaitez contribuer à ces données, n’hésitez pas à consulter https: // github.com / mdn / browser-compat-data et à nous envoyer une pull request .

Модуль оформления текста 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-line.

Это свойство, которое является подсвойством сокращения 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.

В следующем примере непосещенные ссылки подчеркнуты сплошным синим цветом. подчеркивание в UA CSS1 и CSS2 и подчеркивание темно-синим пунктиром в UA CSS3.
 ссылка {
  цвет синий;
  текст-оформление: подчеркивание;
  оформление текста: темно-синяя пунктирная линия; / * Игнорируется в 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 должен использовать одну толщину и позицию на каждой линии для украшений, происходящих из одной коробки для декорирования .

vs.

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

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

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

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 также должен пропустить небольшое расстояние по обе стороны от контура глифа.

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

Идеографические скрипты не хотят пропускать при авто.Как мы можем определить это поведение? Есть ли еще сценарии, которые не нужно пропускать? Нужен нормативный текст, описывающий, как работает авто. См. Протокол Telcon, alreq # 86, csswg # 1288

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

авто
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 прерывает подчеркивание или наложение на границах глифа, форма линии на этой границе должна следуйте форме глифа.

Обратите внимание, что эта спецификация намеренно не требует определенного метода. для «повторения формы» глифа чтобы UA могли принять соответствующие меры для обработки эстетические и эксплуатационные соображения. Например, UA может предполагать, что окончания квадратных линий ниже определенного порога размера по соображениям производительности; или используйте трапециевидные окончания для аппроксимации кривых, особенно на украшениях с тонкими линиями.С точки зрения эстетики, 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 это можно сделать с помощью следующего правила стиля:
 рубин {выделение текста: нет; } 

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

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

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

выделения текста.

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

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

мест
Пропускать разделители слов или другие символы, относящиеся к категории разделителей Unicode (Z *).(Но обратите внимание, что метки выделения — это , нарисованные для пробела который сочетается с любыми комбинированными символами.)
знаки препинания
Пропустить знаки препинания. Пунктуация в этом определении включает символы, принадлежащие категория Unicode P * которые не определены как символы (см. ниже).
символов
Пропустить символы. Символы в этом определении включают все типографские символы, принадлежащие общая категория Unicode S *, а также любые символы, эквивалентные NFKD [UAX15] следующим символам из категории Unicode Po:
# U + 0023 НОМЕРНЫЙ ЗНАК
% U + 0025 ЗНАК ПРОЦЕНТ
U + 2030 ЗНАК НА МИЛЬ
U + 2031 НА ДЕСЯТЬ ТЫСЯЧ ЗНАК
٪ U + 066A Арабский знак процента
؉ U + 0609 АРАБСКИЙ ИНДИКАТОР НА МИЛЛЬНЫЙ ЗНАК
؊ U + 060A АРАБСКИЙ ИНДИК НА ДЕСЯТЬ ТЫСЯЧ ЗНАКОВ
и U + 0026 АМПЕРСАНД
U + 204A ТИРОНИАНСКИЙ ЗНАК E [[
@ U + 0040 КОММЕРЧЕСКИЙ В
§ U + 00A7 РАЗДЕЛ ЗНАК
U + 00B6 ЗНАК ПИЛКРОУ
U + 204B ПЕРЕВЕРНУТЫЙ ЗНАК PILCROW
U + 2053 SWUNG DASH
〽️ U + 303D ЗАМЕТКА ЗАМЕНА ДЕТАЛИ
узкий
Пропускайте символы, если свойство East_Asian_Width [UAX11] базы данных Unicode [UAX44] не равно F (полная ширина) или W (широкая).

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

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

См. Также обсуждение начального значения.

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

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

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

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

Также в отличие от box-shadow, расстояние распространения строго интерпретируется как исходное расстояние из любой точки контура глифа, и поэтому, как и радиус размытия, создает закругленные, а не острые углы.

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

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

Уровень 4 добавляет аргумент радиуса распространения к текстовой тени, используя тот же синтаксис и интерпретацию, что и для box-shadow, кроме того, что углы всегда закруглены (поскольку геометрия глифа не такая простая, как прямоугольник).

5. Оформление текста

5.1. Порядок написания украшений текста

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

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

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

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

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

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

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

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

  / * типичный стиль 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 выбрано (подразумевается) выше, а не ниже
   из-за проблем с совместимостью контента * /
  

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

Хотя text-decoration-line: blink нельзя полностью воспроизвести с другими существующими свойствами, авторы могут добиться очень похожего эффекта с помощью следующего CSS:
 @keyframes blink {
  0% {
    видимость: скрыта;
    функция-время-анимация: конец шага;
  }
  25%, 100% {
    видимость: видимая;
  }
}
blink {
  анимация: мигание 1с бесконечно;
}
 

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

Изменения по сравнению с рабочим проектом от 13 марта 2018 г.

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

1.Введение

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

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

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

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

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

1.2. Значения

Эта спецификация следует правилам определения свойств CSS из [CSS2].Типы значений, не определенные в этой спецификации, определены в 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 требует всегда пропускать поля, границы и отступы. На этом уровне по умолчанию пропускаются только поля, границы и отступы блока украшения. В будущем CSS2.1 может быть обновлен, чтобы соответствовать этому новому значению по умолчанию. Кроме того, на уровне 4 ожидается контроль над украшением начальных / конечных пробелов, и будет применяться по умолчанию к элементам HTML ins и del .

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

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

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

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

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

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

В следующей таблице стилей и фрагменте документа:
 цитата {текст-украшение: подчеркивание; цвет синий; }
em {display: block; }
цитируй {цвет: фуксия; }
 
 <цитата>
 

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

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

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

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

text-decoration-line.

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

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

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

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

стиля оформления текста.

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

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

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

цвета оформления текста

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

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

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

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

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

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

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

Это свойство устанавливает положение подчеркивания, указанного в элементе. (Это не влияет на подчеркивания, указанные родительскими элементами.) Если указано только left или right, подразумевается также auto.

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

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

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

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

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

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

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

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

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

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

vs.

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

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

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

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

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

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

Примечание. Обычно метрики шрифта OpenType указывают позицию буквенного подчеркивания; в некоторых случаях (особенно в шрифтах CJK), это дает положение нижнего подчеркивания слева. (В этом случае показатели подчеркивания шрифта обычно прикоснитесь к нижнему краю поля em). 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 это можно сделать с помощью следующего правила стиля:
 рубин {выделение текста: нет; } 

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

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

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

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

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

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

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

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

5. Оформление текста

5.1. Порядок написания украшений текста

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

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

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

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

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

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

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

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

  / * типичный стиль 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 выбрано (подразумевается) выше, а не ниже
   из-за проблем с совместимостью контента * /
  

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

Хотя text-decoration-line: blink нельзя полностью воспроизвести с другими существующими свойствами, авторы могут добиться очень похожего эффекта с помощью следующего CSS:
 @keyframes blink {
  0% {
    видимость: скрыта;
    функция-время-анимация: конец шага;
  }
  25%, 100% {
    видимость: видимая;
  }
}
blink {
  анимация: мигание 1с бесконечно;
}
 

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

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

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

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

Изменения по сравнению с Кандидатом в рекомендации от августа 2013 г.

Существенные изменения включают:

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

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

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

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

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

Примечание, это информационное примечание.

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

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

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

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

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

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

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

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

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

Спецификация останется кандидатом в рекомендацию как минимум в течение шесть месяцев.

CSS-текст


Этот текст стилизован с некоторыми свойствами форматирования текста. Заголовок использует свойства text-align, text-transform и color.Абзац с отступом, выравнивается, а расстояние между символами указывается. Подчеркивание удалено с этого цветного Ссылка «Попробуйте сами».


Попробуйте сами »

Цвет текста

Свойство цвет используется для установки цвета текста. Цвет указан:

  • название цвета — вроде «красный»
  • шестнадцатеричное значение, например «# ff0000»
  • значение RGB — например, «rgb (255,0,0)»

Посмотрите на CSS Color Values ​​полный список возможных значений цвета.

Цвет текста по умолчанию для страницы определяется в селекторе основного текста.

Примечание: Для W3C-совместимого CSS: если вы определяете свойство color , вы также должны определить background-color .


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

Свойство text-align используется для установки горизонтального выравнивания текста.

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

В следующем примере показан текст с выравниванием по центру и по левому и правому краям. (выравнивание по левому краю — по умолчанию, если направление текста слева направо, и справа выравнивание по умолчанию, если направление текста справа налево):

Пример

h2 {
выравнивание текста: по центру;
}

h3 {
выравнивание текста: слева;
}

h4 {
выравнивание текста: по правому краю;
}

Попробуй сам »

Если для свойства text-align задано значение «выравнивание по ширине», каждая строка растянуты так, чтобы все строки имели одинаковую ширину, а левое и правое поля прям (как в журналах и газетах):



Оформление текста

Свойство text-decoration используется для установки или удаления украшений из текста.

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

Остальные text-decoration значений используются для украшения текста:

Пример

h2 {
оформление текста: над чертой;
}

h3 {
оформление текста: сквозное;
}

h4 {
оформление текста: подчеркивание;
}

Попробуй сам »

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


Преобразование текста

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

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

Пример

p.uppercase {
преобразование текста: верхний регистр;
}

p.lowercase {
преобразование текста: нижний регистр;
}

p.capitalize {
преобразование текста: заглавные буквы;
}

Попробуй сам »

Отступ текста

Свойство text-indent используется для указания отступа первой строки текста:


Межбуквенный интервал

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

В следующем примере показано, как увеличить или уменьшить расстояние между символами:

Пример

h2 {
межбуквенный интервал: 3 пикселя;
}

h3 {
межбуквенный интервал: -3px;
}

Попробуй сам »

Высота линии

Свойство line-height используется для указания расстояния между строками:

Пример

p.small {
line-height: 0,8;
}

p.big {
высота строки: 1.8;
}

Попробуй сам »

Направление текста

Свойство direction используется для изменения направления текста элемента:


Интервал между словами

Свойство word-spacing используется для указания пробела между слова в тексте.

В следующем примере показано, как увеличить или уменьшить расстояние между слов:


Тень текста

Свойство text-shadow добавляет тень к тексту.

В следующем примере указывается положение горизонтальной тени (3 пикселя), положение вертикальной тени (2 пикселя) и цвет тени (красный):


Другие примеры

Отключить перенос текста внутри элемента
В этом примере показано, как отключить перенос текста внутри элемента.

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

Совет: Перейдите в нашу главу «Шрифты CSS», чтобы узнать, как изменить шрифты, размер и стиль текста.


Проверьте себя упражнениями!

Упражнение 1 » Упражнение 2 » Упражнение 3 » Упражнение 4 » Упражнение 5 »


Все свойства текста CSS

Имущество Описание
цвет Задает цвет текста
направление Задает направление текста / направление письма
межбуквенный интервал Увеличивает или уменьшает расстояние между символами в тексте
высота строки Устанавливает высоту строки
выравнивание текста Задает горизонтальное выравнивание текста
текст-оформление Указывает украшение, добавленное к тексту
текст-отступ Задает отступ первой строки в текстовом блоке
тень текста Задает эффект тени, добавляемый к тексту
преобразование текста Управляет использованием заглавных букв в тексте
переполнение текста Указывает, как пользователь должен сообщить о переполненном содержимом, которое не отображается.
юникод-биди Используется вместе со свойством direction для установки или возврата, следует ли переопределить текст для поддержки нескольких языков в одном документе
с выравниванием по вертикали Задает вертикальное выравнивание элемента
белое пространство Определяет, как обрабатываются пробелы внутри элемента
межсловный интервал Увеличивает или уменьшает расстояние между словами в тексте

.

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *