Clue alignment issue [Windows]

[Antagony1060]

I updated to v1.01 yesterday and I'm very pleased with the save state being switched to local storage rather than cookies, which I always found a bit clunky. However, I generally solve crosswords in a narrow popped-out window and I've just noticed the down clues don't left align with the across clues any more. E.g.

It straightens up if the window is widened sufficiently. It occurs at the exact same point where the button sizes change. The picture shows the issue in Chrome, but I've tried it in Firefox too and it's the same.

[Antagony1060]

Out of curiosity I've just checked the same puzzle on my mobile (Android) and while the issue isn't as pronounced, it is still noticeable:

[viresh-ratnakar]

I've fixed this now in v1.02, ptal.

Here's the CHANGELOG:

Version: Exolve v1.02 January 30 2021

• Make all clue list boxes (class "xlv-clues-box") have the same width (set to the max width among them). This looks nicer and makes sure there is vertical alignment when one of the clue list boxes (say Down) has shorter clues than the other (say Across).
• Add CSS so that we also show clues panels one under the other to the right of the grid if there is space (previously the clue panels would appear under the grid even if there was space for a single-column layout to the right of the grid).

[Antagony1060]

That's fixed the alignment issue, thanks!

I do like the new flow with the clues on the right when there's room, although it leaves a lot of blank space underneath the grid once all the annotations are shown – see our AOTW #12 after a Reveal all operation, for example. Of course the ideal solution for that would be to flow the clues like a newspaper typesetter would, with the across clues starting underneath the grid then split to the top right just enough for the down clues to fit underneath them, such that their bottoms align. But I think that would be hard/impractical to accomplish, as it would require some heavy duty calculations and reflowing after every single annotation is revealed. It might also be confusing for the user if the reflow resulted in the clue they were revealing the anno on jumped from the bottom left to the top right. Tricky!

[viresh-ratnakar]

I'm indeed interested in implementing the newspaper-like layout that you've described (and I think it's doable using css columns). But that would be a significant effort, so not sure when I will be able to get to it.

BTW, you can also try the clues-panel-lines exolve-option (https://github.com/viresh-ratnakar/exolve/blob/master/README.md#exolve-option) to limit the height of the across/down clue panels (scroll bars will appear if needed). I for one am not a big fan of that look, but ymmv.

[viresh-ratnakar]

Maybe clues-panel-lines:20 can work for you. 20 lines is enough that the scroll bars will not show up for just the clues—only when some annos are revealed will the scroll bars show up.

[Antagony1060]

Heh, you like a challenge don't you? Typesetter flow would be the most efficient use of available space, but I don't envy you the task of making it work. :\^)

As for the clues-panel-height option: I don't mind the scrollbars when the clue blocks are stacked vertically to the right of the grid, but I'm not so keen on them when they're stacked horizontally, and I really don't like them – in fact, I can't see their point – when they're stacked underneath the grid. Could you perhaps add an option that only applies to specified layouts?

[viresh-ratnakar]

Unfortunately, I can't think of any simple way of making the scrollbars only appear if the clues panel is not underneath the grid. Note that users can resize their windows, and afaik there aren't any css rules that kick in depending on the current relative layout, so I would have to add code to monitor the layout, and that seems like unwarranted complexity.

BTW, I agree that scrollbars are unnecessary when the clues panels are underneath the grid, in general—except for the corner case of a web page stacking multiple crosswords within it.

[viresh-ratnakar]

Ah, with CSS columns, newspaper-like columnar layout turned out to be not that difficult! I've now added the exolve-option columnar-layout to enable it, with v1.03. I've also made 2-column-newspaper-like layout the default when printing. Detailed CHANGELOG pasted below.

I did change the CSS a bit, and I half-expect/worry that some custom styling of yours may break, so please look out for that and let me know.

Version: Exolve v1.03 February 3 2021

• Reduce a bit of vertical spacing. Make some fonts (such as in the Tools/Report Bug/... line) smaller. The goal was to avoid the appearance of a vertical scrollbar for a basic 15x15 puzzle without a preamble, in a normal (i.e., mine!) laptop screen with width > about 1900px and height > about 975px.
• Printing (using the browser's "Print" command or ctrl-P) now lays out the puzzle in a newspaper-like 2-column layout. The across clues panel starts out in the left panel itself, under the grid, and the two columns are of roughly equal height. This is done using CSS "column" layout.
• Add a new option, columnar-layout. When this option is specified, we render the puzzle in a newspaper-like columnar layout, using CSS "column"s (like in the printing layout described above). The number of columns is determined by the current width of the viewport (we assume that all of it is available to the crossword) and is adjusted if the window is resized. The number of columns can only be one of the following: 1 (which is the same as what we get without the columnar-layout option, when the available width is too small), 2, or 3.
• In the clues-panel-lines option, set style.maxHeight, not style.height.

[Antagony1060]

Wow, that was unexpectedly quick!

I'm just trying it out locally at the moment and as far as I can tell our custom CCS is fine.

Apart from one minor issue, it seems to work great in Chrome, but not in Firefox unfortunately, where the across clues aren't getting split. The minor issue, which I noticed while revealing clues individually, is that the split can occur in the middle of the anno. Would it be possible to keep whole clue/anno blocks complete?

[viresh-ratnakar]

The splitting withing a clue/anno thing was very easy to fix with a small tweak. I've made the change in the exolve-m.css file and have checked it in (without making a full new version). Thanks for the catch!

I'll try to look at Firefox later.

[Antagony1060]

That's fixed the split clue issue nicely, thanks!

[viresh-ratnakar]

A little research shows that support for columns is known to be quite patchy in Firefox, at the moment. The no-column-breaks within clues/headings features too do not currently work in Firefox. But the CSS standard already includes these things, so hopefully Firefox support will come about, eventually.

We can close this issue unless you find some follow-up niggles, and follow up with new issues as needed.

[Antagony1060]

That's a bummer. In my experience waiting for Mozilla to fix their issues can be rather like waiting for Godot!

As it happens, there are a couple more issues I spotted while experimenting with our AOTW grid 12:

• Before any annos are shown the xlv1-across-label div appears underneath the grid, but none of the clues do. Would it be possible to move it to the right column if no clues will be under it, or ensure at least one clue is shown under it when it's on the left?
• This is a weird one: while revealing the anno one clue at a time from the top, at clue 13a all of the across clues jumped to the left column. I kept revealing clues and they split again at 17a then unsplit again at 2d, 5d, and 7d. Suspecting my additions.js may be causing it somehow I removed that ref and tried again, but it still did it, albeit much later (at 2d).

[viresh-ratnakar]

I've pushed another small unversioned update to exolve-m.css to fix the first issue. PTAL.

As for the second: unfortunately I don't see a good way out. The way they do multi-column layout is this: Try to keep the columns at equal heights, to whatever extent possible, given the constraints on where you are not allowed to break columns (in our case, inside the grid/small-print, inside and after clue panel labels). So, if at some point this forced you to put no clues in the first column and keep all in the second, it's completely possible that as you reveal annos, the length of the second column becomes long enough that a "more equal" division is possible by moving some of the early clues to the first column. And as you keep revealing annos, the "roughly equal split given the constraints" algorithm can legitimately show the behaviour that you describe.

[Antagony1060]

I've replaced exolve-m.css with your tweaked version, but I'm afraid it doesn't seem to have fixed the issue in Chrome for Windows:

But before you start trying to fix that, on my behalf at least, I think the issues with the columnar layout may be making it not worth the effort presently. Certainly I'm reluctant to use it while its behaviour is wayward in Firefox – which is my own browser of choice – and while it's quirky even in Chrome and Edge. So I'm currently mulling over whether to just stick with the standard layout or use the clues-panel-lines option you suggested earlier, both of which have pros and cons as we've already discussed.

[viresh-ratnakar]

Yeah, as long as your exolve-m.css file has these lines:

.xlv-clues-label {
  font-weight: bold;
  padding: 0 0 4px 0;
  break-inside: avoid;
  break-after: avoid;
}

there's not much more that I can do. I guess the layout algorithm found the balanced height across the two columns so compelling that it ignored the break-after: avoid; injunction.

I've added a caveat in the README file (pasted below), and will leave it at that for now. I myself don't plan to use columnar-layout generally, but am happy that this whole exercise also led to me adding code for 2-column printing.

• columnar-layout If this option is specified, then puzzle is rendered in a newspaper-like columnar layout, using CSS "column"s. The number of columns is determined by the current width of the viewport (we assume that all of it is available to the crossword) and is adjusted if the window is resized. The number of columns can only be one of the following: 1 (which is the same as what we get without the columnar-layout option, when the available width is too small), 2, or 3. As of February 2021, columnar layout is quirky: Chrome supports it best, but all browsers seem to have some peculiarities.

[Antagony1060]

Fair enough. I'm glad it hasn't been a complete waste of time for you. I've had the misfortune of dealing with CSS a couple of times in the past – nothing as complex as this, mind – and of all the coding I've dabbled with it was by far the most frustrating. Magic numbers all over the place and nothing ever behaving quite as expected. Ugh!

Anyway, thanks for all your efforts, I'll close this topic for now…

[Antagony1060]

Sorry to reopen this so soon, but I've had another thought for you to consider:

I played around with the clue-panel-lines option and while a setting of 13 looks fine within two columns, it looks silly within three and, as I said before, it seems unnecessary within one. So I really don't want to use that option. But standard layout leaves 2 column mode – which I suspect the majority of desktop users will experience – being awkwardly unbalanced after annos are revealed. It occurred to me that the old layout with the grid centred above the clue blocks looked better and generally used less vertical space on the page (after full anno reveal). So I was wondering, would it be possible to provide that old layout as an option? I realise it's less elegant than having three columns in wider windows, but I think I could still live with that more than the current choices.

[viresh-ratnakar]

I've pushed another un-versioned update to exolve-m.css (it was a tiny tweak).

In 2-column mode, we now go back to the original behaviour of rendering the clues under the grid.

I did not add the complexity of options etc. as I for one am mostly looking at 3-column mode (on my laptop) and 1-column mode (on my phone), and do not have much of my own opinion on what's better for two columns (except for printing), so am happy to simply trust your preference.

[Antagony1060]

Oh well that's even better. I would have suggested that myself, but I thought it might be another all-or-nothing situation like the scrollbars.

Hehe, it seems like after all of this we're kind of back to where we started! Albeit with a nice horizontal layout in windows wide enough for three columns, and an option for a newspaper style layout which would be very nice if the CSS ever gets fixed in the future.

Thanks for all your efforts. I'll close the issue again.