Screenshot of textfit live simulation

Textfit Demo

© 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 screenshot on this page shows simulations of textfit in action, using the font Arial on Windows XP. Since you may have a different browser, operating system, or font, it is unlikely to look exactly the same. Please view the live demo to see how it looks on your system.

Comments

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