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

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

Проблема

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

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

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

Наша 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 .

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

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

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

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

Окна

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

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

• Не делайте значение max-with очень узким. Помните, что не только иностранные слова иногда являются длиннее чем исходный текст, но и что некоторые языки создают составленные существительные, добавляя части слов для того, чтобы сформировать одно слово. Например, выражение "Input processing features" на немецком будет "Eingabeverarbeitungsfunktionen".

• Убедитесь, что переводчик знает: где будет использоваться текст в окнах с ограниченной шириной, знает ширину этих окон, чтобы он мог добавить дефис внутри длинных слов (то есть ­ или ­). В основных браузерах этих переносов обычно не видно, но, если слово слишком широкое для своего окна, то последние версии основных браузеров разделят слово и дефис появится в конце строки, как показано далее:

  

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