These forums are currently read-only due to receiving more spam than actual discussion. Sorry.

It is currently Sat Dec 02, 2017 4:10 pm Advanced search

floating text against a path

Here you can discuss stuff that doesn't fit elsewhere; anything you want really.

floating text against a path

Postby urbanjost » Thu Jul 16, 2009 5:58 pm

I find it difficult to float text against a non-rectangular border; even with the
CSS float attributes. It would be useful to be able to define a left and right
polyline or polygon to float the text against. This would allow very pleasing text layouts that follow the contours of images, as is often seen in magazines.

I can see where that might be seen as a feature purely for CSS to implement and not for HTML5; but as I try to envision it from a user's perspective the most natural way to implement it would seem to be to make an extension to
image maps. There is already a method defined for mapping coordinates to
a pixmap there.

The existing image map coordinates could be used in several
ways. A polygon might designate a left edge; another might designate a right edge. An interesting possibility is that text could be used to "fill" the regions
of the image not associated with a polygon; allowing for complex text fill patterns; but a simple left and right edge would allow for most uses, I suspect.

So maybe teaching an old dog new tricks is a good idea; and extending the image map seems the most intuitive way to implement the feature.
urbanjost
<h5>
 
Posts: 16
Joined: Sun Feb 03, 2008 3:48 am

Postby urbanjost » Fri Jul 17, 2009 12:43 pm

I made a basic example at
http://home.comcast.net/~urbanjost/CLON ... twrap.html

It doesn't follow an image edge; it follows a sine wave; but I think it
shows what feature I would like to have.
urbanjost
<h5>
 
Posts: 16
Joined: Sun Feb 03, 2008 3:48 am

Postby zcorpan » Sat Jul 18, 2009 10:04 am

CSS is out of scope for the WHATWG -- I suggest you send an email to www-style@w3.org.

I'm moving this thread to Off Topic, but certainly you can continue to discuss it here.
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden

Postby urbanjost » Sat Jul 18, 2009 10:19 pm

Actually, the desire what to discuss whether such an attribute should be
implimented with CSS or if it was better to add an "EDGE" attribute to
HTML image maps; as this feature is particularly difficult to assign to an image that is not
a background image or positioned with absolute coordinates. I know this
appears at first to be in the domain of CSS; but the image map is much more tightly bound to an image and would make it easier to implement a robust
mapping of a (possibly resizable) pixmap's non-linear "edge" to the edges being used for text wrapping.

In researching this a bit further I found several solutions I was unaware of
(which I added links to in my first cut at an example) which seem to be first-rate
tools; but they also ultimately function by adding many box elements to the page; so
the result is still something similar to my basic example.

Whether done with HTML or CSS or (as I envisioned) with a bit of both,
it seems justified to come up with a cleaner way to implement such an
esthically pleasing feature than stacking many independently sized box
elements and/or depending on ECMAScript.
urbanjost
<h5>
 
Posts: 16
Joined: Sun Feb 03, 2008 3:48 am

Postby zcorpan » Sun Jul 19, 2009 8:05 am

I don't think image maps is the right tool for this, and in general HTML shouldn't be used for layout purposes.

I think a better design is to use an SVG or PNG image and make text wrap at non-transparent parts of the image. Since such images can be either part of the content or just for decoration, it should probably work for both floated images and for background images.
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden

Postby zcorpan » Sun Jul 19, 2009 8:15 am

Maybe something like
Code: Select all
<article>
<img src=foo.png alt=''>
<p>Lorem ipsum ...</p>
</article>

Code: Select all
article {
text-align:justify;
text-wrap-along: background-image floated-content;
background:url(curve.svg) repeat-y left;
}
article img { float:right }
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden


Return to Off Topic

Who is online

Users browsing this forum: No registered users and 0 guests