An XHTML boilerplate for type lockups (title/graphic pages)
Because it’s fun!
You can achieve graphic pages with SVG and keep them (kinda) accessible e.g. text is selectable, searchable, etc. And more importantly, it even works in legacy RMSDK (ePub 2).
CSS-Tricks kickstarted my love for SVG, and this article explains what is a type lockup. We do such things in publishing, right?
If you don’t get <text> and <tspan>, check Multiline SVG Text at O’Reilly’s Safari.
Le shit you can do is up to you.
Titlepages…
Part‘s pages…
Blockquotes…
Poetry which formatting is so complex you don’t even want to take a look at it…
You name it.
But don’t forget HTML structure and semantics, asshole.
This is a super simple boilerplate, a grid helper can be enabled/disabled (CSS’ display). Just head to the playground and do some shit.
Don’t care if you’re using CSS or SVG attributes, just do it then do it better.
Oh and by the way, don’t ask me how you right-align text + tspan in SVG, I have no freaking clue—it’s probably worse than vertical centering in CSS circa 2008.
MIT. Nuff’ said.