Internationalisation, right-to-left Internationalisation, right-to-left

Internationalisation, right-to-left

par ,
le 11 février 2014

0
0

Lorsque l’on est amené à concevoir un site multilingue qui prend en compte les problématiques de sens de lecture, on se retrouve très vite dans des difficultés de maintenabilité.

Pour le CSS

En attendant que le support du modèle flexbox soit meilleur, quelques règles relativement simples peuvent pallier ces soucis…

Réduire le plus possible l’abus de la propriété float, et privilégier display:inline-block qui préserve le sens de lecture.

Il sera plus simple d’utiliser :

.Nav-item {
display: inline-block
}

que :

.Nav-item {
float: left
}
.rtl .Nav-item {
float: right
}

 

Si vraiment l’usage de float est justifié, ou dans le cas de positionement absolute ou fixed, les préprocésseurs peuvent nous aider (ici stylus) :

.Nav-item
float: left
/.rtl &
float: right

Ici, /.rtl représente un root selector .rtl (un sélecteur parent), le caractère & constitue le selecteur en usage à cet endroit. Le principal avantage de cette technique est que l’on peut utiliser @extend .Nav-item par la suite sans se soucier du .rtl à nouveau.

Quant au positionnement absolu, on doit veiller à toujours reinitialiser les propriétés dépendantes de la direction :

.Breadcrumb-tooltip
bottom: 3em
left: 1.5em
display: none
/.rtl &
left: auto
right: 1.5em
&--visible
display: block

Il en va de même pour les propriétés borderpaddingmargintext-align et autres.

Concernant la typographie, si vous utilisez des classNames abstraits pour certains titres ou autres blocs particuliers, le snippet du root selector peut aussi vous servir.

$webFont
font-family: "foo"
/.hebrew &
font-family: "bar"
/.chinese &
font-family: "baz"
.Sidebar-title
@extend $webFont

rendra :

.Sidebar-title {
font-family: "foo";
}
.hebrew .Sidebar-title {
font-family: "bar";
}
.chinese .Sidebar-title {
font-family: "baz";
}

Pour le markup

Comme énoncé plus haut, il est préférable de privilégier inline-block, cela engendre cependant des soucis de whitespace. Deux solutions ici :

  • minifier son markup
  • simplement coller les tags fermants et ouvrants lors des situations posant problème.

Je ne recommande pas ici d’utiliser des commentaires HTML, le but n’étant pas d’alourdir le poids des pages gratuitement.

Pour les template-engines côté front, différentes solutions s’offrent à vous :

  • avec jade, l’option pretty à placer à false
  • avec handlebars, l’utilisation de tildes dans les helpers trim les contenus entre les deux bornes (c’est laid, mais c’est comme ça) {{#each item~}} <li>{{this}}</li> {{~/each}}

Pour le JS

Si vous utilisez JS pour animer le positionnement des éléments, basez vous sur les clientRect des différents éléments du DOM plutôt que sur des valeurs en dur.

Utilisez le plus possible des ajouts/suppressions de className et animez ce qu’il est possible d’animer avec transition et animation/@keyframes directement en CSS (vous gagnerez en maintenabilité en séparant le style de la logique).

mots-clés :

, ,

articles à lire ensuite...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

0
0

Internationalisation, right-to-left