469,270 Members | 1,626 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,270 developers. It's quick & easy.

appending image(s) to a heading

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
4 2170
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
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
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
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.

Similar topics

16 posts views Thread by Andy Mabbett | last post: by
53 posts views Thread by Kerberos | last post: by
12 posts views Thread by Charlie King | last post: by
16 posts views Thread by Alan Silver | last post: by
8 posts views Thread by MarkAurit | last post: by
2 posts views Thread by Dominic Vella | last post: by
1 post views Thread by dbee | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.