The recently added multipass feature opens up for supporting layouts that are common, but not quite common enough to be added to CSS. One such feature is "pullquotes" that are placed between two columns, intruding into both. Here's a proof-of-concept:
https://www.css4.pub/2020/pullquote/hg.html
https://www.css4.pub/2020/pullquote/hg.pdf
You can generate the PDF file yourself by running:
The script looks for an absolutely positioned pullquote, and then adds two carefully crafted dummy floats to push aside content under the pullquote.
The two floats are placed in adjacent columns, on adjacent lines. The first float is right, the second is left, thus forming one rectangle. The code will adapt to changes in size and shapes. For example, if the quote is longer or takes up more space due to a bigger font size, the two floats will increase in size.
Here is an example with a longer pullquote where the two floats have been gently marked:
https://www.css4.pub/2020/pullquote/hg2.html
https://www.css4.pub/2020/pullquote/hg2.pdf
Finding where in the textflow to insert the dummy floats is the tricky part. To ensure enough possible anchoring points, <span> elements are added around each word before formatting. The initial formatting establishes the natural page of the pullquote. Then the two floats are added, with reformatting taking place after each addition.
The code has not been tested extensively. To support additional pullquotes, it must be modified so that each additional pullquote result in two more reformattings. It should be possible to modify the solution to work in browsers, where dynamic reformatting is supported.
(From a CSS perspective, a simpler solution would be to add a flag/keyword to indicate that an abspos should push aside other content (rather than overlapping the other content). I suspect, however, that such feature is tricky to implement.)
https://www.css4.pub/2020/pullquote/hg.html
https://www.css4.pub/2020/pullquote/hg.pdf
You can generate the PDF file yourself by running:
prince --javascript --max-passes=3 https://www.css4.pub/2020/pullquote/hg.html -o hg.pdf
The script looks for an absolutely positioned pullquote, and then adds two carefully crafted dummy floats to push aside content under the pullquote.
The two floats are placed in adjacent columns, on adjacent lines. The first float is right, the second is left, thus forming one rectangle. The code will adapt to changes in size and shapes. For example, if the quote is longer or takes up more space due to a bigger font size, the two floats will increase in size.
Here is an example with a longer pullquote where the two floats have been gently marked:
https://www.css4.pub/2020/pullquote/hg2.html
https://www.css4.pub/2020/pullquote/hg2.pdf
Finding where in the textflow to insert the dummy floats is the tricky part. To ensure enough possible anchoring points, <span> elements are added around each word before formatting. The initial formatting establishes the natural page of the pullquote. Then the two floats are added, with reformatting taking place after each addition.
The code has not been tested extensively. To support additional pullquotes, it must be modified so that each additional pullquote result in two more reformattings. It should be possible to modify the solution to work in browsers, where dynamic reformatting is supported.
(From a CSS perspective, a simpler solution would be to add a flag/keyword to indicate that an abspos should push aside other content (rather than overlapping the other content). I suspect, however, that such feature is tricky to implement.)
Edited by howcome