319916 - ability to wrap text around curves in a images

Status: NEW

(Core :: Layout: Images, Video, and HTML Frames, enhancement)

Description

[Biju]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20051210 Firefox/1.6a1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20051210 Firefox/1.6a1

To make text flow around graphics web designers use various methods including.
1. make entire area as a image.
2. use tables an cut image into peaces to have a puzzle
3. use ragged float method as described in
http://meyerweb.com/eric/css/edge/raggedfloat/demo.html 
4. use flash
5. use java applet

There should be a better way to achieve this.
OpenOffice Write archive this by doing 
wrap > edit contour on an inserted image.
and providing ability to float any where on the page
(see attached contour_float.odt and contour_float.png)

To archive this in Firefoz/moz we need to have CSS property 
equivalent to contour around which the text should flow and an enhancement to float property.

Something like
-moz-contour: 
with value as a list of shapes

shapes being
polygon(x1 y1, x2 y2, x3 y3, x4 y4, x5 y5 ....)  
circle(x y r)  
rect(x1 y1, x2 y2)  
etc.

example -moz-contour: circle(100 100 50)  polygon(10 10, 10 20, 20 15);

and for positioning

1.
-moz-float-vertical
with values top, bottom, middle
we should be also able to say a +/- offset like
top (-10px), bottom(10px), middle(-10%)

2.
-moz-float-horizontal
with values left, right, center
also with offset left(10px), right(-10%), center(10px)

3. or just like
-moz-float:top (-10px)  left(10px);

Reproducible: Always

Steps to Reproduce:

Comment 1

[Biju]

Attachment: contour_float.PNG

Comment 2

[Biju]

Attachment: contour_float.odt

Comment 3

[Biju]

Attachment: D----P.html

So best option I found is 
http://blog.nihilogic.dk/2008/09/sandbag-text-wrapping-with-canvas.html
but it fails on "opposing sandbag-left and sandbag-right"
But it can generate HTML as in attached "D----P.html" we can use it

Some blogs about it.
http://meyerweb.com/eric/css/edge/raggedfloat/demo.html
http://www.evolt.org/node/50410
http://www.cssplay.co.uk/menu/flow.html
http://www.234tech.com/wd2_week11/super_ragged_floats.htm
http://www.w3.org/blog/CSS/2007/07/03/rotations_and_non_rectangular_floats
http://verens.com/2007/09/26/return-of-the-autocropper/
http://ajaxian.com/archives/css-text-wrap-squeeze-that-text-around-any-line
http://ajaxian.com/archives/sandbag-text-flow-with-canvas
http://www.alistapart.com/articles/sandbags