Kerning.js

    Свершилось, теперь чудеса типографики стали доступны и нам простым смертным.

    Как использовать


    Да легко, просто подключаем и используем.
    <script src="kerning.js"></script>
    

    Больше ничего не нужно, остальное она сделает сама.



    Что умеет


    Умеет она поистине восхитительные вещи.

    Kerning

    Кернинг для каждой буквы.
    #pixel-perfect {
        -letter-kern: 1px 1px 0 0 0
                      1px 0 2px 0 0
                      0 0 0;
    }
    

    Kerning

    Size adjustment

    Просто указываем какой букве какой кегль.
    #hello-goodbye {
        -letter-size: _ _ _ _ _ 0.5em;
    }
    

    Альтернативный вариант
    #hello-goodbye {
        -letter-size: _^5 0.5em;
    }
    

    Size adjustment

    Color

    Красим слова
    #pantone-please {
        -word-color: #f5474b #000000;
    }
    

    Color

    Transformations

    Поворачиваем буковки :)
    #little-lean {
        -letter-transform: skew(-5deg) none
                           none none
                           none none
                           skew(-5deg);
    }
    

    Transformations

    Repeats

    Море волнуется раз.
    #double-bubble {
        -letter-transform: -letter-repeats(
            2n+1: translate3d(0,-5px,0),
            even: translate3d(0,5px,0)
        );
    }
    

    Repeats

    Сайт проекта на GitHub

    Ну а теперь самое грустное.
    Поистине всю мощь эта библиотека показывает только в браузерах на основе WebKit, в Firefox работает частично, в Opera вообще не работает.
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 88
    • +49
      Про ие, видимо, можно даже не спрашивать:)
    • +10
      Отсутствие кросс-браузерности сводит на нет все её возможности, сайт должен выглядеть во всех браузерах идентично и зачем использовать данную библиотеку, если затем придется делать тоже самое и для других браузеров, но уже стародедовскими способами.
      • +4
        Начало положено, остальное дело времени.
        • 0
          Ох, если бы все добавляли новые возможности также быстро как Chrome…
          • 0
            … то наш корпоративный месячный лимит интернет-трафика уходил бы только на обновление браузеров.
        • НЛО прилетело и опубликовало эту надпись здесь
          • +35
            > сайт должен выглядеть во всех браузерах идентично

            Пользователи браузеров links, lynx, elinks и Mosaic с вами полностью солидарны.
            А то ишь чего удумали, несовместимые со всеми браузерами решения выпускают.
            • 0
              Ну, зато облегчает создание сайтов для всяких модных планшетов, те можно считать что на данный момент сей инструмент для них.
              • 0
                HTML5-приложения для мобильных устройств.
                • –4
                  Надо бы ее в less.js встоить. Типография — сердце web дазайна :).
                • +3
                  Ошеломляющее могущество кернинга. Заранее сочувствую любителям отключать джаваскрипты.
                  • +11
                    Я вообще этого не понимаю, постоянно это бахвальство в комментариях: «а у меня скрипты отключены», «а вы что еще адблок не установили?», «а у меня флэш блок давно стоит». Ну пусть установят себе IE 1.0 тогда и радуются.
                    • –21
                      Отключаю JS и Flash по умолчанию по трём причинам:
                      1. Не доверяю вражеским сайтам. XSS, уязвимости в браузере/flash'е.
                      2. Компьютер у меня не быстрый, при 5-6 открытых вкладках с Flash и JS волшебством Firefox начинает тупить.
                      3. Для _чтения_ страниц JS понты и Flash реклама не нужна. Я же смогу прочитать текст без прекрасного кернинга?

                      Сайты которыми пользуюсь постоянно добавляю в белый список NoScript и Flashblock в два клика.
                      • +2
                        Ну и отлично IE 0.1 в помощь. Текст читать умеет, что еще нужно в 21-м веке, правда?
                        • +15
                          IE 0.1 — глючное и тормозное говно, что вы советуете? Есть ведь отличный, быстрый и удобный lynx. И им, кстати, в отличии от IE 0.1 до сих пользуются.
                        • +3
                          Толстовато. В IE 0.1 нельзя «сделать хорошо» в два клика.

                          Если сайт разваливается, не работает, я выключаю JS. Или ухожу с сайта :)
                          • +3
                            Я отключаю только флэш. Но могу подтвердить, что в 90% ДжаваСкрипт добавляет нелепые свистоперделки, которые не несут никакой функциональной нагрузки. Ну а для флэша это утверждение верно на 99%.
                          • +14
                            >>Не доверяю вражеским сайтам.

                            Дальше не читал
                          • +2
                            используйте wget и cat
                            • +14
                              Всю жизнь JS включен. Хожу по разным-разным сайтам и еще ни разу не вступил в говно. Что я делаю не так?!
                            • +6
                              Я сказал «сочувствую любителям отключать джаваскрипты», но вот Adblock Plus и Flashblock — это другое дело: у меня и у самого стоят они.

                              Flashblock для меня является обыкновенным средством ускорения работы (для меня очевидно, что запуск флэшёвой виртуальной машины поверх браузера отъедает лишние циклы процессора, усиливает утечку памяти, и так далее).

                              Adblock Plus позволяет очистить страницу от рекламных скриптов и других рекламных элементов, что, как правило, улучшает и внешний вид её (способствуя единству стиля), и скорость загрузки из Сети, и поворотливость (за счёт отказа от выполнения лишнего кода рекламных и следящих скриптов).
                              • +2
                                Понятно, что если Flash является неотъемлемым элементом сайта (например, на гитхабе он употребляется для работы с буфером обмена, сиречь clipboard), то тогда я заношу этот сайт в список исключений для Flashblock, и тем невозбранно достигаю безупречной работы сайта.
                              • 0
                                > Я вообще этого не понимаю, постоянно это бахвальство в комментариях

                                Столлмана почитайте.

                                > Ну пусть установят себе IE 1.0 тогда и радуются.

                                Как это связано с нежеланием запускать на своей машине потенциально вредоносный код? Если отключить js, то сэкономится куча траффика (на вырезанных .js файлах на privoxy) и исчезнут мешающие получать информацию с сайта свистоперделки. На доверяемых сайтах вроде habrahabr.ru где последствия для авторов за вредоносный код в скриптах будет достаточно серьёзной и они действительно используют js только ради более удобного интерфейса, его можно и включить. Установка IE 1.0 же, если в вашу светлую голову, дающую такие ценные указания, эта мысль не пришла, сделает получение информации с любого сайта почти невозможным. Кроме того, зачем е*****я с поиском и установкой IE 1.0 в wine, когда можно просто взять современный браузер вроде lynx или w3m?
                                • +1
                                  Ладно, убедили. Веб нужен для рассматривания красивых интерфейсов, а не получения информации, а процессорное время, оперативная память и ширина каналов уже несколько лет как практически бесконечны.
                              • +1
                                Любители отключать яваскрипты сами себя наказали.
                                Ты ещё любителям Lynx посочувствуй.
                                • +1
                                  В свете последних новостей сочувствую тем, у кого они разрешены везде по умолчанию.
                                  • 0
                                    Это как то связано?
                                    • +1
                                      Для применения описанной там атаки на https используется javascript. Если скрипты запрещены — атака просто не сработает. Так что у всего, очевидно, есть свои "+" и "-", в том числе и у отключения скриптов по умолчанию.
                                • –2
                                  А в блоге Оперы меня заминусовали за правду :-)
                                • +1
                                  вроде как и прикольно да только нахрен не надо
                                  • +1
                                    Типографика для веб-дизайна крайне важна. Жаль, что вещь не кросс платформенная, но это не суть. Главное, что полезно!
                                    • –9
                                      За правку кернинга нужно убивать.
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                        • +2
                                          На заглавной странице typeface.js упоминается поддержка трёх видов браузеров: Firefox 1.5, Safari 2 и Internet Explorer 6 (и более свежих версий). Надо думать, что поддержка Safari автоматически обзначает и поддержку Google Chrome, пользующегося тем же движком (и притом наиболее новой версии, в силу включённого самообновления).

                                          Правила @font-face, как известно из Википедии, поддерживаются, начиная от версий Firefox 3.5, Internet Explorer 4, Opera 10 (частично 8 и 9), Safari 3.1 и Google Chrome 4.0.

                                          Проблемы со старинными браузерами можно игнорировать (вряд ли сейчас найдётся пользователь, не обновивший Firefox хотя бы до версии 3.5, IE до 6, Safari до 3.1, Google Chrome до 4.0). Проблему с поддержкою Opera игнорировать сложнее, поэтому, прежде чем использовать typekit.js, я рекомендовал бы поглядеть, хорошо ли он работает с Оперою.
                                          • +2
                                            Опечатка: в последнем абзаце вместо «typekit.js» следует читать «typeface.js».

                                            Кстати уж прибавлю: ещё одним аргументом в пользу @font-face (а значит, в частности, и в пользу Google Web Fonts) является совершеннейшее отсутствие необходимости употреблять JavaScript, тогда как typeface.js не работает у лиц, отключивших или блокировавших JavaScript.
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                        • +2
                                          >> Больше ничего не нужно, остальное она сделает сама.

                                          Вообще, ничего после этого не произойдёт, потому что нужно ещё указать необходимые CSS-стили для правил. А всё то же самое можно сделать и без этого фреймворка, просто с помощью CSS, причём для всех браузеров.
                                          • –2
                                            или одна унифицированная строчка или пять(утрирую) под все браузеры.
                                            • +3
                                              Не могу согласиться. Kerning.js плохо работает в Опере и не работает в ИЕ, а если символ, у которого нужно подкорректировать какой-либо отступ, заключить в span и назначить ему нужные микроскопические margin'ы, то это сработает всюду. Нельзя недооценивать силу ручного труда.
                                              • +1
                                                H<span class='e-kern'>e</span><span class='l-kern'>l</span><span class='l-kern'>l</span>o, Wor<span class='l-kern'>l</span>d!
                                              • +1
                                                И желательно это делать через псевдоклассы, а не как показано выше, а то фиг его знает как это гугл прочитает
                                                • 0
                                                  Нормально читает, я пробовал. ;)
                                                  • 0
                                                    Если не секрет дайте линк на подобную страницу
                                                    • 0
                                                      Обратите внимание, во что у меня на странице обёрнуто слово iOS. «Яндекс» совершенно нормально проиндекировал этот текст:

                                                      Гугл пока ещё не все страницы моего сайта обошёл, про его выдачу с уверенностью сказать не могу, но предполагаю, что тоже всё будет в порядке.
                                                      • 0
                                                        Ой, ссылки не приложились (ах, карма, бессердечная ты сука). Вот ссылка на ту страницу с текстом: talala.ru/works/characters/
                                                        А вот выдача Яндекса: i30.fastpic.ru/big/2011/0921/ef/8db08cbbe6cb753f4c432d233c7feaef.png
                                                      • 0
                                                        span'ы, a, и все прочие элементы, которые по дефолту являются inline, гугл сливает в одно слово. накалывался на этом уже, когда делал стилевую разбивку тегов не через ul-li, а через последовательность <a>. гугл в выдаче под заголовком, где показывает включения ключевиков в тексте, отображал что-то вроде «компьютерыновостиинформационные технологииинтернет»
                                                  • –1
                                                    Такой труд не обязательно должен быть именно ручным; быть может, кто-нибудь со временем сочинит решение, работающее на сервере (скажем, в PHP), и тем невозбранно достигнет желаемого.
                                                    • 0
                                                      Будем на это надеяться. А пока ручками…
                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                  • +4
                                                    Мне эта ваша финтифлюшка нафиг не нужна, но чисто из любви к людям — добавьте же вариант blah^5:

                                                    #hello-goodbye {
                                                    -letter-size: _^5 0.5em;
                                                    }

                                                    vs

                                                    #hello-goodbye {
                                                    -letter-size: _ _ _ _ _ 0.5em;
                                                    }
                                                    • 0
                                                      Странно, вроде бы всё кроме поворотов и прочих хитрых трансформаций должно легко делаться кроссбраузерно. Уж кернинг точно — там же просто оборачивания каждой буквы в спан + magin-ы.
                                                      • +4
                                                        Звучит круто и желанно, но на практике, думаю, всё будет менее радужно.
                                                        Дело в том, что минимальная дискретность такого браузерного псевдокернинга (1px) слишком груба для большинства тектстов. Это будет приемлемо только для заголовков, набранных очень крупным (не менее ~25px, а лучше еще больше) кеглем. Применять другие единицы типа em не получится, поскольку браузер все равно округлит их до целых пикселей, причем малопредсказуемым образом, и всё может стать только хуже.

                                                        Вывод: для некоторых специфических случаев может пригодиться, но в повседневной практике применения этому нет.
                                                        • +1
                                                          Уже лет 5 у меня довольно стабильно работает указание 4 знаков после запятой, если нужно точное округление из относительных размеров.

                                                          Если память не изменяет, то IE при округлении учитывает 2 знака после запятой, а FF 3. Четвертый знак уже не помню как появился.

                                                          Так что округления до вполне конкретных чисел вполне возможно.

                                                          Другое дело что шрифты везде разные, при использовании относительных единиц это полный фейл, по этой причине постоянно вылезает разница в несколько пикселей.
                                                          • 0
                                                            Знаки после запятой и саму математику округления — это понятно.
                                                            Когда я говорил о малопредсказуемом округлении, я имел в виду то, что разные браузеры рендерят шрифты чуть по-разному (даже в пределах одной ОС). Поэтому ширина самих букв и слов может немножко плавать. И может сложиться ситуация, когда, условно говоря, в FF лучше выглядит -1px, а в Хроме -2px.

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


                                                              Рендеринг шрифтов это конечно жесть, абсолютно с вами согласен.
                                                        • 0
                                                          Вообще не понял, зачем нужно, ведь все это делается и средствами css.
                                                          Отсчитывать буковки каждый раз — WTF?!
                                                          • 0
                                                            Ну правильно, всё это теоретически можно сделать через CSS ручками — только трудоемко очень. Оборачивать отдельные буквы в span-ы и каждому прописывать врукопашную марждины?
                                                            Скрипт не делает ничего волшебного, он лишь дает интерфейс-обертку для тех самых средств CSS.
                                                            • 0
                                                              Что трудоёмкого? Нужную букву оборачиваем в нужный span. Это трудоёмкость — лишние три секунды?
                                                              Плюс оборачивая буквы, мы всегда можем вставить нужный span в нужном месте. А с этой либой нам придётся постоянно пересчитывать местоположение буквы относительно предложения и править css. Бред собачий.
                                                            • –2
                                                              >Вообще не понял, зачем нужно
                                                              Кернинг — расстояние между буквами, которые подбираются шрифтовыми дизайнерами для каждой пары букв в зависимости от их начертания для удобочитаемости и сохранения пропорций. Т.е. художник-шрифтовик для каждой пары (типа AV, II, TA) тщательно подбирает трекинговое расстояние и менять его можно только сдуру.
                                                              • +1
                                                                Если художник-шрифтовик действительно взял на себя нелёгкий труд создать кернинговые пары для шрифта и прописать для них желаемые межбуквенные расстояния — тогда да, тогда, конечно, не так-то просто придумать повод переменить их. Но если шрифт сделан за неделю на коленке (или, например, на FontStruct), то тогда ни о каком авторском кернинге и речи быть не может. В том вижу полезность специального кернинга.
                                                                • 0
                                                                  > Но если шрифт сделан за неделю на коленке
                                                                  Автору этого шрифта не поможет никакая библиотека. Ему вообще ничего не поможет кроме яду.
                                                                  Так же как и вам.
                                                                • 0
                                                                  Капитан, я о библиотеке, а не о кёрнинге. Вообще моветон корежить кернинг качественных и проверенных временем шрифтов. Плюс совершенно не понимаю, зачем лишний код, когда можно обойтись и простыми средствами, с большими плюшками.
                                                                  • +1
                                                                    > Вообще моветон корежить кернинг
                                                                    Увы, для большинства уеб-дизайнеров, верстальщиков и тем более программистов это НЕочевидно.

                                                                    > Капитан, я о библиотеке, а не о кёрнинге
                                                                    Вы спросили — «зачем», Я ответил — «сдуру». И правка кернинга и изобретение для этого библиотеки и тем более ее использование может быть сделано только сдуру.

                                                                    • 0
                                                                      Ёпрстка от уеб-дизайнеров)
                                                              • 0
                                                                Предсказываю вам море удовольствия при локализации:

                                                                Привет и пока.
                                                                Небольшой наклон
                                                                и т.д.
                                                              • +2
                                                                Если хочется потрогать буквочки, попробуйте Lettering.js
                                                                • 0
                                                                  Только сегодня размышлял на эту тему, пролистывая свежую подборку похожих библиотек.
                                                                  • 0
                                                                    Отключают люди JS, Flash, картинки, почему бы не отключить компьютер из розетки, электричество не тратить :-D

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