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

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

    Похожие публикации

    Комментарии 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/

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

                                                    Самое читаемое