Language Page Columns not flowing right on Safari

[librasteve]

Problem or new feature

https://docs.raku.org/language

The left and right columns on this page are not flowing well

the left column is (i) at the beginning (4 items) (ii) migration guides (~10 items), (iii) Tutorials (~20 items), (v) Fundamental Topics (~30 items) the right column is (i) General reference (~10 items) and (ii) Experimental features (1 item) so ~64 items on the left and 11 on the right is not exactly cut in half

Suggestions

Please fix the column flow to balance the content (it is fine in Chrome)

If applicable, suggest something towards the solution.

[finanalyst]

@librasteve @coke This is a known problem. It is much worse on the Programs page, for which there is an issue.

The base problem arise because the entries for each category are generated from the pages in the website (which is not fixed in general), and so the question is how to distribute entries between columns when there is a large category at the bottom of a column.

We looked at keeping all categories together in the same column, but that leads to lots of white space in one column.

Breaking the last category into two columns looks better, but fixing the CSS so that the top and bottom lines of the last entry and first entry of the next column look good is not trivial. There should be a way to do it with CSS, but I postponed the issue to work on other urgent tasks (eg. search).

Another issue has suggested breaking the 'Language' page so that it contains fewer categories. This would allow for only one column per page. Personally, I would prefer this solution as tablet and mobile versions should only have one column anyway. It would be easy to implement, once there is consensus on how to redistribute the Language page.

For example, we could split the 'Tutorials' and 'Transition type' categories into one page, and 'Reference' and others into another page. We could also move some category into the Programs page. There are other ideas, but that is another issue.

[librasteve]

imo splitting into two pages on the lines you propose would be best (as there are very many items on the page at the moment) - but I'm happy to go with anything practical and easy

not sure if you are using bootstrap - otherwise css .grid may be handy for this https://css-tricks.com/snippets/css/complete-guide-grid/#aa-fluid-columns-snippet

[finanalyst]

@librasteve FYI This site uses the BULMA framework, which is pure CSS.

[finanalyst]

@librasteve Please look at test site where a different HTML/CSS scheme is used. Also the content has been re-distributed. Please close the issue if the patch addresses it

[librasteve]

Hi @finanalyst - I have to open this link, but just get a "No results matched your search." result. ;-(

[finanalyst]

@librasteve my bad: I forgot to add the 'https://' to the url in MarkDown. Try test-site

[librasteve]

@finanalyst - that works now thanks! It is a big improvement!!

I tried Safari and Chrome.

One small thing is that the last line on the left column is the header Tutorials - on my MacBook Air in full screen. It would read better if the header was somehow "no column break" attached to the first content item (or maybe just 20-40px of section gap)

Appreciate the improvements!!

[finanalyst]

@librasteve getting this to work took about a week of my time (I have other things to deal with :) ), so I would appreciate some help. There is a column-break: avoid, but how it works with all the other elements is the tedious part. Also it is a part of the CSS that is not available in all browsers.

[finanalyst]

@librasteve I just thought how we could achieve this by slightly altering the HTML. I'm thinking of rendering the header as part of the first div, rather than as a separate div. Then the browser would not split the header and the first div because break-inside: avoid is respected by all browsers. I'll try that.

[finanalyst]

closing as resolved