Currently one of SC’s killer features is the Pali or Chinese dictionary lookup. Enable it and you can hover over Pali or Chinese words on the page and get a definition.
- Touchscreens: using tooltips on touchscreen is bad. This is more than 50% of our users!
- Positioning: It’s hard to get the position right in all contexts.
- HTML title attribute is bad: this is the basic HTML way of putting a tooltip on, but it suffers severe accessibility issues and is especially poor for screenreaders. Also there is no way to style it or add functionality.
- Too much info: MD guidelines say a tooltip should have just a short message, no more than a few words. But we put whole dictionary definitions in them.
- Too much functionality: We add a link to full definitions, but this is hard to get to and not explained.
- No MWC: the MWC does not have a tooltip candidate, and even the more advanced parent project lacks it.
A better way: use MD “bottom sheet”
A bottom-sheet is similar to a tooltip in that it appears for displaying transient information. However it differs in that it is attached to the bottom of the screen, rather than floating around, and contains rich information. Typically on a mobile a bottom-sheet might fill a third of the screen or so.
(In fact it is similar to how the editing window here on Discourse works.)
We can use this to display the dictionary lookup information. This will effectively be identical to the “dictionary preview” card that is displayed at the top of search results.
This means we can reuse components.
The sheet can called by first turning the lookup on, then highlighting a word.
- Interface is the same for desktop and mobile: just highlight a word.
- Lookup only works for a single word. If user highlight many words, only look up the first one.
- The sheet should be persistent: Once activated, keep it until dismissed by the user.
User has prev/next arrows, similar to the prev/next arrows for suttas.
- The “next” arrow is conveniently located by the user’s thumb on mobiles.
- Touch target is large and static. Just keep clicking or tapping on the same spot to go through words.
- Interface is identical for desktop and touchscreen.
- Should also support keyboard navigation for desktop.
Here is a very rough initial design mockup.
- Current term is identified by both color and border
- User can click to go to relevant /define/ page for full entries. (This is currently the case on the tooltip also, so the data is already there.)
- Bottom sheet can be dismissed by swiping or clicking a down-arrow (not shown)
- Bottom sheet is full width
- There is no bottom sheet in the MWC components, nor in the parent project. So in this respect it is no better than a tooltip. So we shall either have to find another source or roll our own.
- Height of dictionary section will vary depending on entry length, we will need to consider how to handle this. Perhaps we will have to have a fixed height allowing for say three lines, then scroll to see more; however, it will not often happen that a user needs to see more.
- Currently the lookup requires inserting
<span class="word">Evam</span>on each word. On a text the size of the Mahaparinibbana Sutta, that’s a heckton of DOM! Will this still be necessary?