Error log
This page documents (some of) the quirks of using free software to make graphic design.
An unexpected column jump
The situation
The intention was to make a multi-page report, which has a cover page and text flowing across two columns, beginning on page 2. The document was made using the Firefox browser over the course of a week or so. Everything looked great, until the PDF was exported, which showed images breaking across columns. Strange, as this was not how it appeared in the PDF as it was rendered in the browser.
So, the switch was made to Chrome, which was recommended as a more stable browser to work with. But in Chrome, there was an entirely different issue. On page 2, the text did not flow across two columns. Instead, it jumped from the left-hand column on page 2, to page 3.
Inspecting...
In the CSS, the property and values columns: 2 auto; were previously applied to a class called .columns. In the pad, this class had also been added on page 2, like so:
<section class="columns">
When inspecting the elements, it appeared that the <section> tag had been closed at the end of the first column automagically. So, the text did not flow to the second column, as the browser thought this was the end of the section?
Resolution
After much searching online, gnashing of teeth and hand-wringing, the issue was solved by adding <section class="columns"> to the cover (page 1), then a bunch of break tags:
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
This pushed the text down to page 2, where it flowed across both columns, as originally intended.
Disappearing sentences
Since OSP has been working on DiVersions in 2020, which is made with Paged.js, stories of disappearing sentences on page breaks have been circulating in the web-to-print networks-of-networks. It also emerged in the context of making Volumetric Regimes.
Below is a log of messages and exchanges on the Mattermost instance of Coko around this issue.
m---b: Hey all, hope you are well! A couple of months ago i have been hanging around here (or actually in the other chat instance before the move to this one) to learn about paged.js as i was working on a 300+ pages book. It has been my first bigger project made with paged.js and it has been an amazing learning curve! The making of the book has been on hold for a while and i’m picking it up again these days, but unfortunately a mysterious problem suddenly appeared again: sentences are “eaten” and thus disappearing at the bottom of pages. I had bumped into this in the very beginning of the project too, and @julien was so nice to talk me through possible things that could have caused it. We talked about documenting this in some way, as i have heard stories of designers around me who also bumped into this and said how much anxiety it gives them to not understand when or why sentences disappear. Specially when they work with deadlines, this can easily create all-nighters to make sure that a PDF can be send to print on time. We did not find the time to talk and document it at the end of 2021, but since i’m bumping into this problem again now, and it feels interesting and relevant to document this, i was wondering if @julien or someone else would be up for a short conversation somewhere next week to chat about it?
m---b: About the missing sentence in the 342 pages book (Volumetric Regimes):
- i checked the zoom, the browser is at 100%
- all my sizes are in px, including the baseline and top and bottom margins of the page, to avoid the rounding issue
- when i turn Hyphenology off, the issue disappears
m---b: I tried again to tweak the page margins, but without success. If i make them smaller, the missing line reappears, but … the next one is missing.
m---b: I feel quite desperate now… don’t know what to do anymore, the “hack” of this afternoon (working with the CTRL+S saved copy) messes up the text flow, … which leaves me out of options to try other things or find other hack-ish ways to send this file to print :slightly_frowning_face:
m---b: It turns out that without Hyphenology everything is oke, but we need Hyphenology for the hyphenation of the book… Did you encounter this missing sentences bug before by any chance, in combination with Hyphenology? Is there anything i can do?
m---b: Meanwhile…. i am back at my 342 pages book project, we are sending it to print, but unfortunately the missing sentences bug reappeared……
m---b: Hey Julien, hope you are well! I wanted to let you know that the missing sentences problem strangely enough suddenly disappeared again. The PDF renders oke now, and i’m crossing fingers for it to stay like this!
m---b: Hello all! I'm writing with a question around the mystery of sentences disappearing on page breaks... It appeared again, while making a 1st of May anarchist newspaper in Varia. I'm not working on it myself, but it made me curious to check in here and ask what the current status is around these haunting moments?
julien: hey there. i think we had some interesting experiments with @harshna, it seems that when you have some element with a subpixel height, the rounding/conversion seems to break things. Do you have anything set using em? to explain quickly: on screen, chrome will consider that 8.8px is equal to 8px (6pt). but when it puts the same content on the paper, it consider that 8.8px = 6.6pt. The amount of content it can add on screen is a bit different than what you have on paper. But since paged,js already made the break between pages. the content moves a little bit.
I have an idea to test later with @harshna so we could come with a more usable solution (i hope)
m---b: Thanks so much for the reply, will forward this to the others at Varia who were making the newspaper! And would you recommend to work in pixels or in points? I think I asked you this before... but i can't find my notes back :confused:...
julien: pixel. because the screen is used to draw the pages first. (we’re exploring options to change a bit how pagedjs do the conversion but it’s not really that simple)
decentral1se: Hmmmm, yeh, it doesn't seem to be working. I'm only working with px now across the entire stylesheet
decentral1se: things are getting dissapeared on the page breaks between columns (image 1: pdf view image 2: print preview)
decentral1se: there is also a report about 2 column layout doing strange things so i might try 3 column layout :thinking_face:
harshna: I agree its still breaking in some places. Its not only about 2 column layout, we tried with single column layout and it has missing lines too. We are working on a fix for that now.
decentral1se: aha ok, cool! thanks for the efforts :star2:
decentral1se: happy to test stuff if that helps
harshna: it would be great if you could report abnormalities/ any patterns that you find
decentral1se: thank you
julien: @decentral1se do you have any footnotes?
we may have found a way to hack our way out of those weird rounding issues.
by adding and then removing some emtpy space.
(a hack,really}
decentral1se: no footnotes, some text in @page:first { @top-left { content: "..."; ... and page numbers tho. Everythings in https://octomode.vvvvvvaria.org/anarcho-krant-mvp-issue-1/stylesheet/ (DM me for username/password).
decentral1se: curious about the hack :nerd_face:
julien: ok so, the idea is to leverage the footnote space by giving it some empty space, and run a hook to remove that space just before printing.
really, a hack
class fixMissingLine extends Paged.Handler { constructor(chunker, polisher, caller) { super(chunker, polisher, caller); this.moveToParentFig = []; } afterRendered(pages) { document.querySelectorAll('.pagedjs_sheet').forEach(sheet => sheet.style.setProperty('--pagedjs-footnotes-height', '0px')) } } Paged.registerHandlers(fixMissingLine); and add to your css: .pagedjs_sheet { --pagedjs-footnotes-height: 12px }i hope the children never learn we did such a trick.
decentral1se: it's hacks all the way down :smile_cat:
i will see about integrating this into octomode to test
have you had some luck testing this already?
oh hmm if i don't already have footnotes, then i can't use this? :thinking_face:
julien: yep you can
and yes we tried.
it’s completely untested and quite dangerous but hey, who wants to live a long and nice and peaceful life right? :sunglasses:
decentral1se: haha lovely stuff, will try tmoz, thx!
Links
- https://git.vvvvvvaria.org/varia/octomode/issues/25
- https://github.com/pagedjs/pagedjs/issues/130
- https://github.com/pagedjs/pagedjs/issues/87
- https://github.com/pagedjs/pagedjs/issues/87#issuecomment-1476958035
Different renderings in Mac/Linux
https://mattermost.coko.foundation/coko/pl/6jdgxiybridq5bg4scx63tirgh
m---b: Hey all! Hope you are having a lovely summer. @simoon and i're slowly picking up work again in Rotterdam and are wrapping up a remake of the APRJA journal, which is now produced with Paged.js. :wink:
While going to the list of last changes, we noticed that Paged.js renders the pages differently on a Mac and Linux computer, even though we are on the exact same version of Chrome :grimacing:. Have you noticed that before? Is there anything we can do?
julien: hey there! yeah it’s one of those thing we can’t really do anything about because it’s about mac and linux use their fonts.
so for example. hypens have been available on mac for much longer than for linux :confused:
The only workaround is by using pagedjs-cli on a server, which comes with the problem of having a hardest time to make small changes.