Larger grid/font when printing

[viresh-ratnakar]

Proposing to add Print link (next to "Tools") that leads to 4 ways of printing/PDFing: 2-column (default), 3-column, 4-column, 1-column.

In the 3-column and 4-column modes, the grid would occupy 2 columns, making it bigger than the current size in printouts. There will probably also be an option to make the printed font-size bigger (I need to try things out a bit first though).

FWIW, I think the 2-column version is nice for printing puzzles with solutions and clue annotations (as they fill up a single page typically).

This was originally raised by @billykenny in a different discussion:

... if I right click and select Print to PDF (I'm using Windows 10 Pro and MS Edge, and not changing any settings) from the Exolve puzzle, the resulting printout occupies just about half the page, the font is quite small, as is the grid.

Acrosslite produces a larger, more user friendly output (in terms of writing in answers, although it doesn't look as elegant).

[billykenny]

I admire your dedication and look forward to seeing the proposal implemented. Personally, I think the Financial Times PDF is the ideal, bearing in mind that many cryptic crossword lovers are older generation with poorer eyesight. The lights don't feel cramped when entering letters, and the font is big enough to read comfortably.

This is an example

Thank you for all your good work

[viresh-ratnakar]

I've implemented a better layout for incomplete grids now, with v1.21.

I decided not to create complicated printing options. Instead, I just changed the default behaviour (but have given the puzzle setter some options to override). Details copied below from CHANGELOG.md:

Version: Exolve v1.21 September 20 2021

• Add a new, 3-column layout for printing (and creating PDFs). This is now the default layout when printing while there are any unfilled cells. This layout makes the grid larger (as it spans 2 of the 3 columns) and is easier to write into. This is implemented using code to figure out where to split the clues lists for balancing across three columns (as CSS does not handle this kind of columnar layout where an element spans multiple but not all columns).
• The 2-column layout (with the grid placed in the first column) continues to be the default for printing completed grids. This choice works well especially when there are annotations/explanations revealed, as it is more likely to get everything to fit within a single page.
• Add exolve-options print-incomplete-2cols and print-completed-3cols to override the above defaults if needed.
• Unhighlight the current clue/cells before printing (and restore after printing).
• If there are span-specified ninas, make their colour appear in printing too (this was a minor bug) by adding a CSS rule for .xlv-clue to render the colour properly within that class when printing.

[DKMiller71]

The new print layout looks funky on my puzzle (the one I shared with you) - 1) the grid overlaps the third column, 2) the numbering pushes down to the next page, and 3) there's an unusual extra space after one of the clues (36D).

[billykenny]

That works fine on my puzzle and looks so much better - many thanks? Is it possible for me to change the fontsize for the clues in the print/PDF?

[billykenny]

Just relaised you're already working on the fontsize - thanks!

[viresh-ratnakar]

I'll continue to tweak, keeping this open for now.

Will try to fix the bad rendering on Windows+Chrome and Firefox (seems bad across platforms). Will try to provide a larger font-size option; but unlike layout, which I think can be the setter's choice, I think a markedly larger font size has to be deliberately chosen by the solver. So I'll probably add a "Print" button next to "Tools" after all, which will lead to a panel where printing choices can be made. The defaults will continue to be what they are.

Printing is messy :-)

[DKMiller71]

Yeah, some of the options look better if you change the scaling in the print dialog.

[viresh-ratnakar]

I've posted v1.22 that brings some more improvements to printing. I'm copying the CHANGELOG.md entry as well as the updated printing documentation from README.md below:

Version: Exolve v1.22 September 28 2021

• Printing tweaks and bug-fixes. Do 2-columns manually like 3-columns. Measure and fit more carefully. Avoid clipping at the bottom by inserting special, measured DIVs at the bottom of the first page, in each clues column.
• Add a "Print" link. Give controls for page size, margin, font size. Allow printing just the crossword (useful when the crossword is buried in some section of the whole page).
• Lots of nuances to this change, see the details in the updated documentation.

--------------------- README.md: -----------------------------------------------------

Printing

You can print web pages containing Exolve crosswords using the browser's "Print" command (Ctrl-P or Cmd-P) or by using the "Print" link shown under the grid (this latter way of printing opens up a panel that provides some additional settings: see below). The current state of the crossword gets printed. If you want to print the blank grid after you've already filled some entries, or if you want to print the "fully revealed" grid (if available), then you can re-open the crossword in an incognito window, get it to the state you desire to print, and then print.

The printed puzzle is laid out in a newspaper-like multi-column layout (similar to what you get with the columnar-layout option). You can create PDF files for your crosswords by "printing to file" in most browsers.

If not all the puzzle entries have been filled in, then the printing is done in three columns, with the grid occupying two columns. This makes the grid a bit larger and easier for writing into.

If all the puzzle entries have been filled in, then the printing is done in two columns, with the grid occupying the first column (which makes it slightly smaller than the three-column layout for incomplete puzzles). If the puzzle provides annotations and/or explanations that get revealed, then this two-column layout is especially useful to limit the printed size.

For most puzzles, this layout should fit within a single page, in Portrait mode, for standard page sizes. You can reduce the printing scale manually (in the browser's print settings) if it just goes over a single page by a few lines.

You can override the column choices for completed (default: 2 columns) and incomplete (default: 3 columns) puzzles using the options print-completed-3cols and print-incomplete-2cols respectively.

Before printing, any highlighting of the currently active clue is removed, and it is restored after printing.

If it does not make sense for some chunks of text or some HTML elements to be printed (for example, some instructions that only make sense in interactive mode), you can enclose them in an HTML element (such as a DIV or a SPAN) that has the class xlv-dont-print.

Additional settings for printing

Clicking on the "Print" link (that's shown under the grid) toggles a panel with the title "Settings for printing/PDFs". This lets you specify:

• Page size (such as 'Letter' or 'A4'). As of September 2021, you still need to pick the same page size in the printer's settings that open up when you print, if you use a paper size that's not the current choice in the printer's settings.
• Page margin in inches. Caveat: large margins may lead to some parts getting clipped.
• Font size (Normal, Large, Extra Large, Small).

Additionally, from this panel, you have two buttons for printing:

• You can click on a button labelled "Print page". This will print the whole page, just like what you'll get from the browser's "print" function.
• You can click on a button labelled "Print crossword". This will print only the crossword. This is useful if the crossword is embedded with some background or other content around it.

Printing layout algorithm details

In preparation for printing, Exolve lays out the crossword part of the page (which is usually the whole page) using a width of 992 pixels (488 + 16 in 2-columns format, and 320 + 16 + 320 + 16 + 320 in 3-column format) with 0 margin. It then balances the clues across the 3 or 2 columns, so that the bottom edge is even.

This is followed by an attempt at pagination (only done if the top-left of the Exolve crossword is very near the top-left of the page). The aspect ratio of the page size specified (taking into account the margins) is used to find where the page boundary is (in pixels). If the content already fits in one page, then nothing further needs to be done. If the content seems to only slighlty spill over to a second page, then a small left margin is added, sufficient to make the aspect ratio fit. If there's a non-trivial spill onto a second page, then Exolve inserts empty helper divs (with heights set as needed) to try to ensure that no clue is cut midway at the bottom of the first page and that the the remaining clues line up at the top on the second page. The hope is that browser will simply scale the content correctly and will arrive at the same page boundary.

After printing, Exolve reverts the page rendering to its original state.

Browser-specific printing peculiarities

Brwosers have their own printing layout algorithms that sometimes do not behave as expected by Exolve's printing layout algorithm. Here are some known issues as of September, 2021.

• Printing settings in Firefox seem especially complex, and Exolve turns off the pagination attempts described above if it detects the browser to be Firefox. If the printed area seems too small with Firefox, try unchecking the option: "Ignore Scaling and Shrink to Fit Page Width" and set the scale to something like 70%.
• In Chrome, if the margin is too high (say, more than 0.7 inches), then some content may get clipped.

[viresh-ratnakar]

I'm closing this issue. Feel free to create new bugs for any specific printing issues you might observe. Thanks!