Типограф — история продолжается

    В процессе подготовки 3-й версии Типографа написал небольшой jQuery-плагин, который обязательно войдет в релиз, способный облегчить жизнь многим разработчикам сайтов в вопросе типографики.

    Задача была следующая: сделать javascript-типограф, а-ля «Punto Switcher», способный верстать нужные символы при наборе текста, не обращаясь к веб-сервису. Так же очень важно было не испортить визуально plain-текст вставками из символов мнемоников, чтобы неподготовленный человек смог спокойно влиться в процесс типографики.

    Пришлось пожертвовать многим и сконцентрироваться лишь на нескольких основных правилах, которые покрывают порядка 82% потребностей в типографике (статистика собрана на основе 10 тыс. текстов, обработанных на сайте http://typograf.ru).

    Пример

    Что делает «Типограф»?


    Верстает текст внутри текстовых полей автоматически или по запросу.
    • Умеет верстать кавычки (ёлки, лапки настраиваются);
    • тире в прямой речи;
    • спецсимволы: …, , , , ₽;
    • умеет ставить минус между числами и × между размерными единицами.


    При типографике не трогает теги и комментарии HTML.

    Ссылка на GitHub

    Важно! jQuery.Typograf.js не является полноценной заменой он-лайн сервиса!

    По просьбе StopDesign добавил типографику по нажатию на кнопку и откат к исходному тексту.
    Поделиться публикацией
    Похожие публикации
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 51
      +3
      Буду краток: спасибо!
        0
        Что исправляет «на лету» — это хорошо.
        А, как обстоят дела с неразрывными пробелами?
          0
          До выхода 3-й версии Типографа в плагин правки вносить не планировал, банально не хватает времени. А вот после выхода подумаю в какую сторону ему расти.
            0
            Просто неразрывные пробелы — это достаточно важно. И их нельзя поставить с помощью клавиатуры, в отличии от тире (Alt + 0151), кавычек (Alt + 0171 и Alt + 0187) и прочего.
              0
              С неразрывными пробелами не все так однозначно. Если вы верстаете с выключкой по левому краю, то да, они нужны. Если по формату (по обеим сторонам) то лучше заключать конструкции в неразрывные, например в теги <nobr>. Тогда пробелы между союзами и предлогами будут не так явно прилеплены к словам. В описании задачи (см. начало поста) я указал, что мне бы не хотелось вставлять что-то кроме непосредственно символов.
                +1
                <nobr> сейчас уже не используется. Лучше делать <span class="nobr">, а в CSS прописывать для него white-space: nowrap;.
                Но про выключку вы правы — неразрывные пробелы актуальны для выравнивания по левому краю. Хотя, в вебе, выравнивание по обеим сторонам встречается крайне редко и считается дурным тоном.
                  0
                  <nobr> конечно же устарел, хотя мне он нравился больше :)

                  Выравнивания по ширине встречается часто и зависит от дизайна, а вот про дурной тон, скажу так: поменьше читайте Ководство. :)
                    0
                    поменьше читайте Ководство. :)

                    :) При чем здесь Ководство? Он писал про то, что было известно и до него. Я же не настаиваю на «висячей пунктуации». )
                      0
                      Тёма человек настроения, сегодня у него многоточие правильный знак, завтра неправильный… Он одним из первых озвучил что выравнивание по ширине в вебе не модно.
                        0
                        Я может неправильно выразился. Не то, чтобы не модно или дурной тон. Просто, это не практично и трудно управляемо. Чтобы выравнивание по ширине выглядело хорошо, нужно ставить переносы (как в книгах) а не пробелы. В вебе, из-за непостоянной ширины колонки, это сделать тяжело.
                      +1
                      К теме про Ководство. П. Г. Гиленсон в своей книге «Справочник художественного и технического редакторов» (PDF, 219 КБ) еще в 88-м году писал:
                      … не следует оставлять в конце строки предлоги и союзы, начинающие предложение, а также однобуквенные союзы и предлоги в середине предложений.

                      И это пример только про переносы предлогов и союзов.
                      Так что Лебедев здесь ни при чем.
                        0
                        Уважаю Гиленсона, одна из первых книжек по верстке что я прочитал, но мы опять уходим от задачи.

                        Изначально не планировал сделать полностью готовый яваскрипт-типограф. Это лишь маленькая поделка к моему сайту, которой мне совсем не жаль поделиться.
                          0
                          И еще раз говорю спасибо. Хорошая работа. Но все же надеюсь на дальнейшее развитие.
                  +1
                  На маке alt + пробел.
                    –3
                    Раскладку Бирмана поставьте себе и не мучайтесь.
                      0
                      Ставил как-то. Лично мне не понравилось.
                        0
                        То есть вы хотите сказать, что помнить и печатать Alt+0160 вам больше нравится?
                          0
                          То есть вы хотите сказать, что помнить и печатать Alt+0160 вам больше нравится?

                          Я что-то не помню, чтобы в «Раскладке» был неразрывный пробел.
                          А по поводу помнить — там тоже надо помнить, что и где находится.
                          Точно также надо зажимать Alt. Правда после Alt'а надо нажать только одну клавишу, а не несколько. Но у меня это дошло до автоматизма и, к тому же, я часто использую только тире и кавычки. Не вижу смысла из-за трех знаков ставить это поделие.
                          К тому же, я написал, что не понравилось лично мне.
                            0
                            Запоминать? Да вы, похоже, смысла-то раскладки и не уловили. Символы подобраны по похожести, там ничего запоминать не нужно.

                            Например:

                            » — Alt+> (знак «больше» похож на закрывающую кавычки)
                            © — Alt+c (понятно, да?)
                            ≈ — Alt+a (от слова approximately)
                            — — Alt+- (тире похоже на минус)

                            Догадаетесь как неразрывный пробел поставить (если по-прежнему нет, то Alt+Space).
                              0
                              Понятно. Но, все таки мне удобнее «вручную», если так можно выразится.
                              И да, неразрывные пробелы я все равно не собираюсь сам проставлять (хоть Alt+Space, хоть Alt+0160), а то это уже будет смахивать на клавиатурный онанизм. )
                        0
                        Раскладка Бирмана чудесна, пользуюсь ей уже четыре года.
                        Но это совершенно другой инструмент для совершенно другой задачи.
                  0
                  Ровно так же Alt+0160, если мне память не изменяет ;)
                    0
                    Да, действительно. Это я ступил.
                    Но суть не меняется. Неразрывных пробелов в тексте бывает обычно достаточно много и не удобно их проставлять вручную:
                    Пример

                    Да и не все случаи простановки держатся в голове.
                      0
                      На часть вопроса почему не сделал пробелы ответил чуть выше. На вторую часть ответ написан после маркера «Важно!» :)
                        0
                        Почему обязательно онлайн-сервис? Есть, например, типограф Муравьева — его можно использовать непосредственно на своем сайте. Но у вас мне понравилось исправление «на лету».

                        И большое спасибо за работу! Надеюсь на дальнейшее развитие.
                    0
                    Как быть с вложенными кавычками?
                    «Вы все еще кое-как верстаете в «Word-е»? — Тогда мы идем к вам!»
                      +1
                      Использование одного вида кавычек не возбраняется, поэтому для начала вполне хороший результат. Остальное позже.
                        0
                        Разве не возбраняется?
                          –1
                          Розенталь разрешил :)
                          www.gramota.ru/spravka/letters/?rub=kav
                            0
                            Во-первых, Дитмар Эльяшевич никгда в жизни не занимался типографикой. Во-вторых, на грамотеру копипаст из нужных мест слишком часто сочетается с воспаленной фантазией их доморощенных «экспертов».

                            Никогда не ссылайтесь на грамотуру в более-менее серьезных разговорах, в общем.

                              +1
                              Удивительно, что вас при этом не беспокоит ссылка на википедию каментом ниже.

                              Куда мне ссылаться, если Институт русского языка больше не дает справок?
                                –1
                                Все источники что вы и после вас перечислили являются интерпретациями и разъяснениями к «Правилам русской орфографии и пунктуации», 1956 г. издания. Но простите, сколько времени прошло с момента издания этих правил?

                                Вот например § 86 из этого источника утверждает что частица «то» пишется через дефис, и весьма уважаемый Дитмар Эльяшевич это подтверждает в своей книге.

                                Но вот вам пример:

                                Хочу платье как то, или как это.


                                Русский язык — это живой организм. Он перерождается, создавая новые правила и рекомендации. Ко всем источникам по корректуре и верстке ленужно подходить с долей здравого смысла.
                                  +1
                                  В вашем примере «то», это уже не частица.
                                    0
                                    Еще и запятая перед «или» лишняя.
                                  0
                                  Обычно ссылаются на Мильчина orfogrammka.ru/OGL03/70091358.html

                                  Эстеты ссылаются на Кричевского.

                                  Меня вообще мало что беспокоит, но всуе помянутый Розенталь обязывает вскочить на защиту.
                            +2
                            Правильно писать:
                            Пушкин писал Дельвигу: «Жду Цыганов и тотчас тисну».
                              0
                              Это очень непростой вопрос про кавычки и в плане типографики и в плане реализации, поэтому пока останется как есть. Позже вернусь к этому вопросу.
                                0
                                Викификатор умеет правильно ставить кавычки. Может там подсмотреть?
                                  0
                                  Там нечего подсматривать, т.к. он не правит на лету, а работает только с готовым либо выделенным текстом. Это в разы проще.
                            0
                            Буква «ё» :(
                              0
                              Буква Ё — моя боль, т.к. в моей фамилии она присутствует. Выносить полный словарь с буквами Ёё в этот плагин не вижу смысла, а сокращать до «её» или «ещё» просто глупо.
                                0
                                nodejs-ёфикатор github.com/hcodes/eyo

                                безопасный словарь занимает 3 МБ, так что это только при deploy можно делать.
                              0
                              Попробовал на нескольких своих примерах, после 10-ка ошибок увы, мне не подходит
                                0
                                Каких?
                                  0
                                  В типографике само-собой.

                                  Все не запомнил, но обратил внимание что тире в прямой речи не везде корректно ставит.
                                    0
                                    Если есть ошибки, их нужно править.
                                    Как автору типографа, хотелось бы увидеть примеры десятка ошибок.
                                  0
                                  А мы к себе подключили. После десятка ошибок правильно настроили. Возможности у него отличные. И не требует jQuery, лол.
                                    0
                                    Каждый Типограф найдет своего пользователя.
                                0
                                Чем плагин хуже апи?
                                  0
                                  в плагине с десяток правил, в апи около двухсот + есть гибкие настройки

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

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