Restrict Line Length of Text Blocks

[Toheeb]

Goal

Limit eye/head twisting when users read text lines.

Since text blocks can grow as much as the device's width that views it. And this will eventually become uncomfortable for users.

Elements

• Block Text Elements that contains only phrasal elements: p, h1-h6, pre
• Block Text Elements that contains flow contents: address, blockquote, caption, dd, legend, summary, dt

Considerations

• Restrict text block's width to a maximum of 2 - 3 alphabetical lengths
• Text content such as meter, textarea can overflow the page. Hence, handle it in: #2

Customizable

• measure. Defaults to 3 alphabetical lengths.

Opinion

Multimedia like images and videos can grow to fill available width. But restricting them to text length may not be a better choice.

1. Textual elements in this media may have been optimized for reading length. Restricting them will make those texts appear lesser
2. Designs may require images within text content to bleed out of the content.

It's best to leave the size of multimedia to the designer.

If Devs need the multimedia to take the width of the text, then wrap each with a paragraph element p