Schriftenskalierung ??

Hallo!

Im Rahmen einer hohen Barrierefreiheit wünscht ein Kunde
die Möglichkeit die Schriften zu skalieren.

Ist dies ohne YAML realisierbar?

Und wenn ja, wie mache ich das oder wo finde ich Infos?

Danke vielmals im Voraus

Jürgen

Ja, ist ja alles nur CSS.
Außerdem sollten diesbezüglich auch einige Extensions in der Repository verfügbar sein.

Du meinst über Links in etwa so:

<a class="klein">A</a> | <a class="mittel">A</a> | <a class="groß">A</a>

Dann gib deinem Tempalte eine neue config.linkVars mit und steuer darüber eine zusätzliche CSS-Datei die je nach Wert eingebunden wird.
Diese Dateien die benötigten Schriftgrößen der verwendeten Klassen, IDs und HTML-Tags.
(kleiner Tipp: * { font-size:10pt; } setzt für alle Tags die Schriftgröße auf 10pt, dann braucht man nicht alle Tags abtippen) 😉

(Natürlich müssen hier auch die Schriftgrößen von Grafiken bedacht werden, die TYPO3 selbst erstellt !)

Hoffe das ist schonmal ein guter Ansatz?

Grüße Wool

Hallo!

Danke Euch schon einmal vielmals!

Dann kann ich dem Kunden ja schon mal sagen "dass wir das auf jeden Fall hinbekommen".

Wenn ich dann soweit bin, dass ich es konkret angehe, werde
ich evt. noch einmal posten.

Vielen Dank bis dahin
Jürgen

Hallo!

Ich bin die Aufgabenstellung nun angegangen. Gibt da aber noch ein kleines Problem:
Bei Mausklick auf die Seite wird nicht die aktuelle Seite verändert dargestellt,
sondern leider auch die Startseite angesprungen. 🙁
Nachfolgend die Info wie ich es umgesetzt habe.
Kann mir jemand sagen, wie es richtig heißen muss?

HTML-Datei:

<div id="nebennavi"> ###NEBENNAVI###   ###STYLES### </div>

Der Marker STYLES wird im TypoScript über nachfolgenden Seiteninhalt "befüllt":
Doch die Verlinkung muss wohl irgendwie anders lauten:

HTML-Seiteninhaltselement mit verlinktem Icon:

<a href="index.php?typo=0&S=klein">
<img src="http://xxxx/fileadmin/Template/klein1.gif" alt="kleine Schrift" border="0" width="20" height="25" />  </img> </a>

Im TypoScipt oberhalb vom PAGE-Objekt

### Stylesheetwechsel (S) ###
config.linkVars = S

[global]
page.stylesheet = fileadmin/Template/SCNormal.css
[globalVar = GP:S = norm]
page.stylesheet = fileadmin/Template/SCNormal.css
[global]
[globalVar = GP:S = klein]
page.stylesheet = fileadmin/Template/SCKlein.css
[global]

Dann natürlich die CSS-Datei mit den veränderten Schriftgrößen.

Vielen Dank im Voraus.

Jürgen

also auf einer meiner Seiten wird dafür ein Marker FONT definiert:

(snip)
FONT = COA 
FONT {
 10 = TEXT
 10.wrap = <span>|:</span>&nbsp;
# 10.value = Schriftgröße  # wird je nach Sprache in einer condition gesetzt... 
 20 = COA
 20 {
  wrap = <a href="index.php|&S=1" target="_self" class="small" title="S">A</a>&nbsp;
  1 = TEXT
  1.wrap = ?id=|
  1.field = uid
  2 = TEXT
  2.wrap = &L=|
  2.value < config.sys_language_uid
 }
 30 < .20
 30.wrap = <a href="index.php|&S=2" target="_self" class="middle" title="L">A</a>&nbsp;
 40 < .30
 40.wrap = <a href="index.php|&S=3" target="_self" class="big" title="XL">A</a>
}
(snip)

alles als Text... aber mit aktueller Sprache und aktueller Seiten-ID.

Kann man bestimmt auch eleganter lösen... funktioniert aber 😉

Hay Wool!

Habe Deine Lösung ein wenig an meine Belange angepasst.
Es sieht gut aus!!!

Dennoch wäre es toll, wenn jemand für mich eine Lösung mit Icons hätte,
denn das ist das, was der Kunde wirklich will.

Werde dann abschließend alle Codierungen posten.

Viele Grüße

Jürgen

ähäm...

die As der Links durch deine img-tags ersetzen?

Hay!

Danke Wool!

War inzwischen auch drauf gekommen. #paralyzed#
Also nun ein Auszug aus meinem TypoScirpt.

Oberhalb von PAGE:

### Stylesheetwechsel (S) ###
config.linkVars = S
[global]
page.stylesheet = fileadmin/Template/Styles01Normal.css

[globalVar = GP:S = norm]
page.stylesheet = fileadmin/Template/Styles01Normal.css
[global]

[globalVar = GP:S = large]
page.stylesheet = fileadmin/Template/Styles02Large.css
[global]

Und dann in PAGE:

  DARSTELLUNG = COA 
  DARSTELLUNG {
  10 = TEXT
  10.wrap = |Schriftgröße:  
  20 = COA
  20 {
   wrap = <a href="index.php|&S=normal" target="_self" title="normal"> <img src="http://xxx/fileadmin/Icons/IconNormal.gif" alt="Normal" border="0" width=20 /></a>&nbsp;
   1 = TEXT
   1.wrap = ?id=|
   1.field = uid
   }
  30 = COA
  30 {
   wrap = <a href="index.php|&S=large" target="_self" title="groß"><img src="http://xxx/fileadmin/Icons/IconLarge.gif" alt="Groß" border="0" width=20  /></a>&nbsp;
   1 = TEXT
   1.wrap = ?id=|
   1.field = uid
   }

Vielen Dank!
Viele Grüße
Jürgen