Dealing with long images?

[kutetapolu]

Hi. I have this html:

<h1>example</h2>

<p>text above image</p>

<img src="https://i.imgur.com/zyJBcND.png"></img>

<p>text below image</p>

It links to a long long loong image and has no CSS. It produces a 3-page PDF. First page is mostly empty (Header, "text above" and a lot of empty space), second one consist of a part of the long image, and the third one is "text below".

So the default behaviour is to cut image fo fit the page length. With some CSS I can shrink the image, but that will make the image unreadable.

Is there a way to split long image into multiple pages? Or maybe some other way of dealing with them, without losing most of the image?

[liZe]

Hello!

Is there a way to split long image into multiple pages? Or maybe some other way of dealing with them, without losing most of the image?

Unfortunately no. It’s another duplicate of #36, and we’ll need to implement CSS Fragmentation to have this kind of cases working.

One solution would be to use named pages to get a very high page height when you meet these images.

[kutetapolu]

Is there maybe a way to make images clickable? I.e. shrink long images to the thumbnail size and click on them to get full image?

[liZe]

Is there maybe a way to make images clickable? I.e. shrink long images to the thumbnail size and click on them to get full image?

You can add <a> tags around images to get that.

[liZe]

We can think about that when solving #36.

[HarshitDubey-Raik]

@liZe I am using WeasyPrint, and facing the same problem as above so wanted to know if this issue is fixed ?

[liZe]

I am using WeasyPrint, and facing the same problem as above so wanted to know if this issue is fixed ?

Now that we follow most of CSS fragmentation, we have a better idea about what to do. Unfortunately, splitting images is explicitly not supported by the specification:

Some content is not fragmentable, for example many types of replaced elements (such as images or video), scrollable elements, or a single line of text content. Such content is considered monolithic: it contains no possible break points. Any forced breaks within such boxes therefore cannot split the box, and must therefore also be ignored by the box’s own fragmentation context.

So, unless there’s a new specification to handle this kind of cases, there’s nothing we can do 😒. But there are other solutions: you can for example use page names to change the size of pages that have long images.

[HarshitDubey-Raik]

@liZe Is there any other way which exists that I can make use of to manually perform this function of Splitting big size images across multiple pages in the PDF?

[liZe]

Is there any other CSS property which exists that I can make use of to manually perform this function of Splitting big size images across multiple pages in the PDF?

I don’t think that there’s a magic CSS property for that. The easiest way is probably to set the image as background of a multiple divs, and change the position of the background to cover different parts.