By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,492 Members | 1,987 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,492 IT Pros & Developers. It's quick & easy.

appending image(s) to a heading

P: n/a
I have some xml documents that I am converting to html via an xsl
transform. This means that the structure of the html can be whatever I
want/need it to be. On the other hand, I want the majority of the
formatting to come from a linked css stylesheet. The problem I am
trying to deal with at the moment is generating headings that are
followed (on the same line) by 0 or more images based on the xml data.
Supposing "(a)" and "(b)" represent images, something like:

Heading 1

Heading 2 (a)

Heading 3 (a)(b)

Heading 4 (b)

The ideal solution for me would satisfy: 1. image URLs come from css;
2. images "stack" starting at the right end of the heading; 3. html is
simple/non-klunky; 4. html is "accessible" (i.e. has text that is
obscured by the style(s)).

Thanks much for any help with this.

-Daniel

Feb 7 '07 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Scripsit dpratt:
>The problem I am
trying to deal with at the moment is generating headings that are
followed (on the same line) by 0 or more images
Are the images logically part of the headings, so that (for example) a
speech browser should read their ALT texts the same way as it reads the
heading text?

Should the images appear immediately after the heading text, just after a
space, or should they appear in a particular horizontal position?

It seems to me that the obvious solution is to put the images just as
content in the heading element, e.g.
<h2>Heading <img alt="..." src="..."></h2>
and this should not cause problems, assuming that the height of the image is
smaller than the line height of the heading, as it probably is.
The ideal solution for me would satisfy: 1. image URLs come from css;
Huh? Images are normally content, not styling. You _can_ add images via CSS,
but only as background images. This means that there is no alternative text,
i.e. this is suitable only for images for which alt="" were the adequate
setting if they were included as content images via <img>. This means, in
effect, that they are either pure decoration or visualizations of something
that has already been expressed textually on the page.

If this is the case, you could use
<h2>Heading <img alt="" src="transp.gif" class="foo"></h2>
with img.foo { background-image: url(...); } in CSS. Here transp.gif is a
1-pixel transparent GIF.

Alternatively, with somewhat more limited browser coverage, you could use
<h2>Heading <span class="foo"></span></h2>
with
..foo { background-image: url(...);
display: inline-block;
width: ...;
height: ....; }
2. images "stack" starting at the right end of the heading;
Do you mean something else than just letting images appear in succession, as
in normal inline context?
3. html is simple/non-klunky;
If you have content images, you cannot have anything simpler than <img ...>
in HTML.
4. html is "accessible" (i.e. has text that is
obscured by the style(s)).
Pardon? I guess there's a missing "not" somewhere. Anyway, I would not
confuse the accessibility of web pages to users with readability
("accessibility" to people who study the code) of markup. The KISS principle
usually serves both ends, but they are still quite distinct and different
issues.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Feb 8 '07 #2

P: n/a
On Feb 8, 4:50 am, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
The ideal solution for me would satisfy: 1. image URLs come from css;

Huh? Images are normally content, not styling. You _can_ add images via CSS,
but only as background images. This means that there is no alternative text,
i.e. this is suitable only for images for which alt="" were the adequate
setting if they were included as content images via <img>. This means, in
effect, that they are either pure decoration or visualizations of something
that has already been expressed textually on the page.
The xml describes screens in a software package. Headings are
generated for each field in each screen. Depending on whether the
field is read-only, required, etc., icons should follow the heading
text to indicate as such.
4. html is "accessible" (i.e. has text that is
obscured by the style(s)).

Pardon? I guess there's a missing "not" somewhere. Anyway, I would not
confuse the accessibility of web pages to users with readability
("accessibility" to people who study the code) of markup. The KISS principle
usually serves both ends, but they are still quite distinct and different
issues.
In this case, I am referring the generated page being screen reader
friendly. If someone is examining the page visually, I don't want the
text "read-only" to show up after headings (that's what the image is
for). On the other hand, it would be nice for a screen reader to be
able to read that information.
Alternatively, with somewhat more limited browser coverage, you could use
<h2>Heading <span class="foo"></span></h2>
with
.foo { background-image: url(...);
display: inline-block;
width: ...;
height: ....; }
If the above works in IE6, I think I would prefer that approach.
2. images "stack" starting at the right end of the heading;

Do you mean something else than just letting images appear in succession, as
in normal inline context?
That is what I mean, yes.

Thanks for taking the time to respond, Jukka.

-Daniel

Feb 8 '07 #3

P: n/a
Scripsit dpratt:
The xml describes screens in a software package. Headings are
generated for each field in each screen. Depending on whether the
field is read-only, required, etc., icons should follow the heading
text to indicate as such.
I'm afraid I don't quite follow. A URL would probably have illustrated the
setting.

But it sounds like the images are content images, which should have
alternate texts like alt="read-only", containing essential information.
Hence they should be embedded images, not added via CSS. You cannot specify
a textual alternative for a background image.
In this case, I am referring the generated page being screen reader
friendly. If someone is examining the page visually, I don't want the
text "read-only" to show up after headings (that's what the image is
for). On the other hand, it would be nice for a screen reader to be
able to read that information.
Then <img alt="..." src="..."is what you need.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Feb 8 '07 #4

P: n/a
Jukka K. Korpela wrote:
Alternatively, with somewhat more limited browser coverage, you could use
<h2>Heading <span class="foo"></span></h2>
with
.foo { background-image: url(...);
display: inline-block;
width: ...;
height: ....; }
The problem I had with this approach is the image drops down one line.
Is there a way to compensate (other than using float)?

I float the image to the right and the header to the left (and place
both in a container). The order of the float becomes a problem
though... with the first right image float showing up second and vise versa.
Feb 8 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.