Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 44
круто, давно искал реализацию. спасибо )
В Opera 9.5 (9972) почему-то не работает. :(
Думаю, это все доработается. Тут же показан сам смысл.
P.S.: Опера вообще странный броузер, вроди и стандарты поддерживает, но в некоторых случаях ведет себя довольно глупо (не про данный пример).
P.S.: Опера вообще странный броузер, вроди и стандарты поддерживает, но в некоторых случаях ведет себя довольно глупо (не про данный пример).
Спасибо, сегодня посмотрю на данной версии и попробую исправить.
Да-да, и в ИЕ6 отваливается с JS-ошибкой. Но В фоксе смотрится прекрасно. Сарсибо за скрипт. Если будет homepage скрипта - с удовольствием добавлю его в закладки. И желаю оптимизации и доточки.
Народ с "Оперой" 9.5 уже замучал слегка ;-) Мне вот только ленивый не сообщил "аа, ваш сайт не работает в последней нестабильной версии нашего любимого глюкобраузера".
Пользуясь вашим скриптом, можно реализовать и другие идеи,
например, висячие союзы в заголовках:
В русском это односимвольные «и», «а».
например, висячие союзы в заголовках:
В русском это односимвольные «и», «а».
Спасибо огромнейшее!
Плюсанул в карму, в топик, в комментарии :-)
Плюсанул в карму, в топик, в комментарии :-)
По-хорошему надо бы и эти три элемента создавать в JavaScript чтобы не захламлять код.
Тогда этот скрипт действительно будет крайне полезен!
Особенно учитывая то, что среднестатистический «контент-менеджер» ака «копирайтер» знать не знает, что такое типографика, классы и стили :(
Сделано. Ссылка та же. Добавляет кусок в самое начало тела, где кусок по идее не должен никому помешать.
а ещё бы и span .slaquo и .hlaquo создавать автоматически! Это же халява.
Банально - через body.innerHTML заменить все ' «' на '[span class="slaquo"] [/span][span class="hlaquo]«[/span]'.
В итоге: все у кого JS включён получают красивую типографику. Остальные - работюащий сайт без изысков, как и хотели.
я категорически за 100% автоматическую расстановку всего этого при добавлении единственной строчки [script src="tipografy.js"] в head.
Банально - через body.innerHTML заменить все ' «' на '[span class="slaquo"] [/span][span class="hlaquo]«[/span]'.
В итоге: все у кого JS включён получают красивую типографику. Остальные - работюащий сайт без изысков, как и хотели.
я категорически за 100% автоматическую расстановку всего этого при добавлении единственной строчки [script src="tipografy.js"] в head.
Типографика это конечно замечательно, но мне (подчеркну — мне) всё время казалось, что не всё то, что применимо для бумаги, нужно делать и на вебе. Поясню — читая книжки я уже привык к висячей пунктуации, она не режет глаз, подсознательно она воспринимается как что-то естественное и гармоничное. Но вот в браузере Ваша страничка с примером у меня вызывает какое-то отторжение. Глаз не привык к такой роскоши на просторах интернета, но привык к прямым границам, которые стали (для меня) неким символом стройности контента. А потому текст в примере моим глазом воспринимается как в «корявый какой-та».
PS: Тем не менее спасибо за статью, сам давно пассивно интересовался описанным вопросом (с чисто технической точки зрения).
PS: Тем не менее спасибо за статью, сам давно пассивно интересовался описанным вопросом (с чисто технической точки зрения).
Далеко не во всех книгах есть «висячая пунктуация». Прочитал ваш коммент, проверил в 5-ти книгах :)
Давно уже думаю, что мне надо прокачивать скилл копирайтера, не умею мысли ясно выражать :(
Я имел в виду, что в книжках висячая пунктуация встречается намного чаще, чем в интернете. И в книжках свисающие «ёлочки да скобочки» уже примелькались.
Я имел в виду, что в книжках висячая пунктуация встречается намного чаще, чем в интернете. И в книжках свисающие «ёлочки да скобочки» уже примелькались.
В русской типографике висячая пунктуация вообще традиционно не использовалась, как мне кажется.
Использовалась, но для мелких символов — точек, запятых, дефисов и переносов, с правого края. Свешивание «ёлочек» и скобок, действительно, до недавнего времени практически не применялось.
Приведите примеры изданий. Дело в том, что в ручном наборе делать свешивающуюся пунктуацию довольно дорого (по трудозатратам), потому что полосы должны быть чётко прямоугольными, а со свешивающейся пунктуацией у них был бы рваный правый край, который нужно было бы выравнивать шпациями. Возможно, в строкоотливном наборе с этим стали справляться, но я не уверен, что в СССР кто-то этим занимался.
Сейчас, увы, добраться до примеров не представляется возможным, но не так давно смотрел несколько книг, свёрстанных (если я правильно помню) в конце восьмидесятых годов, с немного «рваным» правым краем (если смотреть на него, приложив линейку).
Соглашусь с вами, что технологически при ручном наборе это весьма проблематично, особенно учитывая свешивание переносов наполовину. Возможно, с моей стороны имеет место путаница с годами издания.
Соглашусь с вами, что технологически при ручном наборе это весьма проблематично, особенно учитывая свешивание переносов наполовину. Возможно, с моей стороны имеет место путаница с годами издания.
Он кажется корявым именно потому, что свисающие элементы слишком далеко свисают — я написал об этом в комментарии ниже. Если свисание уполовинить, всё сразу станет более гармоничным.
Интересно, в русской типографике можно свешивать номера пунктов в списке?
У нас это не было принято, но я ничего плохого в таком свешивании не вижу. В русской традиции и ненумерованные списки особо не использовались. Но это же не повод продолжать их не использовать.
Я планировал написать статью про списки в блоге «Типографика», подниму там и этот вопрос.
Я планировал написать статью про списки в блоге «Типографика», подниму там и этот вопрос.
Если автоматически проставлять все служебные символы, и невидимые блоки, а в функцию передавать список css классов для которых нужно отработать висячую пунктуацию и список символов которые нужно свешивать, то можно продавать рекламу на сайте, на который ринется толпа почитателей веб типографики.
Красивая реализация, спасибо.
Переносите в «Типографику». :) Очень хочется, чтобы запись не затерялась в дебрях Хабра.
Правильнее было бы разбирать текст в нужном блоке и окружать нужные span'ами автоматически.
А теперь по делу — что касается висячей пунктуации, даже в бумажной вёрстке при её использовании (что бывает о-о-очень редко) висячий символ не свешивается за границу полосы набора целиком — свешивается только частично. В данном варианте и скобка, и кавычка слишком отстранены от полосы набора. Если их наполовину задвинуть обратно, выглядеть это станет значительно лучше.
В js-коде <div id="1em" style="width: 1em;"> изменить на <div id="1em" style="width: 2em;">
На мой взгляд, здесь и половина ширины символа — слишком много. Скобки визуально «вываливаются», что противоречит самой идее оптического выравнивания текста.
Например, в диссертации Хан Те Фана по микротипографике предлагается величина свеса для скобок всего в 5% от их ширины. Это, конечно, зависит от шрифта. В приведённом примере мне близкими к оптимальными показались значения около 0.1em для скобок и 0.2em для кавычек.
Ну это я так, со своей технической (и TeXнической) колокольни, ни разу не специалист по типографике :-)
Например, в диссертации Хан Те Фана по микротипографике предлагается величина свеса для скобок всего в 5% от их ширины. Это, конечно, зависит от шрифта. В приведённом примере мне близкими к оптимальными показались значения около 0.1em для скобок и 0.2em для кавычек.
Ну это я так, со своей технической (и TeXнической) колокольни, ни разу не специалист по типографике :-)
Странно, у меня в Safari 3.1.1 на маке пример не работает. В FireFox 3 RC1 все отлично.
Консоль при этом выдает:
SyntaxError: Parse error
http://archon.name/trash/quotes/ (line 43)
Консоль при этом выдает:
SyntaxError: Parse error
http://archon.name/trash/quotes/ (line 43)
Дорогой мой, Archon, вы просто не застали момент появления висящей пунктуации на artlebedev.ru три года назад, вместе с появлением очередного параграфа в ководстве за номером 120, ей посвященного.
Изначально, мой дорогой друг, реализация висящей пунктуации на artlebedev.ru была выполнена именно на JavaScript, очень схожим с вашим способом.
Следом было обсуждение сего факта и его реализации в ЖЖ. И как вы видите сотрудники студии согласились с приведенными аргументами бессмыслености использования JavaScript в этом вопросе и перенесли код расставления оберток для реализации плавающей пунктуации в парсер сайта.
И, да, еще имейте ввиду, что Times New Roman, он и в Африке Times New Roman. Остальное мне как-то лень пытаться донести, умные люди в предыдущих коментариях намекнули вам на все огрехи, осталось только домыслить немного.
Изначально, мой дорогой друг, реализация висящей пунктуации на artlebedev.ru была выполнена именно на JavaScript, очень схожим с вашим способом.
Следом было обсуждение сего факта и его реализации в ЖЖ. И как вы видите сотрудники студии согласились с приведенными аргументами бессмыслености использования JavaScript в этом вопросе и перенесли код расставления оберток для реализации плавающей пунктуации в парсер сайта.
И, да, еще имейте ввиду, что Times New Roman, он и в Африке Times New Roman. Остальное мне как-то лень пытаться донести, умные люди в предыдущих коментариях намекнули вам на все огрехи, осталось только домыслить немного.
в IE 7 не работает
http://i25.tinypic.com/sx0tif.jpg
http://i25.tinypic.com/sx0tif.jpg
Помоему если это невозможно реализовать через css, то на js генерировать тоже не стоит — у людей бывает отключенным js. На мобильниках например. Как и с подсветкой кода, это надо делать на стороне сервера.
Показалось интересным. Открыл пример, ничего висячего не увидел. Нашёл комментарии про Оперу. Ах, вот оно в чём дело… А вы пишете: «Пример гарантированно работает в …, “Опере”, …»
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Динамическая висячая пунктуация в HTML