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

    Лицо нашего типографа
    Не так давно на Хабре уже заходила речь о нашем новом типографе (см. 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, а потом финал. Если после этого поста карма позволит, я буду публиковать здесь новости о наших продуктах. Скоро будет новый продукт связанный с типографикой.

    И вообще, мы всегда идем на встречу и готовы ответить на все вопросы на почте (на сайте ее не сложно найти).

    Update 27.09.13
    Доступна третья версия типографа.
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                                                  На мой взгляд, висячая пунктуация, переносы и т. п. должны быть реализованы средствами браузера, а не путём подмешивания в контент чисто оформительских тегов.
                                              • 0
                                                Интересно, а это как-то можно к битриксу прикрутить?
                                                • 0
                                                  Поддерживаю вопрос…
                                                  • 0
                                                    В третьей версии мы расскажем, как его можно прикрутить к Битриксу и не только.
                                                  • 0
                                                    Друзья, спасибо за отзывы, я их все читаю и принимаю к сведению. Мы начали работу над третьей версией типографа. Мы хотим сделать его таким, чтобы не было сомнений в его использовании. Пруфлинк: emuravjev.ru/tg/

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