Свойство CSS `text-transform`

Свойство CSS text-transform CSS задаёт преобразование регистра текста элемента. С его помощью текст можно сделать полностью прописным или строчным либо преобразовать первые буквы всех слов в прописные. Оно также может помочь улучшить читаемость фуриганы.

Попробуйте

text-transform: capitalize;

text-transform: uppercase;

text-transform: lowercase;

text-transform: none;

text-transform: full-width;

text-transform: full-size-kana;

text-transform: math-auto;

<section id="default-example">
  <div class="transition-all" id="example-element">
    <p>
      LONDON. Michaelmas term lately over, and the Lord Chancellor sitting in
      Lincoln's Inn Hall.
    </p>
    <p lang="el">
      Σ is a Greek letter and appears in ΟΔΥΣΣΕΥΣ. Θα πάμε στο "Θεϊκό φαΐ" ή στη
      "Νεράιδα"
    </p>
    <p lang="ja">ァィゥェ ォヵㇰヶ</p>
  </div>
</section>

#example-element {
  font-size: 1.2em;
}

Свойство 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).

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

Синтаксис

/* 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 не создаёт регистр заголовка, поскольку не применяет специфичные для языка правила, например пропуск артиклей в английском языке.

Примечание: Ключевое слово 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

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

Доступность

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

• MDN: пояснения к руководству WCAG, пункт 1.4
• W3C: руководство WCAG 2.2

Формальное определение

Формальный синтаксис

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

Примеры

Пример использования «none»

<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;
}

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

Пример использования «capitalize» (общий случай)

<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;
}

Здесь показано преобразование первых букв текста в верхний регистр.

Пример использования «capitalize» (знаки препинания)

<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, относящемуся к общей категории «Буква» или «Число».

Пример использования «capitalize» (символы)

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

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

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

Пример использования «capitalize» (нидерландский диграф ij)

<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 следует обрабатывать как одну букву.

Пример использования «uppercase» (общий случай)

<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;
}

Здесь показано преобразование текста в верхний регистр.

Пример использования «uppercase» (греческие гласные)

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

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

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

Пример использования «lowercase» (общий случай)

<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;
}

Здесь показано преобразование текста в нижний регистр.

Пример использования «lowercase» (греческая Σ)

<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;
}

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

Пример использования «lowercase» (литовский язык)

<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́ сохраняют точку при преобразовании в нижний регистр.

Пример использования «full-width» (общий случай)

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

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

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

Пример использования «full-width» (японская катакана половинной ширины)

<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 объединяет их в одну кодовую точку.

Пример использования «full-size-kana»

<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>

p:nth-of-type(2) {
  text-transform: full-size-kana;
}

Пример использования «math-auto»

В этом примере мы используем только разметку 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