Типографика *

Юникод исключительно сложен. Мало кто знает все хитрости: от невидимых символов и контрольных знаков до суррогатных пар и комбинированных эмодзи (когда при сложении двух знаков получается третий). Стандарт включает 2¹⁶ кодовых позиций в 17-ти плоскостях. По сути, изучение Юникода можно сравнить с изучением отдельного языка программирования.

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

Специалист по безопасности Джон Грейси продемонстрировал на примере GitHub баг проверки адреса электронной почты для восстановления забытого пароля. Подобные баги можно встретить и на других сайтах.

Многих отпугивает слово «стенография» и есть от чего, так как под этим подразумевается сложная система, которую не только длительно надо изучать, но и постоянно применять, чтобы был от этого толк. Я же предлагаю вам ознакомиться с наипростейшим методом записи русской устной речи с помощью упрощенных значков, что конечно не повысит в 2-4 раза скорость записи как в стенографии, но точно облегчит эту запись.

Для изучения алфавита требуется 30 минут (да, это точно и проверено на ученике 2 класса обычной школы), еще около часа желательно почитать что-то на этом алфавите, ну и само письмо придется нарабатывать на скорость в течение дня.

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

Опубликованная месяц назад статья Алексис Бингесснер «Рендеринг текста вас ненавидит» очень мне близка.

В далёком 2017 году я разрабатывал интерактивный текстовый редактор в браузере. Неудовлетворённый существующими библиотеками на ContentEditable, я подумал: «Эй, да просто заново реализую выделение текста! Разве это сложно?» Я был молод. Наивен. Прикинул, что справлюсь за две недели. На самом деле попытка решить эту проблему отняла несколько лет моей жизни, в том числе год оплачиваемой работы с утра до вечера по разработке текстового редактора для новой ОС.

На работе мне посчастливилось многое узнать у наставников с огромным опытом в этой области. Я слышал много, очень много страшных историй. В том числе об инженере, который поддерживал приложение Windows с кастомной реализацией текстового поля — и хотел перейти с устаревшего API ввода текста на новую версию. Вот список интерфейсов для ввода текста в этой новой версии:

Рендеринг текста: насколько сложным он может быть? Оказывается, невероятно сложным! Насколько мне известно, буквально ни одна система не выводит текст «идеально». Где-то лучше, где-то хуже.

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

В общем, сразу скажем: здесь нет последовательных правильных ответов, всё намного важнее, чем вы думаете, и всё влияет на всё остальное.

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

В данной статье я не предлагаю полностью заменить Punto Switcher (Спасибо Сергею Москалёву за данную программу), а только в очень ограниченном функционале. Довольно давно пользуюсь программой Punto Switcher, но не в целях автопереключения, а как переключатель по левому и правому Shift. Ещё со времен Dos мне удобно такое переключение, да и под Windows (особенно это касается 7 версии) мне не надо задумываться, какой там язык окажется в окне, а достаточно нажать левый Shift и мой основной русский уже готов к вводу. Заметьте, что пока правая рука на мышке, то левая уже может или переключать языки или выставить русский всего лишь нажатием на левый Shift, и для этого даже не надо никуда отвлекаться, все делается автоматически. Таким образом, мне всегда было удобно переключать язык на русскую раскладку левым Shift-ом, а английский правым Shift-ом.

Время идёт, и тут понадобилось еще один язык внедрить пользователям, да ещё хотят поддержку раскладки Бирмана, да и других раскладок. Какое это неудобство я смог оценить сам и вот поэтому и пришлось придумывать, на чём это можно сделать. Если взять просто раскладку Бирмана, так по правому Alt если есть горячие клавиши, то они перекрывают эту раскладку и ничего не работает. А таких горячих клавиш полно, так как на каждый ярлык рабочего стола можно быстрый вызов по «Ctrl+Alt+клавиша» навесить. Если же сделать по подобии раскладки Бирмана, но без правого Alt, по клавишам, то проблема переключения кучи этих языков так и так будет стоять.

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

Под катом рисунок «Расширение раскладки клавиатуры в программе «Keybord Assistant 1.0»» и подробное пояснение к этому рисунку.

Добро пожаловать в первую часть «Современного рендеринга текста в Linux». В каждой статье из этой серии мы разработаем самодостаточную программу на C для визуализации символа или последовательности символов. Каждая из этих программ будет реализовывать функцию, которую я считаю необходимой для современного рендеринга текста.

В первой части настроим FreeType и напишем простой рендерер символов в консоли.



Вот что мы будем писать. А вот и код.

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

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

Посмотрим, что у нас получится. Спойлер:

Как полюбить правила русского языка

Привет! Я Ваня Соловьёв, дизайн-директор в DocDoc (входит в группу Сбербанк). Сегодня рубрика Лекторий, в которой рассказываем обо всём и понемногу.

Мы, в команде дизайна, любим систематизировать знания и процессы:

• вносим повторяющиеся элементы в гайдлайны и описываем их правила построения, когда проектируем интерфейс продукта;
• создаём корпоративные шаблоны, когда менеджеры часто подходят к нам и просят «привести презентации в порядок»;
• с помощью брендбука объясняем, как взаимодействовать с фирменным стилем и создавать иллюстрации, когда начинаем плотно работать с подрядчиками;
• создаем конструктор иллюстраций в Figma, когда для приложения нужно нарисовать кучу иллюстраций.
  

  Такая систематизация помогает исключить повторяющиеся задачи из рабочего процесса.
  

Всё началось с проблемы

В последнее время появилось много фантастических исследований по 2D-рендерингу. Пётр Кобаличек и Фабиан Айзерман работают над Blend2D: это один из самых быстрых и точных CPU-растеризаторов на рынке, с инновационной техникой JIT. Патрик Уолтон из Mozilla изучил не один, а три разных подхода в Pathfinder, кульминацией чего стал Pathfinder v3. Раф Левиен построил вычислительный конвейер по технологии, описанной в научной статье Гана с коллегами о векторных текстурах (2014). Похоже, некое дальнейшее развитие получают поля расстояний со знаком: здесь независимо работают Адам Симмонс и Сара Фрискен.

Кто-то может спросить: а почему вокруг 2D так много шума? Это ведь не может быть намного сложнее, чем 3D, верно? 3D — совершенно другое измерение! Тут у нас на носу трассировка лучей в режиме реального времени с точным освещением, а вы не можете осилить невзрачную 2D-графику со сплошными цветами?

Для тех, кто не очень хорошо разбирается в деталях современного GPU, это вправду очень удивительно! Но в 2D-графике множество уникальных ограничений, которые чрезвычайно её усложняют. К тому же она не поддаётся параллелизации. Давайте прогуляемся по исторической дорожке, которая нас сюда привела.

Статья посвящена всем пользователям русской клавиатуры, желающим повысить скорость набора текста.

Зарубежные создатели интерфейсов редко заботятся об их адаптации к чужим культурам. Ярким примером такого интерфейса является широко используемая всеми компьютерная клавиатура (здесь и далее подразумевается клавиатура по стандарту 104 ANSI).

Кажется, с заголовком что-то не так? Это одна из проблем, с которыми сталкиваются веб-разработчики при добавлении поддержки таких языков, как арабский. В этой статье расскажем о проблемах, с которыми мы столкнулись, и решениях, которые придумали для поддержки арабского языка в десктопном клиенте Spotify и веб-плеере.

Локализация в Spotify — важное дело. Наша миссия состоит в том, чтобы «раскрыть потенциал человеческого творчества, предоставляя миллионам музыкантов возможность зарабатывать своим искусством на жизнь, а миллиардам поклонников — наслаждаться и вдохновляться им». Для достижения этой миссии важно, чтобы пользователи из разных стран могли эффективно общаться на своих языках. Недавно мы запустили Spotify в регионах Северной Африки и Западной Азии. Одним из языков в этих регионах является арабский. В отличие от английского, арабский читается справа налево. Это сказывается на веб-сайтах, которые хотят поддерживать арабский язык.

Восемь золотых правил Шнейдермана помогут вам создать лучший интерфейс

Следуйте «Восьми золотым правилам дизайна интерфейса» Бена Шнейдермана, если вы хотите создавать великолепные, производительные и не вызывающие разочарований пользовательские интерфейсы. Apple, Google и Microsoft являются одними из самых успешных компаний, чьи хорошо продуманные продукты отражают правила Шнейдермана. Характеристики, полученные из золотых правил Шнейдермана, могут быть признаны в различных руководствах по пользовательскому интерфейсу, разработанных корпоративными гигантами, такими как упомянутые выше компании. Визуальное воплощение этих правил становится еще более очевидным в создаваемых ими популярных интерфейсах. Эта статья научит вас улучшать свою работу, интегрируя 8 золотых правил.

Мы в журнале The Economist очень серьёзно относимся к визуализации данных. Каждую неделю у нас публикуется около 40 графиков в печатной и онлайновой версиях, а также в приложениях. Мы везде стремимся точно представить цифры, чтобы они лучше всего иллюстрировали тему. Но иногда допускаем ошибки. Важно усвоить эти уроки, чтобы не повторять ошибки в будущем. Наверняка наш опыт окажется полезен и для вас.

Погрузившись в архивы, я нашла несколько поучительных примеров. Преступления против визуализации данных сгруппированы по трём категориям. Это графики, которые:

1. вводят в заблуждение;
   
2. сбивают с толку;
   
3. не могут довести смысл.

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

Изучение глифов на терминалах DEC VT100 и VT220

Недавно я немного увлёкся эмуляцией аналоговых медиа: хотелось воссоздать растровую графику ЭЛТ, как на «стеклянных терминалах» прошлого, таких как культовая серия VT от Digital Equipment Corporation (DEC). В процессе возник ряд вопросов об особенностях отображения шрифтов в пиксельной графике ЭЛТ. Интересно, как на самом деле выглядели шрифты и можно ли реконструировать их по спецификациям?


Современные шрифты TrueType воссоздают глифы VT220. Имейте в виду, что VT-терминалы поддерживали два режима разрешения: один на 132 символа в строке и один на 80 символов (char-matrix 9×10 и 10×10, соответственно), в последнем интервал расширен на один пиксель

Благодаря обилию технической информации на сайтах вроде vt100.net и bitsavers.org можно легко определить внешний вид тех шрифтов. Например, мы можем восстановить глифы из прошивки терминалов. Есть даже шрифты TrueType, которые повторяют типографику VT220: Glass TTY VT220 с растровыми строками и DEC Terminal Modern с современными, гладкими очертаниями (на иллюстрации вверху).

Недавно меня пригласили выступить с вечерней лекцией в Типографском обществе Австрии. Для меня стало большой честью последовать по стопам таких светил, как Мэтью Картер, Вим Краувел, Маргарет Калверт, Эрик Шпикерман и покойная Фреда Сэк.

Я рассказал о некоторых золотых правилах типографики в интернете, а потом во время секции QA меня спросили о текущей ситуации с автоматическими переносами в вебе. Это хороший вопрос, особенно с учётом того, что немецкий язык знаменит часто используемыми длинными существительными (например, Verbesserungsvorschlag означает «предложение для улучшения»), поэтому переносы широко используются в большинстве письменных носителей.

— Ямщик, а далеко до релиза?
— Да пара вёрсток.

Докатился — пишу на Хабр о том, как писать на Хабр. Хотя причины есть — я пять лет занимаюсь этим, перевидал и перепробовал кучу инструментов, так что теперь делюсь с вами самыми лучшими.

Я расскажу о том, как прийти от HTML-разметки в Хабраредакторе к осмысленной вёрстке, быстрому оформлению постов и продуктивной совместной работе. Здесь — о моём опыте в Яндекс.Деньгах и о том, как я организовал работу над хабратекстами, чтобы не было мучительно больно.

Привет, Хабр! Представляю вашему вниманию перевод статьи The Joy of Haxe. FontStruct’s love affair with a neglected programming language.


Довольно грубая попытка воспроизвести логотип Haxe в редакторе шрифтов FontStruct

Недавно мы открыли исходный код наиболее важной части нашего модуля для создания шрифтов. Это библиотека fonthx для создания TrueType-шрифтов, и написана она на Haxe.
В данной статье практически нет кода. Если же вас интересует только код, то ознакомиться с ним можно на github, а его работа показана на примере простейшего редактора пиксельных шрифтов, построенного с использованием библиотеки fonthx.

После небольшого перерыва с лекциями мы начинаем предновогодний спринт. Как и год назад, он будет целиком состоять из материалов с большой конференции FrontTalks, которую Яндекс провёл в Екатеринбурге. Начнём с выступления Антона Кастрицкого — разработчика из Яндекс.Маркета. Антон показал на примерах, как и из чего собираются интерфейсы, а также рассказал про тексты, их оформление, доступность и производительность в контексте современных веб-приложений.


— Меня зовут Антон, я работаю разработчиком интерфейсов в команде партнерских интерфейсов Яндекс.Маркета. Cегодня я хочу поговорить про типографику в вебе.

От переводчика: дизайнер Анджела Рейчерс рассказывает о том, почему со временем шрифты становятся только лучше.

Разработка новых шрифтов — дело хлопотное, все завязано на технологии, позволяющей создавать и распространять новые шрифты. Хотя идея параметрических и вариативных шрифтов возникла еще в семидесятых годах прошлого века, технологии их создания и изменения появились лишь недавно. Обе категории шрифтов отошли от изначального канона — шрифта как окончательного и неизменного продукта.

В 2010 году Патрик Маккензи написал знаменитую статью «Заблуждения программистов об именах», перечислив 40 фактоидов, которые не всегда верны в отношении человеческих имён.

Думаете, программисты сели, подумали и изменили обработку имён в компьютерных системах? К сожалению, не совсем. Нас по-прежнему повсеместно просят заполнить онлайн-формы, которые предполагают обязательное наличие имени и фамилии (причём именно в таком порядке). Эти системы по-прежнему предполагают, что наши имена всегда можно записать символами алфавита, зачастую только ASCII.