Hi, I am trying to replicate this example from css4 with a small variation
https://css4.pub/2022/float/sample-27.html
in the example the figure is introduced before the text
I am trying to do the same, deferring to the right page and use a bleed layout for that specific page and image, but I am not able to locate the figure before the text as the text is flowing from previous pages. But when I introduce the figure after a paragraph and followed by more paragraphs, the text flow is stopped where the figure is introduced and it is resumed on the page after my full bleed image.
Below would be the html from the example with the mentioned change
Tried few things but I haven't managed to resume the flow of the text in the same page
Many thanks!
https://css4.pub/2022/float/sample-27.html
in the example the figure is introduced before the text
I am trying to do the same, deferring to the right page and use a bleed layout for that specific page and image, but I am not able to locate the figure before the text as the text is flowing from previous pages. But when I introduce the figure after a paragraph and followed by more paragraphs, the text flow is stopped where the figure is introduced and it is resumed on the page after my full bleed image.
Below would be the html from the example with the mentioned change
Tried few things but I haven't managed to resume the flow of the text in the same page
Many thanks!
<!DOCTYPE html><html><meta charset=utf-8>
<style>
@import url(https://css4.pub/2022/float/style.css);
@page {
size: 160mm 200mm;
margin: 10mm;
@bottom { content: counter(page) }
}
@page ad {
size: 160mm 200mm;
margin: 0mm;
@bottom { content: "" }
}
article {
-prince-margin-outside: 30mm;
columns: 2;
}
figure {
page: ad; /* selects a page without page number */
-prince-float: top;
-prince-float-defer-page: right;
/* the declarations below ensure a "page" look on top of the image */
background-size: 100%;
background-image: linear-gradient(to right, #000, #666 1%, transparent 8%, transparent 98%, #555 98.5%, white 99%, #555 99.5%, white 100%), url(gjess6p.jpg);
width: 100%;
height: 100%;
}
</style>
<body>
<article>
<p>Lorem ipsum dolor sit amet, con sectetur adip iscing elit, sed do eius mod tempor in cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer citat ion ullamco laboris nisi ut aliquip ex ea com modo consequat. Duis aute irure dolor in repre henderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<p>Lorem ipsum dolor sit amet, con sectetur adip iscing elit, sed do eius mod tempor in cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer citat ion ullamco laboris nisi ut aliquip ex ea com modo consequat. Duis aute irure dolor in repre henderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<figure><img src="https://css4.pub/2022/float/gjess6p.jpg"></figure>
<p>Lorem ipsum dolor sit amet, con sectetur adip iscing elit, sed do eius mod tempor in cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer citat ion ullamco laboris nisi ut aliquip ex ea com modo consequat. Duis aute irure dolor in repre henderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<p>Lorem ipsum dolor sit amet, con sectetur adip iscing elit, sed do eius mod tempor in cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer citat ion ullamco laboris nisi ut aliquip ex ea com modo consequat. Duis aute irure dolor in repre henderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<p>One two three four five six seven eight nine ten. Eleven twelve thirteen fourteen fifteen sixteen seventeen eighteen nineteen twenty.
<p>One two three four five six seven eight nine ten. Eleven twelve thirteen fourteen fifteen sixteen seventeen eighteen nineteen twenty.
<p>Lorem ipsum dolor sit amet, con sectetur adip iscing elit, sed do eius mod tempor in cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer citat ion ullamco laboris nisi ut aliquip ex ea com modo consequat. Duis aute irure dolor in repre henderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<p>Lorem ipsum dolor sit amet, con sectetur adip iscing elit, sed do eius mod tempor in cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer citat ion ullamco laboris nisi ut aliquip ex ea com modo consequat. Duis aute irure dolor in repre henderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</article>
</html>