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

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

Перекладач: World translation (Олександр Шлапак)

s_gotoW3cHome Інтернаціоналізація
 

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

Аудиторія: шифрувальники CSS, шифрувальники XHTML/HTML (використовуючи редактори або скрипти), і всі, хто планує використовувати фонові зображення за текстом в колонках фіксованої ширини.

Оновлення перекладу: 2012-09-16 16:42

Питання

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

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

При перекладі текст має тенденцію змінювати свій розмір. Загальні відомості про це дивіться в статті Розмір тексту в перекладі.

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

ЗВЕРНІТЬ УВАГУ! Приклади, що обрані для цієї статті показують, як використовувати графіку для досягнення заокруглених кутів і ефектів градієнта, які тепер можна зробити за допомогою 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. Основна ідея цієї техніки схожа на ідею попереднього розділу, хоча її трохи складніше кодувати. Кожна вкладка має два фонових зображення:

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

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

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

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