Schriftgröße mit dynamischen CSS

[kathrin-77]

Ich habe aus dem T3N-Magazin den Artikel "Barrierefreiheit in der Praxis" von Sacha Vorbeck gelesen. Dort ist auf Seite 4 unter der Überschrift "Weitere Schritte, um die Barrierefreiheit zu erhöhen" erklärt, wie man mit Hilfe von dynamischen CSS die Schriftgröße ändern kann. Ich nutze bisher das dem einen oder anderen bekannte Script von efa (einfach für alle), doch leider basiert das auf Javascript und ich suchte eine Lösung, die nicht auf Javascript basiert. Das habe ich ja nun auch in dem o.g. Artikel gefunden. Ich habe es umgesetzt und es funktioniert soweit auch, allerdings habe ich noch 3 Probleme und brauche eure Hilfe.

1. Problem: verlinken auf der Webseite:
In dem Artikel steht, dass die Links auf der Webseite wie folgt aussehen sollen:

<a xhref="http://domain/index.php?id=xx&font=1">Schrift vergrössern</a>

Das xx ist natürlich zu ersetzen und welche Größe font=1 ist, wurde vorab im TS definiert. Es ändert sich bei mir aber nichts. Wenn ich allerdings direkt in TS schreibe:

stdWrap.wrap = @import url(|&font=1);

statt wie im Artikel beschrieben:

stdWrap.wrap = @import url(|);

dann wird genau das erreicht, was ich will, die Schrift wird größer.
Aufgerufen wird das dynamische CSS im Header und sieht so aus:

<style type="text/css" media="screen,projection">
<!--
@import url(index.php?id=16&type=31); 
 -->
 </style>

id=16 ist hier mal ein Beispiel. Wie müssen die Links nun auf der Webseite aussehen, damit die Schrift vergrößert wird?

3. Meine Inhalte der bisher statischen CSS-Datei scheinen nicht alle beachtet zu werden, obwohl ich doch wie in dem Artikel beschrieben meine statische css-Datei lade, bevor anschließend dynamisch an einer Stelle (Schriftgröße) der Marker dort ersetzt wird. Also die divs werden alle richtig gesetzt (float funktioniert also), aber z.B. font-family oder background-imge findet keine Beachtung. Wie kann das sein?

2. Realurl
Mein nächstes Problem ist die Realurl. Das ganze scheint nur zu funktionieren, wenn mit id's gearbeitet wird. Da muss ich bestimmt was umschreiben, aber ich weiß nicht wie und was? Jemand eine Idee?

Ich hoffe der ein oder andere kann mir bei der Lösung meiner Probleme helfen. Ich finde diese Methode richtig klasse, besonders in Hinblick auf Barrierefreiheit, denn mit den JS-Links haben die Screenreader enorme Probleme und so können gerade die Leute, die die Vergrößerung brauchen vielleicht gar nicht nutzen, weil die Links nicht gefunden werden (das Problem mit dem efa-Script habe ich durch einen fast-Blinden Menschen bestätigt bekommen).

Viele Grüße,
Kathrin

[droom]

Eigentlich kompliziert diese Methode. Bei mir erreiche ich gut, was man unter schwangau.de: Schwangau, Dorf der Königsschlösser Neuschwanstein und Hohenschwangau: Informationen sehen kann. Wenn dies für dich ein Alternativ ist, dann sag Bescheid und ich zeige dir den Code.

[kathrin-77]

Vielen Dank für Deine Antwort! Basiert diese Methode auf JavaScript? Weil genau das will ich nämlich nicht, deshalb bin ich auf der Suche nach einer Alternative. Wenn ich mir den Quelltext dazu ansehen, steckt da aber doch JS drin .

Allerdings würde ich nicht unbedingt ein dropdown-Menü dafür verwenden wollen, sondern vielmehr normale Links. Wäre das mit Deinem Beispiel eigentlich auch möglich?

LG,
Kathrin

[droom]

Also wenn du normale Links dafür verwenden möchtest, dann brauchste gar kein JS.

[kathrin-77]

Na dann mal her mit dem Code ;-).

[droom]

Also im Setup haste so was:
-----------------------------
###Setting Template Mode: 0=accessible_divs / 1=classic_tables

templateMode = 0

page.CSS_inlineStyle (

BODY {
font-size : {$mainFontSize};

}
P, OL, UL, DIV{
font-size : {$mainFontSize};
}
h1{
font-size: {$headerh1FontSize};
}

h2,H2{
font-size: {$headerh2FontSize};
}

)

config.linkVars = style #(wenn schon L, dann musste dies nur dazu fügen)
----------------------------

und in Constant, definierst du die ganzen Variablen. Hier haben wir 4 verschiedenen Schriftgrössen:
-------------------------
###Dynamic fontsizes:
mainFontSize = 12px
headerh1FontSize = 16px
headerh2FontSize = 12px
[globalVar = GP:style = a]
mainFontSize = 10px
headerh1FontSize = 14px
headerh2FontSize = 10px
[global]
[globalVar = GP:style = b]
mainFontSize = 12px
headerh1FontSize = 16px
headerh2FontSize = 12px
[global]
[globalVar = GP:style = c]
mainFontSize = 18px
headerh1FontSize = 22px
headerh2FontSize = 18px
[global]
[globalVar = GP:style = d]
mainFontSize = 20px
headerh1FontSize = 24px
headerh2FontSize = 20px
[global]
---------------------------------

et voilà!

nun musste nur deine Links generieren:

<a href="http://domain/index.php?id=xx&style=a">Kleiner Schrift</a>
<a href="http://domain/index.php?id=xx&style=b">Mittlerer Schrift</a>
<a href="http://domain/index.php?id=xx&style=c">Grosser Schrift</a>
<a href="http://domain/index.php?id=xx&style=d">Sehr grosser Schrift</a>

ACHTUNG: Damit es funktionniert, musste natürlich keine feste size-Angabe in deinem CSS-Datei sonst hat diese ne höhere Priorität und das ganze geht nicht.

[kathrin-77]

Das sieht schon mal einleuchtend aus, danke schon mal. Aber gleich noch eine Frage. Ich habe meine Styles in einem externen css-file, da wäre es vielleicht sogar besser, wenn ich 3 oder 4, ja nachdem wieviele schriftgrößen ich haben will, Dateien einlese, wo die Schriftgrößen immer unterschiedlich definiert sind? Ich werde das mal testen und melde mich dann :-).

Danke noch mal!

[Armin]

moin moin,

einfach Schriftgröße em, dann kann der USer eine beliebige Schriftgröße per Browser wählen.

Armin

[kathrin-77]

Jepp, in em sind meine Schriftgrößen eh und das mit dem Browser ist mir auch bekannt. Aber ist halt auch nicht schlecht, wenn man das direkt auf der Webseite machen kann, da es leider anscheinend viele User nicht wissen, dass man das auch per Browser machen kann. Aber trotzdem danke für den Hinweis!

[flowyn33]

Finde die Idee vonn Droom ganz gut klappt auch soweit....

nun aber meine Problem:
habe einen maincontent und einen newscontent

die schrift im newscontent soll immer 2kleiner sein als im main.. auf Droom seine Art bekomme ich das nicht hin...
gibt es da einen weg?