Задача была следующая: сделать javascript-типограф, а-ля «Punto Switcher», способный верстать нужные символы при наборе текста, не обращаясь к веб-сервису. Так же очень важно было не испортить визуально plain-текст вставками из символов мнемоников, чтобы неподготовленный человек смог спокойно влиться в процесс типографики.
Пришлось пожертвовать многим и сконцентрироваться лишь на нескольких основных правилах, которые покрывают порядка 82% потребностей в типографике (статистика собрана на основе 10 тыс. текстов, обработанных на сайте http://typograf.ru).
Пример
Что делает «Типограф»?
Верстает текст внутри текстовых полей автоматически или по запросу.
- Умеет верстать кавычки (ёлки, лапки настраиваются);
- тире в прямой речи;
- спецсимволы: …, ©, ®, ™, ?;
- умеет ставить минус между числами и ? между размерными единицами.
При типографике не трогает теги и комментарии HTML.
Ссылка на GitHub
Важно! jQuery.Typograf.js не является полноценной заменой он-лайн сервиса!
По просьбе StopDesign добавил типографику по нажатию на кнопку и откат к исходному тексту.
Комментарии (49)
Novitsky
06.05.2015 21:07Что исправляет «на лету» — это хорошо.
А, как обстоят дела с неразрывными пробелами?
Spearance Автор
06.05.2015 21:23До выхода 3-й версии Типографа в плагин правки вносить не планировал, банально не хватает времени. А вот после выхода подумаю в какую сторону ему расти.
Novitsky
06.05.2015 21:39Просто неразрывные пробелы — это достаточно важно. И их нельзя поставить с помощью клавиатуры, в отличии от тире (Alt + 0151), кавычек (Alt + 0171 и Alt + 0187) и прочего.
Spearance Автор
06.05.2015 22:00С неразрывными пробелами не все так однозначно. Если вы верстаете с выключкой по левому краю, то да, они нужны. Если по формату (по обеим сторонам) то лучше заключать конструкции в неразрывные, например в теги <nobr>. Тогда пробелы между союзами и предлогами будут не так явно прилеплены к словам. В описании задачи (см. начало поста) я указал, что мне бы не хотелось вставлять что-то кроме непосредственно символов.
Novitsky
06.05.2015 22:08+1<nobr>сейчас уже не используется. Лучше делать<span class="nobr">, а в CSS прописывать для негоwhite-space: nowrap;.
Но про выключку вы правы — неразрывные пробелы актуальны для выравнивания по левому краю. Хотя, в вебе, выравнивание по обеим сторонам встречается крайне редко и считается дурным тоном.Spearance Автор
06.05.2015 22:18<nobr> конечно же устарел, хотя мне он нравился больше :)
Выравнивания по ширине встречается часто и зависит от дизайна, а вот про дурной тон, скажу так: поменьше читайте Ководство. :)Novitsky
06.05.2015 22:25поменьше читайте Ководство. :)
:) При чем здесь Ководство? Он писал про то, что было известно и до него. Я же не настаиваю на «висячей пунктуации». )Spearance Автор
07.05.2015 05:41Тёма человек настроения, сегодня у него многоточие правильный знак, завтра неправильный… Он одним из первых озвучил что выравнивание по ширине в вебе не модно.
Novitsky
07.05.2015 16:19Я может неправильно выразился. Не то, чтобы не модно или дурной тон. Просто, это не практично и трудно управляемо. Чтобы выравнивание по ширине выглядело хорошо, нужно ставить переносы (как в книгах) а не пробелы. В вебе, из-за непостоянной ширины колонки, это сделать тяжело.
Novitsky
06.05.2015 22:58+1К теме про Ководство. П. Г. Гиленсон в своей книге «Справочник художественного и технического редакторов» (PDF, 219 КБ) еще в 88-м году писал:
… не следует оставлять в конце строки предлоги и союзы, начинающие предложение, а также однобуквенные союзы и предлоги в середине предложений.
И это пример только про переносы предлогов и союзов.
Так что Лебедев здесь ни при чем.Spearance Автор
07.05.2015 05:49Уважаю Гиленсона, одна из первых книжек по верстке что я прочитал, но мы опять уходим от задачи.
Изначально не планировал сделать полностью готовый яваскрипт-типограф. Это лишь маленькая поделка к моему сайту, которой мне совсем не жаль поделиться.Novitsky
07.05.2015 16:20И еще раз говорю спасибо. Хорошая работа. Но все же надеюсь на дальнейшее развитие.
bolk
07.05.2015 09:57-3Раскладку Бирмана поставьте себе и не мучайтесь.
Novitsky
07.05.2015 16:21Ставил как-то. Лично мне не понравилось.
bolk
07.05.2015 16:23То есть вы хотите сказать, что помнить и печатать Alt+0160 вам больше нравится?
Novitsky
07.05.2015 16:38То есть вы хотите сказать, что помнить и печатать Alt+0160 вам больше нравится?
Я что-то не помню, чтобы в «Раскладке» был неразрывный пробел.
А по поводу помнить — там тоже надо помнить, что и где находится.
Точно также надо зажимать Alt. Правда после Alt'а надо нажать только одну клавишу, а не несколько. Но у меня это дошло до автоматизма и, к тому же, я часто использую только тире и кавычки. Не вижу смысла из-за трех знаков ставить это поделие.
К тому же, я написал, что не понравилось лично мне.bolk
07.05.2015 16:44Запоминать? Да вы, похоже, смысла-то раскладки и не уловили. Символы подобраны по похожести, там ничего запоминать не нужно.
Например:
» — Alt+> (знак «больше» похож на закрывающую кавычки)
© — Alt+c (понятно, да?)
? — Alt+a (от слова approximately)
— — Alt+- (тире похоже на минус)
Догадаетесь как неразрывный пробел поставить (если по-прежнему нет, то Alt+Space).Novitsky
07.05.2015 16:51Понятно. Но, все таки мне удобнее «вручную», если так можно выразится.
И да, неразрывные пробелы я все равно не собираюсь сам проставлять (хоть Alt+Space, хоть Alt+0160), а то это уже будет смахивать на клавиатурный онанизм. )
Spearance Автор
06.05.2015 21:44Ровно так же Alt+0160, если мне память не изменяет ;)
Novitsky
06.05.2015 22:00Да, действительно. Это я ступил.
Но суть не меняется. Неразрывных пробелов в тексте бывает обычно достаточно много и не удобно их проставлять вручную:
Пример
Spearance Автор
06.05.2015 22:06На часть вопроса почему не сделал пробелы ответил чуть выше. На вторую часть ответ написан после маркера «Важно!» :)
Novitsky
06.05.2015 22:11Почему обязательно онлайн-сервис? Есть, например, типограф Муравьева — его можно использовать непосредственно на своем сайте. Но у вас мне понравилось исправление «на лету».
И большое спасибо за работу! Надеюсь на дальнейшее развитие.
Nesvet
06.05.2015 21:50Как быть с вложенными кавычками?
«Вы все еще кое-как верстаете в «Word-е»? — Тогда мы идем к вам!»
Spearance Автор
06.05.2015 22:03+1Использование одного вида кавычек не возбраняется, поэтому для начала вполне хороший результат. Остальное позже.
Nesvet
06.05.2015 22:11Разве не возбраняется?
Lorien_Elf
06.05.2015 22:28-1Розенталь разрешил :)
www.gramota.ru/spravka/letters/?rub=kav
matiouchkine
07.05.2015 08:10Во-первых, Дитмар Эльяшевич никгда в жизни не занимался типографикой. Во-вторых, на грамотеру копипаст из нужных мест слишком часто сочетается с воспаленной фантазией их доморощенных «экспертов».
Никогда не ссылайтесь на грамотуру в более-менее серьезных разговорах, в общем.
Lorien_Elf
07.05.2015 11:08+1Удивительно, что вас при этом не беспокоит ссылка на википедию каментом ниже.
Куда мне ссылаться, если Институт русского языка больше не дает справок?Spearance Автор
07.05.2015 12:24-1Все источники что вы и после вас перечислили являются интерпретациями и разъяснениями к «Правилам русской орфографии и пунктуации», 1956 г. издания. Но простите, сколько времени прошло с момента издания этих правил?
Вот например § 86 из этого источника утверждает что частица «то» пишется через дефис, и весьма уважаемый Дитмар Эльяшевич это подтверждает в своей книге.
Но вот вам пример:
Хочу платье как то, или как это.
Русский язык — это живой организм. Он перерождается, создавая новые правила и рекомендации. Ко всем источникам по корректуре и верстке ленужно подходить с долей здравого смысла.
matiouchkine
07.05.2015 16:36Обычно ссылаются на Мильчина orfogrammka.ru/OGL03/70091358.html
Эстеты ссылаются на Кричевского.
Меня вообще мало что беспокоит, но всуе помянутый Розенталь обязывает вскочить на защиту.
Novitsky
06.05.2015 22:16+2Правильно писать:
Пушкин писал Дельвигу: «Жду „Цыганов“ и тотчас тисну».
Spearance Автор
06.05.2015 22:29Это очень непростой вопрос про кавычки и в плане типографики и в плане реализации, поэтому пока останется как есть. Позже вернусь к этому вопросу.
UksusoFF
07.05.2015 12:31Викификатор умеет правильно ставить кавычки. Может там подсмотреть?
Spearance Автор
07.05.2015 12:40Там нечего подсматривать, т.к. он не правит на лету, а работает только с готовым либо выделенным текстом. Это в разы проще.
ingumsky
06.05.2015 22:44Буква «ё» :(
Spearance Автор
07.05.2015 05:30Буква Ё — моя боль, т.к. в моей фамилии она присутствует. Выносить полный словарь с буквами Ёё в этот плагин не вижу смысла, а сокращать до «её» или «ещё» просто глупо.
Grawl
13.05.2015 03:45nodejs-ёфикатор github.com/hcodes/eyo
безопасный словарь занимает 3 МБ, так что это только при deploy можно делать.
Spearance Автор
07.05.2015 14:26в плагине с десяток правил, в апи около двухсот + есть гибкие настройки
devpreview
Буду краток: спасибо!