Hi,

I use the following CSS to use the alt attribute defined for images as image captions:

img.align-right {
      border: 1pt solid black ;
      margin-left: 1em ;
      margin-top: 1em ;
      margin-bottom: 1em ;
      float: right ;
      }

   img.align-right:after {
    font-size: 7pt ;
    font-family: "FontinSans" ;
    content: attr(alt) ;
    text-align: center ;
    float: none ;
  }

The html code for the image is

<img align="right" alt="Some Image Caption" class="align-right"  src="images/sample.png" style="width: 5cm;" />

The inline width property is ignored when the img.align-right:after block is active; i.e. the image is put into the document unscaled. The border itself is drawn according to the width property, though!

I quickly created to sample pngs (200x300 with 50by50 checkerboard b/w), one with resolution info, one without: The one with resolution is used unscaled, the other one is a bit smaller; probably at the default prince resolution (96dpi?).

I can workaround this setting prince-image-resolution, but that just a band-aid that's not feasible for documents with images that come in different sizes and are expected to fill different amounts of space on a page.

The same happens if I change the code to have the width in the CSS proper and/or try using relative widths.

CSS 2.1 states firmly that the interaction of ::before and ::after on replaced elements such as IMG, will only be fully decided in CSS 3. So far only Opera and Prince have implemented any support for img::before and img::after (correct me if I am wrong). That said, Prince will probably move towards the Opera behaviour, but it might take some time before it happens.

However, messing with prince-image-resolution strikes me as very cumbersome. (Unless all your images have the same size and and resolultion.) Therefore I tried to think about some easier workarounds. Depending on your needs, I may have found something easier. Provided you have the IMG element <img src=src alt=alt >, you can do this:

img{
   position:relative;
}
img::before{
   position: absolute;
   content: attr(src, url);/* NOTE! (update) */
   width: inherit;
   height: inherit;
}
img::after{
   position: absolute;
   content: attr(alt);
   left: 0;
}

This workaround depends on the fact that Prince applies the width and height of ::before and ::after not only to the box of the ::before and ::after, but also to the very image itself (so, this workaround depends on a bug, I guess -- the other UAs do not do it this way.)

As a result, the above CSS causes the image of ::before to fill the entire IMG element, and with the intended size.

[Update] And thanks to the fact that Prince supports the CSS 3 construct content:attr(src, url);, you do not need to type the url of each img. (I updated the code example above.)

leif

Just a note that I updated the code in the previous post with the value attr(src, url) for the content:; property. See above post.

leif

Thanks, I'll give that a try.