Ускоряющая клавиша n предназначена для пропусков при навигации по страницам. Пропуск для перехода на начало контента.

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

Переводчик: World translation (Александр Шлапак)

s_gotoW3cHome Internationalization
 

Фоновые изображения что поддерживают локализацию

Предполагаемая аудитория: шифровальщики CSS, шифровальщики XML и XHTML/HTML (используя редакторы или скрипты), и все, кто планирует использовать фоновые изображения с текстом в колонках фиксированной ширины.

Обновление перевода: 2012-09-16 16:42

Вопрос

Статья, которая базируется на W3C FAQ: Как можно гарантировать, что при расширении текста при переводе фоновые изображения будут работать по-прежнему

Вводная информация

При переводе текст имеет тенденцию изменять свой ​​размер. Общие сведения об этом смотрите в статье Размер текста в переводе.

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

ОБРАТИТЕ ВНИМАНИЕ! Примеры которые избраны для этой статьи показывают, как использовать графику для достижения закругленных углов и эффектов градиента, которые теперь можно сделать с помощью CSS, без необходимости загружать графику и с простым кодом. Тем не менее, делая такое обновление помните, что сейчас необходимые свойства CSS не поддерживаются всеми основными браузерами, а если и поддерживаются то только последними их версиями. Кроме того, вы можете по-прежнему использовать графику для достижения более сложных эффектов. Тем не менее, статья была обновлена ​​с ссылками на существующий код, что показывает, как можно использовать CSS, а не изображения для этих конкретных примеров, предполагая, что браузер поддерживает необходимые свойства.

Проблема

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

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

Диалоговое окно на Испанском языке.

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

Фоновое изображение.

Наша CSS будет выглядеть следующим образом:

div.box h3 {
    margin: 0;
    padding: 6px 8px 4px 10px;
    font-size: 130%;
    color: #333;
    background: url(img/h3-bg.gif) no-repeat top left;
    }

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

То же самое окно на Малайской языке с фоновым изображением названия, которое не охватывает название целиком.

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

Изображение, содержащих Китайский текст вкладок

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

Изображение Португальского текста на вкладках, которые были созданы для Китайского языка.

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

Ответ

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

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

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

Заголовки в окнах фиксированной ширины

Это метод имеет дело с переменной высоты текста. Один из способов решения этой проблемы состоит в использовании графики, которая находится ниже на три или четыре строки от заголовка. Этот пример использует технику, которая описана в книге Bulletproof Web Design, которую написал Dan Cederholm.

Большая версия фонового изображения.

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

Отметим, что на картинке под названием больше нет сплошной линии. Мы можем добавить такую ​​линию, прибавив к CSS следующее:

div.box h3 {
    margin: 0;
    padding: 6px 8px 4px 10px;
    font-size: 130%;
    color: #333;
    background: url(img/h3-bg.gif) no-repeat top left;
    border-bottom: 1px solid #E0CFAB;
   }

Это даст ожидаемый нами эффект при переводе.

Малайское окно теперь выглядит хорошо.

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

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

Вкладки

Этот метод основан на простом только что описанном подходе и показывает, как сохранить несколько графических краев в окне при растяжении внутреннего пространства по горизонтали. Эта техника основана на статье "Sliding Doors of CSS (раздвижные двери CSS)" созданной Doug Bowman. Основная идея этой техники похожа на идею предыдущего раздела, хотя ее несколько сложнее кодировать. Каждая вкладка имеет два фоновых изображения:

Фоновое изображение для левой части вкладки. and Фоновое изображение для правой части вкладки.

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

Следующие вкладки на Китайском и Итальянском языках используют одинаковый код - только их текст изменился - но вкладки прекрасно размещают текст разных размеров, даже если он сжимается, а не расширяется.

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

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

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

Окна

Этот пример рассматривает окна, которые могут менять свой размер в обоих направлениях. В данном примере используется адаптация другой техники, описанной в книге Bulletproof Web Design, которую написал Dan Cederholm и также опирается на подход Sliding Doors.

Исходный код XTHML для каждого окна будет таким же, за исключением исходного кода для текста. CSS также будет таким же.

Свойство max-width было использовано для того, чтобы ширина окна никогда не превышала 250 пикселей, но она может быть меньше (как это показано на Японском примере, если ваш размер шрифта для этой страницы принятый по умолчанию). Это приводит к появлению новых строк в окне, если текст что в нем содержится является долгим. Тем не менее, изображения, которые создают границу и закругленные углы, по-прежнему выглядят правильно.

Вы можете найти код, используемый для XHTML и CSS путем изучения исходного текста этой страницы.

Однако, остается еще одна потенциальная проблема. Если слово дольше, чем настройки max-width (максимальной ширины), то оно будет высовываться со стороны окна. Например, с помощью шрифта по умолчанию для этой страницы, слово internationalization (интернационализации), вероятно, не будет вписываться в окно с установленным свойством max-width - 100px. Есть две вещи, которые здесь можно сделать.

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

Выскажите своё мнение (по-английски).

Подпишитесь на ленту новостей RSS.

Новые публикации

Новости главной страницы

Twitter (Новости главной страницы)

‎@webi18n

Дополнительные материалы

Автор: Richard Ishida, W3C. Переводчик: World translation (Александр Шлапак).

Допустимый XHTML 1.0!
Допустимый CSS!
Кодировка UTF-8!

Перевод с английского: 2007-06-14. Последнее внесение изменений в перевод: 2012-09-16 16:42 GMT

Для просмотра истории внесения изменений нажмите qa-resizing-backgrounds в блоге i18n.