Gestalten mehrsprachiger Webseiten: Unterschied zwischen den Versionen

Aus Wiki Flüchtlingshilfe Nordstadt
Wechseln zu: Navigation, Suche
 
(4 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 3: Zeile 3:
 
Unser Projekt verwendet eine dezidierte Seite pro unterstützter Sprache. Die Startseite ist in deutsch mit deutlich hervorgehobenen Links zu den Seiten mit Übersetzungen in andere Sprachen.  
 
Unser Projekt verwendet eine dezidierte Seite pro unterstützter Sprache. Die Startseite ist in deutsch mit deutlich hervorgehobenen Links zu den Seiten mit Übersetzungen in andere Sprachen.  
  
===Das <tt>html lang</tt> Attribut===  
+
==Das <tt>html lang</tt> Attribut==  
 
Wir verwenden Html 5 und setzten das <tt>lang</tt> Attribut direkt im root-Elememt der jeweiligen Seite.
 
Wir verwenden Html 5 und setzten das <tt>lang</tt> Attribut direkt im root-Elememt der jeweiligen Seite.
  
Zeile 14: Zeile 14:
 
;Arabisch
 
;Arabisch
 
: <tt><html lang="ar"></tt>
 
: <tt><html lang="ar"></tt>
;Farsi
+
;Farsi (Dari wie es in Afgahnistan geannt wird)
 
: <tt><html lang="fa"></tt>
 
: <tt><html lang="fa"></tt>
  
===Schriftarten===
+
==Schriftarten==
Die Schriftart ''Tahoma'' scheint sich wohl als Standardschriftart für gemischte indogermanische und arabische Texte etabliert zu haben.
+
Die Schriftarten ''Tahoma'' und ''Arial'' scheinen wohl als Standardschriftart für gemischte indogermanische, arabische und Farsi Texte etabliert zu haben.
  
 
====Google Fonts?====
 
====Google Fonts?====
Google hat ein paar Fonts für arabische und ethiopische Texte in seinem Early Access Programm:
+
Google hat einen vollständigen Font '''Amiri''' für arabisch+latin-extended in den Schnitten ''normal, bold, italic, bold-italic''. Für Farsi hat Google im Augenblick noch nichts. Einige Fonts für äthiopische Texte existieren in Early Access Programm: https://www.google.com/fonts/earlyaccess
  
https://www.google.com/fonts/earlyaccess
+
==HTML/CSS==
 +
Um für ein html-Element die Schreibrichtung Rechts-nach-Links zu aktivieren, reicht es aus die css-Eigenschaft ''direction'' auf den Wert <tt>rtl</tt> zu setzen.
  
aber wie sieht es da auf dem iPhone aus??
+
<pre>
 +
.page {
 +
    direction:rtl;
 +
}
 +
</pre>
 +
 
 +
Der Text wird jetzt nicht nur rechtsbündig dargestellt, auch Bullets in einer Liste und Nummerierungen erscheinen auf der richtigen Seite der Listitems.

Aktuelle Version vom 22. Januar 2016, 19:42 Uhr

Die Informationen auf dieser Seite haben wir im Rahmen eines kleinen mehrsprachigen Web-Projekts zusammengetragen. Es ist nicht viel mehr als eine Liste mit Puzzle-Teilen und Fundstücken im Web die uns weitergeholfen haben.

Unser Projekt verwendet eine dezidierte Seite pro unterstützter Sprache. Die Startseite ist in deutsch mit deutlich hervorgehobenen Links zu den Seiten mit Übersetzungen in andere Sprachen.

Das html lang Attribut

Wir verwenden Html 5 und setzten das lang Attribut direkt im root-Elememt der jeweiligen Seite.

Deutsch
<html lang="de">
Englisch
<html lang="en">
Französisch
<html lang="fr">
Arabisch
<html lang="ar">
Farsi (Dari wie es in Afgahnistan geannt wird)
<html lang="fa">

Schriftarten

Die Schriftarten Tahoma und Arial scheinen wohl als Standardschriftart für gemischte indogermanische, arabische und Farsi Texte etabliert zu haben.

Google Fonts?

Google hat einen vollständigen Font Amiri für arabisch+latin-extended in den Schnitten normal, bold, italic, bold-italic. Für Farsi hat Google im Augenblick noch nichts. Einige Fonts für äthiopische Texte existieren in Early Access Programm: https://www.google.com/fonts/earlyaccess

HTML/CSS

Um für ein html-Element die Schreibrichtung Rechts-nach-Links zu aktivieren, reicht es aus die css-Eigenschaft direction auf den Wert rtl zu setzen.

.page {
    direction:rtl;
}

Der Text wird jetzt nicht nur rechtsbündig dargestellt, auch Bullets in einer Liste und Nummerierungen erscheinen auf der richtigen Seite der Listitems.