Following on from:
Now let’s look at how to achieve various layout designs. These are all responsive, so to see how they work, download the attached folder and open sn1.1-new.html in your browser.
sc-ux.zip (12.8 KB)
Caveats
- This is about the segmented texts only, I have no idea if anything will apply to legacy texts.
- I will discuss the tooltip in another thread.
- See here for the distinction between “main” and other references. (Note: not visible in latest design)
- This about page layout, not UI, the buttons are only there to help showcase possible layouts.
- The CSS is obviously not production-ready, nevertheless it uses SC styles for the most part. It should be refactored to apply per function, not per page.
Basic concepts
- Typography remains similar to currently.
- As now, the default view is a single language.
- Comments and Variant readings (collectively, “notes”) are available via tooltip by default.
- User may enable references.
- Design of reference “chips” is the same regardless of position (unlike currently)
- The views labelled “Plus” show the Notes.
- These are in the margin where there is enough room, otherwise inline.
- Notes in margin may overlap. In this case, click to raise an obscured Note.
- Side by side plus view makes great use of a wide screen.
- One change in the typography is that verses are now indented rather than centered. It keeps things simpler.
- In “Plus” views, each segment is on a new line.
- Unlike current site, segment lines are not vertically separated. Thus you get a better picture of the paragraphs. Each view is optimized for best vertical layout.
- Notes have icons + color to differentiate them.
- Current ability to show Pali segments with tooltip is removed. (Not the Pali lookup!)
How?
The secret sauce is CSS Grids. These didn’t exist when we did the original layout, and even when we made the revised site they were just starting to get mainstream. However they have 93% browser support these days.
Grids are an extremely powerful layout tool, as they let you declaratively assign elements to grid columns and rows. So we can simply use CSS to tell the page how many columns, what goes in which column, and how wide it should be.
UI
For the UI, I envisage letting the user select:
- SC references show/hide
- Legacy references show/hide
- Notes show/hide
- Plain / Side by side / Line by line
To-do
The overlapping notes are my main concern. Essentially this arises because they must be made position:absolute
so that they can span multiple rows, otherwise long notes would force the grid to have big empty spaces.
One thing that should be done, when clicking it raises the note, but this should be sticky, which is not possible in CSS and must be done in JS.
More complicated, and probably best left for now, I wonder if we can use JS to detect a collision between two absolutely-positioned notes, and cut short the upper note, leaving, say, a jagged edge to indicate it has been truncated. Then click would raise and reveal the whole note.
Icons must be done properly, this is just for demo.
Apart from that, the main thing is just to test them in a wide variety of texts.