Frontender Magazine

Вокруг всемирной паутины за восемьдесят минут

Примечание от редакторов A List Apart: В каждом выпуске один из членов W3C будет вводить вас в курс дела над чем мы работаем и как в этом можно поучаствовать. В этом месяце колонку ведёт Ричард Ишида (Richard Ishida), руководитель программы по интернационализации в консорциуме W3C. — Ян Джейкобс (Ian Jacobs), руководитель коммуникационного отдела W3C.

Год 2013. Уроженец Лондона, веб-разработчик Филеас Фогг IV вместе со своим другом Жаном Паспарту III, активно интересующимся вопросами интернационализации, решили отправиться в кругосветное путешествие. В отличии от своих знаменитых предшественников, Фогг и Паспарту не будут нестись вокруг планеты на воздушных шарах и других опасных приспособлениях. Вместо этого они собираются исследовать традиции типографики разных уголков мира, расположившись в уютной мансарде Фогга в районе Сохо. Ждут ли их приключения? Да! Ждёт ли их опасность? Вряд ли. Единственный канал который им предстоит для себя открыть — запястный, 80 порт — единственный на их пути, единственное таинственное послание, которое они могут получить — сообщение об ошибке при подключении к интернету. По крайней мере, так думали наши друзья перед тем как взглянуть в лицо трудностям, которые сбили бы с толку храбреца любого возраста. Итак, они приступили к своему первому исследованию…

Часть 1. В которой мистер Фогг и команда узнают, что достигнут немалый прогресс

Фогг и Паспарту решили проделать своё кругосветное путешествие в направлении, противоположном выбранному их знаменитыми однофамильцами, и отправились в Соединённые Штаты Америки.

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

Однако постойте, это ещё что?

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

Язык чероки

«Да ведь это язык чероки!» — воскликнул Паспарту, — «и нам стоить изучить его поближе!»

«До недавнего времени культурное наследие племени чероки вырождалось, поскольку отсутствовала шрифтовая поддержка их языка и им приходилось использовать жалкую его транслитерацию. Однако когда слоги языка чероки были добавлены в Юникод, были созданы шрифты и клавиатуры для множества устройств, в частности мобильных. Теперь, когда молодое поколение может общаться в сети используя чероки, использовать его в Twitter и Facebook, будущее предстаёт в более ярких красках.»

«В мире есть много языков, которые постигла та же плачевная участь», — продолжил Паспарту, — «и многие народы нуждаются в поддержке их типографических традиций, которые имеют длинную историю, но могут значительно отличаться от тех, к которым мы привыкли в Лондоне.»

«Я что-то слышал о Юникоде», — задумчиво пробормотал Фогг, — «однако не могу сказать, что знаю о нём много.»

«Юникод — это набор символов, который на данный момент удовлетворяет письменные потребности почти всего мира», — объяснил Паспарту. — «Он не только даёт нам возможность писать, используя чероки, кириллицу, чамский язык, язык чакма или даже клинопись(!), но также использовать их вперемешку на одной странице, что было почти невозможно лет 25 назад.»

Паспарту продолжил рассказ о том, что согласно недавно проведённому Google исследованию 6,5 миллиарда веб-страниц на более чем 60 процентах веб-страниц по всему миру используется кодировка UTF-8 и если добавить страницы, на которых используются только символы ASCII (которые являются разновидностью UTF-8), эта цифра возрастёт до 80 процентов!

Использование Юникода на веб-страницах

Использование Юникода на веб-страницах. (Марк Дэвис, официальный блог Google)

«Удивительно!» — воскликнул Филеас. — «Это действительно прогресс! Какой вклад в него я могу сделать как веб-дизайнер?»

«Использовать Юникод, конечно же», — ответил Паспарту. — «Если вы еще не используете его для содержимого всех ваших сайтов, вы должны задаться вопросом как же так случилось.»

«Но как мне его использовать?» — перебил Фогг.

«Всё довольно просто», — ответил Паспарту. — «Вам нужно указать кодировку своей страницы как UTF-8. Но помните, что нужно также и собственно сохранить файл в кодировке UTF-8! Ах да, и убедитесь, что серверные настройки и скрипты не влияют на кодировку содержимого сайта! Не волнуйтесь, консорциум W3C подготовил полезные материалы, которые помогут вам со всем разобраться.»

<meta charset="utf-8"/>

Объявление кодировки UTF-8 должно быть указано в начале всех элементов <head>.

Паспарту добавил: «Шрифты и кодировка важны, но ими качественная типографика не ограничивается. Итак… держим курс на запад… отправляемся на… Восток…»

Часть 2. В которой Паспарту объясняет, что в восточной азии колонки — это не то, что вы можете подумать

Минуя Америки, Фогг и Паспарту направили свой браузер в Японию.

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

«Чтобы научиться читать по-китайски», — вставил Паспарту, — «придётся выучить на тысячи символов больше чем в японском языке».

«Но как это всё можно представить на компьютере?» — спросил Фогг.

«С помощью Юникода это не проблема», сказал Паспарту. — «Позже я расскажу вам о хитроумных клавиатурах, которые позволяют выбрать один из тысячи символов в процессе печати. Чтобы помочь детям (и иногда взрослым) прочитать незнакомые им символы, используются специальные подсказки, которые называются „агат“. Они обозначают как читается соответствующий символ. Их пишут рядом с основными символами сохраняя высоту строки и с таким же переносом на следующую строку как у основного текста.»

Подсказки агат над идеографическим текстом

Подсказки «агат» над идеографическим текстом

Паспарту продолжил рассказывать о том, что хоть агат уже и применяется в сети, на текущий момент консорциум W3C пересматривает вопрос о том, как для него должна выглядеть разметка в спецификации HTML5. Большинству предложенная на данный момент модель разметки нравится, однако если мы хотим увидеть её в 5.0 версии HTML, ещё нужно поработать над её реализацией. К сожалению, даже на таком большом рынке как японский, разработчики браузеров не особо рвутся реализовать подобные локальные требования, разве что остаётся надежда на добровольцев, которые предоставляют патчи. И кстати, спецификация по CSS-стилизации агата также нуждается в доработке. Это сделает возможным достаточный контроль над размещением агата в соответствии с основным текстом. В общем, над всем этим еще нужно работать.

Однако Фогг отвлёкся.

«Посмотрите только! Строки текста расположены вертикально, а не горизонтально. А в сети это тоже возможно?»

«Над этим уже работают», — ответил Паспарту. — «Вертикальное направление текста и подсказки-агаты — главные приоритеты, сформулированные на семинаре по созданию электронных книг, который недавно состоялся в Токио. В печатных романах на японском текст расположен вертикально. Разработчики электронных книг понимают что нежелательно выпускать устройства для чтения таких книг, не поддерживающие вертикальное расположение текста. Они даже представили собственные форматы пока W3C заканчивает работу над своими рекомендациями по реализации такого представления текста с помощью CSS. Как только соответствующая спецификация будет готова, разработчики электронных книг перейдут на стандарт.»

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

Горизонтальные колонки с текстом на японском языке

Горизонтальные колонки с текстом на японском языке.

«Это потрясающе!» — воскликнул он. — «Вы только посмотрите на фразу Universal Character Set. Мало того что символы расположены в другом направлении, мы также видим что текст в колонках направлен с права на лево, а не сверху вниз! У азиатских разработчиков веб-страниц должно быть не жизнь, а ад… Там где мы говорим „право“ или „лево“, они говорят „верх“ и „низ“. Наверное ещё хуже когда приходится работать с горизонтально-направленным содержимым.»

«Если определить направление текста в CSS как вертикальное, почти всё остальное происходит автоматически», — заверил его Паспарту. — «Однако всем веб-разработчикам в мире следует ожидать что рабочая группа CSS введёт рекомендацию вместо фиксированных терминов, таких как „лево“ или „право“, использовать для содержимого логические термины „начало“ и „конец“. Тогда будет значительно проще разрабатывать страницы, содержимое которых может быть легко адаптировано под другие языки».

«Это особенно важно для таких языков как арабский или иврит, в которых текст представлен в направлении справа налево. Но давайте пока повременим с обсуждением этих вопросов.»

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

«Да, теперь я это понимаю», — ответил Фогг. «Я бы хотел продолжить знакомство с вопросами такого рода. Куда отправимся дальше?»

Не пропустите следующие части рассказа о веб-типографике

  1. В которой Филеас Фогг и паспарту знакомятся с полями форм на Суматре.
  2. В которой Паспарту ошарашивает Филеаса Фогга новостями о том, как выглядит текст на бирманском языке.
  3. В которой Филеас Фогг изучает письмена индусов.
  4. В которой Филеас Фогг не может определиться прибывает он или отбывает.
  5. Из которой мы узнаём, что произошло во время путешествия по европе.
  6. В которой доказывается, что Филеас Фогг, совершив кругосветное путешествие много выиграл, но это ещё не конец.

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

W3C
Автор:
W3C
Сaйт:
http://www.w3.org/
Наталья Луканюк
Переводчик:
Наталья Луканюк
Сaйт:
http://flamecoder.net/
вКонтакте:
natatik_l
Twitter:
@very_busy_girl
GitHub:
NatalieF

Комментарии (3 комментария, если быть точным)

Автар пользователя
hVostt

Примечательно, что примеры представлены картинками :) А как же Unicode? Utf-8?

Автар пользователя
SilentImp
くんしてどうぜず。
<div class="example-1"><ruby>君<rt>くん</ruby><ruby>子<rt>し</ruby>は<ruby>和<rt>わ</ruby>して<ruby>同<rt>どう</ruby>ぜず。</div>

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

Автар пользователя
matmuchrapna

я бы на месте автора тоже бы сделал также