Рекомендации по макету HTML для глобализации веб-страницы ASP.NET

Статья
10/22/2014

Обновлен: Ноябрь 2007

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

Ниже приведен список рекомендаций по разработке веб-страниц ASP.NET для глобализации.

Избегайте использования абсолютного позиционирования.

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

<div id = idFindWhatLabel style = "position: absolute; left: 0.98em; top: 1.2168em; width: 4.8em; height: 1.2168em;">
```
Используйте доступную ширину и высоту для форм.

Это можно сделать двумя способами:
- Установите для основных элементов, таких как таблицы, ширину равной 100%.
  
  Пример:
```

  <table width=100%>
```
- Для определения размеров элементов используйте выражения CSS, зависящие от общего размера формы.
  
  Пример:
```

<div style=' 
  height: expression(document.body.clientHeight / 2);
  width: expression(document.body.clientWidth / 2); '>
```
Используйте отдельную ячейку таблицы для каждого элемента управления.

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

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

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

При переводе текста на другие языки его длина может увеличиться. Хорошее эмпирическое правило — оставлять запас в 300% для коротких строк (менее 10 знаков), в 200% для строк средней длины (10-20 знаков) и в 100% для длинных строк (более 20 знаков).

Одно из приемлемых решений заключается в том, чтобы задать ширину таблицы в процентах от ширины формы, чтобы ячейка могла увеличиваться в размерах пропорционально всей таблице. Однако при этом старайтесь указывать как можно меньше относительных размеров (кроме 100%), чтобы переложить максимум работы на обработчик макета HTML.

Пример:
```

<td width=25%>
```
Задавайте размеры кнопок как можно реже.

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

Не задавайте высоту ячейки для ячеек таблицы и элементов управления, содержащих текст (можно задавать высоту строки для элементов CSS). В противном случае вид страницы изменится, если пользователь изменит размер шрифта в обозревателе.
Не используйте выравнивание по левому или правому краю в тегах HTML.

По возможности избегайте задания align="left" или align="right" для любых ячеек в таблице. Эти параметры могут входить в противоречие со структурой форм для языков, использующих письмо справа налево.
Избегайте встроенных значений CSS, которые может потребоваться изменить.

Храните все значения CSS, которые могут быть изменены при локализации, в таблицах стилей, а не встроенными. Это относится и к настройке шрифта страницы.

Установите для основных элементов, таких как таблицы, ширину равной 100%.

Пример:
```

  <table width=100%>
```

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

Пример:

<!-- A div element sized to take up half the width and height of the form. -->
<div style=' 
  height: expression(document.body.clientHeight / 2);
  width: expression(document.body.clientWidth / 2); '>

См. также

Другие ресурсы

Глобализация и локализация ASP.NET

Поделиться через

Рекомендации по макету HTML для глобализации веб-страницы ASP.NET

См. также

Другие ресурсы

Дополнительные ресурсы