Goobi-Tag 2021: Right to left - Goobi viewer Design, Jan-Hendrik Günther (intranda)

1. GOOBI VIEWER DESIGN
RIGHT TO LEFT
Einblicke in den
Entwicklungsprozess
der rechtsläufigen Gestaltung

2. 2/24
Jan - H. G.
• Seit 2019 bei intranda
• Goobi viewer Designs, Themes, Templates
• Frontendentwicklung im viewer Team
• HTML/CSS/Javascript
• Adobe Tools
VORSTELLUNG

3. 3/24
EINFÜHRUNG
RIGHT-TO-LEFT (RTL)
1.

4. RTL DESIGN
4/24
EINFÜHRUNG
Rechtsläufige Schriften
(dextrograd)
• Deutsch
• Englisch
Linksläufige Schriften
(sinistrograd)
• Hebräisch
• Arabisch

5. RTL DESIGN
5/24
STRUKTUR LEFT-TO-RIGHT
Struktureller Aufbau
• Entsprechend der Leserichtung der Sprache
• Webseite muss sich für den Nutzer intuitiv
anfühlen

6. 6/24
DESIGN SPIEGELN
2.

7. RTL DESIGN
7/24
VERGLEICH AUSRICHTUNG LTR UND RTL
HTML Attribut dir="rtl"
• Textumstellung funktionierte grundsätzlich
• Layoutelemente änderten sich nicht oder
fehlerhaft
• Arabischer Text beeinflusst auch das
Erscheinungsbild einzelner Elemente

8. RTL DESIGN
8/24
NEUSTRUKTURIERUNG
Floats zu Flexbox/Grid
umbauen
• Das Flexbox-Modell sowie das Grid-Modell
richtet sich entsprechend der vergebenen „dir“-
Attributs aus
• Problem: Abstände an vielen Stellen inkorrekt

9. 9/24
LOGISCHE CSS EIGENSCHAFTEN
3.

10. RTL DESIGN
10/24
LOGISCHE CSS EIGENSCHAFTEN
Logische Abstände
• Vermeidung von festgelegten/physikalischen
Richtungen
• Nutzen die Begriffe „start“ und „end“ zur
Orientierung
• Sind der Leserichtung entsprechend zu
interpretieren

11. RTL DESIGN
11/24
BROWSERKOMPATIBILITÄT
Unterstützung logischer CSS
Eigenschaften
• 2021: Schwelle der allgemeinen Unterstützung
durch die meistgenutzten Browser

12. 12/24
TYPISCHE PROBLEME
4.

13. RTL DESIGN
13/24
TYPISCHE PROBLEME
Buchstabenabstand
• „Sensibleres“ Schriftbild
• Arabische Buchstaben sollen verbunden
aussehen
© rtlstyling.com / Ahmad Shadeed

14. RTL DESIGN
14/24
TYPISCHE PROBLEME
Transparenter Text
• Führt zu fehlerhafter Darstellung
überlappender Buchstaben
© rtlstyling.com / Ahmad Shadeed

15. RTL DESIGN
15/24
TYPISCHE PROBLEME
Textlänge
• Zentrale Bedienelemente sind plötzlich deutlich
kompakter und damit weniger auffällig/sichtbar
Button mit Mindestbreite

16. RTL DESIGN
16/24
TYPISCHE PROBLEME
Schriftart
• Bestimmte Schriftarten sind schwer oder gar
nicht normal lesbar in arabischer Sprache
© rtlstyling.com / Ahmad Shadeed

17. RTL DESIGN
17/24
TYPISCHE PROBLEME
Zeilenabstand und -höhe
• Ohne ausreichenden Abstand ist der Text
schlecht lesbar, da die arabischen Buchstaben
mehr vertikalen Raum einnehmen
• Zeichen oder Elemente werden eventuell
abgeschnitten
© rtlstyling.com / Ahmad Shadeed

18. RTL DESIGN
18/24
TYPISCHE PROBLEME
Unterstrichene Links
• Die Punkte der Buchstaben werden von der
Linie verdeckt
Moderner Browser/korrekte CSS Einstellungen
© rtlstyling.com / Ahmad Shadeed

19. RTL DESIGN
19/24
TYPISCHE PROBLEME
Zeilenumbrüche
• Innerhalb von Wörtern sind Zeilenumbrüche
nicht möglich
© rtlstyling.com / Ahmad Shadeed

20. 20/24
ANWENDUNG GOOBI VIEWER
5.

21. RTL DESIGN
21/24
STARTSEITE
LTR RTL

22. RTL DESIGN
22/24
WERKANSICHT
LTR RTL

23. RTL DESIGN
23/24
TYPISCHE PROBLEME
Goobi Viewer auf Deutsch (LTR)
Arabisches Werk (RTL)
• Welche Ausrichtung sollte der Paginator
haben?

24. RTL DESIGN
24/24
Danke für Ihre Aufmerksamkeit.