Как стать автором
Обновить
9

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

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

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

Nota, Typst и Evidence. Языки программирования для генерации документов

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров8K


Все настолько привыкли к Markdown, что считают его неким стандартом для оформления документов в вебе. Но это не конечная истина, высеченная на камне, а просто популярный язык разметки, как HTML и TeX.

В то же время появляется всё больше новых языков, которые позиционируют себя как замену, альтернативу или дополнение к Markdown и TeX. В некоторых случаях они включают функции программирования, то есть позволяют добавить в документ исполняемый код. Веб-редакторы нового поколения можно использовать даже вместо Google Docs.
Читать дальше →
Всего голосов 52: ↑52 и ↓0+52
Комментарии4

Новости

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

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


Возжелавший прильнуть к жанру вестернов обратится либо к десятой строчке топ-250 лучших фильмов по версии IMDb, либо уже будет обладать знанием, что начинать нужно с «Хороший, плохой, злой». Там он увидит жадных потных мужчин, которые заканчивают фильм напряжённым мексиканским противостоянием. Жалкая охота за золотом конфедератов разворачивается на фоне кровавых битв Гражданской войны между «Севером» и «Югом». Таким зритель запомнит вестерны как жанр.

В реальности «Хороший» — это не классика, а яркий представитель поджанра ревизионистских вестернов, снят в Европе и наоборот, критикует американскую идеологию направления. В нём нет ничего общего с картинами, где герой встаёт на защиту правильного и справедливого общества от злодеев или кровожадных индейцев. В пятидесятых и шестидесятых классический вестерн сошёл на нет, но в коллективном сознании критика быстро заместила критикуемый объект. Когда Марти Макфлай жалуется на анахронизм наряда, он сравнивает себя с антигероями Клинта Иствуда, а не бравыми ковбоями в исполнении Джона Уэйна.

Иногда нашему восприятию требуются корректировки. Собственные заблуждения необходимо не забыть при проектировании информационных систем. Помнить нужно о многом: для времени, карт и почтовых адресов получаются длинные списки. Для текста неожиданностей мало.

Заблуждение 1. Любые символы, кроме управляющих, имеют предсказуемую ширину


В реальности ширина символов может отличаться даже в моноширных шрифтах.
Читать дальше →
Всего голосов 96: ↑96 и ↓0+96
Комментарии51

Monotype ушел из России. Чем заменить популярные иностранные шрифты?

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

На прошлой неделе компания Monotype — владелец прав на популярные шрифты Times New Roman, Verdana, Arial, Helvetica и Tahoma — объявила об ограничении доступа из России к своей библиотеке и сообщила о приостановке взаимодействия с российскими организациями. Новость стала еще одним поводом обратить внимание на специфику использования проприетарных шрифтов в бизнес-среде – проблему, которая выходит далеко за рамки ситуации с Monotype. Речь о возможных сложностях при отображении существующих документов и шаблонов, особенно при работе с различными таблицами, формами и автоматически формируемыми файлами из информационных систем.


Для минимизации подобных проблем мы в МойОфис еще шесть лет назад представили свои шрифты XO_Fonts. Они свободно распространяются и доступны бесплатно. Сегодня этот набор состоит из 11 шрифтов и 24 начертаний. Их особенностью является метрическая совместимость с распространенными проприетарными шрифтами, которая позволяет сохранить оригинальное форматирование и верстку документов, ранее созданных с использованием популярных иностранных шрифтов.

Некоторое время назад на D-Russia была опубликована история создания XO_Fonts. Теперь мы предлагаем ознакомиться с ней и читателям Хабра.

Читать далее
Всего голосов 60: ↑57 и ↓3+54
Комментарии59

Мимо наборной кассы: феерическая профанация шрифтового дела от компании «Паратайп»

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

Это история о том, как я разочаровался в компании «Паратайп» и шрифтах, которые она производит.

Я делал PDF⁠-⁠презентацию, чтобы показать европейским иностранцам. И что⁠-⁠то меня пробило на гиперкачественную вёрстку с образцовым типографингом. Пускай, думаю, у иностранцев сорвёт шаблон: они⁠-⁠то привыкли, что все русские верстают по⁠-⁠колхозному, особенно если думают, что нет.

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

Я выбрал PT Sans, потому что графика этого шрифта — вполне на мировом уровне. Однако…

Читать далее
Всего голосов 262: ↑248 и ↓14+234
Комментарии129

Истории

Font size бесполезен, давайте это исправим

Время на прочтение5 мин
Количество просмотров28K
Что происходит, когда вы указываете в редакторе "font_size": 32? Я бы вам всё равно рассказал, но хорошо, что спросили.

Попробуем догадаться. Я пользуюсь Sublime Text 4 под macOS:


Если мы измерим сами буквы, то нигде не найдём числа 32:

32 — это не ширина и не высота буквы, и не высота заглавной буквы, и не рост строчных знаков, и не высота верхних или нижних выносных элементов. Что за дела?
Читать дальше →
Всего голосов 73: ↑70 и ↓3+67
Комментарии59

Под капотом у Emoji

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


В течение последних нескольких недель Nikita Prokopov внедрял поддержку эмодзи для Skija. Он решил поделиться несколькими мелкими деталями того, как это «самое большое новшество в человеческом общении со времен изобретения буквы image» работает под капотом.

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

Unicode


Каждый символ на компьютере кодируется числом. Самая популярная кодировка — Unicode, а две самые распространенные подвариации — UTF-8 и UTF-16.

Unicode выделяет 221 (2 млн) символов, назывемых «codepoints». Из этих двух миллионов сейчас определены только ~150k символов. В эти 150 000 символов впихнули все языки, мёртвые и живые и прочие украшательства. Можно использовать различные шрифты, писать задом наперед и кверх ногами: image, а также отобразить «GHz» как один глиф: image.

Направленная вправо двуглавая стрела с оперением и двумя вертикальными штрихами: image или семиглазый монстр: image. И утка:

image

Читать дальше →
Всего голосов 69: ↑67 и ↓2+65
Комментарии54

Загадочные субтитры на CNN

Время на прочтение3 мин
Количество просмотров49K
Зрители CNN обратили внимание, что в выпуске новостей 12/11/2020 на их официальном YouTube-канале вместо субтитров какая-то каша из обрывков английских слов, сплошным капсом:


Как такое могло получиться? (По состоянию на 1/12/2020, субтитры на YouTube так и не исправлены.)

Stenotype


Американские стенографисты уже больше сотни лет как используют специальные устройства с минимальной 22-клавишной клавиатурой — по две клавиши под каждый палец, чтобы минимизировать движения кистей:



Сто лет назад стенотайп был вариантом печатной машинки, и каждая клавиша оставляла оттиск на бумаге. Каретки не было: после каждого «аккорда» из одной или нескольких одновременно нажатых клавиш, бумага проматывалась на одну строчку вниз. Оттиск каждой литеры приходился всегда на одно и то же место в строке. Клавиши P, R, S, T присутствуют в двух экземплярах каждая — под левой и под правой рукой.

Читать дальше →
Всего голосов 153: ↑153 и ↓0+153
Комментарии102

Система font fallback: что происходит, когда шрифт не может найти нужный символ

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

Поднимите руку, если когда-нибудь сталкивались с такой ситуацией: вы получили текст со странными прямоугольниками или вопросительными знаками.


Или эмодзи при отправке выглядело нормально, но у получателя оно отобразилось в странно разобранном виде.


Вы видели, как пользователь Twitter использует крутые шрифты, хотя сайт, казалось бы, не разрешает выбирать шрифт.


Или вы разобрались, как использовать эти шрифты в Twitter, но кто-то попросил вас подумать о читателях или жаловался, что видит только пустые квадраты.
Читать дальше →
Всего голосов 51: ↑51 и ↓0+51
Комментарии15

Пора обновить ваш монитор

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

Иллюстрация: Юлия Прокопова

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

Поэтому я оптимизирую настройки, чтобы показывать действительно, действительно хорошие буквы. Для этого необходим хороший монитор. Не просто нужен, а ОБЯЗАТЕЛЕН. А под «хорошим» я имею в виду настолько хороший, насколько это возможно. Это мои мысли, основанные на моём собственном опыте того, какие мониторы лучше подходят для программирования.
Читать дальше →
Всего голосов 181: ↑148 и ↓33+115
Комментарии991

Знаменитые дизайнеры vs научные исследования про читаемость шрифтов

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

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

Мы в Тинькофф сравнили мнение знаменитых дизайнеров и ученых о том, какие шрифты легче читать: антикву(с засечками) или гротески(без засечек).


Читать дальше →
Всего голосов 174: ↑169 и ↓5+164
Комментарии126

Этот восхитительный Юникод

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


Перед вами обновляемый список самых замечательных «вкусностей» Юникода, а также пакетов и ресурсов

Юникод — это потрясающе! До его появления международная коммуникация была изнурительной: каждый определял свой отдельный расширенный набор символов в верхней половине ASCII (так называемые кодовые страницы). Это порождало конфликты. Просто подумайте, что немцам приходилось договариваться с корейцами, где чья кодовая страница. К счастью, появился Юникод и ввёл общий стандарт. Юникод 8.0 охватывает более 120 000 символов из более 129 письменностей. И современные, и древние, и до сих пор не расшифрованные. Юникод поддерживает текст слева направо и справа налево, наложение символов и включает самые разные культурные, политические, религиозные символы и эмодзи. Юникод потрясающе человечен, а его возможности сильно недооцениваются.
Читать дальше →
Всего голосов 64: ↑64 и ↓0+64
Комментарии56

Взлом с помощью Юникода (на примере GitHub)

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

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

Специалист по безопасности Джон Грейси продемонстрировал на примере GitHub баг проверки адреса электронной почты для восстановления забытого пароля. Подобные баги можно встретить и на других сайтах.
Читать дальше →
Всего голосов 65: ↑63 и ↓2+61
Комментарии59

Редактирование текста тоже вас ненавидит

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

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

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


Читать дальше →
Всего голосов 99: ↑98 и ↓1+97
Комментарии40

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

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

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

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

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

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

Мы обсудим темы, которые не объединяются в рамках какой-то единой концепции, это просто вопросы, с которыми мне пришлось столкнуться за несколько лет работы над рендерингом текста в Firefox. Например, не будем слишком подробно обсуждать проблемы сегментации текста или управления различными текстовыми библиотеками для конкретной платформы, поскольку этим я не слишком интересуюсь.
Читать дальше →
Всего голосов 113: ↑112 и ↓1+111
Комментарии19

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

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

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


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

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


Читать дальше →
Всего голосов 108: ↑102 и ↓6+96
Комментарии69

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

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

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

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


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


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


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

Читать дальше →
Всего голосов 99: ↑90 и ↓9+81
Комментарии60

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

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



В основе статьи — доклад Алексея Кудрявцева с Joker 2017. Алексей уже лет 10 пишет Intellij IDEA в JetBrains. Под катом вы найдете видео и текстовую расшифровку доклада.
Читать дальше →
Всего голосов 208: ↑206 и ↓2+204
Комментарии189

Тайна Keyboard Level 3 или как напечатать длинное тире

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

Источник: Pexels

Каждый пользователь Хабра, хоть раз напечатавший здесь «пробел-дефис-пробел», может видеть, как дефис магическим образом заменяется на длинное тире. Это сработала автозамена, похожая на ту, что имеется в ворде и других текстовых процессорах.
Читать дальше →
Всего голосов 56: ↑53 и ↓3+50
Комментарии116

Призраки в Юникоде

Время на прочтение3 мин
Количество просмотров29K
В 1978 году Министерство экономики, торговли и промышленности Японии установило кодировку, которую позже назовут JIS X 0208. Она до сих пор является основой всех японских кодировок. Но после выхода стандарта JIS люди заметили нечто странное: некоторые из добавленных символов не имели очевидных источников. Никто не мог сказать, что они означают и как их произносить. Никто не был уверен, откуда они появились. Эти символы теперь известны как призраки (幽霊文字).


Будьте осторожны с тем, что вы пишете. via NDL
Читать дальше →
Всего голосов 89: ↑83 и ↓6+77
Комментарии164
1
23 ...

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