Pullquotes with CSS and Unobtrusive Script

Pullquotes catch the eye and allow a screen of text to be scanned (a typical habit of online reading) while allowing the author to insure proper emphasis. Pullquotes done with CSS alone have a weakness: the text is pulled out of flow. Pullquotes should leave the pulled text in place.

The typical pullquote implementation can be rejected for a production Web environment because of complications like having to repeat the same text in two places, or because brittle script is a maintainance headache. In addition, the printed version of the pullquote may not meet acceptable professional standards.

This pullquote technique is easy and unobtrusive. The page author has only to span text to be pullquoted with a particular class — the short script does the rest.

Internet Explorer, Firefox, and Opera print the pullquoted pages well. Tested in Windows IE 6, Firefox 1.06 and Opera 8. Degrades gracefully if CSS and/or script are turned off. Degrades in non-disgusting ways in IE5.0 and IE5.5.

Styles and the short script are embedded for your convenience.

Verbiage to lengthen page: pullquote technique with CSS and script, pullquotes and callouts with CSS are a usability enhancement, improve readability with pullquotes, pullquotes and callouts with CSS are a usability enhancement. Scanning text with pullquote enhancement.

« Examples page