demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Wrapping Text Against A Curve With CSS

css / layouts

Estimated reading time: 4 minutes

Every bitmap image on the web is rectangular, no matter what appears in the image, so text wraps around a floated image box in the same way every time. Using a few tricks and a bit of work in , there is a way to create the appearence that web page text is wrapped around a curved shape.

Step One: Find Your Image

Ideally the image used for this technique has the same background as your web page, or is transparent against it. For this exercise I am using this bust of Demosthenes, masked and edited in PhotoShop.

Step Two: Divide Your Image Up Into Horizontal Slices

The thinner each slice and the more slices you make, the better the result. Typically I place a series of PhotoShop guides across the image, separated by 10 ~ 50 pixels. (Turn on rulers (CMD+R) and the PhotoShop grid (CMD+’), set the grid separation in PhotoShop Preferences (CMD+K (sigh – Adobe, please change this to the standard Mac preference shortcut of CMD+, :: growl ::)) under Guides, Grid and Slices to the amount you wish, ensure that Snap is on (CMD+SHIFT+;) and draw out guides from the top ruler. (You might want to have more guides present where the image changes substantially in width.) Then choose the Slice tool (C on your keyboard pressed a few times, assuming you set up PhotoShop preferences in the right way) and click Slices From Guides on the option bar.

Step Three: Constrain The Edge of Each Slice

Turn off Grid and Snap. Using the Slice Select tool (C again on your keyboard), pull either the right or the left side of every slice to barely contain the image within the slice boundary. Note: the side you adjust must be the same for every slice. You might want to turn on the Hide Auto Slices option to clarify things.

Step Four: Export The Slices

Save the entire image as a PSD, as doing so preserves all the choices we have made so far and imposes a naming convention on our slices. Choose File / Save for Web & Devices in PhotoShop, and select all of the slices in one of the option windows using the Slice Select tool. (Note that PhotoShop’s interface doesn’t make it look like you can drag a marquee over all the slices to select them all, but you can). Set every slice to the same optimization settings.

When saving the slices, choose to export User Slices, Images only and Other… for settings. Use the following settings in the window that appears:

doc. name + hyphen + slice_no (01, 02, 03…), all other settings, with the exception of ext, to none. Make sure you save the images in a folder.

PhotoShop GuidesPhotoShop Slices
Image divided by guides and cut into slices within PhotoShop

Step Five: Bring The Images Into Your Web Page

Import the images into your web page. I prefer to do so using or Coda, then use Find/Replace in the application to change width and height from attributes to styles. You might want to follow the hints below:

  • If every image is the same height, you don’t need to provide that information as part of the inline style for each (use a declaration in a stylesheet instead).
  • Only the first image really requires an alt value. The alt attribute values can be left blank for the other images.
  • Apply the same class to all the image slices (alternatively, have another method of referencing only those slices, such as a descendant selector.)
  • There should be no spaces between the image tags.

Your final markup would typically look something like this (only the first two image slices are shown):

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit…
<img src="images/demosthenes-01.jpg" alt="" class="ragged-float"  style="width:326px;height:24px;"><img src="images/demosthenes-02.jpg" alt="" class="ragged-float" style="width:347px; height: 26px;" />

Step Six: Complete The CSS

The resulting web page will look terrible. To fix it, apply the following CSS (here I am assuming that you have edited the right edge of every slice in PhotoShop… i.e. you want the image on the left and wrapped text on the right).

img.ragged-float { float: left; clear: left; margin-right: 2em; }

How does this work? Remember that clear: left means “do not allow anything to float to the left of this element”. It forces each slice onto its own line, with the text happily wrapped to the right.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.