Graphical headers can be just that little extra thing your design needs. Luckily TYPO3 can manage this pretty well using the GIFBUILDER. But what if you have a long headertext? What if you need the headertext to display over more than just one line?

GIFBUILDER can’t actually read your headertext so there’s no way it can determine when to use multiple lines by itself (at least, not without making weird cuts in the middle of your words). Therefore, we need to tell GIFBUILDER when to break the line.

Since we only use one H1 tag per seo, this snippet modifies the second header layout.

# Start overriding the second header layout.
lib.stdheader.10.2 >
lib.stdheader.10.2 = COA
lib.stdheader.10.2 {
  # Wrap the whole header
  wrap = <div>|</div>
  10 = IMAGE
  10 {
     # Wrap the first line
     wrap = <div>|</div>
     file = GIFBUILDER
     file {
        XY = [10.w] + 4, [10.h] + 8
        backColor = #FFFFFF
        10 = TEXT
        10 {
           text.field = header
           # Set the fontfile and font-properties.
           fontFile = fileadmin/fonts/customfont.ttf
           fontSize = 22
           fontColor = #000000
           offset = 0,18
           # Select the first line of our sentence.
           text.listNum = 0
           # Here we determine the break, in this case a pipe (|).
           text.listNum.splitChar = |
        }
     }
  }
  # Check if the second line is there...
  20 = COA
  20.if {
     value.field = header
     isTrue.cObject = TEXT
     isTrue.cObject.field = header
     # The second line starts after the pipe
     isTrue.cObject.listNum.splitChar = |
     # Now use the second line of our sentence
     isTrue.cObject.listNum = 1
  }
  # If the second line is there, use the same markup
  20.10 < .10
  20.10 {
     file {
        10.text.listNum = 1
        10.text.listNum.splitChar = |
     }
  }
}

Just to be clear: A header with two lines would now be like:
This is a very long header which will | be displayed over two lines.

Result:

The pipe will be the place where you split the header. Ofcourse, all the font properties used in the first line are also available in the second line, so play all you like with different fonts and markup on every other line.