Arabischer Stil HTML-Vorlagen

Saubere HTML-Vorlagen im arabischen Stil für RTL-fähiges Markup

Arabische HTML-Vorlagen sind besonders vorteilhaft, wenn die Leserichtung direkt in den Dateien definiert ist. Ein Layout, das für Englisch erstellt und anschließend gespiegelt wurde, führt an vorhersehbaren Stellen zu Fehlern: Kartenreihenfolge, Formularfelder und alles, was lateinische Zeichen in einem arabischen Satz enthält. Sie erhalten eine solide Grundlage, deren Abschnitte bereits korrekt funktionieren. Die verbleibende Arbeit beschränkt sich auf die Inhalte und die Feinabstimmung.

Gespiegeltes Markup und Lesereihenfolge

Die Dokumentrichtung wird einmalig über das Attribut „dir“ festgelegt. Alles Weitere hängt davon ab, wie die Abschnitte erstellt wurden. Einige Punkte unterscheiden eine korrekt vorbereitete Datei von einer gespiegelten Version:

• Kartenraster behalten ihre logische Reihenfolge auch nach dem Stapeln auf kleinen Bildschirmen, da eine umgekehrte Zeile leicht zur falschen Spaltenreihenfolge führen kann.

• Pfeile, Chevrons und Paginierungssteuerelemente sind separate Elemente, wodurch das Spiegeln nur eine kleine Anpassung erfordert.

• Blöcke wachsen mit ihrem Text, da eine arabische Überschrift selten die gleiche Höhe wie ihre englische Version einnimmt.

• Formulare halten Beschriftungen, Eingabefelder und Nachrichten rechtsbündig, während Telefonnummern in lateinischen Ziffern dargestellt werden.

Gemischte Schriftwerte in arabischen Absätzen

Echte arabische Inhalte sind selten rein. Ein Absatz enthält einen lateinischen Markennamen, eine E-Mail-Adresse oder ein Datum in westlichen Ziffern, und jedes dieser Elemente behält seine eigene Richtung innerhalb einer von rechts nach links geschriebenen Zeile bei. Eine Website, die nie mit solchem Material getestet wurde, zeigt dies sofort: Satzzeichen landen auf der falschen Seite, eine Zahl wird spiegelverkehrt dargestellt, ein Produktcode wird am Zeilenumbruch geteilt. Öffnen Sie die Demo und suchen Sie nach einem Abschnitt, der beide Schriftsysteme mischt, bevor Sie etwas anderes beurteilen.

Nicepage unterstützt das Rasterverhalten im responsiven Modus, wodurch Zellen gestapelt oder neu angeordnet werden können, wenn ein schmaler Bildschirm eine andere Reihenfolge erfordert. Diese Steuerung ist hier besonders wichtig, da die Reihenfolge, die ein Leser auf einem Smartphone erwartet, auch nach der Neuanordnung erhalten bleiben muss.

Bearbeitbare Abschnitte, Exportierte Dateien

Sobald das Layout und seine responsiven Zustände fertig sind, erstellt die Nicepage Desktop-Anwendung die Dateien über den dokumentierten Export-Workflow. Das Paket wird dann auf Ihren Webserver oder direkt an einen Entwickler zur Weiterbearbeitung übertragen.

Dieser letzte Punkt ist der Hauptgrund, warum eine programmierte Grundlage überhaupt vorzuziehen ist. Sie erhalten die eigentlichen Dateien, sodass ein Abschnitt auf einem neuen Bildschirm wiederverwendet, eine Schriftart ausgetauscht und eine Korrektur direkt in den Quellcode eingearbeitet werden kann. Eine Demo lohnt sich, wenn ihre Abschnitte lesbar bleiben, ihre Komponenten sauber wiederholt werden und ihre arabischen Schriftarten bereits Teil des Projekts sind. Scrollen Sie dann das Ganze auf einem schmalen Bildschirm, da Ornamente gut dargestellt werden, die Lesereihenfolge jedoch nicht.