CSS pour les langues de droite à gauche dans les portails
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 en plus Portail de services de (/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 au modèle HTML d’un widget, vous pouvez utiliser le sélecteur d’attribut
[dir="rtl"]ou le sélecteur de classe.rtlpour fournir un CSS spécifique aux langues de droite à gauche. - Pour inclure un CSS spécifique aux langues de droite à gauche, vous pouvez appeler la méthode isRTLEnabled() dans la GlideSPScriptable - Scoped classe du script serveur d’un widget ou utiliser le marqueur global g_portal_isrtl dans le script client du widget.
En outre, dans le CSS de thème, de page, de widget ou d’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 (#{""}).
| 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 de droite à gauche. Cet exemple ajoute 10px. |
/*rtl :append :3rem*/ |
Ajoute une valeur à la fin de la valeur de la propriété pour les langues de droite à gauche. Cet exemple ajoute 3rem. |
/*rtl :replace : ou /*rtl : |
Remplace la valeur de la propriété par la valeur spécifiée pour les langues de droite à gauche. Cet exemple remplace la valeur de la propriété par 30 px. |
/*rtl :insert :25px*/ |
Insère la valeur spécifiée à la place de la directive pour les langues de droite à gauche. Cet exemple insère 25px. |
Ignorer la propriété de transformation dans le CSS converti de droite à gauche
.fl {
transform: rotate(45deg) translateY(5px) #{"/*rtl:ignore*/"};
}