Repository files navigation

DSFR Right To Left (ci-après RTL) est une extension au Système de Design de l'État (DSFR).

Il fournit l'ensemble des styles pour adapter le DSFR pour des langues lues de droite à gauche.

L'installation de DSFR RTL peut se faire de différentes manières :

• en téléchargeant le fichier style de ce repository ;
• en utilisant le gestionnaire de paquets NPM.

Il est possible de télécharger les sources de ce repository au format .zip depuisla page Release de Github. Le fichier compilé se trouve dansdist/dsfr-rtl.css, oudist/dsfr-rtl.min.css pour la version minifiée. Vous trouverez aussi une version sasssrc/dsfr-rtl.scss paramètrable via des variables, permettant de paramétrer les classes utilitaires à générer.

DSFR RTL est également disponible via NPM. Pour cela, plusieurs prérequis :

• NodeJS doit être installé ;
• Un fichierpackage.json doit être présent à la racine du projet.

Installez ensuite le package DSFR RTL avec la commandenpm install @gouvfr/dsfr-rtl.

La librairie dsfr-rtl se compose d'un fichier unique qui permet de surcharger le comportement des composants et des classes utilitaires du dsfr.Il est disponible en version compilé CSS :

• dist/dsfr-rtl.css
• dist/dsfr-rtl.min.css

Ou en version Sass, importable depuis votre Sass ou framework Js, et permettant de paramétrer les classes utilitaires à générer :

• src/dsfr-rtl.scss

Pour importer la feuille de style via HTML :

<linkrel="stylesheet"href="style/dsfr-rtl.min.css"/>

• Lestextes non-traduits dans un texte RTL peuvent avoir un comportement non désiré s'il y a des nombres ou des caractères spéciaux en début ou fin de phrase. Il est possible de résoudre cette problématique en encapsulant le texte non traduit dans unspan ayant la classefr-text-plaintext.Par exemple sur le lien "Qu’est-ce que FranceConnect+", la mise en place de cette classe évitera que le "+" ne passe tout à gauche :<span>FranceConnect+</span>

• Le sens desicônes doit être inversé lorsque celles-ci ont une direction relative à la navigation dans le site ou à la lecture. Certaines icônes ont été gérées directement dans le fichier SCSS de cette extension (la flèche d'une card par exemple).Certaines icônes auront besoin d'un traitement manuel et spécifique, pour cela cette librairie met à disposition une classe CSSfr-icon-rtl. Elle permettra d'opérer une symétrie verticale pour inverser le sens de l'icône. Ex:<span aria-hidden="true"></span>

• Sur le composant indicateur d'étape (Stepper), si lesnuméros d’étapes sont injectés dynamiquement via un Template, l’ordre des éléments change en RTL :

  • en français : étape [current] sur [max]
  • en arabe : [max] sur [current] étape

• Attention auline-height, l'écart entre les lignes est souvent plus faible en arabes car les caractères prennent plus de place en hauteur. De plus, les caractères pourraient être croppés si le line-height est trop faible.

• Eviter lesoulignement des textes en arabes. De nombreux caractères arabes contiennent des signes diacritiques en bas qui pourrait être masqués par le soulignement.

• Vérifier leretour à la ligne des longs mots. Le DSFR utilise la propriétéoverflow-wrap: break-word pour forcer le passage à la ligne des mots plus grand que leur conteneur. En arabe cette propriété peut avoir un comportement non désiré car les lettres d'un mot sont indissociables.

• Certainschamps de formulaire spécifiques ne doivent pas être inversés. Par exemple, les champs "email" ou "téléphone" doivent rester en LTR car leur contenu se lit de gauche à droite. Le placeholder doit cepedendant être placé sur la droite si ce texte est traduit dans une langue RTL.

Le processus de contribution est détaillé sur la pageCONTRIBUTING.md.