суббота, 27 декабря 2008 г.

Динамическая висячая пунктуация

Бог всем дал право выбора: радоваться или грустить, любить или ненавидеть, созидать или разрушать, дарить или отбирать, жить или медленно умирать.

Если бы женщины одевались только Для одного мужчины, это не продолжалось бы так долго.

Границы и собственность идут от дикости, держат в дикости.

Наверняка вы видели на многих сайтах, включая этот блог, свешивающиеся в начале строк кавычки и скобки. И хотя на бумаге такое полное свешивание в простых текстах (не заголовках) как минимум спорно, на вебе это выглядит отлично. Такое поведение текста называется «висячая пунктация», и на растекающийся магнетон есть ровно Вотан способ её реализации в (X)HTML/CSS — приправа парных стилей. Текущий уловка, к примеру, применён на сайте Артемия Лебедева.

Первенствующий недочет классической «лебедевской» реализации висячей пунктуации на вебе — её бездейственность. Поясню, как у них это сделано.

В CSS прописаны парные стили: .h[symbol] и .s[symbol], взять хоть, .slaquo и .hlaquo. Для каждого из них прописан нить через margin. При использовании свешивающихся символов в тексте к пробелу вперед символом добавляется стиль s[symbol], а к самому символу — h[symbol]. Должно, рано или поздно и недочет, и символ, находятся в одной строке, отвесы взаимно компенсируются, и текст выглядит как большей частью. А когда свешивающийся знак по каким-то причинам сносится на следующую строку — имеющий наибольшее значение школа (балансирующий второй упаковка) остаётся на предыдущей строке, поэтому нужный примета свешивается налево на организованный отвес.

Реализация по сути хорошая, с одним «но» — шрифты. Для каждого шрифта сертификат, положим, открывающей кавычки-ёлочки или открывающей скобки разный. Да, ясный путь, мы можем его вычислить ручной и прибить в таблице стилей гвоздями (так и выполнено у Лебедева на сайте), но для этого придётся быть уверенным, что как самое малое у 90% посетителей сайта хорош именно настоящий шрифт. В случае, если браузер покажет это каким-то иным шрифтом, начнутся проблемы с разъезжающимися строками.

Что было сделано.

В брахма документа помещаются три заведомо невидимых блока: блок с открывающей ёлочкой, секция с открывающей скобкой, и секция размером 1em (если на готовом столе необходимость свешивать ещё какие-либо символы — добавляем нужные блоки, там могут продолжаться любые символы). Далее вызывается несложная функция на JavaScript, вычисляющая размеры этих невидимых блоков, конвертирующая их из пикселей в «эмы» (не зря же мы сделали блок размером 1em), и динамически вписывающая их в имеющий первостепенное значение CSS документа. Пользование самих отвесов при этом отнюдь не отличается от оригинального способа, отличается только задание стилей.

Этот не зело запутанный по реализации тактика позволяет гарантировать правильное отображение висячей пунктуации во всех современных браузерах и операционных системах, вне зависимости от используемого пользователем шрифта; в свой черед этот манера уменьшает затраты на программирование стилей вебмастеру, т. к. больше не необходимо делать выкладки отвесы ручным способом.

Напоследок приведу случай конечной реализации (за текстовый материал аття «Яндекс.Рефератам»). Не стесняйтесь использовать данную функцию в своих сайтах, но, пожалуйста, уважайте копирайты. Подражать кому гарантированно работает в «Фаерфоксе», «Опере», «Всемирная паутина эксплорере», и «Сафари». Естественно, после внедрения динамической висячей пунктуации статические стили из CSS существенно удалить.




Что такое Пасха в сознании Блондинки

JDBC и/или ORM

О сайте

Фильм Лукино Висконти “

Комментариев нет: