I'm writing a CSS book

JavaScript archives Compatibility CSS coaching Thidrekssaga QuirksBlog Donations Politics Mobile About COH

sitemapcontact

Notes on the web, take 2

Today I updated the Thidrekssaga mini site with a first attempt at a decent mobile view. I also did some work on the mobile view for the notes, and I’m asking for a quick review.

As I discussed two weeks ago I want the notes to my texts to be visible at all times in order to emulate the footnote experience in books. I was worried about mobile devices, since with their narrow screens there is not much space to show both the main text and the notes.

I was afraid I’d have to show the notes under the paragraph they belong to, but today I figured out a way to avoid that and keep them in the margin. My question is if this system is good enough.

Chapter 352 is a good test since it contains a lot of notes in a single paragraph. So please go to that chapter on a mobile phone of your choice and try to access the notes.

Principles:

1. Although it is impossible to show the full notes on narrow mobile screens, I want to show at least a little bit of them so that users know there are notes.
2. When touching/clicking the notes they should not only be highlighted, but also scroll into view for easy reading. This is the bit of interaction I’d particularly like feedback on. Good idea or bad? If bad, why?

The notes are still positioned absolutely, and thay may mean they cover one another. The feedback to my previous article convinced me that this needs to be changed, but I haven’t actually done so yet. So please do not comment on this problem. I have a vague idea what to do, but that was predicated on the idea that I had to show the notes below the paragraphs on mobile. If that turns out to be unnecessary I will have to revise my idea. (Also, it would require some serious grid magic.)

On my iPad with iOS 14.1, Safari refuses to scroll smoothly to the notes. Apparently it does not support the behavior: 'smooth' option of scrollIntoView(). That surprises me a bit, since usually Apple is gung ho on smooth animations and behaviours. I assume there’s a performance problem in extreme scenarios. A quick search for alternative syntax or something yielded nothing.

Technical details

Technically it’s quite simple. I added the meta viewport and a single simple body rule that does away with most of the left margin but adds a fat padding-right.

@media all and (max-width: 850px) {
	body {
		margin-left: 1em;
		padding-right: 2em;
	}
}

The padding-right makes the paragraphs contained in the body somewhat less than 100% wode. Since the notes are positioned relative to the paragraphs, they, too, are drawn leftward, and that makes them just barely visible on the right edge of small screens — enough to alert the user they’re there, or so I hope.

One drawback of this fat padding on the body is that when the user double-taps on a paragraph of main text the browser zooms in to the width of the paragraph, and not the body. This may mean the notes are not visible any more. I’m not yet sure what to do about this, or, indeed, whether to do anything at all.

e.target.ref.scrollIntoView({
	behavior: 'smooth',
	block: 'nearest',
	inline: 'end',
});

A simple scrollIntoView(), called onclick, delivers the finishing touch. This makes the browser scroll to the note or back to the marker if necessary; and if it’s not necessary nothing happens.

• behavior: 'smooth': scroll smoothly. Doesn’t work on iOS.
• block: 'nearest': don’t scroll in the block direction (i.e. up or down) unless required — and it should never be required. I don’t fully understand this option yet, but it does what I want.
• inline: 'end': in the inline direction (i.e. left to right), scroll to the very end (the right). This makes the note scroll fully into view, and markers are also scrolled as much to the right as possible, which effectively means the main tex column is fully in view.