Магия текста: веб-типографика
В наше просвещенное время большинство обитающих в сети Интернет, в том или ином виде, ведут свои блоги или сайты. Многие из них даже пишут статьи в печатные и онлайновые издания. И даже если мы вставляем свой развернутый комментарий в текстовую форму на любом сайте – мы создаем авторский текст. Во всех этих случаях надо осознавать, что еще со времен возникновения печатного станка существуют правила, по которым оформляется написанный текст. Эти правила учитывают язык, на котором написан текст, а также некоторые нюансы его содержания (технические термины, ссылки, цитирование и прочие). Если абстрагироваться от лингвистической составляющей этого текста, то в остатке мы получим типографику.
Итак, как гласит определение в Wikipedia, “Типографика - это графическое оформление печатного текста посредством набора и верстки с использованием норм и правил, специфических для данного языка”. К этому определению хочется лишь добавить его частный случай – веб-типографику, - которая по мере взросления Интернета начинает играть все большую и заметную роль, в создании по-настоящему качественного отображения текста, добавляя свою “специфику среды”, но уже на новой и глобальной “электронной бумаге” XXI века.
С другой стороны, признавая важность этих правил для качества восприятия текста, хочется воспользоваться тем же Интернетом, чтобы облегчить себе жизнь и обрести более-менее автоматизированные инструменты по оформлению и подготовке текста, которые избавят нас от необходимости вникать в детали и вручную править мегабайты публикуемых в онлайне текстов.
Поэтому сегодня хотелось бы уравнять интересы редакторов и писателей, комментаторов и блогеров, рассмотрев онлайн-инструменты, необходимые всем, кто так или иначе регулярно работает с текстом в Интернете. Сегодня мы рассмотрим ведущие типографы для русских текстов (преимущественно, но не только), необходимые для облегчения жизни не только закоренелым графоманам от новой цифровой эпохи, но и просто современным и грамотным людям, излагающим свою точку зрения в глобальной сети Интернет.
Типограф студии Артемия Лебедева
http://www.artlebedev.ru/tools/typograf/
Пожалуй, это самый знаменитый типограф Рунета, который еще в 2000 году был создан в легендарной Студии Артемия Лебедева. Просто процитирую описание сервиса, сделанное самим Артемием Лебедевым: “В жизни каждого порядочного веб-мастера наступает момент, когда он всерьез задумывается над экранной типографикой. С одной стороны, ему хочется, чтобы сверстанный текст хорошо смотрелся в окне браузера. (…) С другой стороны, очень не хочется расставлять все эти значки, кавычки и неразрывные пробелы вручную”. Остается лишь добавить, что такой момент в жизни “порядочного веб- мастера” Артемия Лебедева наступил в 2002 году – именно в этом году данный сервис стал публичным и приобрел такой вид, каким его теперь знает почти каждый отечественный веб-мастер.
Его первая версия была написана самим Лебедевым совместно с Александром Петросяном, самая последняя, действующая – переписана с нуля Владимиром Токмаковым. Хочется добавить две важные детали по его реализации. Во-первых, малоизвестно, но данный “Типограф” позволяет проводить пост- обработку текстов после сканирования (OCR), выявляя типичные ошибки их распознавания. Во-вторых, сервис предоставляет просто шикарные возможности по интеграции возможностей “Типографа” в сторонние сервисы через XML, для этого приведены готовые примеры интеграции в сторонние движки, написанные на языках C#, C++, Managed C++, Perl, Perl 6, Python, Parser 3, PHP, Javascript. Кстати говоря, с небольшими доработками, этот же известный типограф доступен и на сайте известного веб-разработчика Евгения Самборского (www.samborsky.com/tools/typograf).
Но первый и самый известный – вовсе не значит автоматически и “самый лучший”, поэтому мы переходим к рассмотрению следующего онлайнового типографа.
Типограф
http://typograf.ru/
Автор и разработчик данного сервиса - Eugene Spearance, проект активно развивается, текущая его версия – 2.0 (хотя идет работа над версией 3.0). Вот как описывает сам автор свой сервис: “Типограф - это удобное средство онлайновой подготовки русского текста к веб-изданию. Он помогает избежать монотонной корректировки, расстановки кавычек, неразрывных пробелов, специальных символов, исправляет некоторые ошибки ввода, проверяет орфографию и так далее. Этот инструмент не является полноценной заменой ручного труда верстальщика, корректора и кодера, но он может сократить этот труд до 95-99%, что весьма удобно”.
Хочу обратить внимание, что по результатам нескольких независимых тестирований это наиболее развитый типограф в Рунете – огромное количество правил и проверок, очень аккуратная работа с текстом, постоянная работа над развитием сервиса – все это делает данный типограф безусловным лидером сегодняшнего обзора.
Что интересно, сам сервис полностью написан на языке Parser 3 от той же Студии Артемия Лебедева, кроме этого, подобно вышеописанному типографу, гибко предоставляет свой сервис любым сторонним сайтам по протоколу XML. Важно отметить, что для получения возможностей для индивидуальных настроек нужно предварительно в нем зарегистрироваться. Из приятных дополнительных мелочей: если “Типограф” Лебедева поддерживает обработку “сырого” сканированного материала, то типограф Евгения поддерживает правила и теги оформления постов на популярный коллективный ресурс Хабрахабр.
Веб-типограф Студии Муравьева
http://emuravjev.ru/works/tg/
Данный типограф написан Артуром Русаковым. Текущая версия - 2.0.0, которая в значительной степени отличается от устройства подобных типографов. Для реализации новых алгоритмических подходов к типографированию студией была разработана и введена новая терминология. Например, Тоф (от слова “типограф”) - самостоятельная единица типографирования текста. Всего было выделено 6 общих правил для формирования 6 разновидностей тофов, вот они:
1. Dash — сюда включена вся работа по правильной расстановке дефисов и тире;
2. Number — набор операций с числами и над ними;
3. Punctmark — работа над знаками препинания: точки, запятые, восклицательный и вопросительный знаки и т. п.;
4. Quote — кавычкер;
5. Space — правильная расстановка пробельных знаков;
6. Etc — все, что не удалось разместить в предыдущих тофах, попадает сюда (например, преобразование (tm) в код торговой марки).
Очень интересная и качественная реализация типографа, и что особенно приятно, вместе с онлайн-версией также свободно предоставляется и исходный код этого типографа (PHP5), а также продуманная документация по его устройству и настройке.
Типограф студии RMCreative
http://rmcreative.ru/typograph/
Второй по качеству и широте охвата темы типографики, согласно результатам тестирования – типограф от студии RMCreative. Написан совместно Оранским Максимом и Макаровым Александром (aka Sam Dark). Так же как и у предыдущего примера типографа, здесь доступен исходный код проекта (PHP5), кроме того, имеется набор уже готовых текстов для всестороннего тестирования его работы.
Free Typographer
http://www.typographer.ru/
Данная реализация интересна тем, что кроме уже привычной онлайн-версии сервиса, предлагается и оффлайн-средство для автоматизированной расстановки символов типографики в HTML-коде, генерируемом скриптами на языках Perl, PHP, Parser, Python и VBScript, а также в результате работы PHP-Nuke. Оффлайн-версия сервиса выполнена в виде независимого десктопного приложения, которое позволяет в оффлайн-режиме готовить к публикации большие порции текста. Что особенно приятно, для этого приложения, написанного на C#, также предоставляется и полный исходный код. Этот типограф особенно хорошо подходит для web-программистов, для коих он в первую очередь и создавался.
Типограф
http://sharky.vitos.ru/store/typo
Еще один типограф, главное отличие которого от других – очень простой и ясный интерфейс управления процессом преобразования текста, полностью понятный даже для непосвященных. Вместо огромного набора настроек этот типограф предлагает список традиций, характерных для типографики пяти ведущих стран (и России в том числе), поэтому вам остается лишь выбрать страну-назначение, а сервис уже сам применит всю тьму настроек, характерную именно для данной национальной традиции. Если вдруг и этот сервис покажется вам сложным, рекомендую воспользоваться jevix.ru или сервисом www.typo.readysolutions.ru - проще их уже не бывает.
Devanagari
http://www.erlang.com.ru/web/tech/devanagari/descr
Devanagari 3 - замечательный типограф Кирилла Панфилова, который работает подобно другим известным онлайн-типографам, с той лишь разницей, что «Деванагари» можно скачать и использовать без доступа к Интернету, в виде обычной HTML-страницы с необходимым JavaScript внутри (при этом автор, видимо, в шутку, в списке необходимых системных требований заявляет для этой странички как минимум 5 Гб свободного места на винчестере, когда вы ее скачаете). Имеется множество настроек, кроме того, есть возможность прозрачной интеграции типографа в свою собственную CMS, с возможностью стилизации и подключения внешнего CSS-файла.
Множество других похожих сервисов можно найти в развернутом списке тестирования типографических сервисов – страница “Публичная порка онлайн- типографов” (www.typograf.ru/flog/).
Но кроме этого, далее хотелось бы отметить важные разновидности типографических сервисов, которые остались за кадром как этого обзора, так и вышеприведенного тестирования.
Типографические плагины
Во-первых, нужно хотя бы вскользь упомянуть о существовании довольно удобных типографов, выполненных в виде плагинов к популярным браузерам, как пример, “Типограф для Firefox” (addons.mozilla.org/ru/firefox/addon/typograf/) и IE Fly (at.webcode.ru/fly).
Во-вторых, отметим наличие уже готовых плагинов-типогрофов к наиболее популярным онлайновым WYSIWYG-редакторам для самых различных CMS. Так, для ведущего редактора TinyMCE существует очень мощный типограф-плагин (habrahabr.ru/blogs/typography/67687/), есть и другой независимый плагин- типограф (drupaldance.com/russian-typograf-for-tinyMCE). Кроме этого, написан не менее сильный плагин и для известного FCKEditor
(click1.ru/book/tipograf-plagin-k-redaktoru-fck), который позволяет подгружать и интегрировать в онлайн-редактор сервис сразу с четырех ведущих, рассмотренных нами выше, типографических онлайн-служб. Что касается такого суперпопулярного блогового движка, как WordPress, то для него доступны в виде плагинов как облегченная версия типогрофа с минимальной функциональностью, так и полная версия (iskariot.ru/wordpress/typo/).
Продвинутые визуальные типографы
«Реформатор»
http://www.artlebedev.ru/tools/reformator
Еще один популярный веб-инструмент из арсенала Студии Артемия Лебедева. Приведем цитату из описания сервиса: “Каждый порядочный веб-мастер или кодер, размещая контент на сайте, оформляет его аккуратно. Если текст копируется из «Ворда» или браузера, приходится вручную убирать лишнее форматирование. «Реформатор» заменяет ручной труд, очищая контент от ненужных тегов и атрибутов и формируя код в соответствии со стандартом XHTML. Кроме того, «Реформатор» расставляет в тексте типографику (автоматически определяя язык) и дает возможность создания сложных сочетаний тегов и классов. «Реформатор» не является WYSIWYG-редактором в привычном значении этого термина - он оформляет контент, используя CSS-классы с поддержкой их на сайте или с последующей трансформацией (например, в XSLT).”
Если не обращать внимания на однотипное гипнотическое обращение (“Каждый порядочный веб-мастер должен… ”), сопровождающее описание почти каждого инструмента Студии Лебедева, то мы видим, что это еще один полезный и своеобразный онлайн-редактор для вставки и подготовки публикации в Интернете текстов, с мощной поддержкой типографики. Сервис спроектирован так, что его можно использовать как на стороннем сайте, так и локально, скачав его код на свой компьютер. Следует также обратить внимание, что лицензия на использование «Реформатора» для компаний, профессионально занимающихся веб-разработкой, стоит 30 тысяч росс. рублей. Для всех остальных веб-мастеров, вне зависимости от степени их “порядочности” - он бесплатен.
Typograph
http://lamb.cc/typograph/
В заключение обзора еще один продвинутый и очень удобный, но уже зарубежный, визуальный типограф, помогающий быстро “на глаз” подобрать стили странички по какой-нибудь модной системе. Выбираются соотношения размеров заголовков, интервалы строк, ширина страницы. Конечно же, при этом выборе учитывается правило золотого сечения и прочие важные закономерности человеческого восприятия. После визуального подбора нужного сочетания пропорций и размеров – на выходе получаем готовый CSS.
Игорь Савчук internetno.net
Итак, как гласит определение в Wikipedia, “Типографика - это графическое оформление печатного текста посредством набора и верстки с использованием норм и правил, специфических для данного языка”. К этому определению хочется лишь добавить его частный случай – веб-типографику, - которая по мере взросления Интернета начинает играть все большую и заметную роль, в создании по-настоящему качественного отображения текста, добавляя свою “специфику среды”, но уже на новой и глобальной “электронной бумаге” XXI века.
С другой стороны, признавая важность этих правил для качества восприятия текста, хочется воспользоваться тем же Интернетом, чтобы облегчить себе жизнь и обрести более-менее автоматизированные инструменты по оформлению и подготовке текста, которые избавят нас от необходимости вникать в детали и вручную править мегабайты публикуемых в онлайне текстов.
Поэтому сегодня хотелось бы уравнять интересы редакторов и писателей, комментаторов и блогеров, рассмотрев онлайн-инструменты, необходимые всем, кто так или иначе регулярно работает с текстом в Интернете. Сегодня мы рассмотрим ведущие типографы для русских текстов (преимущественно, но не только), необходимые для облегчения жизни не только закоренелым графоманам от новой цифровой эпохи, но и просто современным и грамотным людям, излагающим свою точку зрения в глобальной сети Интернет.
Типограф студии Артемия Лебедева
http://www.artlebedev.ru/tools/typograf/
Пожалуй, это самый знаменитый типограф Рунета, который еще в 2000 году был создан в легендарной Студии Артемия Лебедева. Просто процитирую описание сервиса, сделанное самим Артемием Лебедевым: “В жизни каждого порядочного веб-мастера наступает момент, когда он всерьез задумывается над экранной типографикой. С одной стороны, ему хочется, чтобы сверстанный текст хорошо смотрелся в окне браузера. (…) С другой стороны, очень не хочется расставлять все эти значки, кавычки и неразрывные пробелы вручную”. Остается лишь добавить, что такой момент в жизни “порядочного веб- мастера” Артемия Лебедева наступил в 2002 году – именно в этом году данный сервис стал публичным и приобрел такой вид, каким его теперь знает почти каждый отечественный веб-мастер.
Его первая версия была написана самим Лебедевым совместно с Александром Петросяном, самая последняя, действующая – переписана с нуля Владимиром Токмаковым. Хочется добавить две важные детали по его реализации. Во-первых, малоизвестно, но данный “Типограф” позволяет проводить пост- обработку текстов после сканирования (OCR), выявляя типичные ошибки их распознавания. Во-вторых, сервис предоставляет просто шикарные возможности по интеграции возможностей “Типографа” в сторонние сервисы через XML, для этого приведены готовые примеры интеграции в сторонние движки, написанные на языках C#, C++, Managed C++, Perl, Perl 6, Python, Parser 3, PHP, Javascript. Кстати говоря, с небольшими доработками, этот же известный типограф доступен и на сайте известного веб-разработчика Евгения Самборского (www.samborsky.com/tools/typograf).
Но первый и самый известный – вовсе не значит автоматически и “самый лучший”, поэтому мы переходим к рассмотрению следующего онлайнового типографа.
Типограф
http://typograf.ru/
Автор и разработчик данного сервиса - Eugene Spearance, проект активно развивается, текущая его версия – 2.0 (хотя идет работа над версией 3.0). Вот как описывает сам автор свой сервис: “Типограф - это удобное средство онлайновой подготовки русского текста к веб-изданию. Он помогает избежать монотонной корректировки, расстановки кавычек, неразрывных пробелов, специальных символов, исправляет некоторые ошибки ввода, проверяет орфографию и так далее. Этот инструмент не является полноценной заменой ручного труда верстальщика, корректора и кодера, но он может сократить этот труд до 95-99%, что весьма удобно”.
Хочу обратить внимание, что по результатам нескольких независимых тестирований это наиболее развитый типограф в Рунете – огромное количество правил и проверок, очень аккуратная работа с текстом, постоянная работа над развитием сервиса – все это делает данный типограф безусловным лидером сегодняшнего обзора.
Что интересно, сам сервис полностью написан на языке Parser 3 от той же Студии Артемия Лебедева, кроме этого, подобно вышеописанному типографу, гибко предоставляет свой сервис любым сторонним сайтам по протоколу XML. Важно отметить, что для получения возможностей для индивидуальных настроек нужно предварительно в нем зарегистрироваться. Из приятных дополнительных мелочей: если “Типограф” Лебедева поддерживает обработку “сырого” сканированного материала, то типограф Евгения поддерживает правила и теги оформления постов на популярный коллективный ресурс Хабрахабр.
Веб-типограф Студии Муравьева
http://emuravjev.ru/works/tg/
1. Dash — сюда включена вся работа по правильной расстановке дефисов и тире;
2. Number — набор операций с числами и над ними;
3. Punctmark — работа над знаками препинания: точки, запятые, восклицательный и вопросительный знаки и т. п.;
4. Quote — кавычкер;
5. Space — правильная расстановка пробельных знаков;
6. Etc — все, что не удалось разместить в предыдущих тофах, попадает сюда (например, преобразование (tm) в код торговой марки).
Очень интересная и качественная реализация типографа, и что особенно приятно, вместе с онлайн-версией также свободно предоставляется и исходный код этого типографа (PHP5), а также продуманная документация по его устройству и настройке.
Типограф студии RMCreative
http://rmcreative.ru/typograph/
Второй по качеству и широте охвата темы типографики, согласно результатам тестирования – типограф от студии RMCreative. Написан совместно Оранским Максимом и Макаровым Александром (aka Sam Dark). Так же как и у предыдущего примера типографа, здесь доступен исходный код проекта (PHP5), кроме того, имеется набор уже готовых текстов для всестороннего тестирования его работы.
Free Typographer
http://www.typographer.ru/
Данная реализация интересна тем, что кроме уже привычной онлайн-версии сервиса, предлагается и оффлайн-средство для автоматизированной расстановки символов типографики в HTML-коде, генерируемом скриптами на языках Perl, PHP, Parser, Python и VBScript, а также в результате работы PHP-Nuke. Оффлайн-версия сервиса выполнена в виде независимого десктопного приложения, которое позволяет в оффлайн-режиме готовить к публикации большие порции текста. Что особенно приятно, для этого приложения, написанного на C#, также предоставляется и полный исходный код. Этот типограф особенно хорошо подходит для web-программистов, для коих он в первую очередь и создавался.
Типограф
http://sharky.vitos.ru/store/typo
Еще один типограф, главное отличие которого от других – очень простой и ясный интерфейс управления процессом преобразования текста, полностью понятный даже для непосвященных. Вместо огромного набора настроек этот типограф предлагает список традиций, характерных для типографики пяти ведущих стран (и России в том числе), поэтому вам остается лишь выбрать страну-назначение, а сервис уже сам применит всю тьму настроек, характерную именно для данной национальной традиции. Если вдруг и этот сервис покажется вам сложным, рекомендую воспользоваться jevix.ru или сервисом www.typo.readysolutions.ru - проще их уже не бывает.
Devanagari
http://www.erlang.com.ru/web/tech/devanagari/descr
Множество других похожих сервисов можно найти в развернутом списке тестирования типографических сервисов – страница “Публичная порка онлайн- типографов” (www.typograf.ru/flog/).
Но кроме этого, далее хотелось бы отметить важные разновидности типографических сервисов, которые остались за кадром как этого обзора, так и вышеприведенного тестирования.
Типографические плагины
Во-первых, нужно хотя бы вскользь упомянуть о существовании довольно удобных типографов, выполненных в виде плагинов к популярным браузерам, как пример, “Типограф для Firefox” (addons.mozilla.org/ru/firefox/addon/typograf/) и IE Fly (at.webcode.ru/fly).
Во-вторых, отметим наличие уже готовых плагинов-типогрофов к наиболее популярным онлайновым WYSIWYG-редакторам для самых различных CMS. Так, для ведущего редактора TinyMCE существует очень мощный типограф-плагин (habrahabr.ru/blogs/typography/67687/), есть и другой независимый плагин- типограф (drupaldance.com/russian-typograf-for-tinyMCE). Кроме этого, написан не менее сильный плагин и для известного FCKEditor
(click1.ru/book/tipograf-plagin-k-redaktoru-fck), который позволяет подгружать и интегрировать в онлайн-редактор сервис сразу с четырех ведущих, рассмотренных нами выше, типографических онлайн-служб. Что касается такого суперпопулярного блогового движка, как WordPress, то для него доступны в виде плагинов как облегченная версия типогрофа с минимальной функциональностью, так и полная версия (iskariot.ru/wordpress/typo/).
Продвинутые визуальные типографы
«Реформатор»
http://www.artlebedev.ru/tools/reformator
Если не обращать внимания на однотипное гипнотическое обращение (“Каждый порядочный веб-мастер должен… ”), сопровождающее описание почти каждого инструмента Студии Лебедева, то мы видим, что это еще один полезный и своеобразный онлайн-редактор для вставки и подготовки публикации в Интернете текстов, с мощной поддержкой типографики. Сервис спроектирован так, что его можно использовать как на стороннем сайте, так и локально, скачав его код на свой компьютер. Следует также обратить внимание, что лицензия на использование «Реформатора» для компаний, профессионально занимающихся веб-разработкой, стоит 30 тысяч росс. рублей. Для всех остальных веб-мастеров, вне зависимости от степени их “порядочности” - он бесплатен.
Typograph
http://lamb.cc/typograph/
В заключение обзора еще один продвинутый и очень удобный, но уже зарубежный, визуальный типограф, помогающий быстро “на глаз” подобрать стили странички по какой-нибудь модной системе. Выбираются соотношения размеров заголовков, интервалы строк, ширина страницы. Конечно же, при этом выборе учитывается правило золотого сечения и прочие важные закономерности человеческого восприятия. После визуального подбора нужного сочетания пропорций и размеров – на выходе получаем готовый CSS.
Игорь Савчук internetno.net
Компьютерная газета. Статья была опубликована в номере 23 за 2011 год в рубрике интернет
