Hello,

I am trying to create a CSS for DITA topics.

The images may have percentual scaling attributes.

<topic>
<p>
<image href="image.png" scale="20" />
</p>
</topic>

I tried the following approach, but the images show at the original size:

image {
content: attr(href, url);

transform: scale(
attr(scale,%),
attr(scale,%));
}


What do you recommend?

Thank you,
Dan

So does scale="20" mean display the image at 20% of its intrinsic size at the default resolution? eg. if image is 96 pixels wide, default resolution is 96dpi, so the image would be one inch wide normally, and now it should be 20% of that?

Probably it would be better to use the width property, but it is still a bit tricky to do without resorting to JavaScript or XSLT. You could do this:

image {
    width: attr(scale, percent)
}

However, that requires the attribute value to be "20%" not just "20".

Yes, you are right about the image size relative to the resolution.

I have an XSLT processing pipeline, so it is easy to postfix the scaling attribute values with the % symbol.

Thank you!

Well, I think the "percent" value is relative to the containing block width, instead of being relative to the size of the image (size in pixels converted to inches using the prince-image-resolution property).

For instance using a "100%" scaling makes the image as wide as the page, instead of leaving the image untouched.

Is there other approach?

Sorry, I got mixed up. CSS percentages are all relative to containing block width, not intrinsic width.

It may not be possible to achieve what you want with CSS alone. Perhaps you can extract the original image size and put it in the markup?

This may be an argument in favour of supporting percentage values on the image-resolution property.

I used a Java extension to generate the width and height on each image, and it works fine (except the performance penalty). Surely an image resolution property that can be controlled by the value of an attribute is a much better solution.

Another thing worth mentioning:

Setting both the widht and height attributes makes Prince not scale images.
If using only the width, it works fine.

image[width] {
width: attr(width, px);
}

image[height] {
width: attr(height, px);
}

Should the second rule be specifying the height property?

My mistake. It works fine. Sorry for the noise.