RTL-Support - JYAML - Joomla! Templates mit Yaml

rtlsupport.gifRTL-Support

RTL bedeutet Right to Left. Dies bezieht sich auf die Leserichtung der installierten Sprache in Joomla!. Diese Sprachrichtung findet man zum Beispiel im Arabischen.

Im YAML-Framework selbst existieren hierfür noch keine Anpassungen. Diese wurden aber nun im JYAML-Template ergänzt.

Das Basis RTL Sytlesheet ist die base-rtl.css im Verzeichnis yaml/core. Ebenfalls existiert eine base_slim-rtl.css, die für den produktiven Einsatz hinsichtlich der Dateigröße optimiert wurde. Die slim-Datei wird dann auch automatisch geladen, falls eine RTL-Sprache aktiv ist.

Natürlich reicht es nicht aus, einfach nur das Basis-Stylesheet zu ändern. Jede vorgenommene horizontale Ausrichtung muss entsprechend angepasst werden. Hierfür ist im JYAML-Template natürlich eine spezielle Funktion integriert. Hierfür muss man sich allerdings an die YAML-Regeln halten und die basemod.css und content.css für die Gestaltung des Inhalts verwenden.

Funktionsweise

Alle RTL-Stylesheets sind als Modifikation anzusehen und sollen kein komplettes Stylesheet darstellen. 

Das JYAML-System-Plugin sucht an erster Stelle automatisch im Verzeichnis css/[design]/screen nach den Dateien basemod-rtl.css und content-rtl.css. Diese werden automatisch an letzter Position im <head> des HTML-Dokuments eingebunden.

An zweiter Stelle werden alle Stylesheets, die in der Konfiguration eingefügt wurden, durchsucht. Alle Dateien, die den Suffix "-rtl" im Dateinamen enthalten, werden automatisch hinzugefügt. Beispielsweise wird bei der nav_shinybuttons.css nach nav_shinybuttons-rtl.css gesucht. Diese werden dann wiederum an letzter Position im <head> des HTML-Dokuments eingebunden.

Werfen wir nun noch einen Blick in die base-rtl.css.
Die Beschreibung der base.css finden Sie in der YAML-Framework Dokumentation Basis-Stylesheets. 

/* (en) Set direction in Right-to-Left. */
/* (de) Setze Leserichtung nach Rechts-zu-Links. */
* { direction: rtl; }

/* (en) Correction: margin/padding reset caused too small select boxes. */
/* (de) Korrektur: Das Zurücksetzen der Abstände verursacht zu kleine Selectboxen. */
option {
  padding-left: 0;
  padding-right: 0.4em;
}

body {
  /* (en) Standard values for text alignment */
  /* (de) Vorgabe der Textausrichtung */
  text-align: right;
}

/* (en) New standard values for lists, blockquote and cite */
/* (de) Neue Standardwerte für Listen & Zitate */
ul, ol, dl { margin: 0 1em 1em 0; }
li { 
  margin-left:auto;
  margin-right: 1.5em;
}

dd { margin: 0 2em 1em 0; }

blockquote, cite { 
  font-style: normal;  /* FF corrupts italic text with RTL fonts */
  margin: 0 1.5em 1em 0; 
}

/*------------------------------------------------------------------------------------------------------*/

/**
* @section base layout | Basis Layout
* @see     http://www.yaml.de/en/documentation/css-components/base-stylesheet.html
*/
#topnav {
  right:auto;
  left: 10px;

  /* (en) Essential for correct right alignment of absolute positioned element in IE ! */
  /* (de) Erforderlich, damit im IE das absolut positionierte Element wirklich rechts plaziert ! */
  right: auto;

  /* (en) essential for correct right alignment in Opera 6 ! */
  /* (de) Erforderlich, damit im Opera 6 wirklich right plaziert ! */
  text-align: right;
}