Text Wrap

This is an example to support a discussion of how HTML and/or CSS could be expanded to directly support text wrap along non-rectangular edges.

Appealing effects are possible by wrapping text along the edges of images. This demonstrates the idea by creating DIV elements on the left and right side according to numeric formulas and using the CSS "float" and "clear" styles to create a text channel with curved sides.

Many magazines flow the text along non-rectangular edges; but I know of no feature that lets you easily achieve similar results using HTML, although the basics are there.

Such a tool is possible using JavaScript. This is not yet that tool; but it shows a possible method for making one. So the next time in, I want to make this so you can select a background image from any URL and then click along an edge; at which point the HTML and CSS will be written to make the prescribed text channel. It should be a generic document that just needs two polylines and a URL read from a ".js" file.

In the mean time, this file can easily be changed to follow semi-circles or diamonds or slanted sides. This example using a simple sine wave curve and a little imagination demonstrates how the effect can be achieved.

Any block element can be used to create the text channel; not just DIV.

Oops -- someone already did it.

• http://www.csstextwrap.com/#wrapper is an interactive flash(w) utility that lets you create polylines and then writes out the blocks for the channel.
• http://www.bigbaer.com/css_tutorials/css.image.text.wrap.tutorial.htm a very complete tutorial example using a background image that shows the potential of such a technique; plus an explanation of how the effect is achieved at the HTML/CSS level.
• http://www.theboxoffice.be/index.php?op=theboxoffice actually does the edge detection for you! Makes me want to see if I duplicate that in a self-contained file with a CANVAS element and JavaScript, CSS and HTML.

Portability Issues

Safari has issues with the animation; it does not seem to repaint unless you click in the document; When animating there are interesting differences between CPU loads (and performance rates) between Opera(40%); MSIE(84%); Chrome(100%); Safari(100% -- but does not redraw!); and Firefox(100%) -- I have not tested on anyone else so far. But the static text channels work on everyone; which is the most likely use (although replacing the border DIV elements with IMG or CANVAS elements certainly has interesting possibilities).

Example Document

In the mean time, here is an example document that wraps to the edges provided by many box elements (DIV). I added some animation to it just out of curiousity; wiggling text is a bit hard to read:

THE BILL OF RIGHTS

Amendment I

Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the government for a redress of grievances.

Amendment II

A well regulated militia, being necessary to the security of a free state, the right of the people to keep and bear arms, shall not be infringed.

Amendment III

No soldier shall, in time of peace be quartered in any house, without the consent of the owner, nor in time of war, but in a manner to be prescribed by law.

Amendment IV

The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches and seizures, shall not be violated, and no warrants shall issue, but upon probable cause, supported by oath or affirmation, and particularly describing the place to be searched, and the persons or things to be seized.

Amendment V

No person shall be held to answer for a capital, or otherwise infamous crime, unless on a presentment or indictment of a grand jury, except in cases arising in the land or naval forces, or in the militia, when in actual service in time of war or public danger; nor shall any person be subject for the same offense to be twice put in jeopardy of life or limb; nor shall be compelled in any criminal case to be a witness against himself, nor be deprived of life, liberty, or property, without due process of law; nor shall private property be taken for public use, without just compensation.

Amendment VI

In all criminal prosecutions, the accused shall enjoy the right to a speedy and public trial, by an impartial jury of the state and district wherein the crime shall have been committed, which district shall have been previously ascertained by law, and to be informed of the nature and cause of the accusation; to be confronted with the witnesses against him; to have compulsory process for obtaining witnesses in his favor, and to have the assistance of counsel for his defense.

Amendment VII

In suits at common law, where the value in controversy shall exceed twenty dollars, the right of trial by jury shall be preserved, and no fact tried by a jury, shall be otherwise reexamined in any court of the United States, than according to the rules of the common law.

Amendment VIII

Excessive bail shall not be required, nor excessive fines imposed, nor cruel and unusual punishments inflicted.

Amendment IX

The enumeration in the Constitution, of certain rights, shall not be construed to deny or disparage others retained by the people.

Amendment X

The powers not delegated to the United States by the Constitution, nor prohibited by it to the states, are reserved to the states respectively, or to the people.