[whatwg] img as a layout tool to describe the displayed region of a CSS background-image

[Ian Hickson]

On Wed, 28 Apr 2010, Ingo Chao wrote:
>
> http://dev.w3.org/html5/spec/Overview.html#the-img-element "The img must 
> not be used as a layout tool. In particular, img elements should not be 
> used to display transparent images, as they rarely convey meaning and 
> rarely add anything useful to the document."
> 
> An img with a given transparent image for src cuts an area of a sprite. 
> ( = img as a layout tool to describe the displayed region of a CSS 
> background-image.)
> 
> Is this usage of the img element considered invalid (non-conforming)?

I do not understand the use case you descrbe.


On Wed, 28 Apr 2010, Ashley Sheridan wrote:
> 
> If an image is transparent, it has no display value other than to 
> reserve an area of space, which goes back to the original point that 
> images should not be used for layout.

Right.


> If you're using a background image then that shouldn't need to convey 
> any meaning to the viewer, it should only be for presentation purposes. 
> The meaning of the content should remain the same if the background 
> image is displayed or turned off regardless. You should consider 
> re-structuring your page so that the presentation is separate from the 
> content.

Indeed.


On Wed, 28 Apr 2010, Giorgio Maone wrote:
>
> I believe the spec is trying to stigmatize old-times spacer images used 
> to layout other HTML elements, like
> 
> <img src="spacer.gif" width="100" height="1">
> 
> which are overly ugly and meaningless now that there's nothing you can't 
> layout by CSS.

Amongst other things, yes.


On Wed, 28 Apr 2010, Ashley Sheridan wrote:
> 
> But still, using a transparent image with some alt text to convey 
> information about a background image is just as bad. It's breaking the 
> relationship between content and the meaning of that content. A 
> background image should be just that, and shouldn't have any impact on 
> the meaning of information. Likewise, colour shouldn't be relied on to 
> convey information, as there are cases where colours can't be displayed 
> or aren't transferred if the information is grabbed as an excerpt to be 
> used elsewhere.

Right.


On Wed, 28 Apr 2010, Steve Dennis wrote:
> On 28/04/2010, at 7:43 PM, Tab Atkins Jr. wrote:
> > On Wed, Apr 28, 2010 at 4:31 AM, Ingo Chao <i4chao at googlemail.com> 
> > wrote:
> >> http://dev.w3.org/html5/spec/Overview.html#the-img-element
> >> "The img must not be used as a layout tool.
> 
> I think this may be a little vague/broad.  I understand the intention, 
> but say for example I have a logo image in the top left of my header, 
> and my header doesn't have a static height set (in case something in the 
> header needs it to grow or shrink for instance), then the height of the 
> logo image is dictating the height of its parent, and this would seem to 
> me, to be using an img as a layout tool, in a sense.

A rather odd sense. :-)


> Sprites for icons, while widely used and considered fairly good 
> practice, still seem pretty hack-ish to me.  Icons can (arguably) help 
> convey meaning in a document, and changing a background position to 
> change that meaning doesn't seem like the best way of achieving this.  
> I am of course thinking like 10 years into the future here, as sprites 
> are perfectly fine for lots of uses today, but as concurrent connections 
> become less of a problem, I think lots of us will look back on sprites 
> the same way we see spacer.gifs, which were a necessary evil at the 
> time.

Using CSS to display content is a misuse of the technology, certainly.


On Wed, 28 Apr 2010, Tab Atkins Jr. wrote:
> 
> Don't overthink it.  It's a very simple rule.  ^_^ Having an img 
> *interact* in the layout is both fine and obviously necessary.  The 
> restriction is to prevent someone from using an <img> element *solely* 
> for layout purposes.

Right. (No, wait. I mean, "Indeed".)

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'