Goobi-Tag 2021: Right to left - Goobi viewer Design

intranda GmbH
intranda GmbHManaging Director at intranda GmbH
GOOBI VIEWER DESIGN
RIGHT TO LEFT
Einblicke in den
Entwicklungsprozess
der rechtsläufigen Gestaltung
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/24
EINFÜHRUNG
RIGHT-TO-LEFT (RTL)
1.
RTL DESIGN
4/24
EINFÜHRUNG
Rechtsläufige Schriften
(dextrograd)
• Deutsch
• Englisch
Linksläufige Schriften
(sinistrograd)
• Hebräisch
• Arabisch
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/24
DESIGN SPIEGELN
2.
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
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/24
LOGISCHE CSS EIGENSCHAFTEN
3.
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
RTL DESIGN
11/24
BROWSERKOMPATIBILITÄT
Unterstützung logischer CSS
Eigenschaften
• 2021: Schwelle der allgemeinen Unterstützung
durch die meistgenutzten Browser
12/24
TYPISCHE PROBLEME
4.
RTL DESIGN
13/24
TYPISCHE PROBLEME
Buchstabenabstand
• „Sensibleres“ Schriftbild
• Arabische Buchstaben sollen verbunden
aussehen
© rtlstyling.com / Ahmad Shadeed
RTL DESIGN
14/24
TYPISCHE PROBLEME
Transparenter Text
• Führt zu fehlerhafter Darstellung
überlappender Buchstaben
© rtlstyling.com / Ahmad Shadeed
RTL DESIGN
15/24
TYPISCHE PROBLEME
Textlänge
• Zentrale Bedienelemente sind plötzlich deutlich
kompakter und damit weniger auffällig/sichtbar
Button mit Mindestbreite
RTL DESIGN
16/24
TYPISCHE PROBLEME
Schriftart
• Bestimmte Schriftarten sind schwer oder gar
nicht normal lesbar in arabischer Sprache
© rtlstyling.com / Ahmad Shadeed
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
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
RTL DESIGN
19/24
TYPISCHE PROBLEME
Zeilenumbrüche
• Innerhalb von Wörtern sind Zeilenumbrüche
nicht möglich
© rtlstyling.com / Ahmad Shadeed
20/24
ANWENDUNG GOOBI VIEWER
5.
RTL DESIGN
21/24
STARTSEITE
LTR RTL
RTL DESIGN
22/24
WERKANSICHT
LTR RTL
RTL DESIGN
23/24
TYPISCHE PROBLEME
Goobi Viewer auf Deutsch (LTR)
Arabisches Werk (RTL)
• Welche Ausrichtung sollte der Paginator
haben?
RTL DESIGN
24/24
Danke für Ihre Aufmerksamkeit.
1 of 24

Recommended

Goobi-Tag 2021: Barrierefreiheit im Goobi viewer by
Goobi-Tag 2021: Barrierefreiheit im Goobi viewerGoobi-Tag 2021: Barrierefreiheit im Goobi viewer
Goobi-Tag 2021: Barrierefreiheit im Goobi viewerintranda GmbH
321 views13 slides
Goobi-Tag 2021: „Am Anfang sah es nach Routine aus“ – DLC goes Goobi, ein Pr... by
Goobi-Tag 2021:  „Am Anfang sah es nach Routine aus“ – DLC goes Goobi, ein Pr...Goobi-Tag 2021:  „Am Anfang sah es nach Routine aus“ – DLC goes Goobi, ein Pr...
Goobi-Tag 2021: „Am Anfang sah es nach Routine aus“ – DLC goes Goobi, ein Pr...intranda GmbH
351 views14 slides
Goobi-Tage 2019: Nachlass Robert Koch: in Augias verzeichnet mit Goobi digita... by
Goobi-Tage 2019: Nachlass Robert Koch: in Augias verzeichnet mit Goobi digita...Goobi-Tage 2019: Nachlass Robert Koch: in Augias verzeichnet mit Goobi digita...
Goobi-Tage 2019: Nachlass Robert Koch: in Augias verzeichnet mit Goobi digita...intranda GmbH
216 views29 slides
Goobi-Tage 2019: Goobi-to-go Ersatz für Test-Server Überlegungen / Erfahrungen by
Goobi-Tage 2019: Goobi-to-go Ersatz für Test-Server Überlegungen / ErfahrungenGoobi-Tage 2019: Goobi-to-go Ersatz für Test-Server Überlegungen / Erfahrungen
Goobi-Tage 2019: Goobi-to-go Ersatz für Test-Server Überlegungen / Erfahrungenintranda GmbH
225 views15 slides
Goobi-Tag 2021: Goobi viewer in Docker Containern by
Goobi-Tag 2021: Goobi viewer in Docker ContainernGoobi-Tag 2021: Goobi viewer in Docker Containern
Goobi-Tag 2021: Goobi viewer in Docker Containernintranda GmbH
367 views20 slides
Goobi-Tag 2021: Goobi im Einsatz im Niedersächsischen Landesamt für Denkmalpf... by
Goobi-Tag 2021: Goobi im Einsatz im Niedersächsischen Landesamt für Denkmalpf...Goobi-Tag 2021: Goobi im Einsatz im Niedersächsischen Landesamt für Denkmalpf...
Goobi-Tag 2021: Goobi im Einsatz im Niedersächsischen Landesamt für Denkmalpf...intranda GmbH
359 views20 slides

More Related Content

More from intranda GmbH

Goobi-viewer-Tag 2019 - Viel zu tun: Geheimbaustellen und Ideen für die nächs... by
Goobi-viewer-Tag 2019 - Viel zu tun: Geheimbaustellen und Ideen für die nächs...Goobi-viewer-Tag 2019 - Viel zu tun: Geheimbaustellen und Ideen für die nächs...
Goobi-viewer-Tag 2019 - Viel zu tun: Geheimbaustellen und Ideen für die nächs...intranda GmbH
211 views113 slides
Goobi-viewer-Tag 2019 - Willkommen by
Goobi-viewer-Tag 2019 - WillkommenGoobi-viewer-Tag 2019 - Willkommen
Goobi-viewer-Tag 2019 - Willkommenintranda GmbH
203 views17 slides
Goobi-viewer-Tag 2019 - Goobi viewer 4.0 - What happened? by
Goobi-viewer-Tag 2019 - Goobi viewer 4.0 - What happened?Goobi-viewer-Tag 2019 - Goobi viewer 4.0 - What happened?
Goobi-viewer-Tag 2019 - Goobi viewer 4.0 - What happened?intranda GmbH
185 views81 slides
Goobi-Tage 2019 - Goobi workflow Entwicklungsrückblick über die letzten 12 M... by
Goobi-Tage 2019 -  Goobi workflow Entwicklungsrückblick über die letzten 12 M...Goobi-Tage 2019 -  Goobi workflow Entwicklungsrückblick über die letzten 12 M...
Goobi-Tage 2019 - Goobi workflow Entwicklungsrückblick über die letzten 12 M...intranda GmbH
179 views104 slides
Goobi-workflow-Tag 2019 - Willkommen by
Goobi-workflow-Tag 2019 - WillkommenGoobi-workflow-Tag 2019 - Willkommen
Goobi-workflow-Tag 2019 - Willkommenintranda GmbH
188 views30 slides
Goobi-Tag 2020 - Ausblick by
Goobi-Tag 2020 - AusblickGoobi-Tag 2020 - Ausblick
Goobi-Tag 2020 - Ausblickintranda GmbH
185 views108 slides

More from intranda GmbH(20)

Goobi-viewer-Tag 2019 - Viel zu tun: Geheimbaustellen und Ideen für die nächs... by intranda GmbH
Goobi-viewer-Tag 2019 - Viel zu tun: Geheimbaustellen und Ideen für die nächs...Goobi-viewer-Tag 2019 - Viel zu tun: Geheimbaustellen und Ideen für die nächs...
Goobi-viewer-Tag 2019 - Viel zu tun: Geheimbaustellen und Ideen für die nächs...
intranda GmbH211 views
Goobi-viewer-Tag 2019 - Willkommen by intranda GmbH
Goobi-viewer-Tag 2019 - WillkommenGoobi-viewer-Tag 2019 - Willkommen
Goobi-viewer-Tag 2019 - Willkommen
intranda GmbH203 views
Goobi-viewer-Tag 2019 - Goobi viewer 4.0 - What happened? by intranda GmbH
Goobi-viewer-Tag 2019 - Goobi viewer 4.0 - What happened?Goobi-viewer-Tag 2019 - Goobi viewer 4.0 - What happened?
Goobi-viewer-Tag 2019 - Goobi viewer 4.0 - What happened?
intranda GmbH185 views
Goobi-Tage 2019 - Goobi workflow Entwicklungsrückblick über die letzten 12 M... by intranda GmbH
Goobi-Tage 2019 -  Goobi workflow Entwicklungsrückblick über die letzten 12 M...Goobi-Tage 2019 -  Goobi workflow Entwicklungsrückblick über die letzten 12 M...
Goobi-Tage 2019 - Goobi workflow Entwicklungsrückblick über die letzten 12 M...
intranda GmbH179 views
Goobi-workflow-Tag 2019 - Willkommen by intranda GmbH
Goobi-workflow-Tag 2019 - WillkommenGoobi-workflow-Tag 2019 - Willkommen
Goobi-workflow-Tag 2019 - Willkommen
intranda GmbH188 views
Goobi-Tag 2020 - Ausblick by intranda GmbH
Goobi-Tag 2020 - AusblickGoobi-Tag 2020 - Ausblick
Goobi-Tag 2020 - Ausblick
intranda GmbH185 views
Goobi-Tag 2020 - Willkommen by intranda GmbH
Goobi-Tag 2020 - WillkommenGoobi-Tag 2020 - Willkommen
Goobi-Tag 2020 - Willkommen
intranda GmbH200 views
Goobi-Tag 2020 - Goobi workflow Entwicklungsrückblick by intranda GmbH
Goobi-Tag 2020 - Goobi workflow EntwicklungsrückblickGoobi-Tag 2020 - Goobi workflow Entwicklungsrückblick
Goobi-Tag 2020 - Goobi workflow Entwicklungsrückblick
intranda GmbH216 views
Goobi-Tage 2019 - Goobi 19.09 under the Hood by intranda GmbH
Goobi-Tage 2019 - Goobi 19.09 under the HoodGoobi-Tage 2019 - Goobi 19.09 under the Hood
Goobi-Tage 2019 - Goobi 19.09 under the Hood
intranda GmbH189 views
Goobi-Tag 2021 - Ausblick by intranda GmbH
Goobi-Tag 2021 - AusblickGoobi-Tag 2021 - Ausblick
Goobi-Tag 2021 - Ausblick
intranda GmbH379 views
Goobi-Tag 2020 - Entwicklungsrückblick Goobi viewer by intranda GmbH
Goobi-Tag 2020 - Entwicklungsrückblick Goobi viewerGoobi-Tag 2020 - Entwicklungsrückblick Goobi viewer
Goobi-Tag 2020 - Entwicklungsrückblick Goobi viewer
intranda GmbH78 views
Goobi-Tag 2021 - Entwicklungsrückblick Goobi viewer by intranda GmbH
Goobi-Tag 2021 - Entwicklungsrückblick Goobi viewerGoobi-Tag 2021 - Entwicklungsrückblick Goobi viewer
Goobi-Tag 2021 - Entwicklungsrückblick Goobi viewer
intranda GmbH434 views
Goobi-Tage 2019 - Die neue intranda OCR Pipeline by intranda GmbH
Goobi-Tage 2019 - Die neue intranda OCR PipelineGoobi-Tage 2019 - Die neue intranda OCR Pipeline
Goobi-Tage 2019 - Die neue intranda OCR Pipeline
intranda GmbH163 views
Goobi-Tag 2021 - (Semi-) Automatische Strukturerkennung by intranda GmbH
Goobi-Tag 2021 - (Semi-) Automatische StrukturerkennungGoobi-Tag 2021 - (Semi-) Automatische Strukturerkennung
Goobi-Tag 2021 - (Semi-) Automatische Strukturerkennung
intranda GmbH349 views
Goobi-Tag 2021 - Der intranda OCR-Service by intranda GmbH
Goobi-Tag 2021 - Der intranda OCR-ServiceGoobi-Tag 2021 - Der intranda OCR-Service
Goobi-Tag 2021 - Der intranda OCR-Service
intranda GmbH346 views
Goobi-Tag 2021 - Rückblick Goobi workflow by intranda GmbH
Goobi-Tag 2021 - Rückblick Goobi workflowGoobi-Tag 2021 - Rückblick Goobi workflow
Goobi-Tag 2021 - Rückblick Goobi workflow
intranda GmbH360 views
Goobi-Tag 2021 - Willkommen by intranda GmbH
Goobi-Tag 2021 - WillkommenGoobi-Tag 2021 - Willkommen
Goobi-Tag 2021 - Willkommen
intranda GmbH374 views
OCR Qualität objektiv gemessen by intranda GmbH
OCR Qualität objektiv gemessenOCR Qualität objektiv gemessen
OCR Qualität objektiv gemessen
intranda GmbH1.4K views
Ich glaub es hackt! – Ein Teilnehmerbericht vom Kultur-Hackathon Coding da Vi... by intranda GmbH
Ich glaub es hackt! – Ein Teilnehmerbericht vom Kultur-Hackathon Coding da Vi...Ich glaub es hackt! – Ein Teilnehmerbericht vom Kultur-Hackathon Coding da Vi...
Ich glaub es hackt! – Ein Teilnehmerbericht vom Kultur-Hackathon Coding da Vi...
intranda GmbH1.5K views
Perspektiven für die weitere Entwicklung von Goobi – workflow und viewer by intranda GmbH
Perspektiven für die weitere Entwicklung von Goobi – workflow und viewerPerspektiven für die weitere Entwicklung von Goobi – workflow und viewer
Perspektiven für die weitere Entwicklung von Goobi – workflow und viewer
intranda GmbH806 views

Goobi-Tag 2021: Right to left - Goobi viewer Design