web-dev-qa-db-fra.com

comment charger le style RTL en langage RTL

J'ai un site Web multilingue, l'une des langues est un langage RTL, en Drupal 7 Je mets mon CSS dans style.css et RTL CSS à style-rtl.css et par défaut drupal charge également le fichier style-rtl.css, maintenant dans Drupal 8, j'ai un thème multilingue, comment dire Drupal pour charger mon style RTL en langage RTL?

mise à jour J'ai trouvé ce lien mais je n'en suis pas sûr car j'ai un fichier CSS avec près de 1400 lignes, je devrais mettre [dir = "rtl"] avant tout sélecteur? !!!

8i18n-l10ntheming
7
Yusef

Drupal 8 utilise des bibliothèques, et vous pouvez les charger dans des modèles. Une façon de réaliser des bibliothèques dépendantes de la direction du langage serait d'utiliser le html_attributes['dir'] variable dans html.html.twig et charger différentes bibliothèques en fonction de la valeur:

{% if html_attributes['dir'] == 'ltr' %}
  {{ attach_library('your_theme_name/styles') }}
{% elseif html_attributes['dir'] == 'rtl' %}
  {{ attach_library('your_theme_name/styles_rtl') }}
{%- endif -%}

Configurez quelques bibliothèques:

styles:
  version: 8.x-1.0
  css:
    theme:
      css/styles.css: {}

styles_rtl:
  version: 8.x-1.0
  css:
    theme:
      css/styles-rtl.css: {}
8
Jeff Burnz

Pour ceux qui recherchent une solution alternative:

Vous pouvez également définir un nouveau library dans libraries.yml fichier de votre thème et pointez cette bibliothèque pour utiliser un certain CSS ou JS ou tout ce dont vous avez besoin.

L'étape suivante consiste à utiliser un prétraitement tel qu'un prétraitement de thème pour dire à Drupal8 d'utiliser cette bibliothèque dans une condition spécifique.

Exemple: Définition d'une nouvelle bibliothèque sous votre bibliothèque par défaut dans themename.libraries.yml

rtl:
  version: VERSION
  css:
    theme:
      assets/css/themename.style-rtl.css: {}

Ensuite, vous pouvez détecter la direction actuelle de vos pages avec un prétraitement dans themename.theme fichier:

function themename_preprocess_html (&$variables) {
    // Load specific library for pages with html attribute of RTL
    if ($variables['html_attributes']['dir'] == 'rtl') {
          $variables['#attached']['library'][] = 'themename/rtl';
    }
}

Videz le cache et vous êtes prêt à partir

1
Sohail