Earlier in the week I posted an image of a test-page I had been working on where the text had flowed against the side of a circular shaped image. The HTML page can be found at:- http://countjustonce.com/test/mercator-resize.html ... and will work in up-to-date versions of Chrome or Opera browsers, where the CSS controlling the shape dimensions is currently using the -webkit- prefix. Clicking on the Show Shape link beneath the right-hand image will show the transparent shape that is created below the floated .png image to form the boundary for the text. Microsoft have indicated that the CSS shape property is under consideration for inclusion in their new Microsoft Edge browser, and it will most likely respond to the -webkit- prefixed CSS and/or the non prefixed version. MS along with Firefox currently implement -webkit- prefixes in their browsers to ensure interoperability across platforms. As far as shapes go, the flowing of data around or inside various shapes - polygons included, is now feasible. An article by Sara Soueidan that explains the implementation is at:- http://alistapart.com/article/css-shapes-101 Windows 10 and the Microsoft Edge browser will probably be around for a long time, and my interpretation is that MS are intending doing updates to the O/S and browser at 4 monthly intervals. In other words new features will just appear as they do in Chrome, Firefox and Opera. Barry ---------------- On Tue, 14 Jul 2015 22:15:13 +1200, Barry Carlson via <[email protected]> wrote: > Tue, 14 Jul 2015 22:13:17 +1200, Barry Carlson > <[email protected]> wrote: > > The following image will show you what I'm talking about. > > http://freepages.rootsweb.ancestry.com/~bristowe/images/mercator-example.jpg > > Have a look at the enclosed image at bottom right and think about what > you are seeing - text wise! > I'll reveal the rest in due course.

The shape tag writes over the image? I can create all sorts of shapes but they are all inside boxes with transparent backgrounds. On 07/18/2015 12:50 AM, Barry Carlson via wrote: > Earlier in the week I posted an image of a test-page I had been working on > where the text had flowed against the side of a circular shaped image. > > The HTML page can be found at:- > > http://countjustonce.com/test/mercator-resize.html > > ... and will work in up-to-date versions of Chrome or Opera browsers, > where the CSS controlling the shape dimensions is currently using the > -webkit- prefix. Clicking on the Show Shape link beneath the right-hand > image will show the transparent shape that is created below the floated > .png image to form the boundary for the text. > > Microsoft have indicated that the CSS shape property is under > consideration for inclusion in their new Microsoft Edge browser, and it > will most likely respond to the -webkit- prefixed CSS and/or the non > prefixed version. MS along with Firefox currently implement -webkit- > prefixes in their browsers to ensure interoperability across platforms. > > As far as shapes go, the flowing of data around or inside various shapes - > polygons included, is now feasible. An article by Sara Soueidan that > explains the implementation is at:- > > http://alistapart.com/article/css-shapes-101 > > Windows 10 and the Microsoft Edge browser will probably be around for a > long time, and my interpretation is that MS are intending doing updates to > the O/S and browser at 4 monthly intervals. In other words new features > will just appear as they do in Chrome, Firefox and Opera. > > Barry > ---------------- > > On Tue, 14 Jul 2015 22:15:13 +1200, Barry Carlson via > <[email protected]> wrote: > >> Tue, 14 Jul 2015 22:13:17 +1200, Barry Carlson >> <[email protected]> wrote: >> >> The following image will show you what I'm talking about. >> >> http://freepages.rootsweb.ancestry.com/~bristowe/images/mercator-example.jpg >> >> Have a look at the enclosed image at bottom right and think about what >> you are seeing - text wise! >> I'll reveal the rest in due course. > > ------------------------------- > To unsubscribe from the list, please send an email to [email protected] with the word 'unsubscribe' without the quotes in the subject and the body of the message > -- A cat is a puzzle with no solution. Cats are tiny little women in fur coats. When you get all full of yourself try giving orders to a cat. _ _... ..._ _ _._ ._ ..... ._.. ... .._

Billie, In the example at:- http://countjustonce.com/test/mercator-resize.html .. the span element containing the PNG image will show its box border when prompted to do so, and it will now turn on and off using the shape control. Meanwhile the "shape-outside-circle()" property creates a circle over the alpha channel pixels (the white area outside of the circular image) which is modified by the span element padding to become an ellipse. So in a floated element, the box is ignored when the "shape" property is in use, and the text will snuggle up to the shape boundary. Following on from the above, IE10 and IE11 can both render the exclusion "wrap-flow:both" property, which now allows the positioning of a box element within text. The only problem is the box element needs to be positioned absolutely, which makes for difficulties if multiple paragraphs need to be flowed across it. In the following example, I have used some old techniques to overcome the problem, e.g. placed all the text in one <p> tag and used pseudo paragraph breaks. http://countjustonce.com/test/css-exclusion.html Barry -------------------------- On Sun, 19 Jul 2015 01:12:26 +1200, Billie Walsh via <[email protected]> wrote: > The shape tag writes over the image? > > I can create all sorts of shapes but they are all inside boxes with > transparent backgrounds.

I figured that was what was happening. Thank you for the explanation. I think the use is somewhat limited right now. I tried it in my usual browser, Firefox v31, and it didn't work. I tried the latest and greatest Firefox, v42, and still not implemented. It worked well in Chromium v43. I didn't try it on my Windows computer so no IE. On 07/19/2015 01:00 AM, Barry Carlson via wrote: > Billie, > > In the example at:- > > http://countjustonce.com/test/mercator-resize.html > > .. the span element containing the PNG image will show its box border when > prompted to do so, and it will now turn on and off using the shape > control. Meanwhile the "shape-outside-circle()" property creates a circle > over the alpha channel pixels (the white area outside of the circular > image) which is modified by the span element padding to become an ellipse. > > So in a floated element, the box is ignored when the "shape" property is > in use, and the text will snuggle up to the shape boundary. > > Following on from the above, IE10 and IE11 can both render the exclusion > "wrap-flow:both" property, which now allows the positioning of a box > element within text. The only problem is the box element needs to be > positioned absolutely, which makes for difficulties if multiple paragraphs > need to be flowed across it. In the following example, I have used some > old techniques to overcome the problem, e.g. placed all the text in one > <p> tag and used pseudo paragraph breaks. > > http://countjustonce.com/test/css-exclusion.html > > Barry > -------------------------- > On Sun, 19 Jul 2015 01:12:26 +1200, Billie Walsh via > <[email protected]> wrote: > >> The shape tag writes over the image? >> >> I can create all sorts of shapes but they are all inside boxes with >> transparent backgrounds. > > ------------------------------- > To unsubscribe from the list, please send an email to [email protected] with the word 'unsubscribe' without the quotes in the subject and the body of the message > -- A cat is a puzzle with no solution. Cats are tiny little women in fur coats. When you get all full of yourself try giving orders to a cat. _ _... ..._ _ _._ ._ ..... ._.. ... .._