Tools to draw polygons exist, but I prefer to carve out and tune those shapes where they belong – inside my
regular layout, with all other relevant and irrelevant styles applied. Less chance for line-up failures that way.
First I form the actual shapes, surrounded by dummy content in the form of a dot raster.
Images go here…
Partial screenshot provided for those who cannot see the live line-up…
The image used is found elsewhere, where it has been retrofitted with the
shapes shown here.
Polygon styles are found in the page head.
The font-size for the dot raster is 16px and the line-height is only 0.3vw,
and text-justify is used. This tight raster provides clear content-edges next to the created shapes.
The floating picture is pulled over the edge of the container by its right margin in %,
causing it to reposition itself horizontally to make the most out of available window width. It also gets resized by
max-width to fit in on narrow windows.
The polygon shape is declared in %, and follows the image itself during resizing. Applied margins can cause
problems with line-up variations in responsive layouts, and the same goes for relative offsets.
I have made slight modification to shape-margin to make line-up adjust to changes in overall styling when
the one-column design kicks in on very narrow windows / screens.
Next step is to test with regularly styled text on the page.
Images go here…
Screenshot of left float with text line-up…
Polygon shapes are styled pretty tight on the image, but as line-height controls how paragraph lines butt up
against the more horizontal polygon shapes, the text will naturally keep its distance along the slope declared
for upper part of this image.
Proper testing with text in the flow, makes it a lot clearer what can work and what won't work, than
a raster or polygon-lines do.
For instance: the dummy-text above is left-aligned, which makes line-up against the polygon shapes on
right-floating image more “accidental” and jagged – same as for real text in a page. Justifying the text
does not always help much on the overall line-up.
early days for shapes
Both standards and support for shapes are at an early stage, but shapes can nevertheless
provide some welcome progressive enhancement in supporting browsers.
Testing new features at an early stage, is of course important. I have already discovered that current
implementations of shapes are restricting, and in some cases break, normal content-flow in
unexpected ways. These apparent bugs1 are worth some
As usual I have tailored some simple tools to help in manual shaping and testing of shapes
and whatever other features I might like to include on web sites. Armed with these tools I can easily sort out
what works and what doesn't work where, and separate browser bugs from my very own designer bugs2 in the process.
Why I prefer this direct approach over existing tools and solutions to the creation of shapes,
has to do with the simple fact that I have been “carving out” web sites for a long time4, and have usually found the simplest and most “locally invented” solutions to work best and
cover most cases in the long run.
Tiptoe'ing around potentially problematic areas in web design, has never been my style, and I see no reason to
change my approach now. Browser vendors will keep on talking and writing about how fast and powerful their products are
in certain areas, and they are more than welcome to do so.
I am more into revealing the same browsers' weaknesses by challenging them in every area that is of any interest
to me, with the goal of making browsers work, for me. All in the name of progress…
16.sep.2016 - minor revision.
19.jan.2021 - updated with 'support' link in sidenotes. last rev: 19.jan.2021