Как стать автором
Поиск
Написать публикацию
Обновить
2

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

Играем с шрифтами

Сначала показывать
Порог рейтинга
Уровень сложности

Рендеринг текста вас ненавидит

Время на прочтение14 мин
Количество просмотров30K

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

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

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

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

Замена Punto Switcher, раскладки Бирмана с помощью скрипта на autohotkey

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

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

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

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

Современный рендеринг текста в Linux: часть 1

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

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



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

Минимальный возможный шрифт

Время на прочтение9 мин
Количество просмотров38K

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


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

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


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

В поисках длинного тире

Время на прочтение2 мин
Количество просмотров7.4K

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


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


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


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

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


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

Почему векторная графика 2D намного сложнее, чем 3D

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

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

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

Русская расширенная клавиатурная раскладка

Время на прочтение3 мин
Количество просмотров40K
image

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

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

(Справа налево (Зазеркалье

Время на прочтение6 мин
Количество просмотров12K

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

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

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

Время на прочтение8 мин
Количество просмотров16K


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


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

Некорректные диаграммы: наш опыт

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

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

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

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

Воссоздание шрифтов с экрана ЭЛТ

Время на прочтение4 мин
Количество просмотров17K
Изучение глифов на терминалах 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 с современными, гладкими очертаниями (на иллюстрации вверху).
Читать дальше →

Всё, что нужно знать об автоматических переносах в CSS

Время на прочтение6 мин
Количество просмотров51K


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

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

Пост-пост, мета-мета. Учимся писать на Хабр

Время на прочтение6 мин
Количество просмотров16K


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


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


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

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

Ближайшие события

Радость Haxe. Роман с обделенным вниманием языком программирования

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

Логотип Haxe в редакторе шрифтов FontStruct

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

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

Типографика в вебе. Лекция Яндекса на FrontTalks 2018

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


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

Вариативные и параметрические шрифты — win-win для дизайнеров

Время на прочтение3 мин
Количество просмотров4.2K


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

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

Заблуждения программистов об именах — с примерами

Время на прочтение10 мин
Количество просмотров29K


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

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

Sans Forgetica: шрифт, который позволяет немного лучше запоминать прочитанное

Время на прочтение3 мин
Количество просмотров63K

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

В 2011 году на экранах кинотеатров появился фильм «Области тьмы», который отчасти отображал заветную мечту многих — улучшить свою память и ускорить мыслительный процесс. На днях ученые из Королевского мельбурнского технологического института объявили о создании … нет, не таблетки, но шрифта, который позволяет улучшить «усваиваемость» прочитанного текста.

Текстовый редактор — это вам не высшая математика, тут думать надо

Время на прочтение17 мин
Количество просмотров98K
Современные текстовые редакторы умеют не только бибикать и не давать выйти из программы. Оказывается, внутри них кипит очень сложный метаболизм. Хотите узнать, какие ухищрения предпринимаются для быстрого пересчета координат, как к тексту приделываются стили, фолдинги и софтврапы и как это всё обновляется, при чем тут функциональные структуры данных и очереди с приоритетами, а также как обманывать пользователя — добро пожаловать под кат!



В основе статьи — доклад Алексея Кудрявцева с Joker 2017. Алексей уже лет 10 пишет Intellij IDEA в JetBrains. Под катом вы найдете видео и текстовую расшифровку доклада.
Читать дальше →

Тренды дизайна в 2018: прогноз и реальность

Время на прочтение11 мин
Количество просмотров34K


Примечание переводчика: эту замечательную статью не перевели для Хабра ни в начале года, ни позднее. При том что она действительно полезная и заслуживает внимания. Поэтому, несмотря на то, что почти ⅔ 18-го года уже прожиты, я всё-таки решилась на перевод. Заодно сравнила прогнозы с реальностью, о чём оставила комментарии по тексту.

Внимание: под катом много тяжёлых гифок и красоты!
Читать дальше →

Вклад авторов