@JiLiZART21 сен 2011 в 03:14

Kerning.js

1 мин

2.8K

JavaScript *

+97

Комментарии 88

@quantum 21 сен 2011 в 03:25

Про ие, видимо, можно даже не спрашивать:)

@dnv777 21 сен 2011 в 19:59

IE9 — работает

@AxisPod 21 сен 2011 в 03:42

Отсутствие кросс-браузерности сводит на нет все её возможности, сайт должен выглядеть во всех браузерах идентично и зачем использовать данную библиотеку, если затем придется делать тоже самое и для других браузеров, но уже стародедовскими способами.

@JiLiZART 21 сен 2011 в 04:04

Начало положено, остальное дело времени.

@vaniaPooh 21 сен 2011 в 05:35

Ох, если бы все добавляли новые возможности также быстро как Chrome…

@Monyag 21 сен 2011 в 11:54

… то наш корпоративный месячный лимит интернет-трафика уходил бы только на обновление браузеров.

НЛО прилетело и опубликовало эту надпись здесь

@roman_tik 21 сен 2011 в 06:21

> сайт должен выглядеть во всех браузерах идентично

Пользователи браузеров links, lynx, elinks и Mosaic с вами полностью солидарны.
А то ишь чего удумали, несовместимые со всеми браузерами решения выпускают.

@neuotq 21 сен 2011 в 07:15

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

@GearHead 21 сен 2011 в 07:41

HTML5-приложения для мобильных устройств.

@oddy 21 сен 2011 в 08:02

do websites need to look exactly the same in every browser

@nicola 21 сен 2011 в 04:24

Надо бы ее в less.js встоить. Типография — сердце web дазайна :).

@VasilioRuzanni 21 сен 2011 в 05:42

Как раз у типографии-то с веб-дизайном почти ничего общего.

В less встраивать тоже ничего не надо — эти вещи совершенно для разных целей.

@nicola 21 сен 2011 в 07:02

www.informationarchitects.jp/en/the-web-is-all-about-typography-period/

@VasilioRuzanni 21 сен 2011 в 07:33

Так то оно так, но типография и типографика — это, скажем так, не одна и та же хрень :)

@nicola 21 сен 2011 в 20:07

Великий и могучий русский язык
translate.google.com/?tab=mT#ru|en|%D0%A2%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0

translate.google.com/?tab=mT#en|ru|typography

ru.wikipedia.org/wiki/%D0%A2%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0 => en.wikipedia.org/wiki/Typography
Всеже, в данном контексте, это одна хрень :(

@VasilioRuzanni 21 сен 2011 в 20:08

По-английски пишется одинаково, но в зависимости от контекста, на русский переводится по-разному.

@Mithgol 21 сен 2011 в 04:51

Ошеломляющее могущество кернинга. Заранее сочувствую любителям отключать джаваскрипты.

@Vladimirych 21 сен 2011 в 05:22

Я вообще этого не понимаю, постоянно это бахвальство в комментариях: «а у меня скрипты отключены», «а вы что еще адблок не установили?», «а у меня флэш блок давно стоит». Ну пусть установят себе IE 1.0 тогда и радуются.

@bazzzman 21 сен 2011 в 05:35

Отключаю JS и Flash по умолчанию по трём причинам:
1. Не доверяю вражеским сайтам. XSS, уязвимости в браузере/flash'е.
2. Компьютер у меня не быстрый, при 5-6 открытых вкладках с Flash и JS волшебством Firefox начинает тупить.
3. Для _чтения_ страниц JS понты и Flash реклама не нужна. Я же смогу прочитать текст без прекрасного кернинга?

Сайты которыми пользуюсь постоянно добавляю в белый список NoScript и Flashblock в два клика.

@Vladimirych 21 сен 2011 в 05:37

Ну и отлично IE 0.1 в помощь. Текст читать умеет, что еще нужно в 21-м веке, правда?

@TheShock 21 сен 2011 в 05:41

IE 0.1 — глючное и тормозное говно, что вы советуете? Есть ведь отличный, быстрый и удобный lynx. И им, кстати, в отличии от IE 0.1 до сих пользуются.

@AndrewStephanoff 21 сен 2011 в 09:11

ну или elinks

@bazzzman 21 сен 2011 в 05:43

Толстовато. В IE 0.1 нельзя «сделать хорошо» в два клика.

Если сайт разваливается, не работает, я выключаю JS. Или ухожу с сайта :)

@opposite 21 сен 2011 в 09:28

Я отключаю только флэш. Но могу подтвердить, что в 90% ДжаваСкрипт добавляет нелепые свистоперделки, которые не несут никакой функциональной нагрузки. Ну а для флэша это утверждение верно на 99%.

@mukizu 21 сен 2011 в 05:43

>>Не доверяю вражеским сайтам.

Дальше не читал

@burzilov 21 сен 2011 в 05:53

Нужно ходить на проверенные вражеские сайты

@korzhik 21 сен 2011 в 06:27

да там больше половины или дорвеи или не рабочие :)))

@ilyaplot 21 сен 2011 в 06:14

используйте wget и cat

@0mm 21 сен 2011 в 06:41

Всю жизнь JS включен. Хожу по разным-разным сайтам и еще ни разу не вступил в говно. Что я делаю не так?!

@Mithgol 21 сен 2011 в 08:01

Я сказал «сочувствую любителям отключать джаваскрипты», но вот Adblock Plus и Flashblock — это другое дело: у меня и у самого стоят они.

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

Adblock Plus позволяет очистить страницу от рекламных скриптов и других рекламных элементов, что, как правило, улучшает и внешний вид её (способствуя единству стиля), и скорость загрузки из Сети, и поворотливость (за счёт отказа от выполнения лишнего кода рекламных и следящих скриптов).

@Mithgol 21 сен 2011 в 08:03

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

@naryl 21 сен 2011 в 08:12

> Я вообще этого не понимаю, постоянно это бахвальство в комментариях

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

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

Как это связано с нежеланием запускать на своей машине потенциально вредоносный код? Если отключить js, то сэкономится куча траффика (на вырезанных .js файлах на privoxy) и исчезнут мешающие получать информацию с сайта свистоперделки. На доверяемых сайтах вроде habrahabr.ru где последствия для авторов за вредоносный код в скриптах будет достаточно серьёзной и они действительно используют js только ради более удобного интерфейса, его можно и включить. Установка IE 1.0 же, если в вашу светлую голову, дающую такие ценные указания, эта мысль не пришла, сделает получение информации с любого сайта почти невозможным. Кроме того, зачем е*****я с поиском и установкой IE 1.0 в wine, когда можно просто взять современный браузер вроде lynx или w3m?

@naryl 21 сен 2011 в 12:46

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

@kolyuchii 21 сен 2011 в 05:24

Любители отключать яваскрипты сами себя наказали.
Ты ещё любителям Lynx посочувствуй.

@roman_pro 21 сен 2011 в 14:06

В свете последних новостей сочувствую тем, у кого они разрешены везде по умолчанию.

@JiLiZART 21 сен 2011 в 14:14

Это как то связано?

@roman_pro 21 сен 2011 в 14:26

Для применения описанной там атаки на https используется javascript. Если скрипты запрещены — атака просто не сработает. Так что у всего, очевидно, есть свои "+" и "-", в том числе и у отключения скриптов по умолчанию.

@EvgeniyLazarev 21 сен 2011 в 05:50

А в блоге Оперы меня заминусовали за правду :-)

@ChemAli 21 сен 2011 в 06:56

Без ссылки — ложь.

@EvgeniyLazarev 21 сен 2011 в 10:32

habrahabr.ru/company/opera/blog/127591/#comment_4213345

@Mithgol 21 сен 2011 в 11:31

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

@eatart 21 сен 2011 в 05:51

вроде как и прикольно да только нахрен не надо

@skitalets 21 сен 2011 в 06:00

Типографика для веб-дизайна крайне важна. Жаль, что вещь не кросс платформенная, но это не суть. Главное, что полезно!

@aps 21 сен 2011 в 06:07

За правку кернинга нужно убивать.

@Mithgol 21 сен 2011 в 08:04

Попейте водички.

@aps 21 сен 2011 в 11:54

Выпей яду

НЛО прилетело и опубликовало эту надпись здесь

@Mithgol 21 сен 2011 в 10:04

На заглавной странице 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, я рекомендовал бы поглядеть, хорошо ли он работает с Оперою.

@Mithgol 21 сен 2011 в 11:28

Опечатка: в последнем абзаце вместо «typekit.js» следует читать «typeface.js».

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

НЛО прилетело и опубликовало эту надпись здесь

@r3s3t 21 сен 2011 в 07:18

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

Вообще, ничего после этого не произойдёт, потому что нужно ещё указать необходимые CSS-стили для правил. А всё то же самое можно сделать и без этого фреймворка, просто с помощью CSS, причём для всех браузеров.

@JiLiZART 21 сен 2011 в 07:34

или одна унифицированная строчка или пять(утрирую) под все браузеры.

@r3s3t 21 сен 2011 в 07:39

Не могу согласиться. Kerning.js плохо работает в Опере и не работает в ИЕ, а если символ, у которого нужно подкорректировать какой-либо отступ, заключить в span и назначить ему нужные микроскопические margin'ы, то это сработает всюду. Нельзя недооценивать силу ручного труда.

@GearHead 21 сен 2011 в 07:47

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!

@r3s3t 21 сен 2011 в 15:44

Ужас какой. :)

@Masterkey 21 сен 2011 в 08:02

И желательно это делать через псевдоклассы, а не как показано выше, а то фиг его знает как это гугл прочитает

@r3s3t 21 сен 2011 в 08:14

Нормально читает, я пробовал. ;)

@Masterkey 21 сен 2011 в 10:11

Если не секрет дайте линк на подобную страницу

@r3s3t 21 сен 2011 в 15:50

Обратите внимание, во что у меня на странице обёрнуто слово iOS. «Яндекс» совершенно нормально проиндекировал этот текст:

Гугл пока ещё не все страницы моего сайта обошёл, про его выдачу с уверенностью сказать не могу, но предполагаю, что тоже всё будет в порядке.

@r3s3t 21 сен 2011 в 15:56

Ой, ссылки не приложились (ах, карма, бессердечная ты сука). Вот ссылка на ту страницу с текстом: talala.ru/works/characters/
А вот выдача Яндекса: i30.fastpic.ru/big/2011/0921/ef/8db08cbbe6cb753f4c432d233c7feaef.png

@GearHead 21 сен 2011 в 15:52

span'ы, a, и все прочие элементы, которые по дефолту являются inline, гугл сливает в одно слово. накалывался на этом уже, когда делал стилевую разбивку тегов не через ul-li, а через последовательность <a>. гугл в выдаче под заголовком, где показывает включения ключевиков в тексте, отображал что-то вроде «компьютерыновостиинформационные технологииинтернет»

@Mithgol 21 сен 2011 в 08:06

Такой труд не обязательно должен быть именно ручным; быть может, кто-нибудь со временем сочинит решение, работающее на сервере (скажем, в PHP), и тем невозбранно достигнет желаемого.

@r3s3t 21 сен 2011 в 08:30

Будем на это надеяться. А пока ручками…

НЛО прилетело и опубликовало эту надпись здесь

@stroncium 21 сен 2011 в 08:11

Мне эта ваша финтифлюшка нафиг не нужна, но чисто из любви к людям — добавьте же вариант blah^5:

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

vs

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

@david_mz 21 сен 2011 в 08:12

Странно, вроде бы всё кроме поворотов и прочих хитрых трансформаций должно легко делаться кроссбраузерно. Уж кернинг точно — там же просто оборачивания каждой буквы в спан + magin-ы.

@dom1n1k 21 сен 2011 в 08:51

Звучит круто и желанно, но на практике, думаю, всё будет менее радужно.
Дело в том, что минимальная дискретность такого браузерного псевдокернинга (1px) слишком груба для большинства тектстов. Это будет приемлемо только для заголовков, набранных очень крупным (не менее ~25px, а лучше еще больше) кеглем. Применять другие единицы типа em не получится, поскольку браузер все равно округлит их до целых пикселей, причем малопредсказуемым образом, и всё может стать только хуже.

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

@leshaogonkov 21 сен 2011 в 10:41

Уже лет 5 у меня довольно стабильно работает указание 4 знаков после запятой, если нужно точное округление из относительных размеров.

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

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

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

@dom1n1k 21 сен 2011 в 10:51

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

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

@leshaogonkov 21 сен 2011 в 11:00

Не правильно понял вашу фразу

браузер все равно округлит их до целых пикселей, причем малопредсказуемым образом

Рендеринг шрифтов это конечно жесть, абсолютно с вами согласен.

@Dmitry_f 21 сен 2011 в 09:52

Вообще не понял, зачем нужно, ведь все это делается и средствами css.
Отсчитывать буковки каждый раз — WTF?!

@dom1n1k 21 сен 2011 в 10:54

Ну правильно, всё это теоретически можно сделать через CSS ручками — только трудоемко очень. Оборачивать отдельные буквы в span-ы и каждому прописывать врукопашную марждины?
Скрипт не делает ничего волшебного, он лишь дает интерфейс-обертку для тех самых средств CSS.

@Dmitry_f 21 сен 2011 в 16:30

Что трудоёмкого? Нужную букву оборачиваем в нужный span. Это трудоёмкость — лишние три секунды?
Плюс оборачивая буквы, мы всегда можем вставить нужный span в нужном месте. А с этой либой нам придётся постоянно пересчитывать местоположение буквы относительно предложения и править css. Бред собачий.

@aps 21 сен 2011 в 13:21

>Вообще не понял, зачем нужно
Кернинг — расстояние между буквами, которые подбираются шрифтовыми дизайнерами для каждой пары букв в зависимости от их начертания для удобочитаемости и сохранения пропорций. Т.е. художник-шрифтовик для каждой пары (типа AV, II, TA) тщательно подбирает трекинговое расстояние и менять его можно только сдуру.

@Mithgol 21 сен 2011 в 14:50

Если художник-шрифтовик действительно взял на себя нелёгкий труд создать кернинговые пары для шрифта и прописать для них желаемые межбуквенные расстояния — тогда да, тогда, конечно, не так-то просто придумать повод переменить их. Но если шрифт сделан за неделю на коленке (или, например, на FontStruct), то тогда ни о каком авторском кернинге и речи быть не может. В том вижу полезность специального кернинга.

@aps 22 сен 2011 в 10:40

> Но если шрифт сделан за неделю на коленке
Автору этого шрифта не поможет никакая библиотека. Ему вообще ничего не поможет кроме яду.
Так же как и вам.

@Dmitry_f 21 сен 2011 в 16:28

Капитан, я о библиотеке, а не о кёрнинге. Вообще моветон корежить кернинг качественных и проверенных временем шрифтов. Плюс совершенно не понимаю, зачем лишний код, когда можно обойтись и простыми средствами, с большими плюшками.

@aps 22 сен 2011 в 06:56

> Вообще моветон корежить кернинг
Увы, для большинства уеб-дизайнеров, верстальщиков и тем более программистов это НЕочевидно.

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