Wandering Thoughts archives

2023-04-04

How to get a bigger font for Firefox's preview of link targets (sort of)

If you hover the mouse over a link in Firefox (or pretty much any other browser), the browser will show you the URL of the link target so you can see where you'll wind up if you click the link; this URL target appears down at the bottom of the page. Well, in theory, since there are a lot of things that can happen in between your click on a link and where you wind up. In Firefox, as far as I know that URL target is rendered in the browser's default user interface (UI) font and font size, which is normally your platform default. On Unix, Firefox uses GTK so this is the GTK system font default. Suppose, not hypothetically, that you would like the font of this URL target to be bigger so it's easier to read.

These days, Firefox's user interface is rendered with regular web technology of HTML and CSS (more or less, there are complications). This UI rendering can be customized through a userChrome.css file under your Firefox profile, at least if you turn on the special 'toolkit.legacyUserProfileCustomizations.stylesheets' preference. So in theory what you need to do is to find the CSS class or identifier for the URL target and then add some userChrome.css CSS to set the font size (or increase it).

For regular static UI elements that can be made to be always present, you can use Firefox's Browser Toolbox to introspect Firefox's UI HTML and CSS to determine the CSS information you need. For example, it's easy to discover that the URL bar's 'star' button to bookmark things has the CSS ID '#star-button-box' (or '#star-button' for the actual image). However, the link preview is a dynamic element; it appears only when you hover the mouse over a link, and so as far as I know there's no way to use the Browser Toolbox to pull out its details. Nor have I been able to work out what the relevant CSS ID or classes are from poking through the Firefox source code a bit.

(I would love to find a way of exploring such dynamic elements in the Browser Toolbox. Possibly there already is such a way, as I don't know my way around Firefox's developer and browser toolbox very well. It's not "Disable Popup Auto-Hide", though; the link target preview doesn't count as a popup, reasonably.)

However, you can use userChrome.css to increase the font size for the entire UI. I got my version of this from the Arch Wiki's Firefox Tweaks "change the interface font" section. My current version is:

* { font-size: 11pt; }

Possibly this is a sign that I should increase the default UI font size in GTK as a whole, but figuring out how to do that in my eccentric X environment is too much work right now.

(My current userChrome also has a XUL namespace declaration, but the Arch Wiki examples don't and since XUL Layout is gone, I suspect it's not necessary.)

PS: You can use the Browser Toolbox to shim in a font-size setting in order to try this out and figure out what size you want. This will work for the link target preview as well as regular UI elements. And you could probably fine-tune the CSS selector to exclude big ticket UI elements you didn't want to size up too much, such as tab titles.

web/FirefoxBiggerTargetURLFont written at 22:32:24;


Page tools: See As Normal.
Search:
Login: Password:

This dinky wiki is brought to you by the Insane Hackers Guild, Python sub-branch.