We place the heading in the middle of its parent (the body in this case) by using a grid layout: body

Since splitting text into multiple elements may not work nicely with screen readers, we’ve given the whole thing a role of image and an aria-label. HTML structureįlorin puts the text into a heading element and then duplicates this heading, using Splitting.js to replace the text content of the duplicated heading with spans, each containing one letter of the original text.Īlready having decided to do this without text duplication, using a library to split the text into characters and then put each into a span feels a bit like overkill, so we’re doing it all with an HTML preprocessor. So let’s take a look into where I ended up taking this. And finally, can’t we get rid of the JavaScript? Then there’s the fact that the length of the line going through the text is a magic number, which is not a very flexible approach. I thought this was a cool idea, but there were a few little things about the implementation I felt I could simplify and improve at the same time.įirst off, the original demo duplicates the headline text, which I knew could be easily avoided. Earlier this year, I came across this demo by Florin Pop, which makes a line go either over or under the letters of a single line heading.

Make a pass in a text