T-Text: A CSS study

This is a simple demo of a layout idea I had. It's probably not practical for reading, but I think it's pretty. Inspired by my time working through the Mozilla Development Network's CSS resources recently.

A typical layout for text on screen would normally consider, among others:

• A width about 60 characters per line
• An obvious direction for the eye to travel (which this lacks)
• A font size suited to the display size and distance from the eye. This suffers a bit here; I've had to manually add a font-size increase for smaller devices and haven't tested it rigorously.
• Support for all likely viewing devices. I've only tested this on Firefox on Mac, Safari on an iOS phone, and (begrudgingly) Chrome on Mac. That's not really enough.
• Scaling up the text for large displays (eg 4K monitors). This has been considered.

• Support for browsers' Reader mode (eg in Firefox and Safari); this isn't satisfied by this layout, apparently because of the extra container <div>. Making sense of what Reader modes support is slightly maddening.

But dang it, I had fun making it.

Return to my site.

Sed ipsum dui, euismod vel tortor at, posuere sollicitudin nisl. In nisi ex, auctor a mattis id, finibus quis enim. Morbi molestie ornare mauris, bibendum vulputate sem semper a. Aliquam condimentum eros sed dui rutrum, non interdum dolor pharetra. Vivamus sapien diam, venenatis ac gravida ac, molestie eu est. Vestibulum placerat turpis neque, rhoncus placerat enim imperdiet a. Sed pharetra accumsan risus, sit amet fermentum ante luctus eget. Fusce rutrum semper ligula a fringilla. Suspendisse laoreet ac urna at tincidunt. Mauris sollicitudin accumsan neque, sed varius tortor iaculis quis. Fusce ac lacus a ante elementum tincidunt eu sed enim. Donec suscipit fermentum blandit. Curabitur quam orci, aliquam nec odio sit amet, dictum ultrices leo. Etiam sed faucibus eros. Proin ac mauris neque. Duis bibendum ultrices pretium.

In lorem turpis, accumsan eu bibendum vitae, pellentesque vel nisi. Donec vel turpis a tortor fermentum posuere. Aliquam consectetur arcu placerat leo pulvinar luctus. Vestibulum suscipit neque vitae libero venenatis scelerisque. Integer consectetur massa id mollis iaculis. Vestibulum luctus risus ut nisl vulputate, ac tempus mauris porttitor. Suspendisse vitae diam ut est accumsan rhoncus at ut eros. In a sem sit amet nisi blandit porta. Donec egestas, lectus in consectetur malesuada, orci purus rhoncus ex, sed maximus nisi lorem non erat. Nullam fringilla enim quis libero facilisis sollicitudin. Cras malesuada mollis libero eu scelerisque. Nunc ac velit blandit, vulputate ipsum vitae, mollis nunc.