Практика интернационализации веб-новелл

Автор этой статьи: Чжан Чжо

Исходное заявление: Эта статья подготовлена ​​членами команды интерфейса чтения YFE, пожалуйста, уважайте оригинальность, пожалуйста, свяжитесь с общедоступной учетной записью (id: yuewen_YFE) для авторизации и укажите автора, источник и ссылку.

предисловие

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

Интернационализация и локализация

Прежде чем мы начнем, давайте проясним два понятия: интернационализация и локализация.Интернационализация (i18n)это процесс разработки и подготовки приложений для использования на разных языках. а такжеЛокализация (l10n)Это процесс перевода интернационализированного приложения на определенный язык для некоторых регионов. Эта статья называется «Практика интернационализации», поэтому основное внимание уделяется подготовке заявки на локализацию.

вопросы, требующие решения

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

проблема единственного и множественного числа

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

Стандарт Unicode классифицировал правила единственного и множественного числа большинства языков мира, Таким образом, существует не более 6 правил, а именно:

• zero
• one
• two
• few
• много (также используется для дробей, если есть отдельная категория)
• другое (обязательно, также используется, если язык имеет только одну форму)

Например, в английском языке есть только одно (1 час) и другие (0 часов, 2,5 часа) правила для количественных числительных, а также одно (1-е, 11-е…), два (2-е), несколько (3-е) и другое ( 4-й) для порядковых числительных Четыре правила.

Правила есть, как их использовать на практике? Более общий способ — использовать ICU MessageFormat. ICU MessageFormat — это синтаксический формат,{key}Определяйте переменные в форме; некоторые ключевые слова используются, чтобы помочь нам легче справляться с некоторыми сложными ситуациями на разных языках, например, с использованием{key, plural, matches}для обработки правил единственного и множественного числа:

You have {itemCount, plural,
    =0 {no items}
    one {1 item}
    other {{itemCount} items}
}.

ICU MessageFormat может не только облегчить использование случаев единственного и множественного числа, но также может использоваться для дат, полов и других сложных случаев, и широко используется не только в большинстве библиотек полиглотов JavaScript, но и на других языках. например, в Java. Этот набор правил также встроен в PHP.

Даты, числа и валютаРазличные языки, страны и регионы также имеют некоторые различия в выражении даты и цифр. Например, Соединенные Штаты используются для формы «месяца / дня / года», чтобы выразить даты, а Соединенное Королевство, которое также использует английский язык, является больше используется в «день / месяц / год». Не говоря уже о валюте, символы сначала разные, такие как «¥» для RMB и японской иены и «€» для евро, и их размещение может быть не одинаковым. Японские иены используются для выкладывания символов валюты перед числами, в то время как евро только наоборот.

Нам как разработчикам почти невозможно понять эти различия по отдельности.К счастью, API интернационализации ECMAScript предоставляет 4 метода, которые помогут нам решить вышеуказанные проблемы:

• Intl.Collator
• Intl.DateTimeFormat
• Intl.NumberFormat
• Intl.PluralRules

Intl.CollatorОбычно не используется, в основном используется для сравнения строк с учетом языка;Intl.DateTimeFormatможет помочь нам отформатировать время и дату в соответствии с различными региональными языками;Intl.NumberFormatиспользуется для форматирования чисел и валют;Intl.PluralRulesИспользуемый для определения единственного и множественного числа, он может сообщить нам классификацию указанного числа на определенном языке (например, «один», «другой»). Первые три API относительно стабильны, и браузеры также имеют хорошую поддержку.DateTimeFormatа такжеNumberFormatСуществуют также полифиллы, позволяющие нам использовать их более широко, например, в средах Node и React Native;PluralRulesОн все еще находится на стадии черновика, а поддержка браузеров относительно плохая, поэтому не рекомендуется использовать его напрямую.

Кроме того, мы видим, что браузеры, особенно Chrome, постепенно расширяют поддержку интернационализации.В дополнение к 4 API, которые вошли в стандарт выше, Chrome поддерживает их в версиях 71 и 72 соответственно.Intl.RelativeTimeFormatа такжеIntl.ListFormatдва API, гдеIntl.RelativeTimeFormatИспользуется для форматирования относительного времени, аналогично функциям в Moment.js, например:

const rtf = new Intl.RelativeTimeFormat('en');
    
rtf.format(3.14, 'second');
// → 'in 3.14 seconds'
    
rtf.format(-15, 'minute');
// → '15 minutes ago'

а такжеIntl.ListFormatИспользуется для форматирования списков, например:

const lf = new Intl.ListFormat('zh');
    
lf.format(['永锋', '新宇']);
// → '永锋和新宇'

Эти API намного мощнее, чем примеры, показанные выше. Для конкретного использования, пожалуйста, обратитесь к официальным веб-сайтам MDN и Google Developers. Я считаю, что интернационализация в Интернете будет становиться все проще и проще в будущем.

смысл и контекст

Мы знаем, что на китайском или другом языке слово/слово может иметь разное значение в разных сценариях. Если «О программе» используется в качестве заголовка страницы, оно может выражать значение «О программе/Введение». предложение, это может означать «о».

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

кто будет переводить

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

• Перевод профессиональными переводчиками. Профессиональный перевод в принципе может гарантировать высокое качество и оперативность, но главная проблема – высокая стоимость.
• Перевод пользователями/добровольцами. Многие проекты с открытым исходным кодом используют этот подход. Твиттер также принял этот подход, в частностиСоздайте платформу для переводаЧтобы пользователи могли лучше переводить всего за один годБолее 400 000 волонтеровПомогли с переводами, запустили на 21 языке. Этот метод является недорогим, и из-за большого количества людей, которые могут участвовать, качество перевода может быть гарантировано несколькими рецензентами и другими методами; единственное, о чем нужно беспокоиться, это то, что время перевода не контролируется. И нам, как правило, не нужно создавать платформу самостоятельно, мы можем выбрать существующую зрелую бизнес-платформу, такую ​​какcrowdin.comИли платформы с открытым исходным кодом, такие как Pontoon от Mozilla.

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

решение

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

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

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

React Intl

React Intl — это решение Yahoo для интернационализации с открытым исходным кодом на основе React. Соответствует стандартам BCP 47 и Unicode CLDR, поддерживает формат сообщений ICU и интернационализацию дат, времени, чисел и т. д.

React Intl реализует полиглот в виде компонентов:

<FormattedMessage
  id="welcome"
  defaultMessage={`Hello {name}, you have {unreadCount, number} {unreadCount, plural,
    one {message}
    other {messages}
  }`}
  values={{name: <b>{name}</b>, unreadCount}}
/>

Для более конкретного использования, пожалуйста, обратитесь к его Github:GitHub.com/Yahoo/реагировать…

Угловое решение

Angular должен быть единственным фреймворком с собственным решением i18n среди текущих основных интерфейсных фреймворков, он также следует стандартам BCP 47 и Unicode CLDR и поддерживает формат сообщений ICU.

В отличие от общего решения i18n, Angular не нужно заранее готовить JSON или другую многоязычную таблицу сопоставления, просто используйте атрибут i18n, чтобы пометить текст, который должен быть многоязычным, например:

<h1 i18n>Hello, webnovel</h1>

выполнивng xi18nкоманда, Angular автоматически извлекает все значенияi18nсимвол атрибута и сгенерировать xlf-файл (xlf — это формат обмена на основе XML, разработанный для стандартизации способа передачи локализуемых данных между инструментами во время локализации), мы можем отправить xlf-файл непосредственно переводчику. Переводчик переведет документ через некоторые специальные программное обеспечение, а затем верните документ нам. Наконец, мы можем завершить всю работу, внедрив многоязычный контент в приложение с помощью предварительной компиляции или компиляции точно в срок.

Решение Angular очень полное, а также поддерживает некоторые места, на которые мы можем не обращать особого внимания.Например, если мы хотим сделать многоязычным атрибут title тега img, нам нужно только добавить атрибут i18n-title, например :<img [src]="logo" i18n-title title="Webnovel logo" />.

Решение Webnovel

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

Но, к сожалению, Webnovel не использует угловые в настоящее время. Наш мобильный сайт и приложение построены на основе реагирования и реагирования на практику соответственно. Поскольку существующая реакция на основе реагированной библиотеки React-Intl не может удовлетворить нашими потребностями, мы решили сделать себя Создайте базовую библиотеку для I18N, она должна сделать:

• Может использоваться в обычных средах JavaScript, включая браузеры, Node (рендеринг на стороне сервера) и React Native.
• Следуйте международным стандартам, поддерживайте ICU MessageFormat
• Поддерживает предварительную компиляцию и своевременную компиляцию шаблонов символов.
• Высокая производительность, поддержка динамически загружаемых языков
• Поддержка резервного языка/строки
• низкая стоимость использования
• Плагин

Определив основные цели, мы разработали новую мультиязычную библиотеку react-i18n:

@react-i18n/core

Базовая библиотека через контекстный API React предоставляет высокоуровневые компоненты I18n и компоненты сообщений, помогающие приложениям работать на нескольких языках. Среди них withI18n передает информацию i18n реквизитам компонента, а компонент Message аналогичен компоненту FormattedMessage в React Intl, который напрямую визуализирует символы, передавая идентификатор и параметры соответствующей строки.

@react-i18n/cli

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

• Обработка Excel: преобразование Excel в JSON. Мы и переводчики синхронизируем информацию через онлайн Excel.
• Автоматически сгенерированный идентификатор: например, "hello world" будет сгенерированHELLO_WORLD_6f5902ac237024bdd0c176cb93063dc4Идентификатор не только гарантирует, что редактор может быть легко введен через автозаполнение, но и обеспечивает его уникальность.
• Машинный перевод: помогите переводчикам переводить быстрее, вводя результаты машинного перевода непосредственно в формы с помощью Microsoft Translator Text API и Google Translation API.

Библиотека react-i18n отвечает нашим основным требованиям и уже некоторое время работает на мобильном сайте и в приложении Webnovel. Из-за спешки времени библиотека react-i18n недостаточно надежна, и мы пока не можем открыть ее исходный код. Далее мы улучшим эту библиотеку и как можно скорее вернем ее сообществу с открытым исходным кодом.

Другие проблемы, о которых следует знать

следовать существующим стандартам

Соблюдение установленных стандартов очень важно для интернационализации. Когда мы пишем приложение, почти невозможно избежать работы с третьими лицами, например, с платежами. В процессе сотрудничества, если мы будем использовать один и тот же стандарт, стоимость связи и отладки будет значительно снижена. Существует множество стандартов интернационализации, некоторые из которых более сложны, и нам нужно терпеливо и внимательно их читать. Стоит отметить, что стандарт не является постоянным, например, региональное обозначение в упомянутом выше стандарте BCP 47, индонезийский код в старой версииin, а в новой версии изменился наid, как правило, мы должны следовать обновленному стандарту.

Узнайте больше о зрелых решениях раньше и больше

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

Эпилог

Эта статья посвящена некоторым схемам интернационализации, основанным на веб-технологиях, и их практическому применению в Webnovel. Интернационализация всегда была очень сложной проблемой, поэтому нам нужно думать об этом в долгосрочной перспективе; интернационализация не только многоязычна, нам нужно учитывать все, от макета набора до культурных различий.Интернационализация Webnovel только началась.

Ссылки по теме

• BCP 47 - tools.ietf.org/html/bcp47
• ICU MessageFormat - пользователя дорогих.ICU-project.org/format parse…
• Language Plural Rules - woohoo.unicode.org/villagepeople/charts…
• Intl API - developer.Mozilla.org/en-US/docs/…
• The Intl.RelativeTimeFormat API - Developers.Google.com/Web/updates…
• The Intl.ListFormat API - Developers.Google.com/Web/updates…
• Intl polyfill - GitHub.com/Энди глупо зарабатывает…
• Angular Internationalization - angular.io/guide/i18n

Для получения дополнительной информации, пожалуйста, обратите внимание на публичный аккаунт фронтенд-команды China Literature Group: