Introduction:
When we internationalize Web pages or HTML applications, we need to translate them into multiple language versions. How do I adjust the position, spacing and size of each unit of the page automatically after the text is transformed? This may sound difficult, but if you follow the rules in this article to create an HTML page, you'll believe it's true, and these rules can save a lot of trouble for localization workers.
Note: The dialog box in this article refers to a Web page that contains basic interactive controls, which are also called dialog boxes because they are similar in style to the WIN32 dialog box.
Introduction:
Most recently, the user interface on the Windows platform used a pop-up window made by WIN32 or other visual programming tools, but many developers now use HTML's powerful capabilities to create an application's user interface. This is a new idea and method, it easy to learn easy to understand, easy to write, conducive to development. However, because the text in the page is converted to other language versions, there are many problems with resizing and positioning, which makes localization work difficult. This transformation is also a nightmare for a common Web page that uses cascading forms (CSS) as a whole. But if all of the HTML user interface elements are built with the correct coding standard, then there is little left for the localization staff to do. The Code standard for HAL (HTML Auto typesetting) provides us with a way to avoid adjustments in HTML internationalization applications. In this paper, a series of principles and laws of the main basis. The rule is followed by an encoded sample.
Note: The HAL is compatible with most HTML dialog boxes, especially for dialog boxes or windows that can be resized.
HAL a few big advantages:
1, localization staff only need to translate the text section. The user interface automatically adjusts all controls to match its size.
2. Preparation is done once (usually in English) in the original version and does not need to be repeated multiple times for multiple language versions.
3. Omit the steps to set the dialog box size in the localization process and omit other error-prone steps, such as trying to reuse dialog box dimensions from a previous version of the product or another language.
4, will not produce errors in the display, so that the quality of the localized dialog box is the same as the original English version.
5. Localization workers do not have to modify the error caused by resizing the dialog box. If you have any problems converting the user interface, you should give it to the developer to modify the errors, and the resulting changes will be applied to all other languages. This avoids the repeated errors in other languages, even in the worst cases, and the localization staff simply need to translate them again.
6. Because the localization worker adjusts the dialog box as the string changes, the adjustment may take more time than if the size was set directly. It is also easy to add a new error if it is not handled properly. The HAL solved the problem completely.
7. Because you can quickly add new controls to a dialog box without having to adjust other controls, the dialog box becomes easier to manage for developers. The HAL rule is especially useful for creating resizable dialog boxes. If the dialog box specification needs to be changed, just change it in one place (a global style form) without making changes on every dialog box. dialog box size of the global control to ensure that the product user interface neat and consistent.
the deficiencies of the HAL:
Of course, nothing is perfect, and using the HAL rule also brings some other problems.
1. The construction of the page/dialog box becomes somewhat more complex, so the original dialog box is likely to have more initialization errors than before.
2, in the process of loading the page need some extra code (resize the button), which will reduce the load speed, but the user is not too sensitive.
3, the alignment of the controls is not necessarily consistent, and their size changes as the dialog box size changes.
HAL rule:
Rule one:Do not use absolute position
Do not set the absolute position in the CSS property. The most improper place is to set the absolute position and also set the upper left corner to a fixed value.
Using an absolute position on elements in a page will make it unable to automatically locate and determine dimensions. Absolute positions apply only to cascading forms (CSS). Position,left and top are key attributes of the control position in a cascading form.
The following code is absolutely not allowed:
Use exceptions for absolute positions:
All HAL laws have exceptions. If you can use an absolute position represented by an expression, you can refer to rule two.
Rule two:dialog box should match the maximum available width and height
Use the maximum available width and Height Design dialog box. There are two ways of doing this:
1, use the width=100% form to build the dialog box.
The code sample is as follows:
Can contain other tables ... >
|
2, using the location based on the expression and the size of the dialog box (that is, body.clientheight).
The code sample is as follows:
When multiple tables are embedded in a table, the best solution is to set the size of the elements and then put them in the table and maintain their relative positions.
In the course of the operation you need to consider:
- Which controls have the same dimensions. They must be in the same table cell, not on one line.
- Which controls have the same alignment.
- Which controls squeeze other controls to the right.
- Which controls have a fixed size.
In most cases, the localization only allows the dialog box to set the initialization width and height. Use a fixed dialog box width only when necessary (for example, a dialog box must match a tab in another dialog box)
Rule three:Each control should be in a detached table cell
Try to keep each control in a detached table cell. This text can be wrapped separately, and in the Middle East language environment can also be reversed and positioning adjustment work.
In some cases, this rule can be ignored:
- Multi-line buttons have the same size.
- Next to the tag.
Rule four:Allow text wrapping
Do not use the "nowrap" property (such as <TD nowrap>) in the table cell that contains the text, otherwise the text will not wrap when it becomes longer. Use this property when you want the text to occupy one line and make sure that you have enough space to translate to another language.
Sometimes in order to keep the dialog box overall proportional balance, you need to use the "nowrap" attribute.
Bad Wrapping Method:
The best way to do this is to set an initialization size for the table, as follows:
Another approach is to use a spaces () between words.
