text-transform

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

• На тюркских языках, таких как турецкий (tr), азербайджанский (az), крымско-татарский (crh), волжско-татарский (tt), и башкирский (ba), существуют два типа i, с точкой и без точки, и две пары регистров: i/İ и ı/I.
• В немецком языке (de), ß переходит в SS в верхнем регистре.
• В голландском языке (nl), диграф ij преобразуется в IJ, даже при использовании text-transform: capitalize, которое переводит только первую букву слова в верхний регистр.
• В греческом языке (el), гласные теряют ударение, когда всё слово находится в верхнем регистре (ά/Α), за исключением дизъюнктивной эты (ή/Ή). Также дифтонги с ударением на первой гласной теряют ударение и приобретают диэрезис на второй гласной (άι/ΑΪ).
• В греческом языке (el), буква сигма в нижнем регистре имеет две формы: σ и ς. ς используется только в случае, если сигма завершает слово. При применении text-transform: lowercase к заглавной сигме (Σ) браузер должен выбрать правильную форму в нижнем регистре, исходя из контекста.
• В ирландском языке (ga), некоторые префиксные буквы остаются в нижнем регистре при капитализации основной начальной буквы. Например, text-transform: uppercase преобразует ar aon tslí в AR AON tSLÍ, а не, как можно ожидать, AR AON TSLÍ (только Firefox). В некоторых случаях дефис также удаляется при переходе в верхний регистр: an t-uisce преобразуется в AN tUISCE (и дефис корректно вставляется text-transform: lowercase).

Язык определяется атрибутом lang HTML или атрибутом xml:lang XML.

/* Keyword values */
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;
text-transform: math-auto;

/* Global values */
text-transform: inherit;
text-transform: initial;
text-transform: revert;
text-transform: revert-layer;
text-transform: unset;

capitalize

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

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

Примечание: Ключевое слово capitalize было недостаточно определено в CSS 1 и CSS 2.1. Это привело к различиям в браузерах в способе вычисления первой буквы (Firefox рассматривал - и _ как буквы, но другие браузеры не делали этого. И Webkit, и Gecko неправильно рассматривали символы, основанные на буквах, такие как ⓐ, как реальные буквы.) Точно определив правильное поведение, CSS Text Level 3 устранил эту проблему. Строка capitalize в таблице совместимости браузеров содержит версию, с которой разные движки начали поддерживать это теперь точно определенное поведение.

uppercase

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

lowercase

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

none

Это ключевое слово, которое предотвращает изменение регистра всех символов.

full-width

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

full-size-kana

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

math-auto

Автоматически рендерит текст в математическом шрифте italic, когда это уместно. Преобразует латинские и греческие буквы, а также некоторые другие математические символы в математические символы italic, но только если это применяется к текстовому узлу, содержащему один символ. Например, «x» превратится в «𝑥» (U+1D465), но «exp» останется как «exp». В основном используется для указания поведения элементов <mi> в MathML. В целом следует использовать разметку MathML, которая автоматически применяет правильное форматирование.

Большие блоки текста, установленные со значением text-transform uppercase, могут быть трудными для чтения людям с когнитивными проблемами, такими как дислексия.

• MDN Понимание WCAG, объяснения к руководству 1.4
• W3C Понимание WCAG 2.1

text-transform = 
  none                                                |
  [ capitalize | uppercase | lowercase ] || full-width || full-size-kana  |
  math-auto                                           

<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: none
  <strong
    ><span
      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
    ></strong
  >
</p>

span {
  text-transform: none;
}
strong {
  float: right;
}

Это демонстрирует отсутствие преобразования текста.

<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: capitalize
  <strong
    ><span
      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
    ></strong
  >
</p>

span {
  text-transform: capitalize;
}
strong {
  float: right;
}

Это демонстрирует капитализацию текста.

<p>
  Initial String
  <strong
    >(this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize?
    ?¡transform!</strong
  >
</p>
<p>
  text-transform: capitalize
  <strong
    ><span
      >(this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize?
      ?¡transform!</span
    ></strong
  >
</p>

span {
  text-transform: capitalize;
}
strong {
  float: right;
}

Это демонстрирует, как начальные знаки препинания слова игнорируются. Ключевое слово влияет на первую букву, то есть на первый символ Unicode, входящий в общие категории «Буква» или «Цифра».

<p>
  Initial String
  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
</p>
<p>
  text-transform: capitalize
  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
</p>

span {
  text-transform: capitalize;
}
strong {
  float: right;
}

Это демонстрирует, как начальные символы игнорируются. Ключевое слово выбирает первую букву, то есть первую часть символа Юникода, относящуюся к общей категории Буква или Цифра.

<p>
  Initial String
  <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong>
</p>
<p>
  text-transform: capitalize
  <strong
    ><span lang="nl"
      >The Dutch word: "ijsland" starts with a digraph.</span
    ></strong
  >
</p>

span {
  text-transform: capitalize;
}
strong {
  float: right;
}

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

<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: uppercase
  <strong
    ><span
      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
    ></strong
  >
</p>

span {
  text-transform: uppercase;
}
strong {
  float: right;
}

Это демонстрирует преобразование текста в верхний регистр.

<p>
  Initial String
  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
</p>
<p>
  text-transform: uppercase
  <strong
    ><span lang="el">Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong
  >
</p>

span {
  text-transform: uppercase;
}
strong {
  float: right;
}

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

<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: lowercase
  <strong
    ><span
      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
    ></strong
  >
</p>

span {
  text-transform: lowercase;
}
strong {
  float: right;
}

Это демонстрирует преобразование текста в нижний регистр.

<p>
  Initial String
  <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong>
</p>
<p>
  text-transform: lowercase
  <strong
    ><span
      >Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span
    ></strong
  >
</p>

span {
  text-transform: lowercase;
}
strong {
  float: right;
}

Это демонстрирует, как греческий символ сигма (Σ) преобразуется в обычную строчную сигму (σ) или конечную вариант (ς) в зависимости от контекста.

<p>
  Initial String
  <strong>Ĩ is a Lithuanian LETTER as is J́</strong>
</p>
<p>
  text-transform: lowercase
  <strong><span lang="lt">Ĩ is a Lithuanian LETTER as is J́</span></strong>
</p>

span {
  text-transform: lowercase;
}
strong {
  float: right;
}

Это демонстрирует, как литовские буквы Ĩ и J́ сохраняют свою точку при преобразовании в строчный регистр.

<p>
  Initial String
  <strong
    >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong
  >
</p>
<p>
  text-transform: full-width
  <strong
    ><span
      >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span
    ></strong
  >
</p>

span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}

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

<p>
  Initial String
  <strong>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</strong>
</p>
<p>
  text-transform: full-width
  <strong><span>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</span></strong>
</p>

span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}

Японская катакана с половинной шириной использовалась для представления катаканы в 8-битных кодировках символов. В отличие от обычных (полноширинных) символов катаканы, буква с дакутеном (знак озвучивания) представлена двумя кодами Юникода, телом буквы и дакутеном. full-width объединяет их в один код при преобразовании этих символов в полноширинные.

В этом примере мы используем чистый HTML-разметку для создания математической формулы:

<div>
  (<span class="math-id">sin</span>&#8198;<span class="math-id">x</span>)<sup
    >2</sup
  >
  + (<span class="math-id">cos</span>&#8198;<span class="math-id">x</span>)<sup
    >2</sup
  >
  = 1
</div>

Мы задаём каждому .math-id элементу text-transform: math-auto. Однако обратите внимание, как только символы x становятся курсивом, в то время как sin и cos остаются неизменными.

.math-id {
  text-transform: math-auto;
}

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

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <semantics>
    <mrow>
      <mo stretchy="false">(</mo>
      <mo lspace="0em" rspace="0em">sin</mo>
      <mspace width="0.16666666666666666em"></mspace>
      <mi>x</mi>
      <msup>
        <mo stretchy="false">)</mo>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <mo stretchy="false">(</mo>
      <mo lspace="0em" rspace="0em">cos</mo>
      <mspace width="0.16666666666666666em"></mspace>
      <mi>x</mi>
      <msup>
        <mo stretchy="false">)</mo>
        <mn>2</mn>
      </msup>
      <mo>=</mo>
      <mn>1</mn>
    </mrow>
    <annotation encoding="TeX">(\sin\,x)^2+(\cos\,x)^2=1</annotation>
  </semantics>
</math>

• font-variant