Translate Toolkit & Pootle

Tools to help you make your software local

User Tools

Styling approach

This page describes some approaches to styling with specific attention to language specific requirements, and right-to-left layout. This is mostly applicable to Pootle, but several aspects probably apply wider as well.

Language specific styling

The CSS for Pootle specifies some styling that are specific to languages. Some of them are based on requests from translators. It affects readibility (sometimes in crucial ways), but generally helps to provide a better user interface and nice translation environment.

The crucial point is that text should always be marked to be in the language that it is. The language specific styling will apply to the element where it is marked with a lang= attribute, and unless some specific styling is overridden, will be inherited by children. Since Pootle's content (especially on the translation page) necessarily contains mixed language content, care must be taken to ensure that all elements are correctly marked up to ensure the correct display settings. This obviously is also better for accessibility, etc.

Default strings (such as the default welcome message) will probably be in English, and should be styled as English to ensure good display in a non-English interface.

The :lang() CSS selector is maybe not supported by some versions of some obscure browsers (like IE). We might care or not.


Most modern browsers do much better with RTL than some years ago, although there seems to be huge amounts of corner cases and slightly broken issues. Pootle needs to work correctly for all RTL languages including handling all pages with mixed content such as the translate page.

Since some features are just broken for RTL in some browsers, one might assume that most users needing this might be using better browsers, and therefore we can style the default for LTR and override as needed for RTL.

The general approach is to mirror as much as possible, while keeping in mind that certain important elements (such as the server name, welcome message, project names and descriptions) might still be in English and styling of these elements needs to be reviewed to make sure they make work well. Whereas layout for LTR will probably reflect the idea of some left-to-right workflow, the whole workflow should probably be done right-to-left in the RTL interface. In some cases this works very well. For exapmle, English and Arabic on the translatepage with RTL interface causes the strings to all be aligned in the middle of the table, which is nice for review.

Elements floating right in LTR are marked explicitly with a dir= attribute, since they will have to be styled explicitly, and you can't select with CSS on the inherited directionality.

Margins and borders need to be reviewed. A border on the left only (for example) must be changed to a right border for RTL, but if the default (LTR) CSS rule will still apply, the left border also has to be removed.

Default strings (such as the default welcome message) will probably be in English, and should be marked as LTR to ensure good display in the RTL interface.