Типограф

«Типограф» – специально разработанный инструмент для контент-менеджеров и редакторов сайтов. Он помогает подготовить текст к web-изданию.

«Типографика» – это искусство оформления печатного текста посредством набора и вёрстки. Типографика, с одной стороны, представляет собой одну из отраслей графического дизайна, с другой – свод строгих правил, определяющих использование шрифтов для создания наиболее понятного для восприятия читателя текста. Задачей типографики является определение параметров для последующих процессов набора, вёрстки и допечатной подготовки.

Для начала вам нужно создать форматированный текст в Microsoft Office, Open Office, Google Docs или любом аналогичном редакторе. Это может быть текстовый документ Word или электронная таблица Excel.

Эти документы уже как-то стилизованы: размер текста, цвет, нумерованные / маркированные списки, таблицы и прочее. Вам нужно просто выделить нужный кусок текста из документа, скопировать его в буфер обмена и вставить в «Типограф» в поле с названием «Вставьте текст из Word». В результате выбранный кусок текста преобразуется в HTML-код.

После вставки текста выведется список размеров шрифта, которые использовались в документе. Вы можете указать, какой заголовок (H1-H6) использовать для данного размера при построении HTML. Размеры шрифта, определённые при рендеринге текста, скорее всего будут отличаться от тех, что использовались при форматировании. Это связано с тем, что текстовые редакторы типа «Word» используют для задания размера текста пункты (pt), а браузеры – пиксели (px). 1pt не равен 1px, он немного больше, поэтому размеры шрифта при парсинге документа также будут немного больше.

По умолчанию создаётся чистый HTML (без добавления стилей через атрибут «style»). Если вы хотите перенести в HTML цвета оформления текста и фона, выравнивание текста и т.д., то выберите нужные параметры из списка найденных.

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

Для вашего удобства в «Типограф» присутствует функционал для подгрузки CSS-файла с вашего сайта, в котором прописаны стили для стандартных тегов, используемых при публикации текстовых страниц. После загрузки CSS вы увидите, как будет выглядеть опубликованный HTML-код на странице вашего сайта.

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