Как корректировать величину табуляции на css

Как корректировать величину табуляции на css

Проблема

С веб-страницами, содержащими большое количество кода, такими как страницы документации или учебников, связаны собственные уникальные сложности стилизации. К элементам  <pre> и  <code>, с помощью которых мы оформляем код, применяется стилизация по умолчанию, определяемая пользовательским агентом, например такая:
pre, code {
font-family: monospace;
}
pre {
display: block;
margin: 1em 0;
white-space: pre;
}
Однако этого определенно недостаточно для того, чтобы учесть все уникальные трудности отображения кода. Одна из самых серьезных проблем заключается в том, что хотя табуляция идеально подходит для создания отступов в коде, очень часто ее стараются избегать, так как место, выделяемое браузером для отображения табуляции, по ширине равно целым восьми (!) символам.

Посмотрите на рисунок — как плохо выглядят такие большие отступы и как бездарно расходуется место на экране:
наш код даже не поместился в свой контейнер!

как корректировать величину табуляции

 

Решение

К счастью, в CSS Text Level 3 у нас появилось новое свойство CSS для управления этой величиной: tab-size . В качестве значения оно принимает число (количество символов) или длину (что редко бывает полезным). Чаще всего мы задаем значение  4 (то есть ширина четырех символов) или  2 — последняя тенденция в оформлении отступов строк кода:
pre {
tab-size: 2;
}
Как видно на рисунке ниже  код теперь читать намного проще. Вы могли бы даже установить значение  tab-size, равное  0, для того чтобы полностью отключить табуляцию, но это редко (или вообще никогда) дает хорошие результаты.

 

 

Если свойство не поддерживается, то ничего не ломается — мы просто получаем ужасно широкую табуляцию, с которой нам и так приходилось мириться все эти годы.
ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/tab-size

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: