Evergreen 3.0 development update #3: moving right to left


Common Teal or Eurasian Teal (Anas crecca) near Hodal, Faridabad, Haryana, India. CC-BY-SA image by J.M. Garg

As of this writing, 21 patches have been committed to the master branch since the previous development update.

One set of patches I’d like to highlight are the ones by Dan Scott for bug 1681009, which merge the main RTL (right-to-left) CSS stylesheet for the public catalog into the LTR (left-to-right). The RTL stylesheet was introduced in 2.12.0 so that the public catalog, when translated to languages such as Arabic that use right-to-left scripts, would align display elements correctly. However, having a separate stylesheet breaks the DRY (don’t repeat yourself) guidelines. Sometimes, the problem with repeating yourself isn’t when you repeat yourself, but when you forget to repeat yourself. In this case, new CSS styles that affect right or left alignment would need to be added to both the LTR and RTL stylesheets — but it’s all too easy to forget to do that, particularly if you’re a contributor who doesn’t regularly write in an RTL language.

Consequently, the main OPAC stylesheet, or rather, the Template Toolkit template that generates the stylesheet (Open-ILS/src/templates/opac/css/style.css.tt2) now looks like this:

[%-
    PROCESS "opac/parts/css/colors.tt2";
    PROCESS "opac/parts/css/fonts.tt2";
    rtl = ctx.get_i18n_l(ctx.eg_locale).rtl;
%]

...

#dash_wrapper {
    [% IF rtl == 't' -%]
    margin-right: 0.5em;
    [%- ELSE %]
    margin-left: 0.5em;
    [%- END %]
}

The rtl template variable is set based on the user’s active locale and is used to generate left- or right-aligned styles as needed.

Moving forward, some guidelines that folks contributing to the public catalog CSS should be aware of include:

  • Avoid the use of inline styles in favor of defining CSS classes. This is a good idea in general, but it’s particularly important in the case of margin-right/margin-left and so forth. If anybody wants a small bug to work on, bug 1687031 identifies some places where cleanup is needed.
  • When you add new styles to style.css.tt2, remember to add a conditional for styles that touch left/right display.

If you cannot read Arabic, a little trick you can use on occasion is mark your home locale as an RTL one, e.g., by doing update config.i18n_locale set rtl = true where code ~ '^en'; and reloading Apache.

[Display of an Evergreen screen with English set as an RTL locale]

In this case, the “Messages” heading is still aligned to the left when, were English an RTL language, it more commonly would be expected to be on the right.

Duck trivia

The Eurasian Teal duck (Anas crecca) had its Linnaean name assigned by Linnaeus himself. As Avibase reveals, in Jordan that duck can be referred to as ????? ??????.

Submissions

Updates on the progress to Evergreen 3.0 will be published every Friday until general release of 3.0.0. If you have material to contribute to the updates, please get them to Galen Charlton by Thursday morning.

Leave a comment

Your email address will not be published. Required fields are marked *