CSS pour les langues de droite à gauche dans les portails

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 1 minute de lecture

    • Vous pouvez contrôler la génération de CSS pour les langues de droite à gauche à l’aide de différentes méthodes.

    Les portails du système de base autres que Portail de services (/sp) et les portails personnalisés peuvent nécessiter une personnalisation CSS supplémentaire pour refléter complètement la direction d’un portail pour les langues de droite à gauche.

    Les widgets personnalisés peuvent nécessiter une conversion manuelle pour les langues de droite à gauche.
    • Pour les styles en ligne dans le modèle HTML d’un widget, déplacez ces styles vers le CSS du widget afin qu’ils soient automatiquement convertis.
    • Pour les styles internes dans le modèle HTML d’un widget, vous pouvez utiliser le sélecteur d’attribut [dir="rtl"] ou le sélecteur de classe .rtl pour fournir un CSS spécifique aux langues de droite à gauche.
    • Pour inclure le CSS spécifique aux langages de droite à gauche, vous pouvez appeler la méthode isRTLEnabled() dans la GlideSPScriptable - Scoped classe du script serveur d’un widget ou utiliser l’indicateur global g_portal_isrtl dans le script client du widget.

    De plus, dans le CSS du thème, de la page, du widget ou de l’instance de widget, vous pouvez ajouter des directives de droite à gauche aux propriétés CSS uniquement à l’aide d’une chaîne d’interpolation Sass (#{""}).

    Tableau 1. Directives CSS pour les langues de droite à gauche
    Directive CSS de droite à gauche Description
    /*rtl :ignorer*/ Ignore la propriété lors de la conversion du CSS du portail pour les langues de droite à gauche.
    /*rtl :prepend :10px*/ Ajoute une valeur au début de la valeur de la propriété pour les langues qui s’écrivent de droite à gauche. Cet exemple préfixe 10px.
    /*rtl :append :3rem*/ Ajoute une valeur à la fin de la valeur de la propriété pour les langues qui s’écrivent de droite à gauche. Cet exemple ajoute 3rem.
    /*rtl :replace :30px*/ ou /*rtl :30px*/ Remplace la valeur de la propriété par la valeur spécifiée pour les langues de droite à gauche. Dans cet exemple, la valeur de la propriété est remplacée par 30px.
    /*rtl :insérer :25px*/ Insère la valeur spécifiée à la place de la directive pour les langues de droite à gauche. Dans cet exemple, on insère 25px.

    Ignorer la propriété de transformation dans le CSS converti de droite à gauche

    .fl {
transform: rotate(45deg) translateY(5px) #{"/*rtl:ignore*/"};
}