текст

Курс «Текст в CSS»

Влад Мержевич

Следующий учебный курс от Джереми Томаса для тех, кто хочет узнать чуть больше о CSS. Посвящён свойствам шрифта и текста. Как обычно, каждый урок сопровождается интерактивными заданиями для закрепления материала, в конце проверочный тест.

Работа с типографикой

Влад Мержевич

Новая глава в книге Уроки по HTML и CSS от Шэя Хоу. На этот раз посвящена теме типографики, а это подключение своих шрифтов, управление видом текста и букв. Читать.

Направление текста

Влад Мержевич

Мы привыкли читать тексты слева направо, для нас это кажется привычным и естественным. В то же время есть языки, где писать надо справа налево, например, в арабском письме. Кроме того изредка возникают задачи, когда текст надо повернуть, отразить или ещё как-то представить непривычным образом. Гугл так пошутил на первое апреля и показал оборотную сторону своего поисковика (рис. 1).

Google. Вид сзади

Рис. 1. Google. Вид сзади

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

Переносы слов

Влад Мержевич

В отличие от текста в полиграфии, на веб-странице редко применяются переносы, поскольку мы не привязаны жёстко к формату бумаги. Сайты могут смотреть на разных мониторах, с разным разрешением, в разных операционных системах и браузерах. Всё это порождает такое сочетание комбинаций, что предугадать, как будет выглядеть конечный текст для пользователя невозможно. Из-за этого обычно текст выравнивается по левому краю, а переносы происходят словами целиком. Но всё же переносы слов в некоторых случаях нужны, например, когда применяются длинные химические или медицинские термины, в узких колонках заданной ширины, ради эстетики. В HTML и CSS ручных или автоматических способов добавления переносов не так уж и много, так что перечислю все.

Выворотка

Сделайте текст, как показано на рис. 1. В качестве шрифта укажите Impact.

Рис. 1

Обрезаем длинную стро...

Влад Мержевич

Несмотря на то, что мониторы больших диагоналей становятся всё доступнее, а их разрешение постоянно растёт, иногда возникает задача в ограниченном пространстве уместить много текста. Например, это может понадобиться для мобильной версии сайта или для интерфейса, в котором важно число строк. В подобных случаях имеет смысл обрезать длинные строки текста, оставив только начало предложения. Так мы приведём интерфейс к компактному виду и сократим объём выводимой информации. Само обрезание строк можно делать на стороне сервера с помощью того же PHP, но через CSS это проще, к тому же всегда можно показать текст целиком, например, при наведении на него курсора мыши. Далее рассмотрим методы, как текст порезать воображаемыми ножницами.

Сглаживание шрифтов в Safari

Влад Мержевич

У разработчика сайта не так и много средств по изменению вида шрифта, в частности вообще нет способа управления сглаживанием текста. Кто не в курсе, это способ сделать буковки более гладкими за счет добавления пикселов разных цветов. Если увеличить текст в Windows, то это становится хорошо заметно (рис. 1).

Изображения в тексте

Влад Мержевич

Иллюстрации всегда использовались для наглядного донесения до читателя нужной информации, для оформления страниц сайта и включения в текст различных графиков, диаграмм и схем. В общем, область применения изображений на сайтах достаточно велика. При этом используется несколько способов добавления рисунков в текст веб-страницы, которые и рассмотрены далее.

Как сделать, чтобы в текстовом поле заранее выводился определенный текст?

Создание однострочного текстового поля осуществляется с помощью тега <input>. Достаточно воспользоваться атрибутом value данного тега и присвоить ему в качестве значения строку. После чего заданный текст появится в поле автоматически (пример 1).

Как заменить текст изображением?

Ограничения, накладываемые на HTML, не позволяют задавать для текста любой шрифт установленный в системе, поскольку не гарантируется, что такой же шрифт имеется и у пользователя сайта. Поэтому вычурный текст обычно делают в графическом редакторе и вставляют на веб-страницу в виде картинки. Этим обеспечивается единый вид для всех пользователей. Однако и этот вариант имеет недостатки. Во-первых, пользователь может отключить показ рисунков в браузере. Во-вторых, поисковые системы лучше индексируют текст в заголовках и тем самым повышают рейтинг сайта, чем текст в атрибуте alt. Наилучшим методом будет сочетание заголовка с изображением, при этом текст прячется с помощью стилей, а посетителю показывается фоновая картинка.

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

Как добавить подчеркивание к заголовку?

Подчеркивание для блочных элементов вроде тега <h1> можно проводить двояко. Например, линию под текстом устанавливать на всю ширину блока, независимо от объема текста. А также подчеркивание делать только у текста. Далее рассмотрим оба варианта.

Как выровнять текст по центру?

Используйте стилевое свойство text-align со значением center, добавляя его к абзацу (селектору P) или к определенному слою (пример 1).

Как выровнять текст одновременно по правому и левому краю?

Для выравнивания текста в блоке, например абзаце, применяется стилевое свойство text-align. Его значение justify и устанавливает выравнивание текста по ширине, т.е. сразу по левому и правому краю текстового блока (пример 1).

Как изменить расстояние между строками текста?

Для управления межстрочным расстоянием (оно еще называется интерлиньяжем) применяется стилевое свойство line-height. В качестве значения обычно указывается число, которое определяет межстрочный интервал. Например, line-height2 устанавливает двойной интервал, а line-height1.5 — полуторный (пример 1).

Страницы