diff options
| -rw-r--r-- | content/posts/2021-10-08-sane-scrollbar.md | 135 | ||||
| -rw-r--r-- | static/images/scrollbar-badwolf.png | bin | 0 -> 2658 bytes | |||
| -rw-r--r-- | static/images/scrollbar-firefox.png | bin | 0 -> 2860 bytes | |||
| -rw-r--r-- | static/images/scrollbar-libreoffice.png | bin | 0 -> 6186 bytes | |||
| -rw-r--r-- | static/images/scrollbar-mastodon-1.png | bin | 0 -> 9313 bytes | |||
| -rw-r--r-- | static/images/scrollbar-mastodon-2.png | bin | 0 -> 1956 bytes |
6 files changed, 135 insertions, 0 deletions
diff --git a/content/posts/2021-10-08-sane-scrollbar.md b/content/posts/2021-10-08-sane-scrollbar.md new file mode 100644 index 0000000..e8c5ba8 --- /dev/null +++ b/content/posts/2021-10-08-sane-scrollbar.md @@ -0,0 +1,135 @@ +--- +title: "How NOT to mess with the scroll bar" +date: 2021-10-08 +lang: en +categories: [ blog, rant ] +tags: [ ux, usability, scrollbar ] +translationKey: "sane-scrollbar" +--- + +Be prepared to use your scrollbar a lot, since it's topical 😉[^0]. + +## GTK custom styling + +Recently, I've tried [BadWolf][badwolf], a browser written by someone I found +on the Fedi. It's quite amazing if you are interested minimalism---the memory +footprint is very small, even smaller than qutebrowser, a quite well-known +minimal web browser. I've packaged it on [openSUSE][os-wolf] thanks to +<abbr title="Open Build Service">OBS</abbr>. That being said, its feature is +quite limited---bookmarks and history, for examples, are not quite +well-supported. + +[badwolf]: https://hacktivis.me/projects/badwolf +[os-wolf]: https://software.opensuse.org/package/badwolf + +But I digressed. I brought up BadWolf not because it is great (should I rather +say, small), but because by using it, I now know how to configure GTK window +styling with <abbr title="Cascade StyleSheet">CSS</abbr>. On a Unix-like +system, this <abbr>CSS</abbr> file would be located at +`$HOME/.config/gtk-3.0/gtk.css`. I configure my scrollbar like this: + +```css +scrollbar, scrollbar slider { + min-width: 10px; + min-height: 20px; +} + +scrollbar { + background: #111; +} + +scrollbar slider { + background: lightblue; +} + +scrollbar slider:hover { + background: lightgreen; +} +``` + +The default GTK scrollbar is way too small, so I enlarge it to at least 10 +pixels to make it more clickable. The default scrollbar is like grey on... +darker grey? That's not very contrast, so I make it light blue on dark grey +background to be more visible. Additionally, it turns green to let me know my +mouse is at the right place when I need to scroll. +Additionally, I also set `GTK_OVERLAY_SCROLLING=0` so that it doesn't disappear +when I don't hover on it. (Yes, I have a very peculiar expectation.) + + + +## The troublemakers + +And then here comes the developers who decided to mess with the scrollbar: it +now looks ugly at best and unusable at worst. GTK unfortunately doesn't have +`!important` in its CSS to disallow these overriding. + +### Firefox + +So when I go back to Firefox, I'm slightly disapointed to see that it does not +follow my <abbr>CSS</abbr>: the scrollbar is smaller than 10 pixels: + + + +Well, at least it's still clickable somewhat, I guess. I've seen smaller bars. + +### LibreOffice + +On the opposite side, LibreOffice's scrollbar is just way too large: + + + +I haven't looked at the source for LibreOffice, but it seems they even increase +the scrollbar size to be way too large. This doesn't make it less usable by +any mean, but it's an eyesore for me. + +### Mastodon + +Who knows that it's not only the apps, but also the websites who are not +supposed to modify *our* software, can style the scrollbar to our dismay? As +much as I like Fediverse, this scrollbar is the thing I like the least: + + + +Just by looking at this, do you know which part is the slider (the thing you +hold on to scroll)? That's why we have margin and border. Please don't change +this! + +But well, what's worse is that... + + + +I just hover the slider and it's **GONE**. + +Note that this is done on BadWolf. On Firefox, thanks to them messing with the +scrollbar, the problem just stops at the contrast. + +## Stylus to the rescue + +Earlier, I have given a [shoutout][post-stylus] to [Stylus][stylus]. I'd like +to give a shoutout again: Thanks Stylus for protecting me from these websites +who like to mess with my scrollbar! I have a custom style named "No one dares +override my GTK config" which is like this: + +```css +html { + scrollbar-color: inherit !important; + scrollbar-width: inherit !important; +} +``` + +Of course, this can't change Firefox's or LibreOffice's modification, but now +I'm at peace knowing that websites can no longer tamper with my scrollbar. 🙂 + +[post-stylus]: /posts/2021-05-30-css-stylus/ +[stylus]: https://addons.mozilla.org/en-US/firefox/addon/styl-us/ + +[^0]: I know you can use the mouse scroller, but if you're like me and have a + mouse that sucks, using the scroller is quite painful by itself. + On related note, I've finalized a [JavaScript script][gen-index] that helps + generating index from heading, thanks to a [discussion on Fosstodon][dis]. + You may find scrolling with headings easier using this script. + +[gen-index]: https://github.com/Huy-Ngo/generate-index +[dis]: https://fosstodon.org/@huy_ngo/106930129214709390 diff --git a/static/images/scrollbar-badwolf.png b/static/images/scrollbar-badwolf.png new file mode 100644 index 0000000..c8f0a63 --- /dev/null +++ b/static/images/scrollbar-badwolf.png Binary files differdiff --git a/static/images/scrollbar-firefox.png b/static/images/scrollbar-firefox.png new file mode 100644 index 0000000..3d39137 --- /dev/null +++ b/static/images/scrollbar-firefox.png Binary files differdiff --git a/static/images/scrollbar-libreoffice.png b/static/images/scrollbar-libreoffice.png new file mode 100644 index 0000000..21607ae --- /dev/null +++ b/static/images/scrollbar-libreoffice.png Binary files differdiff --git a/static/images/scrollbar-mastodon-1.png b/static/images/scrollbar-mastodon-1.png new file mode 100644 index 0000000..4c266dc --- /dev/null +++ b/static/images/scrollbar-mastodon-1.png Binary files differdiff --git a/static/images/scrollbar-mastodon-2.png b/static/images/scrollbar-mastodon-2.png new file mode 100644 index 0000000..3b5eda6 --- /dev/null +++ b/static/images/scrollbar-mastodon-2.png Binary files differ |
