(And I have to add that the source being HTML and CSS made it incredibly easy to pick this project again after three years of not touching it.)

Reply via email

We’re starting out with the following editions, but I have more in the works. (Requests welcome!)

• Dutch–English
• French–English
• German–Dutch
• German–English
• Italian–English
• Lao–English
• Lao–Thai
• Portuguese–English
• Portuguese–Spanish
• Spanish–English
• Spanish–Italian
• Thai–English

Implementation/design notes

• Chrome has a weird Skia bug where text in exported PDFs isn’t searchable/copyable, which was a dealbreaker since these editions are meant to be digital-only.
• Firefox does handle searching and copying just fine, but (sadly) it isn’t able to break the two-columned text correctly across page breaks. This means every part of a verse has to be on the same page (as opposed to half at the bottom of one and half at the top of the next), with the result that some pages have more whitespace at the bottom than is economical.
• Firefox also doesn’t respect break-after: avoid, so I had to add page breaks before each chapter heading (which adds even more extra whitespace) (which can be a valid design decision, to be clear, but my original intent was to stream the chapters with no breaks so that the page count wouldn’t balloon). There’s a potential workaround that I’m looking into in the meantime.
• There are no page numbers, because Firefox and Chrome don’t yet support the CSS paged media rules for that, and Paged.js choked and died on these files.
• Browsers still aren’t great at paragraph layout, so there are going to be occasional widows and orphans.
• I originally started on these several years ago using LaTeX, but I ran into issues getting the page layout to work the way I wanted it to. Layout-wise, things were so, so much easier with HTML and CSS.
• If/when some of these browser issues get fixed (or I find workarounds), I’ll post updated files.

Reply via email

Some notes:

• My goal with this was to make a chart that’s modifiable as easily as possible without building a full chart-generation app.
• Because this HTML and CSS is intended for print and not at all for the responsive web, there are a few ways I did things that I probably wouldn’t have used on a web project.
• I considered using on-page JavaScript to generate the table HTML, since right now there’s a lot of duplication, but I opted to stick with straight HTML to make it easier for non-technical people to modify.
• The column widths are manually set so that things line up across tables. I could have done one big table instead, but the editing ergonomics would have been substantially worse.
• Chrome still can’t print lines less than 1pt in width, so I used Firefox to export the PDF.
• I wish custom properties worked in @page. I also plan to eventually refactor this so that more of the CSS is configurable via custom properties. (At this point it’s just column widths/gaps and colors.)
• This 3.0 version of the chart changes the font from Museo Sans / Minion Pro to EB Garamond, so that the font is freely available. (EB Garamond also feels more appropriate to Latin than Museo Sans.)

Reply via email

Reply via email

Reply via email

Reply via email

It’s available in PDF as usual.

Reply via email

Reply via email

Reply via email

Reply via email