Свойство CSS tab-size
Как использовать свойство CSS tab-size для задания ширины символа табуляции. Значения свойства и примеры применения.
Свойство CSS tab-size управляет шириной отображения символа табуляции (U+0009). По умолчанию браузер отрисовывает каждую табуляцию как 8 пробелов, что нередко оказывается слишком широким для листингов кода. tab-size позволяет задать эту ширину в единицах ширины пробела или в конкретной CSS-длине.
На этой странице описывается, что делает свойство, когда оно действительно вступает в силу, в чём разница между значениями <number> и <length>, поддержка браузерами и рабочий пример.
Когда tab-size имеет значение?
Табуляция влияет на видимый макет только тогда, когда окружающие пробельные символы сохраняются. В обычном HTML браузеры сворачивают табуляции, пробелы и переносы строк в один пробел, поэтому tab-size просто не на что влиять. Свойство становится значимым при сохранении пробельных символов, что происходит в двух распространённых случаях:
- Внутри
<pre>и<textarea>, которые по умолчанию сохраняют пробельные символы. - На любом элементе, где для
white-spaceзадано значениеpre,pre-wrapилиpre-line.
Именно поэтому tab-size — это то свойство, к которому стоит обращаться при отображении исходного кода, ASCII-таблиц или любого контента, где важно выравнивание колонок. Свойство является одним из свойств CSS3 и наследуется, поэтому его установка на контейнере применяется и к вложенному преформатированному тексту.
Отрицательные значения недопустимы, и объявление игнорируется. Значение должно быть неотрицательным <number> или неотрицательной <length>.
| Начальное значение | 8 |
|---|---|
| Применяется к | Всем элементам, но действует только на блочные контейнеры и элементы с сохранёнными пробельными символами. |
| Наследуется | Да. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.tabSize = "20"; |
Синтаксис
tab-size: <number> | <length> | initial | inherit;<number>— количество ширин пробела, которое занимает табуляция (например,tab-size: 4). Это наиболее распространённая форма. Значение зависит от шрифта, поэтому табуляция остаётся пропорциональной при изменении размера шрифта.<length>— явная ширина, напримерtab-size: 2emилиtab-size: 20px. Удобно, когда нужна фиксированная, не зависящая от шрифта табуляция.
Символ табуляции не всегда добавляет ровно tab-size пробелов. Как настоящая позиция табуляции, он переносит текст к следующей позиции табуляции, поэтому размер отступа зависит от того, сколько символов уже стоит перед табуляцией в этой строке.
Пример свойства tab-size
Пример кода CSS tab-size
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.tab1 {
tab-size: 5;
}
.tab2 {
tab-size: 20;
}
</style>
</head>
<body>
<h2>Tab-size property example</h2>
<pre class="tab1">
Lorem ipsum is a...
</pre>
<pre class="tab2">
Lorem ipsum is a...
</pre>
</body>
</html>Результат
В данном примере tab-size первого элемента равен 5, а второго — 20.
Использование значения длины
Вместо количества пробелов можно задать фиксированную ширину. В этом примере каждая табуляция переходит к позиции 2em независимо от ширины пробела в шрифте:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
pre {
tab-size: 2em;
}
</style>
</head>
<body>
<pre>Name Role
Ann Designer
Bob Developer</pre>
</body>
</html>Поскольку в каждой строке после имени используется одна табуляция, второй столбец выравнивается по одной и той же позиции 2em.
Поддержка браузерами
tab-size поддерживается всеми современными браузерами. Форма <number> имеет наибольшую поддержку; форма <length> поддерживается в актуальных версиях Chrome, Edge, Firefox и Safari. В старых браузерах могут потребоваться префиксы -moz-tab-size и -o-tab-size, однако для современных браузеров они уже не нужны.
Значения
| Значение | Описание | Попробуйте |
|---|---|---|
| number | Задаёт количество пробельных символов в табуляции. Отрицательные значения недопустимы. Значение по умолчанию — 8. | Попробуйте » |
| length | Задаёт ширину табуляции. Отрицательные значения недопустимы. Это значение широко поддерживается современными браузерами. | |
| initial | Устанавливает для свойства значение по умолчанию. | |
| inherit | Наследует значение свойства от родительского элемента. |