Выравнивание текста. Преобразование шрифта

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

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

В обычной HTML-разметке этот эффект достигается за счет применения атрибута align, как это сделано на страницах данного пособия 🙂

<p align=justify>…</p>

Аналогичный результат в CSS достигается за счет атрибута text-align:

<p style=»text-align:right;color:darkred;»>Этот параграф выравнен по правому краю. Все строки справа кончаются на границе раздела. А вот слева они начинаются с различным отступом от левого края. </p>

Этот параграф выравнен по правому краю. Все строки справа кончаются на границе раздела. А вот слева они начинаются с различным отступом от левого края.

<p style=»text-align:right;color:darkred;»>Этот параграф выравнен по правому краю. Все строки справа кончаются на вертикальной границе раздела. Все строки слева теперь начинаются также с вертикальной границы раздела. </p>

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

Выравнивать текст можно в любом блочном элементе. Кроме выравнивая по краям блочного элемента текст можно центрировать (<p style=»text-align:center;»>…</p>).

Преобразование шрифта

Преобразование шрифта подразумевает капитализацию слов, перевод всех «больших» и «маленьких» букв в большие, или, наоборот, получение одних строчных.

Рассмотрим несколько примеров:

<p style=»text-transform:uppercase;»>Transfer All Letters into Uppercase</p>

Transfer All Letters into Uppercase

<p style=»text-transform:lowercase;»>Transfer All Letters into Lowercase</p>

Transfer All Letters into Lowercase

<p style=»text-transform:capitalize;»>Capitalization of the string</p>

Capitalization of the string

Английский язык для фраз этих примеров выбран не случайно. Выполнение преобразований зависит от алгоритма преобразования символов. В нелокализованных программах переход от строчных букв к прописным осуществляется путем простого смещения по таблице ASCII, что для русского алфавита не является приемлемым

Еще один вид преобразования шрифта — это подчеркивание, перечеркивание или надчеркивание слов. Выполняется такое преобразование путем применения атрибута text-decoration:

<p style=»text-decoration:line-through;»>Перечеркнем это предложение.</p>

Перечеркнем это предложение.

<p style=»text-decoration:underline;»>Подчеркнем это предложение.</p>

Подчеркнем это предложение.

Подчеркнем это предложение.

Для того, чтобы преобразование работало, нужно соответствующее начертание (подчеркнутые или перечеркнутые начертания букв). Очень сложно найти гарнитуру, в которой было бы начертание с надчеркнутыми буквами. Отмена декора происходит, если использовать в text-decoration значение none.

далее…