Schnellnavigation:

Kategorien

« August 2010»
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

Kopieren Sie diesen Link in Ihren RSS-Reader

RSS 0.91Nachrichten
RSS 2.0Nachrichten

In eigener Sache

Peter Linzenkirchner, Lisardo EDV Beratung in Augsburg. Freelance und Partner für Design- und Webagenturen in Augsburg und München. Pixelgenaue Templates, valides HTML, barrierearm. TYPO3-Projekte, Extension-Programmierung und mehr ... 

31August2010

Grafische Header

Ziel ist die Verwendung von Grafiken in den normalen Headern der Inhaltselemente bzw. als Ersatz derselben. Dazu gibt es mehrere Möglichkeiten in unterschiedlichem Schwierigkeitsgrad, dabei mehr oder weniger barrierefrei.

Alle vorgestellten Lösungen sind nicht vollständig barrierefrei, da keine einzige beim normalen Browserzoom (also dem Textzoom und nicht dem Ganzseitenzoom) nicht skalieren. 

Headlines als Bilder ausgeben mit dem GIFBUILDER

Das ist sicher die einfachste Variante, die sich allerdings nur für einzeilige Headlines eignet. Bei mehrzeiligen Headlines (mit automatischem Umbruch) führt diese Technik zu abgeschnittenem Text, das kann aber mit einem Trick umgangen werden.

  1. Header1=IMAGE
  2. Header1 {
  3.   wrap= <h2>|</h2>
  4.   file=GIFBUILDER
  5.   file {
  6.   XY=[10.w]+5,26
  7.   transparentColor=#ffffff
  8.   backColor=#ffffff
  9.   10=TEXT
  10.   10.text.field=header
  11.   10.text.current=1
  12.   10.fontSize=18
  13.   10.offset=0,20
  14.   10.fontFile=fileadmin/fonts/irgendeineSchrift.ttf
  15.   10.fontColor=#587BA9
  16.   10.niceText=1
  17.   }
  18. }
  19.  
  20. lib.stdheader.10.1<Header1

Quelle: Header aus Font rendern

Vorteile: einfach und simpel einzubauen. Wenn im Browser die Bilder ausgeschaltet sind, wird die Headline in der Standardschrift gezeigt (aus dem Alt-Attribut). 
Nachteile: nur bedingt barrierefrei (Alt-Text wird vorgelesen, der Textfluss ist aber im Screenreader gestört – ich würde das Title-Attribut rauslassen, sonst wird der Text zweimal vorgelesen), ausserdem für SEO nicht ganz optimal. Nur bei einzeiligen Headlines möglich.

In den Kommentaren steht ein Beitrag von fips, mit dem jedes Wort der Headline eigens gerendert werden kann. So erfolgt der Zeilenumbruch wieder automatisch, da die Bilder einfach umbrechen (ungetestet):

  1. tempHeader.10.file.5=Schatten
  2. tempHeader=COA
  3.   tempHeader {
  4.   10=IMAGE
  5.   10 {
  6.     alttext.field=header
  7.     file=GIFBUILDER
  8.     file {
  9.       XY=[10.w],26
  10.       backColor=#ffffff
  11.       transparentColor=#ffffff
  12.       10=TEXT
  13.       10 {
  14.         text.field=header
  15.         text.current=1
  16.         text.listNum.splitChar=32
  17.         text.listNum=0
  18.         text.required=1
  19.         text.noTrimWrap=|| |
  20.         offset=0,20
  21.         align=left
  22.         #fontSize = {$header_fontsize}
  23.         fontSize=20
  24.         #fontFile = {$header_font}
  25.         fontFile=fileadmin/fonts/titania-regular.ttf
  26.         #fontColor = {$header_color}
  27.         fontColor=#0e6400
  28.         niceText=1
  29.         doNotStripHTML=1
  30.         .setCurrent.htmlSpecialChars=0.htmlSpecialChars= -1
  31.       }
  32.       5<.10
  33.       5 {
  34.         fontColor=#c1c1c1
  35.         offset=3,18
  36.       }
  37.     }
  38.     if.isTrue.field=header
  39.     if.isTrue.listNum=0
  40.     if.isTrue.listNum.splitChar=32
  41.   }
  42.   20<.10
  43.   20.file.10.text.listNum=1
  44.   20.file.5.text.listNum=1
  45.   20.if.isTrue.listNum=1
  46.   20.alttext.field>
  47.   30<.20
  48.   30.file.10.text.listNum=2
  49.   30.file.5.text.listNum=2
  50.   30.if.isTrue.listNum=2
  51.   40<.20
  52.   40.file.10.text.listNum=2
  53.   40.file.5.text.listNum=2
  54.   40.if.isTrue.listNum=2
  55.   #...usw - so viele Wörter, die man max. benötigt
  56. }

Beide Methoden haben das Problem, dass Links um die Headlines nicht funktionieren; der entsprechende TypoScript-Code muss noch ergänzt werden. Siehe im Beispiel weiter unten zu den mehrzeiligen Headlines.

Einzeilige Headlines mit einer Image-Replacement Methode

Hier wird das Bild als Hintergrund des h2-Tags geladen und der eigentliche Text der Headline mit CSS versteckt. Diese Methode nennt sich »Image Replacement«. Bei mehrzeiligen Headlines (mit automatischem Umbruch) führt diese Technik ebenfalls wieder zu abgeschnittenem Text.

  1. tempHeader=COA
  2.  
  3. tempHeader {
  4.   10=IMG_RESOURCE
  5.   10.stdWrap.wrap= <h2class="imageheader"style="background-image: url('|')">
  6.   10.file=GIFBUILDER
  7.   10.file {
  8.     10=TEXT
  9.     10 {
  10.         text= >
  11.         fontSize=18
  12.         offset=5,18
  13.         fontColor=#26383D
  14.         niceText=1
  15.     }
  16.     20=TEXT
  17.     20 {
  18.         text.current=1
  19.         fontSize=18
  20.         fontFile=fileadmin/fonts/Chalkboard.ttf
  21.         offset=23,20
  22.         fontColor=#CFA824
  23.         niceText=1
  24.     }
  25.  
  26.     XY=[10.w]+[20.w]+23,26
  27.     transparentColor=#ffffff
  28.     backColor=#ffffff
  29.   }
  30.  
  31.   20=TEXT
  32.   20.current=1
  33.   20.wrap= |</h2>
  34. }
  35.  
  36. lib.stdheader.10.5<tempHeader

Damit erhält man folgenden Output:

  1. <h2class="imageheader"style="background-image: url('typo3temp/GB/xxx.gif')>
  2.   Meine Headline
  3. </h2>

Damit die Sache auch ordentlich aussieht ist noch ein CSS-erforderlich:

  1. h2.imageheader {
  2.   overflow:hidden;
  3.   height:26px;
  4.   text-indent:999em;
  5.   white-space:nowrap;
  6.   background-repeat:no-repeat;
  7. }
  8. h2.imageheader a {display:block;}

Quelle: Grafische Überschriften mit TYPO3

Vorteile: Semantisch korrekt und weitgehend barrierefrei (bis auf die Tatsache, dass auch hier die Grafik nicht skaliert bei einem Textzoom im Browser). 
Nachteile: wie erwähnt nur bei einzeiligen Headlines möglich. Wird im Browser die Darstellung von Bildern deaktiviert bei gleichzeitig aktivem CSS, so ist keine Headline zu sehen, da kein Alt-Text zur Verfügung steht. Damit die Links auf den Headlines funktionieren, müssen sie zum Blockelement gemacht werden.

Auch in diesem Beispiel sind Links um die Headlines nicht berücksichtigt; das entsprechende TypoScript muss noch ergänzt werden, siehe unten.

Mehrzeilige Headlines mit Image-Replacement

Dazu ist es zuerst erforderlich, die extTables.php von Typo3 zu patchen:

  1. $TCA['tt_content']['columns']['header']['config']['type']='text';

Damit wird aus dem einzeiligen Text-Input ein Textfeld. Die Zeilenschaltungen werden dann mit Return einfach im Feld gesetzt.

  1. lib.stdheader {
  2.         stdWrap.dataWrap=
  3.         10 {
  4.                 1>
  5.         }
  6. }
  7.  
  8. lib.stdheader.10 {
  9.         1=IMG_RESOURCE
  10.         1 {
  11.                 file=GIFBUILDER
  12.                 file {
  13.                         XY=[10.w]+10,[10.h]+6
  14.                         backColor=#ffffff
  15.                         10=TEXT
  16.                         10 {
  17.                                 text.field=header
  18.                                 fontSize=32
  19.                                 fontFile=fileadmin/fonts/arial.ttf
  20.                                 fontColor=##454B45
  21.                                 offset=0,30
  22.                         }
  23.                 }
  24.                 stdWrap.innerWrap(
  25. <h1 style="background: url({$baseUrl}|) no-repeat;">
  26. )
  27.              
  28.                 stdWrap.outerWrap.cObject=COA
  29.                 stdWrap.outerWrap.cObject {
  30.                         5=LOAD_REGISTER
  31.                         5.headerlines.cObject=TEXT
  32.                         5.headerlines.cObject.data=field:header
  33.                         5.headerlines.cObject.br=1
  34.                         5.headerlines.cObject.htmlSpecialChars=1
  35.                         5.headerlines.cObject.innerWrap= <span><span>|</span></span>
  36.                         5.headerlines.cObject.innerWrap.typolink.parameter.field=header_link
  37.                         10=TEXT
  38.                         10.value= |
  39.                         10.dataWrap(
  40. |{register:headerlines}
  41.                         )
  42.                 }
  43.                 stdWrap.outerWrap.append=TEXT
  44.                 stdWrap.outerWrap.append.value= </h1>        
  45.         }
  46. }

Weiter ist folgender CSS-Code erforderlich:

  1. h1 {
  2.     position:relative;
  3.     display:block;
  4.     width:280px;
  5.     margin-bottom:13px;
  6. }
  7.  
  8. h1 span {
  9.     display:block;
  10.     margin-top:1px;
  11.     width:1px;
  12.     font-size:20px;
  13.     line-height:22px;
  14.     overflow:hidden;
  15. }
  16.  
  17. h1 span span {
  18.     display:block;
  19.     width:1000px;
  20. }

Quelle: jenses im Mittwaldforum: (etwas weiter unten im Thread » [HowTo] grafische Content Überschrift«)

Das Image-Replacement erfolgt hier über den span-Tag. Eventuell wäre es sinnvoll, diese Methode mit dem Image-Replacement des obigen Beispiels zu ergänzen, da dieses ohne zusätzliches Markup auskommt.

Vorteile: weitgehend barrierefrei, optimiert für Suchmaschinen, mehrzeilige Headlines möglich. 
Nachteile: Typo3-Core-Code muss gepatcht werden; bei ausgeschalteten Bildern erscheint kein Alttext.

Weiterführende Links:

Weiterführende Literatur:

Alexander Ebner & Patrick Schuster: Typo3 und TypoScript Kochbuch.

  • Corporate Identity bei Überschriften, S. 457
  • Grafiken mit mehrzeiligem Text, S. 458
  • Dynamisches Logo im Web 2.0 Stil, S. 451 
Kategorien: Typoscript  
Links:
Trackback-Link  (Bitte kopieren)
 
| Mehr
  •  
  • Kommentare
  •  

Mein Kommentar

Benachrichtige mich, wenn jemand einen Kommentar zu dieser Nachricht schreibt.

Besuchen Sie mich auf Google+