User:Inductiveload/sidenotes
Appearance
Sidenotes are a bit of a mess.
Stats
[edit]- {{sidenotes begin}}: 21787
- 505 pages set the first parameter (text width), between 16 works
- {{left sidenote}}: 7730
- {{right sidenote}}: 7731
- {{LR sidenote}}: 678
- {{RL sidenote}}: 2303
- {{Outside}}: 267
- {{Outside2}}: 53
- {{outside L}}: 1516
- Defers to {{left sidenote}} in Page:
- Defers to {{Outside}} elsewhere
- {{outside R}}: 1516
- Defers to {{right sidenote}} in Page:
- Defers to {{Outside2}} elsewhere
- {{outside RL}}: 1197
- Defers to {{right sidenote}} in Page:
- Defers to {{Outside}} elsewhere
- {{outside RL}}: 1197
- Defers to {{left sidenote}} in Page:
- Defers to {{Outside R}} elsewhere
- {{Overfloat left}}: 1323
- {{overfloat right}}: 372
- {{USStatSidenote}}: 2302
This one actually works rather well, though still not great in ebooks:
- {{sidebox}}: 253
Issues to address
[edit]- No line-height/alignment in Page namespace
- Do not work in some ebook readers (seem OK in Calibre and MoonReader+ in Webkit mode)
- Simplify the CSS that's spread all around the place
- Probably most outside templates can be replaced with sidenotes. Outside does not work well on mobile: phab:F34530320
Done
[edit]- Fixed width in Page namespace
- {{sidenotes begin}} now is flexible with page width: diff
- Why is the default for {{sidenotes begin}} 11em, but MediaWiki:Gadget-Site.css hardcodes the notes to be 6em? This is wasting up to 10em of space per page.
- More flexible at least via diff and the use of templateStyles
Technical notes
[edit]- {{sidenotes begin}} only needed in Page namespace, in Main namespace, dynamic layouts deal with it it, using CSS and JS from MediaWiki:PageNumbers.js.
- {{left sidenote}} and {{right sidenote}} apply classes:
sidenoteRight
andsidenoteLeft
in Page. CSS for these comes from Template:Left sidenote/styles.css and Template:Right sidenote/styles.css. Why do we need different class names? You can already select based on namespace with CSS.sidenote-right
andsidenote-left
elsewhere, which is where the layout CSS hooks in.