Типограф

«Типограф» специально разработанный инструмент для публикаторов (контент-менеджеров) сайтов. Он помогает подготовить текст к 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 должен быть оформлен правильно. Это означает что в нем должны быть стилизованы все стандартные теги, которые участвуют в построении текстового контента на странице, без привязки к классам. Т.е. в качестве селектора на тег, должно быть указано только имя тега. К сожалению данной рекомендацией пренебрегают многие начинающие верстальщики.