Свет увидели и новая версия iOS 9, и OS X 10.11 El Capitan, и даже watchOS 2. И всех их объединяет новый шрифт — San Francisco. И как молодого веб разработчика, меня заинтересовала возможность использовать данный шрифт для веб сайтов. Так родился этот перевод статьи «I Left My System Fonts In San Francisco».

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

Что ж, скоро мы все будем сталкиваться с контентом, отображаемым в San Francisco, и нам понадобится как-то указать этот самый шрифт в нашем CSS.

По традиции мы можем попробовать указать шрифт San Francisco явно, что-нибудь в этом стиле:

body {
  font-family: "San Francisco", "Helvetica Neue", "Lucida Grande";
}

К сожалению, в свежеустановленной OS X 10.11 (El Capitan) нет этого шрифта.



Но как это возможно, ведь это же системный шрифт?
Узнать всё, что скрыто

Было время, когда каждый веб-разработчик писал свой типограф или думал о нём. Я не стал исключением и написал типограф на PHP. Но как сделать типограф без нормальной поддержки UTF-8, в то время я не представлял, в итоге забросил идею.

Прошло время, но идея создания типографа не оставляла, и я решил написать его уже на JavaScript.
Читать дальше →

За последние полгода интернет просто наводнила «буква» «й». Я встречал ее на новостных сайтах, в мессенджерах, на хабрахабре и geektimes. «О чем вообще речь?» — спросите вы — «Я вижу обычную букву й!». Вам повезло. Я вижу ее так:
Если вы из тех счастливчиков, у кого буква «й» выглядит так же, как и «настоящая» «й», вот вам фокус: скопируйте ее (букву «й») в блокнот, поставьте курсор в конец буквы и нажмите backspace. Магия, отвал башки просто!
Как же так получается?

Графемы, глифы, code points, компоновка и байты

Очень краткое введение:
Графема — то, что мы привыкли называть буквой в смысле единицы текста. Глиф является единицей графики, и может графически представлять саму графему или же ее часть (например, различные диакритические знаки: ударения, умляуты, надстрочное двоеточие у буквы ё и т.д.).
Code Point — то, как записывается текст в представлении Unicode. Одна графема может записываться разными code points.
Code Points кодируются различным байтовым представлением в зависимости от стандарта: UTF-8, UTF-16, UTF-32, BE, LE…
Языки программирования, как правило, работают с code points; для нас, людей, привычно мыслить глифами.

Давайте же наконец разберемся с нашей буквой й. Что же в ней такого особенного?
Эта буква представляет из себя одну графему («и» краткое), но записана она двумя code points:

U+000438 CYRILLIC SMALL LETTER I
U+000306 COMBINING BREVE

Если вы проделали фокус с нажатием backspace, вы как раз и стерли COMBINING BREVE, или, говоря полиграфическим языком, значок краткости над гласной.

Обычная буква «и» краткое, которую мы все с вами привыкли набирать клавиатурой, представляет из себя композитный символ, который записывается одним code point:

U+000439 CYRILLIC SMALL LETTER SHORT I

Читать дальше →