Обработка стеков шрифтов CSS для многоязычных веб-сайтов

Я Лиам, фронтенд-инженер компании Busuu из Лондона, Великобритания. Мы специализируемся на изучении языков, и наша цель - разрушить препятствия и дать каждому возможность выучить новый язык. Во фронтенд-команде мы в первую очередь уделяем внимание нашему веб-приложению (наша основная обучающая платформа Angular - скоро будет React), но мы также создаем и поддерживаем ряд других проектов - маркетинговую платформу на базе Grav CMS, корпоративного приложения. и несколько внутренних инструментов для наших групп по обучению и обслуживанию клиентов.

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

1. Почему мы обратились к этому

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

Наш фирменный шрифт - Museo, и наш первоначальный набор шрифтов был очень простым - если не немного слишком простым:

font-family: "Museo", Arial, sans-serif;

Museo некорректно отображается на некоторых нелатинских языках, так как он не поддерживает определенные алфавиты, и мы получали разные результаты между некоторыми языками интерфейса, такими как:

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

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

Как вы можете видеть выше, большая часть этого предложения отображается с использованием нашего шрифта Museo, но три символа с желтым выделением фактически отображаются в Helvetica.

Глядя на наши инструменты разработчика (я использую Chrome), вы можете увидеть в наших вычисленных свойствах, что визуализированные шрифты для этого конкретного элемента HTML - это как Museo, так и Helvetica.

Здесь мы видим, что Museo загружается из сети, а Helvetica загружается локально.

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

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

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

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

2. Первые впечатления и идеи

Наша первоначальная мысль была, вероятно, наиболее очевидной - давайте проведем ребрендинг (по крайней мере, с точки зрения шрифта) и выберем шрифт, который поддерживает все 15 языков интерфейса, которые мы поддерживаем.

Проблемы с этим подходом:

Расширяемость. Как мы узнаем, какие языки нам нужно поддерживать? Прямо сейчас у нас есть список из 15 языков, но дальновидное мышление оставляет нас с вопросом: что произойдет, если нам придется поддерживать 30, 60 или даже 90 языков через год или два?
Расход. Наши дизайнеры потратили много времени на поиск новых возможностей шрифтов, которые могли бы удовлетворить как минимум то, что нам нужно прямо сейчас. Ничего особенно подходящего не было, и лучшее решение, которое мы могли найти (поддерживающее почти каждый язык, который у нас был) стоило более 4000,00 долларов за все отдельные лицензии.
Масса. Да, шрифты были разделены по алфавиту, и мы могли вводить их по мере необходимости в зависимости от языка интерфейса пользователя, но некоторые исследования привели нас к выводу, что некоторые шрифты слишком тяжелые, если нам нужно поддерживать все наборы символов (что мы и делаем) .

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

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

3. Выбор набора шрифтов.

Сначала мы составили список наших текущих 15 языков и сузили его до языков, которые не могут поддерживать Museo. Все те, которые могут быть классифицированы как font-face-lt (латиница), вместо того, чтобы иметь отдельный класс для каждого из них.

Здесь действительно нет правильного или неправильного. Все это было основано на исследовании, на сочетании изучения того, что выбрали другие сайты, и чтения множества потрясающих статей со всего Интернета. В конце концов мы создали стек для каждого языка, который, по нашему мнению, максимально соответствовал нашему бренду на всех устройствах и в браузерах. Все шрифты в стопках (кроме Museo) являются системными, т. Е. Предварительно установлены на вашем компьютере.

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

Вот наши стеки на момент написания:

Латиница:
font-family: 'Museo', 'Helvetica Neue', 'Helvetica', Arial, sans-serif';

Польский / Турецкий / Вьетнамский:
font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif’;

Арабский:
font-family: 'Geeza Pro', 'Helvetica Neue', 'Helvetica', Arial, sans-serif';

Японский:
font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', 'メイリオ', 'Meiryo', 'ＭＳＰゴシック', 'MS PGothic', 'Helvetica Neue', 'Helvetica', Arial, sans-serif';

Корейский:
font-family: 'Apple SD Gothic Neo', 'NanumBarunGothic', '맑은 고딕', 'Malgun Gothic', '굴림', 'Gulim', '돋움', 'Dotum', 'Helvetica Neue', 'Helvetica', Arial, sans-serif';

Русский:
font-family: 'Charcoal', 'Geneva', 'Helvetica Neue', 'Helvetica', Arial, sans-serif';

Китайский:
font-family: '华文细黑', 'STXihei', 'PingFang TC', '微软雅黑体', 'Microsoft YaHei New', '微软雅黑', 'Microsoft Yahei', '宋体', 'SimSun', 'Helvetica Neue', 'Helvetica', Arial, sans-serif';

4. Реализация нескольких стеков шрифтов.

У нас были следующие требования:

Один компонент многократного использования для поддержки всех наших клиентских приложений.
Возможность применить стек как глобальное свойство к нашему тегу html или body
Возможность перезаписать глобальный стек новым стеком с использованием класса при необходимости (для поддержки нескольких языков на странице)

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

Мы решили использовать этот подход для стеков шрифтов и создать файл в нашем основном репозитории с именем _fonts.scss.

Мы используем Sass в качестве препроцессора CSS.

Во-первых, мы определили наш стек шрифтов по умолчанию - думайте об этом как о стеке «в крайнем случае», когда ничего другого не применимо.

$default-typo: 'Helvetica Neue, Helvetica, Arial, sans-serif';

Вот несколько примеров наших стеков шрифтов на латинском, арабском и русском языках с использованием селекторов-заполнителей SASS:

%font-face-lt {
    font-family: 'Museo', unquote($default-typo);
}
%font-face-ar {
    font-family: 'Geeza Pro', unquote($default-typo);
}
%font-face-ru {
    font-family: 'Charcoal', 'Geneva', unquote($default-typo);
}

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

.font-face-lt,
.font-face-lt body {
    @extend %font-face-lt;
    font-weight: 500;
}
.font-face-ar,
.font-face-ar body {
    @extend %font-face-ar;
    font-weight: 500;
}
.font-face-ru,
.font-face-ru body {
    @extend %font-face-ru;
    font-weight: 500;
}

Следующим шагом было применение правильного класса CSS к элементу <html>, чтобы можно было применить CSS к элементу <body>. Для этого мы создали небольшую службу Javascript под названием font-loader.service.js, в которую мы передаем наш пользовательский язык. Этот сценарий в основном берет язык и вставляет класс в наш тег <html>; в данном случае font-face-ja, поскольку нашему пользователю нужен японский интерфейс.

Теперь вы увидите:

5. Перезапись глобального стека шрифтов.

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

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

Рассмотрим этот снимок экрана из упражнения, которое включает тексты на испанском и арабском языках:

В этом примере наш тег <html> имеет класс font-face-ar, который устанавливает глобальный стек арабских шрифтов для всего приложения.

Теперь этот случай очень специфичен для Busuu (как продукта), но нам нужно было убедиться, что <p> элемент, оборачивающий «Hola», всегда получает font-face-lt класс, который должен отображаться в Museo, а не font-face-ar, который применяется глобально.

Для этого мы создали директиву (наше приложение находится в Angular 1.x), которую мы могли бы прикрепить к любому элементу HTML и переопределить глобальный стек, применив любой класс, который нам нужен для этого конкретного элемента.

Пример HTML-элемента, использующего директиву для применения другого класса:
<p font-switcher="course" class="font-face-lt">SOME_STRING</p>

6. Мысли

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

Зная, что ресурсы, решения и обсуждения для такого рода проблем ограничены в сети, и знание того, что пользователи заслуживают наилучшего опыта (особенно для платного продукта!), Подтолкнуло меня к написанию этой статьи в надежде, что она поможет другим.

Я уверен, что выбранные нами наборы шрифтов не идеальны, и любые предложения по их улучшению более чем приветствуются!

Несколько скриншотов одного и того же компонента на разных языках:

Спасибо за прочтение! Если у вас есть вопросы, оставьте комментарий.
Вы также можете найти нас в Twitter: @busuuTech и Liam Tarpey

Если вы хотите продвинуться в своей карьере в сфере технологий и любите изучать языки (технические или другие!), У нас есть много открытых должностей в Busuu!