Фонові зображення, які підтримують локалізацію

Як можна гарантувати, що при розширенні тексту при перекладі фонові зображення будуть працювати як і раніше?

Проблема

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

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

Вікно фіксованої ширини на Іспанській мові має назву 'Мова інтерфейсу' і список перемикачів для вибору мови. Воно використовує цю графіку для досягнення градуювального ефекту за назвою:

Наша 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. Основна ідея цієї техніки схожа на ідею попереднього розділу, хоча її трохи складніше кодувати. Кожна вкладка має два фонових зображення:

та .

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

Наступні вкладки на Китайській та Італійській мовах використовують однаковий код - тільки їх текст змінився - але вкладки прекрасно розміщують текст різних розмірів, навіть якщо він стискається, а не розширюється.

Зверніть увагу, що ми залишили деякий простір праворуч від вкладок. Ви також повинні це зробити. Якщо не вистачає вільного місця, то ви повинні будете знайти рішення, яке дозволяє вкладкам переноситися на інший рядок, а також дозволяє вікну або стовпчику поширюватися вниз, щоб розмістити ті вкладки.

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

Вікна

Цей приклад розглядає вікна, які можуть змінювати свій розмір в обох напрямках. У даному прикладі використовується адаптація іншої техніки, описаної в книзі Bulletproof Web Design, яку написав Dan Cederholm і також опирається на підхід Sliding Doors.

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

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

• Переконайтеся, що перекладач знає: де буде використовуватися текст у вікнах з обмеженою шириною, знає ширину цих вікон, щоб він міг додати дефіс всередині довгих слів (тобто ­ або ­). В основних браузерах цих переносів зазвичай не видно, але, якщо слово занадто широке для свого вікна, то останні версії основних браузерів розділять слово і дефіс з'явиться в кінці рядка, як це показано далі:

  

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