In applications such as InDesign or QuarkXPress, letting letters flow along paths is a long established standard for lining up images and text. With CSS3 CSS Shapes allow you to create the same behaviour in the browser. To do so, you can define paths which the text is supposed to follow, as well as define cut-out images, which the text is meant to place itself along. Defining Circles, Ellipses and Polygons for an Outline If you want to create a text outline with simple paths, you first need an element which the text will follow. Here, a “<div>” container for which you need to define a width and height as well as the “float” attribute, that makes sure that the following text will go alongside the element, is what you want to define. <div></div> <p>Lorem ipsum ...</p> Until now, you have a classic rectangular element. Using the shape attribute “shape-outside”, you now define a path that creates the text outline instead of the rectangular shape. div { width: 300px; height: 300px; float: left; shape-outside: circle(50%); } In the example, the circle is defined with a radius of 50 percent. Additionally, you can also determine the center of the circle if […]* You might also be interested in the following articlesCSS3: InDesign-Like Text Formatting with Exclusions and RegionsText Effects With SVG: Patterns, Masks and Clipping PathsSVG: How to Work With Text and FontWeb App: Drawing SVG Online with Method DrawAdobe’s Snap.svg: Animations With HTML 5, Without FlashTridiv: Useful CSS3 Editor for 3D Objects
