Типографика

индекс
321,53

Новая версия веб-типографа Студии Муравьёва

Лицо нашего типографа
Не так давно на Хабре уже заходила речь о нашем новом типографе (см. habrahabr.ru/blogs/typography/66710/). Речь зашла раньше, чем я успел написать этот топик. Нам конечно же очень приятно, что силы, время и душу, которые мы вложили в этот бесплатный продукт кому-то пригодились. Наши первые версии писались в 2007 для форумных систем (о них вы сможете почитать на нашем сайте в разделе типографа, даже скачать можно будет). В конечном итоге мы решили позиционировать его как отдельный независимый продукт, и сейчас я хочу немного рассказать вам о нем.

Пояснение


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

Конкретизируя


Сейчас он включает в себя множество умных правил, которые время от времени улучшаются и становятся более продуманными. Типограф обрабатывает тексты не только по классическим законам (неразрывные пробелы, правильные кавычки, свисающая пунктуация и др.), но и по взятым канонам из «Справочника издателя и автора» Мильчина А. Э. Любители типографики должны это оценить.

Версия 2.0.0 в значительной степени отличается от предыдущих. В ней реализован иной механизм типографирования текста, чем использовался нами раннее. В связи с этим была введена новая терминология. Тоф (от «типограф») — самостоятельная единица типографирования текста. Нами было разработано шесть тофов:
  1. Dash — сюда включена вся работа по правильной расстановке дефисов и тире;
  2. Number — набор операций с числами и над ними;
  3. Punctmark — работа над знаками препинания: точки, запятые, восклицательный и вопросительный знаки, и т. п.;
  4. Quote — кавычкер;
  5. Space — правильная расстановка пробельных знаков;
  6. Etc — все, что не удалось разместить в предыдущих тофах, попадает сюда (например, преобразование (tm) в код торговой марки).

Идея деления всех операций и правил возникла, во-первых, при исследовании раннее написанных нами правил типографирования — все они выполняют операции над довольно небольшой группой объектов. Во-вторых, сам процесс типографирования усложняется и возможностей механизма правил, который мы использовали раннее, не хватает (раннее все правила у нас представляли несколько файлов с регулярными выражениями).

Было бы здорово


Компаниям, которые используют наш инструмент в своих продуктах, предлагаем написать письмо по адресу mail@emuravjev.ru с целью создания списка авторитетных разработчиков в профессиональной среде. Тем самым мы будем стараться показывать правильный пример дизайнерской общественности и пропагандировать четкие законы при создании сайта. Мы надеемся на поддержку с вашей стороны.

Лицензия


Частенько у некоторых людей возникали вопросы касательно лицензии. Хочу развеять мифы: типограф можно использовать в любых целях, кроме коммерческих, допустим, продавать его или создавать собственные сервисы, такие как типограф.ру и ему подобные. Его использование в коммерческих системах управления сайтом только приветствуются, и мы будем рады получить от разработчиков письмо с информацией о системе.

Скачать и почитать


Скачать сам типограф и почитать о его возможностях можно на странице emuravjev.ru/works/tg/.
Если я не ошибаюсь (а я могу ошибаться) мы первые, кто написали для типографа полноценную документацию для разработчиков по его использованию (мелочь, а приятно). Надеемся, что она поможет при работе.

Финальная версия


Нам уже пришло несколько писем с небольшими косяками, некоторые мы и сами заметили — все они незначительны. Скоро будет RC2, а потом финал. Если после этого поста карма позволит, я буду публиковать здесь новости о наших продуктах. Скоро будет новый продукт связанный с типографикой.

И вообще, мы всегда идем на встречу и готовы ответить на все вопросы на почте (на сайте ее не сложно найти).
+54
13 августа 2009, 18:45
60

комментарии (60)

0
YoungSkipper #
Ошибка у вас там — загружаем страницу, вставляем текст из буфера обмена — вуаля кнопка не активна. Поправте, я думаю такой сценарий не редкий.
+3
emuravjev #
После вставки из буфера, нужно сделать какое-нибудь действие в форме, допустим, нажмите на пробел. Исправим это в ближайшее время.
НЛО прилетело и опубликовало эту надпись здесь
0
emuravjev #
А вроде как уже исправили :) Спасибо.
0
Jimmy #
Если не ошибаюсь у вас опечатка в тексте:
«Висячая пунктуация
Любой самоуважающий типограф должен уметь свешивать пунктуацию по левому (открывающуюся кавычки и скобку) и правому (точка, запята и дефис) краю „

“, зпята» — выпала буква «я»

На странице: emuravjev.ru/works/tg/

Спасибо за типограф — буду использовать.
–13
fr0mus #
О чем топик?
+2
DrHolerik #
Пользуюсь вашим типографом, доволен.
Спасибо за обзор и превью новой версии.
Очень приятно видеть авторов на Хабре.
+2
vovkasolovev #
Есть над чем работать:
Не узнает диапазоны значений (напр. 2005-2009)
Не узнает списки.
Висячую пунктуацию надо уметь отключать, и выбирать цифровыми или буквенными кодами вставлять символы.
+2
sM1Le #
1. Работа с интервалами годов частично реализована. Сейчас механизм таков, что перед датами должен идти предлог или слово, которое в максимальной степени будет подтверждать то, что это года, а не матический пример. Простой пример — «Начиная с 1981-1982 мы...» или «В 2006-2007 где-то под Москвой...». Конечно, это не самый лучший вариант, но тем не менее…

2. Возможно, будет реализовано в будущих версиях. На мой взгляд, поддержка списков довольно сомнительная функция, так что пока думаем…

3. Возможность отключения висячей пунктуации в библиотеке есть, как и любого другого правила (об этом есть раздел в документации) :-) Просто в онлайн версии пока не реализована возможность настраивать все это.

В любом случае, спасибо за замечания =)
0
rodger #
А как быть со случаями «отрежьте кусок толщиной 10—15 мм»? Там предлога нет.
–11
fr0mus #
Аааа уберите топик с главной!
–3
kex #
omg, очередной типограф от очередной студии ***ва.
НЛО прилетело и опубликовало эту надпись здесь
0
Nikolaich #
терминалогия — пишется через О (на странице с раритетными версиями)
–1
qik #
Это наверно от слова «терминал», а не от греческого слова logos.

Хотел минус поставить и промахнулся, извини.
0
Aurum #
Можно сделать так, чтобы при обработке текста отступы не убирались? Скажем я написал много текста, разбив его на абзацы используя ваш типограф. И когда захочу редактировать этот текст, мне придется выводить его без тегов(применяя strip_tags) и в этом случае весь текст будет выводится целиком, т.к все отступы типограф удалил.
0
Aurum #
А в целом, спасибо! Буду использовать у себя.
+3
sM1Le #
Отступы — это в смысле переносы строк (\n)?

Если речь идет о использование библиотеки, там есть статический метод по удалению HTML-тегов. Его отличие в том, что все теги принудительного переноса строки (br) будут заменены на \n, пара закрывающий и открывающий тег параграфа (/p p) будут заменены на два \n.
Этот метод нужно вызывать самостоятельно — более подробно в разделе 4.3. документации (PDF тут).

Или я неправильно понял вопрос? =)
0
Aurum #
Да, видимо. Спасибо :-)
0
qik #
С Бирмановской cms`кой бы ее подружить. Цены бы не было. Ну или на хуйдо конец с WP.
+1
emuravjev #
Подружить с WP мы планируем и не только с ним.
0
qik #
Отлично. Ждем новостей.
0
emuravjev #
Насчет Бирмановской cms, то у него там лицензия очень жесткая :) В любом случае при свободном времени перечитаем ее и попробуем найти компромисс. Про наш типограф Илья в курсе.
0
qik #
Очень хорошо, но я думаю еще будет проблема с кодировками. Он так и не перешел на ютф-8, а у вас как раз она.
+1
sM1Le #
Текст можно привести к нужной кодирове с помощью iconv(). Если по каким-то причинам расширение отсутствует, можно воспользоваться классом "Convert character set" =)

В целом, проблема с различными кодировками решаема :-) Возможные её решение мы позже включим в документацию или опубликуем на сайте.
+1
qik #
А чем ваш типограф лучше например уже тысячу лет хорошо работающего лебедевского типографа?
+1
emuravjev #
Используя, типограф Лебедева, вы ездите на машине с проводом от электрической розетке, а с нашим типографом — на бензине. И нас код открытый.
–1
qik #
На счет проводов и бензин я не уловил, простите. Да у них нет открытого кода, но это не всегда проблема, это же ОС, мне пофик как он работает, главное чтобы хорошо выполнял свою функцию.
+7
sM1Le #
Это один из самых каверзных вопросов, поскольку ни один нормальный человек никогда не признает, что его продукт хуже продукта конкурента :-) Постараюсь ответить объективно на него.

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

Следующий по важности критерий, как я считаю — это удобство настройки, интеграции в проект. Этому мы уделяем очень много внимания.
Любое правило типографирования в типографе можно отключить, да и не только правило — а целую группу. Мы объединили все правила в 6 групп — эти группы называются тофами. В каждый тоф включены те правила, которые удовлетворяют назначению тофа: например, в тоф с именем «space» («пробел») включены все правила, которые так или иначе связаны с расстановкой различных пробелов, в «dash» — все те, которые работают с «черточками». Помимо этого, каждый разработчик может расширить любой тоф или изменить работу правила, которое в него включено.
Я отдаю себе отчет в том, что вряд ли сейчас все разработчики кинутся дописывать свои правила, поскольку это довольно кропотливый процесс. Для упрощения написания собственных правил типографирования я сейчас рассматриваю вариант конструктора, который будет значительно проще использования регулярных выражений напрямую. Это опять же делается для того, чтобы сторонним разработчикам было проще работать с библиотекой.
Так же имеется документация, где все разобрано и с примерами. К тому же, как отметил Евгений, здесь Вы скачиваете библиотеку и получаете открытый код, а в случае веб-сервисов (например, типографа Лебедева) — код не доступен и Вы постоянно обращаетесь к стороннему серверу.

Последний критерий — это фидбэк и устранение ошибок. Фидбэк у нас хороший, ошибки устраняются :-)
0
mikeAbasov #
Спасибо за нормальное объяснение (а не про бензин и провода). Теперь я действительно заинтересован и попробую в скором времени.
0
apkawa #
Не нашел лицензию. Он совместим с GPL проектами?
Идея хорошая, жалко что нет реализации на python и прочих языках.
+1
emuravjev #
С лицензией вы сталкиваетесь, когда скачиваете типограф с нашего сайта, вы даже нажимаете кнопку соглашаясь с ней. О лицензии я написал в топике, если ваши цели не противоречат названными — мы только за.
0
Dieselboy #
Скажите, а в чём фишка, если я ставлю длинное тире по раскладке Бирмана (которое вот это «—»), то почему он мне меняет его на обычный дефис?
+2
sM1Le #
Если описать процесс типографирования в двух словах, то он заключается в следующем:
1. Перед непосредственным применением правил типографики (расстановки тире, неразрывных пробелов, «ёлочек») весь текст очищается от специальных символов (которые могут быть скопированы из, например, Microsoft Word или вставлены как раз типографской раскладкой) и HTML-кодов. Это этап подготовки текста. Он необходим для устранения ошибок, которые могли допустить сторонние типографы, да и в целом чтобы немного упростить написание самих правил типографирования (в регулярных выражениях необходимо будет учитывать только дефис, а не все его возможные варианты).
2. Затем, осуществляется сам процесс типографирования текста.

Скорее всего, Вы вставели в форму с помощью типографской раскладки Бирмана длинное тире (без текста). Типограф заменил его на дефис (процесс очистки текста), а затем попробывал типографировать. Т.к. перед длинным тире или после него нет текста, ни одно из правил не подошло :-)

Попробуйте вставить, например, "— Кто здесь?" (без кавычек или с ними) — уверен, результат будет правильный ;-)
0
Dieselboy #
Но, согласитесь, это недоработка и её надо бы исправить, потому что фраза была такая: «Майонез и маргарин — всем сырам сыр.», — всё стоит правильно, кроме пробелов. Я, например, пользуюсь типографом только для расстановки пробелов, потому что кавычки, тире и остальные знаки я выставляю сам по мере потребности, а тут типограф гробит все мои старания с тире и знаком минуса, что, собственно, не радует.
Извините, что так критикую, но это серьёзная недоработка. Ну а так типограф хороший такой, для больших текстов хорошо подходит :).
+1
sM1Le #
Ну это не совсем ошибка :-)

Для подготовки текста к типографированию (и не только) у нас есть целый отдельный класс, содержащий в себе различные методы. Среди них есть и тот, который как раз заменяет все символы и HTML-коды на те, которые можно ввести со стандартной клавиатуры (например, —, —, минус и прочие черточки на дефис -, всевозможные кавычки на ", и т.п.). Сейчас этот метод вызывается автоматически перед типографированием.
Его можно вынести и позволять разработчикам вызывать в ручную, если это необходимо. Просто у меня закрадывается подозрение, что многие этого делать не будут и потом будут ругаться на то, что типограф где-то что-то не так расставил или не расставил =(

У меня есть мысля на этот счет — в нашем типографе предусмотрено два варианта инициализации: быстрый и обычный. Думаю, в будущих версиях очистка текста от кодов и символов будет только при использование быстрой инициализации, при обычной же необходимо будет этот процесс выполнять в ручную.

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

P.S.: но в онлайн версии все останется как есть :-)
0
Dieselboy #
Я не говорю, что это ошибка, я говорю, что это — недоработка слегка намекая на то, что это будет исправлено в дальнейшем ;). В целом — радостно, что можно будет подогнать под себя, это очень радостно.

Ну что, спасибо, желаю успехов :).
+2
pixxxel #
Сделал плагин для tinymce, может кому нужен?
0
Splurov #
Нужен.
+1
pixxxel #
0
qik #
Напишите об этом Евгению.
+2
Spearance #
Вообще Евгений молодец, что выводите свой продукт. Однако, прочитав статью, понял что вы наступаете на те же грабли что и я, но годом раньше :)
То что вы объединили правила в «тофы» – это хорошо, но вы врятли учли пересечения правил. Некоторые из них должны идти в строгом порядке, иначе финальная картина будет грустная. Также есть правила которые пересекаются, т.е. одновременно могут входить как в ТОФ-тире и ТОФ-кавычек. Как я понял вы для этого соорудили ETC, но это не выход.

В подготовке третьей версии своего Типографа я больше времени уделяю статистике. Например, впервые померил прожорливость правил. Выявил те, над которыми стоит поработать. Оптимизировал и снова измерил. В некоторых получил снижение затрат памяти и потребления процессорного времени до 29 раз.

Также сейчас работаю над универсальным тестером, который бы позволил прогонять типограф и выявлять неточности в работе (надоело каждый раз примеры придумывать). Кстати сказать, этим тестером я буду измерять работоспособность Типографов во 2-й порке. Обещаю что в этот раз достанется всем, и моему тоже.

Если хотите помочь своими примерами, велком!
+1
sM1Le #
Да, проблема с очередностью действительно имеет место быть :-(

При разработке еще предыдущих версий я обратил вниманием на это. Данная проблема проявилась в большей степени как раз после введения тофов — многие правила пришлось сделать более универсальными, если так можно сказать (регулярные выражения разбухли, они стали включать различные комбинации того или иного знака). Но отступаться не стали :-)
Я рассматриваю вариант введения приоритетности для правил — трех уровней: 10, 100 и 1000. Все правила с десятичным приоритетом (10, 11, 15, 22, 76 и т.п.) будут выполняться внутри тофа в заданном порядке (если порядок не важен, то приоритет просто 10). Прафила с приоритетом 100 будут типографироваться так же внутри тофа, но четко после всех локальных. Приоритет 1000 будет свидетельствовать о том, что правило должно быть применено после типографирования текста всеми существующими тофами (например, таким правилом является расстановка параграфов или принудительного переноса строк).

Спасибо за отзыв, новой порки ждем ;-)
0
Spearance #
По-моему приоритетность — это тупик! Порка обязательно будет, осталось выкроить время и побороть лень.
0
webbolt #
ну собственно для всеобщей популяризации осталось создать плагин для FCKeditor и TinyMCE (wordpress). И будет всем всеобщее счастье )
0
pixxxel #
Я сделал для магазина Simpla и для Tinymce соответственно:

simp.la/jaretypograph.zip
0
webbolt #
тогда ждем поста как руками прикрутить его к wordpress пока нет плагина. Я чет никак не рассмотрю в каком файле там инициализация TinyMCE идет
+1
pixxxel #
надо скопировать в папку plugins
и при инициализации tinymce добавить две вещи:

theme_advanced_buttons1: «jaretypograph,…
plugins: „jaretypograph,…

впрочем, так же как для любого другого плагина
0
special #
К сожалению кавычки первого и второго уровня одинаковые…
+1
emuravjev #
В этой версии мы специально сделали только ёлочки. Потом, конечно же и лапки появятся.
0
qwertysx #
Может кто-нибудь подсказать такой же сервис, но для работы с английским языком?
+1
emuravjev #
В скором времени выйдет и для английского языка. Только мы пока не решили, как его подавать — отдельным продуктом, либо все вместе. Решаем :)
0
proxaoc #
скачал архив с сайта, выдает ошибку в файле Tof.php в строке 82.
для тестирования поправил сам, но хотелось бы получить официальную работающую версию
0
sM1Le #
Приведите, пожалуйста, строки кода, который Вы вставили в свою систему или страничку (строки инициализации типографа и типографирования текста).
+1
sM1Le #
А-а, теперь вижу.
Большое спасибо за найденный баг. Дистрибутив обновлен.
0
onthefly #
Я считаю порочной практикой использование для расстановки пробелов спанов со стилями. Есть целая пачка юникод символов с 8196 по 8202, которые как раз и призваны решать такого рода проблемы. Ваш способ возвращает нас во времена тега font и заслуживает порицания!
+1
sM1Le #
Теги span с inline CSS у нас используются не совсем для расстановки пробелов. Цель их использования — смещение пробелов и некоторых знаков пунктуации для достижения эффекта висячей пунктуации (или оптического выравнивания, кому как нравится называть), что иногда делает текст удобнее для восприятия. Без подобных манипуляций, насколько я знаю, подобного добиться невозможно (это можно реализовать иначе, например, на Javascript, но последовательность действий будет аналогичная — смещение символов с помощью тега span; разница лишь в том, что здесь это вставляется в текст якорем, а на JS будет подтягиваться динамически при загрузке страницы).

Простой пример висячей пунктуации опубликован у нас на сайте в самом низу страницы. Но если кому-то это правило не нравится, его можно довольно просто отключить, как и любое другое ;-)
0
onthefly #
Видимо, я невнимательно смотрел.

На мой взгляд, висячая пунктуация, переносы и т. п. должны быть реализованы средствами браузера, а не путём подмешивания в контент чисто оформительских тегов.
0
Maxart #
Интересно, а это как-то можно к битриксу прикрутить?
0
Jamshid #
Поддерживаю вопрос…

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.