Proportional image scaling problem in a paged environment
| Project: | EPUB Maintenance |
| Component: | Open Publication Structure (OPS) |
| Category: | feature request |
| Priority: | normal |
| Assigned: | SKakar |
| Status: | future consideration |
Jump to:
I have been unable to find XHTML or SVG a way to allow an image to be resized depending on the environment page size under the following contraints:
1. The image should always scale proportionally
2. The image should scale to be as wide as possible without becoming taller than the environment page height
3. Text should be able to be displayed before and after the image on the same page if, after scaling, the image doesn't take up the entire height of the page
These are pretty basic requirements, and I'm surprised I've not been able to find a way to obtain this result.
In addition, allowing the following would also be very useful in designing the layout of an ePub document:
4. Specifying a maximum height and width beyond which the picture should not be scaled
5. Specifying the alignment of the scaled picture if the scaled width is less than the environment page width.
I have found a way to specify all this for images that are alone on a page, but not for images that are 'in-line' with the text. I can satisfy any two of the three main constraints, but not all three at once.
Insert Resolution here.
- Login to post comments
Comments
#1
CSS layout model is a problem. If we want to tackle issues like that, we need identify more use cases and attack them all at once.
However, I do not understand your #2. Why would it not be possible to sacle image to height=100%? Do you mean that it should not become wider than the page as well?
#2
It's surprising what assumptions we can make without even realising it.
It turns out I have an unstated requirement that the image width should not become bigger than the width of the page either.
Having been trying more things since posting this, I'm beginning to think it might be possible, at least for scaling images down from their native size.
It may be that my difficulties are caused by ADE's implementation of ePub rather than ePub itself. Specifically, its handling of max-height: 100
I do agree that tackling issues one at a time is not a good way forward, and that it would be better to identify more scaling requirements in a paged environment and see how to meet them all.
#3
I would be a little cautious about mucking around with CSS (either adding new properties or redefining existing ones). This doesn't really seem like a paged media issue, since a similar problems occurs with browsers and the viewport (instead of page). I think CSS 3 is doing some work in this area, like adding vh, vw and vm. I seem to recall some other work about images and retaining their aspect ratios. If possible, I would like to adopt whatever we can from ongoing CSS work instead of designing our own fix.
#4
#5