Unstyled
To Do List
- Check Orbital Facebook videos
- Update poetry book
- Do articles for writing course
- Go through old photos
- Sell more stuff on eBay
- Do new browser concept demo
- Register new domain name
- Scan artwork on desk
- Type up old stories
textfit:v
To Do List
- Check Orbital Facebook videos
- Update poetry book
- Do articles for writing course
- Go through old photos
- Sell more stuff on eBay
- Do new browser concept demo
- Register new domain name
- Scan artwork on desk
- Type up old stories
textfit:h
To Do List
- Check Orbital Facebook videos
- Update poetry book
- Do articles for writing course
- Go through old photos
- Sell more stuff on eBay
- Do new browser concept demo
- Register new domain name
- Scan artwork on desk
- Type up old stories
textfit:both
To Do List
- Check Orbital Facebook videos
- Update poetry book
- Do articles for writing course
- Go through old photos
- Sell more stuff on eBay
- Do new browser concept demo
- Register new domain name
- Scan artwork on desk
- Type up old stories
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.
Send any comments to "www.designdetector.com" (replace the 1st dot with "@") and I'll publish any suitable ones here.