Schriftgrößen mit CSS und TYPO3 wählen

  • kitsunet kitsunet
    Flash Gordon
    0 x
    2524 Beiträge
    26 Hilfreiche Beiträge
    30. 11. 2006, 11:30

    Hallo,

    mal ein kleines Tutorial zum Thema Schriftgrößenauswahl seitenübergreifend mit TYPO3.

    Zuerst muss ich dazu einen kleinen Exkurs in CSS und relative Schriftgrößen machen. Falls Ihr eure Schriftgröße bereits mit em einstellt könnt ihr ein Stück überspringen. Allen anderen rate ich zusätzlich zu diesem Thema zu googlen, weil das ein HowTo für sich wäre.
    Um die Schriftgrößen über den Browser steuerbar zu machen gibt man die Schriftgrößen in seinem CSS am besten mit der relativen Einheit em an. Aber wie groß ist 1em? Nun, ganz sicher kann man es nicht vorhersagen, aber bei den meisten Browsern ist die Standardschriftgröße 16 Pixel, damit ist 1em auch 16Pixel. Will ich nun z.B. 8 Pixel müsste ich 0.5em nehmen (es wird also die Standardschriftgröße mit meiner em-Angabe multipliziert).
    Da mir 16Pixel meist zu groß ist, und ich nicht ständig die Schriftgröße angeben will, setze ich die Standardgröße meist niedriger an. Das kann ich machen, indem ich in meinem CSS für den body-Tag (dessen einstellungen an alles vererbt werden) Die Schriftgröße verstelle. Ich mache es mit Prozent, aber man kann da auch direkt em nehmen, wenn man will.
    Das sieht dann in meiner CSS Datei z.B. so aus:

    body{
    font-size: 62.5%;

    }

    Das ergibt eine Standardschriftgröße von 10Pixel, so dass jetzt 1em = 10Pixel sind.
    Das dazu, alles weitere bitte ergooglen.

    Um jetzt verschiedene Größen anzubieten, muss ich nur noch diese Angabe ändern, weil ja alle anderen Schriftgrößen auf die Standardschrift bezogen werden. D.h.
    body{
    font-size: 80%;
    }
    ergibt im ganzen Dokument eine größere Schrift. Nun könnte man das über Javascript machen, sogar Stufenlos. Das funktioniert aber natürlich nur, wenn Javascript eingeschaltet ist und wird in der Regel wenn man die Seite wechselt wieder zurückgesetzt.
    Das kann man umgehen indem man das über TYPO3 mit einer GET-Variablen löst.

    Dazu müssen wir erstmal die GET-Variable einrichten:

    config.linkVars = Fsize,L # Falls ihr keine mehrsprachige Seite habt, könnt Ihr das L weglassen. Eure Variable heißt jetzt Fsize (könnt ihr auch anders machen)

    Jetzt brauchen wir ein Menü um zwischen den Größen umzuschalten. Das könnte man sicher eleganter Lösen, ich poste jetzt mal ein Beispiel mit drei verschiedenen Schriftgrößen:

    [TS]temp.fsizemenu = COA
    temp.fsizemenu.wrap = <ul class="langmenu">|</ul>
    temp.fsizemenu.40 = HTML
    temp.fsizemenu.40.value = A
    temp.fsizemenu.40.value.wrap = <li class="langm0">|</li>
    temp.fsizemenu.40.value.typolink.parameter.data = page:uid
    temp.fsizemenu.40.value.typolink.additionalParams = &Fsize=0
    temp.fsizemenu.50 < temp.fsizemenu.40
    temp.fsizemenu.50.value = A+
    temp.fsizemenu.50.value.wrap = <li class="langm2">|</li>
    temp.fsizemenu.50.value.typolink.additionalParams = &Fsize=1
    temp.fsizemenu.60 < temp.fsizemenu.40
    temp.fsizemenu.60.value = A++
    temp.fsizemenu.60.value.wrap = <li class="langm3">|</li>
    temp.fsizemenu.60.value.typolink.additionalParams = &Fsize=2
    [/TS]

    Der Code ist ja nicht ganz so schwer, es werden drei Links erzeugt auf die gerade aktive Seite und an jeden wird einer der drei Paramter drangehangen.

    So jetzt können wir die Schriftgröße wählen, aber es passiert noch nichts. Wir müssen natürlich die GET-Variable in unserem Typoscript abfragen per Condition. Jetzt brauchen wir aber auch drei CSS Dateien, mit den verschiedenen Werten für die font-size. Ich mache das so, dass ich meine Styles ganz normal schreibe, dann aber die Größenangabe für das body-Tag alleine in drei Dateien reinschreibe mit jeweils unterschiedlichen Werten. Die heißen dann size0.css, size1.css und size2.css

    Dann lade ich eine davon je nach Condition als erste und meine restlichen Styles danach, also etwa so:

    [TS]

    [globalVar = GP:Fsize<1]
    page.includeCSS.file1 = css/size0.css
    page.includeCSS.file1.title = Font Size Step 1
    page.includeCSS.file1.import = 1
    [END]

    [globalVar = GP:Fsize=1]
    page.includeCSS.file1 = css/size1.css
    page.includeCSS.file1.title = Font Size Step 2
    page.includeCSS.file1.import = 1
    [END]

    [globalVar = GP:Fsize=2]
    page.includeCSS.file1 = css/size2.css
    page.includeCSS.file1.title = Font Size Step 3
    page.includeCSS.file1.import = 1
    [END]

    page.includeCSS.file2 = css/basic_styles.css
    page.includeCSS.file2.title = Styles für die Bildschirmausgabe
    page.includeCSS.file2.import = 1
    page.includeCSS.file3 = css/additional.css
    page.includeCSS.file3.title = Styles für die Bildschirmausgabe
    page.includeCSS.file3.import = 1

    [/TS]

    Fertig, damit haben wir eine Schriftgrößenauswahl, die über die ganze Seite hinweg mitgenommen wird. Da es eine normale GET-Variable ist, so wie der Sprachparameter auch, kann man das natürlich auch in RealURL einbinden.

    Ich bin jetzt erstmal in Urlaub und kann auf Fragen dazu nicht antworten, würde mich aber trotzdem über Hinweise, Anmerkungen und auch Fragen freuen.

    Viele Grüße

    Christian

    config.baseURL = http://www.kitsunet.com/
    TYPO3 Flow und Neos Community Contact


  • gongo gongo
    R2-D2
    0 x
    86 Beiträge
    0 Hilfreiche Beiträge
    06. 02. 2007, 00:22

    eine Anleitung wie man das Schriftvergrößern mit RealURL nutzt wäre toll

  • Arnie2001 Arnie2001
    Jedi-Meister
    0 x
    314 Beiträge
    0 Hilfreiche Beiträge
    11. 02. 2007, 18:47

    [quote="Kitsunet"]
    nimm mal überall aus den additionalParams die tx_ttnews raus.

    Also anstatt:

    temp.fsizemenu.40.value.typolink.additionalParams = &Fsize=0&no_cache=1&tx_ttnews[tt_news]

    dann:

    #
    temp.fsizemenu.40.value.typolink.additionalParams = &Fsize=0

    Grüße

    Christian
    [/quote]

    Habe ich auch schon ausprobiert, geht leider nicht. Es wird immer "keine News id übergeben" angezeigt.

    Hat jemand ne Lösung?

    Mann muss nicht alles wissen, man sollte nur in Erfahrung bringen, wo es zu finden ist.

  • Arnie2001 Arnie2001
    Jedi-Meister
    0 x
    314 Beiträge
    0 Hilfreiche Beiträge
    06. 03. 2007, 16:58

    Hallo Leute, im Rahmen der Entwicklung von http://www.edesheim.de hat sich mein Problem erledigt.

    Hier könnt Ihr das Ganze mit tt_news und anderen Extension sehen:

    http://www.edesheim.de

    Da ich es nicht abschätzen kann, ob die Seite wirklich barrierefrei ist, wäre ein Rückläufer nicht schlecht!!!!

    Danke an Alle!

    Gruß Arnie!

    Mann muss nicht alles wissen, man sollte nur in Erfahrung bringen, wo es zu finden ist.

  • leuny leuny
    Jar Jar Binks
    0 x
    1 Beiträge
    0 Hilfreiche Beiträge
    20. 03. 2007, 17:17

    Hi,

    das script funktioniert. ich möchte es aber jetzt gerne so modifizieren, dass ich zwei symbole verwende um die schrift zu verkleinern oder zu vergrößern (also nicht mehr alle stufen anzeigen).

    bin typo3 dummy. in php könnte man eine variable definieren, die wenn man auf den schriftgrößer-button klickt um 1 erhöht wird und dann die entsprechende css-datei ausgewählt wird. beim schriftkleiner-buttom entsprechend umgekehrt.

    könnt ihr mir da helfen?

    mfg
    Leuny

  • Arnie2001 Arnie2001
    Jedi-Meister
    0 x
    314 Beiträge
    0 Hilfreiche Beiträge
    27. 04. 2007, 12:30

    Hier mal das Ganze mit funktionierenden Links für RealURL und tt_news und Konsorten:

    temp.fsizemenu = COA
    temp.fsizemenu {
    wrap = <ul>|</ul>
    40 = HTML
    40 {
    value = Normal A
    value.wrap = <li class="sizepunkt">|</li>
    value.typolink.parameter.data = page:uid
    value.typolink.additionalParams = &Fsize=0
    value.typolink.addQueryString = 1
    value.typolink.addQueryString.method = GET
    }
    50 < temp.fsizemenu.40
    50 {
    value = Mittel A+
    value.wrap = <li class="sizepunkt">|</li>
    value.typolink.additionalParams = &Fsize=1
    value.typolink.addQueryString = 1
    value.typolink.addQueryString.method = GET
    }
    60 < temp.fsizemenu.40
    60 {
    value = Groß A++
    value.wrap = <li class="sizepunkt">|</li>
    value.typolink.additionalParams = &Fsize=2
    value.typolink.addQueryString = 1
    value.typolink.addQueryString.method = GET
    }
    70 < temp.fsizemenu.40
    70 {
    value = Handy- / Textversion
    value.wrap = <li class="sizepunkt">|</li>
    value.typolink.additionalParams = &Fsize=3
    value.typolink.addQueryString = 1
    value.typolink.addQueryString.method = GET
    }

    }

    Die Ergänzung der realurlconf.php
    array(
    'GETvar' => 'Fsize',
    'valueMap' => array(
    'n' => '0',
    'g' => '1',
    'gg'=> '2',
    'nt'=> '3',

    ),
    'noMatch' => 'bypass',
    ),

    Mann muss nicht alles wissen, man sollte nur in Erfahrung bringen, wo es zu finden ist.

  • kitsunet kitsunet
    Flash Gordon
    0 x
    2524 Beiträge
    26 Hilfreiche Beiträge
    27. 04. 2007, 12:59

    Danke das du das "rund" gemacht hast! Bin hier gerade mit so vielen anderen Sachen beschäftigt, dass ich nicht dazu gekommen bin hier mal ein Update zu posten.

    Grüße

    Christian

    config.baseURL = http://www.kitsunet.com/
    TYPO3 Flow und Neos Community Contact

  • jens jens
    R2-D2
    0 x
    92 Beiträge
    0 Hilfreiche Beiträge
    12. 07. 2007, 16:45

    Hallo zusammen!

    Erst einmal Danke für die Anleitung.
    Anhand des Beispiels von Kitsunet habe ich versucht den Font-Resizer auf meiner Seite zu integrieren. Leider nicht erfolgreich. Ich bin jetzt schon seit Stunden am Überlegen wo ich den Fehler mache...

    [TS]###Font size
    config.linkVars = Fsize
    config.uniqueLinkVars = 1

    [globalVar = GP:Fsize<1]
    seite.includeCSS.file1 = fileadmin/size0.css
    seite.includeCSS.file1.title = Font Size Step 1
    seite.includeCSS.file1.import = 1
    [END]

    [globalVar = GP:Fsize=1]
    seite.includeCSS.file1 = fileadmin/size1.css
    seite.includeCSS.file1.title = Font Size Step 2
    seite.includeCSS.file1.import = 1
    [END]

    [globalVar = GP:Fsize=2]
    seite.includeCSS.file1 = fileadmin/size2.css
    seite.includeCSS.file1.title = Font Size Step 3
    seite.includeCSS.file1.import = 1
    [END]

    ###Hier wird die MAIN-CSS Datei eingebunden
    page.includeCSS.file2 = fileadmin/style-main.css
    page.includeCSS.file2.title = Styles für die Bildschirmausgabe
    page.includeCSS.file2.import = 1

    [...]

    ###Marker Font Size
    marks.SIZE0 = COA
    marks.SIZE0.40 = HTML
    marks.SIZE0.40.value = A
    marks.SIZE0.40.value.typolink.parameter.data = page:uid
    marks.SIZE0.40.value.typolink.additionalParams = &Fsize=0

    marks.SIZE1 = COA
    marks.SIZE1.40 = HTML
    marks.SIZE1.40.value = A+
    marks.SIZE1.40.value.typolink.parameter.data = page:uid
    marks.SIZE1.40.value.typolink.additionalParams = &Fsize=1

    marks.SIZE2 = COA
    marks.SIZE2.40 = HTML
    marks.SIZE2.40.value = A++
    marks.SIZE2.40.value.typolink.parameter.data = page:uid
    marks.SIZE2.40.value.typolink.additionalParams = &Fsize=2
    [/TS]

    Die Marker werden wie geplant ersetzt und auch beim Klick auf A++ wird diese Endung (.html?&Fsize=2) angehängt. Nur leider ändert sich am Schriftbild nichts.
    Im style-main.css befinden sich sämtliche Styles. In den Styles size0.css, size1.css und size2.css nur der Body-Tag mit

    body
    {
    font-size:120%;
    }

    Jeweils eine andere Größe.

    Sieht jemand den Fehler?

    BEST!

  • kitsunet kitsunet
    Flash Gordon
    0 x
    2524 Beiträge
    26 Hilfreiche Beiträge
    12. 07. 2007, 16:57

    Also du benutzt wahrscheinlich simulateStaticDocuments, oder?

    Du hast das hier geschrieben:

    ..nd auch beim Klick auf A++ wird diese Endung (.html?&Fsize=2) angehängt.

    .html?&Fsize=2 kann aber nicht funktionieren... Es muss in diesem Fall:

    .html?Fsize=2 rauskommen... Also versuch mal bei diesen Zeilen hier:

    marks.SIZE0.40.value.typolink.additionalParams = &Fsize=0 jeweils das & rauszunehmen...

    Viele Grüße
    Christian

    config.baseURL = http://www.kitsunet.com/
    TYPO3 Flow und Neos Community Contact

  • jens jens
    R2-D2
    0 x
    92 Beiträge
    0 Hilfreiche Beiträge
    12. 07. 2007, 17:32

    Hallo Kitsunet!

    Danke für deine Anleitung und die schnelle Antwort.

    Ja, ich benutze simulateStaticDocuments. "&" habe ich jetzt mal rausgenommen.
    Leider ist das Problem damit nicht behoben. Jetzt wird gar nichts mehr angehängt.
    Wenn ich die Endung manuell in der Adresszeile des Browsers anfüge geschieht auch nichts.
    Hast du vielleicht noch eine Idee?

  • kitsunet kitsunet
    Flash Gordon
    0 x
    2524 Beiträge
    26 Hilfreiche Beiträge
    12. 07. 2007, 18:20

    Eine URL wäre nicht schlecht um das aus erster Hand zu sehen. Kannst du mir auch per PM schicken...

    config.baseURL = http://www.kitsunet.com/
    TYPO3 Flow und Neos Community Contact