Unstyled

To Do List

textfit:v

To Do List

textfit:h

To Do List

textfit:both

To Do List

Textfit Demo - Live Version

© Christopher Hester 30th September 2011 · Tweaked
19th November 2011

This is my proposal for a new CSS property 'textfit'. It enlarges the font size and other properties to ensure text fits the edges inside a box as closely as possible. The property is defined thus:

textfit:v
Vertical; The text must stretch from the top to the bottom of the box. The browser may add line-spacing or increase bottom margins in list items to achieve this.
textfit:h
Horizontal; The text must stretch from the left to the right sides of the box. The browser may add letter-spacing to achieve this.
textfit:both
Both Sides; The text must stretch from the left to the right sides of the box and also from the top to the bottom. In other words it must fit fully inside the box. The browser may add letter-spacing, line-spacing or increase bottom margins in list items to achieve this.

The live examples on this page show simulations of textfit in action, using the font Arial on Windows XP. Since you may be viewing this in a different browser, operating system, or font, it is unlikely to look exactly the same. Please view the screenshot version of this demo to see how it should look.

Comments

Send any comments to "www.designdetector.com" (replace the 1st dot with "@") and I'll publish any suitable ones here.