Asking to visually break a sentence in multiple lines on a strategic word is a common request from the design team, especially on landing pages. Eg “Hello /n human being”. However, that might affect a Screen Reader pitch flow in unexpected ways...
For example, let's imagine we have the title "Hello human being" and we are asked to break it after the "hello" word.
Hello human being
Here are some common (poor) approaches I've seen being used around:
<br />between each line: Don't do this! Despite being very common, because of its ease of use, it's semantically incorrect!
<br>is meant to be used when the division of lines is significant. E.g. stress addresses, poems, etc...
display:blockbetween each line. This creates the same effect as
<br />but without any semantics, which is good.
Using flexbox: Wrapping each line into an
<span>and adding flexbox to the sentence itself with
flex-direction: columndoes the trick too.
However, all of these three approaches have the same unexpected result in the VoiceOver screen reader pitch flow:
- Expected pitch: "Hello human being"
- Actual pitch: "Hello" [pause] human being."
Another common practice is to set
max-width, however, that solution is highly dependent on the text content. In this scenario that approach wouldn't work.
Let's keep looking for a bulletproof solution instead.
Among other experiments, using
write-space: pre-line; seem the best solution! We can create a literal newline or use
control character to break the text.
<h2 style="white-space:pre-line;">Hello human being</h2> <h2 style="white-space:pre-line;">Hello
This is just an example of how HTML semantics and CSS usage can affect the way text is read out loud in ways we might not expect.
Here's a Codepen where you can try out the approaches described and other solutions attempts: