Shallow Thoughts

Setting "cursive" and "fantasy" in Firefox: two methods

I'm taking a CSS class, hoping to get a more solid understanding of these CSS parameters I tweak and why they do or don't work, and one of the exercises involved using the CSS font family "cursive". Which, on my Firefox, displayed in MS Comic Sans. That doesn't look very cursive to me!

To test what you're seeing now for cursive and fantasy, use the W3C font-family test page ... or these might work (though they might not survive RSS feeds to other sites):

This is a Cursive font ... ... This is a Fantasy font

Being a font junkie, I have plenty of nice cursive fonts installed. The question was how to tell Firefox about them, since its font dialog (unlike the old Seamonkey/Mozilla suite's) doesn't make any allowance for setting them, nor do the categories show up in about:config.

Method 1: Firefox prefs

The answer was in this Mozillazine thread. Edit user.js in your Firefox profile and add lines like:

// Set cursive and fantasy fonts
user_pref("font.name.cursive.x-western", "Allegro");
user_pref("font.name.fantasy.x-western", "Dragonwick");

(of course, use fonts you have installed, not necessarily Allegro and Dragonwick).

The bug (marked WONTFIX) requesting Firefox offer this in the Preferences window is bug 196405, and related bug 61883.

Method 2: fontconfig

But wait! Soon after I figured out how to set the font family for Firefox, I noticed that the font was still MS Comic Sans in other browsers -- konqueror, midori, opera. It occurred to me that that Comic Sans cursive was probably coming from fontconfig settings, and it should be possible to change fontconfig's defaults for these categories.

And indeed it was, and fairly simple, too. Just make a file named .fonts.conf in your home directory and add this to it:

<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
  <alias>
    <family>cursive</family>
    <prefer>
      <family>Allegro</family>
    </prefer>
  </alias>
  <alias>
    <family>fantasy</family>
    <prefer>
      <family>BoomerangItalic</family>
    </prefer>
  </alias>
</fontconfig>

Again, substitute your own fonts ... but beware. The hard part of this exercise turned out to be that some fonts worked and some didn't, following no rhyme or reason. My first five choices for a fantasy font weren't picked up by fontconfig, but finally I found a few that were. It isn't related to whether they have spaces in the font name; it isn't where they're installed (I was using only fonts in ~/.fonts); I have no idea why some fonts work in ~/.fonts.conf and others don't.

It's rather tedious to test, since the only way to test it is to exit and re-start firefox. I've never found a font viewer that will display the fonts visible to fontconfig or pango; you have to start up some full-fledged application like firefox or gimp, and gimp doesn't see categories like cursive or fantasy.

In the end I did find fonts that worked in firefox. But ironically, although the system-level fix seems like a better way to go, my font changes still don't show up in other browsers. In opera, cursive shows up in bold block letters, while its fantasy is MS Comic Sans. Konqeror and Midori don't handle cursive and fantasy at all, showing them as plain sans-serif. And in IE6 running under wine, cursive still shows up as MS Comic Sans ... while fantasy displays in Greek letters.

Tags: mozilla, firefox, fonts, css
[ 20:30 Apr 13, 2009    More tech/web | permalink to this entry ]

Making Firefox 3 livable

I finally broke down and spent the time to get Firefox 3 working properly for me ... meaning, mostly, finding replacement extensions for the bare minimum of what I need in a browser: control over cookies (specifically, enabling/disabling them for specific sites), flashblock, and blocking of animated images. I'd downloaded extensions for all those a few weeks ago, but I found that although Firefox 3.0 said the FF3 extensions were active, and Firefox 2 said the old ones were, neither set actually worked.

I decided to start from scratch: remove all extensions -- rm -rf .mozilla/firefox/extensions/* .mozilla/firefox/extensions.* plus apt-get remove firefox-2-dom-inspector -- then install a new set of Firefox 3 add-ons.

After much hunting (I sure wish addons.mozilla.org would offer a way to limit the view to only extensions that work with Firefox 3! Combing through 15 pages of extensions looking for the handful that will actually install gets old fast) I found the replacements I needed: CS Lite for the cookie controls, a newer Flashblock, and Custom Toolbar Buttons as a stopgap for image animation (though I suspect updating anidisable will be a better solution in the long run). This time, with the old firefox 2 extensions purged, the new ones took hold and worked.

I also added a nice extension called OpenBook that fixes the horrible Firefox "Add bookmark" dialog. You know: the one that has two nearly identical dropdown category menus side by side, with the bigger one giving you only a tiny subset of your bookmark categories, and the smaller one being the real one. The one that doesn't offer a space for keyword, so to set up a bookmarklet you have to Add Bookmark, OK, Organize Bookmarks, find the bookmark you just added, Ctrl-I to get the Bookmark info dialog, and finally you can add your keyword. OpenBook gives you a dialog where you can set the keyword to begin with, and it only gives you one menu to list categories so you aren't constantly tempted to click on the wrong one.

Now for the urlbar -- that new firefox 3 "smarter" urlbar that slows down typing in the middle of a word so it can pop up a big fancy window full of guesses (all wrong) about where I might be trying to go. Actually, even if the guesses were right, it wouldn't help, because I'd have to stop typing, search the list visually, then if one of the suggestions was right, move my hand to the mouse or the arrow keys to choose that suggestion. That takes way longer than just typing the url.

But I guess I don't mind unhelpful suggestions popping up as long as it doesn't mess up focus (preventing me from clicking or tabbing to other apps on my screen) or slow down typing. Firefox 3 seems to be handling the focus issue better than firefox 2 did, but the slowdown was quite noticeable on the poor old laptop. So I wanted a way to disable the behavior. A little googling revealed that the Firefox crew immodestly calls their new urlbar the "awesomebar", which aside from giggle factor also proves quite useful in googling: a search on firefox disable awesomebar reveals that I'm not the only one who doesn't like it, and got me several preferences I could tweak in about:config plus a couple of extensions to turn it off entirely. I won't try to summarize, since the best settings depend on your machine's spec, plus personal preference.

Making progress! Now the only issue was getting my urlbar tweaks working, so that typing <Ctrl-Return> after typing a URL opened the URL in a new tab instead of tacking on various silly extensions (oh, yes, of course I wanted to go to http://www.firefox disable awesomebar.com rather than googling for those terms in a new tab). Fortunately, it turned out that the javascript that runs the urlbar has changed very little since firefox 2, and I hardly needed to change anything to get my kitfox extension (v. 0.2) working in Firefox 3.

Only one more issue: this blog. The CSS that handles the right sidebar wasn't displaying right. Seems that Firefox 2 has changed something about its interpretation of CSS, so it was floating the right sidebar way down to the bottom of the page below the last content line. Eventually (after adding firefox-3.0-dom-inspector, another extension that had stopped working in the transition) I discovered the problem: the #content was set to width: 77% while the #rightsidebar's left-margin was at 76%. Apparently Firefox 2 rounded up as needed, whereas Firefox 3 just ignores the left-margin if it would overlap the content, and then floats the sidebar anywhere it thinks it can fit it. Fixing those percentages helped quite a bit, and I added an overflow-x: hidden (on a tip from a helpful person in #firefox) so that wide calendar doesn't hurt layout for narrow windows. I think it's working now ... any readers having problems with the layout in any browser, by all means let me know.

Tags: mozilla, firefox, user interface, css, bookmarklets
[ 11:04 Jul 04, 2008    More tech/web | permalink to this entry ]

Wrapping plaintext files in Firefox

A friend pointed me to a story she'd written. It was online as a .txt file. Unfortunately, it had no line breaks, and Firefox presented it with a horizontal scrollbar and no option to wrap the text to fit in the browser window.

But I was sure that was a long-solved problem -- surely there must be a userContent.css rule or a bookmarklet to handle text with long lines. The trick was to come up with the right Google query. Like this one: firefox OR mozilla wrap text userContent OR bookmarklet

I settled on the simple CSS rule from Tero Karvinen's page on Making preformated <pre> text wrap in CSS3, Mozilla, Opera and IE:

pre {
 white-space: -moz-pre-wrap !important;
}

Add it to chrome/userContent.css and you're done.

But some people might prefer not to apply the rule to all text. If you'd prefer a rule that can be applied at will, a bookmarklet would be better. Like the word wrap bookmarklet from Return of the Sasquatch or the one from Jesse Ruderman's Bookmarklets for Zapping Annoyances collection.

Tags: tech, web, mozilla, firefox, css, bookmarklets
[ 10:47 Apr 08, 2008    More tech/web | permalink to this entry ]

Make Amazon pages narrow enough to read

I like buying from Amazon, but it's gotten a lot more difficult since they changed their web page design to assume super-wide browser windows. On the browser sizes I tend to use, even if I scroll right I can't read the reviews of books, because the content itself is wider than my browser window. Really, what's up with the current craze of insisting that everyone upgrade their screen sizes then run browser windows maximized?

(I'd give a lot for a browser that had the concept of "just show me the page in the space I have". Opera has made some progress on this and if they got it really working it might even entice me away from Firefox, despite my preference for open source and my investment in Mozilla technology ... but so far it isn't better enough to justify a switch.)

I keep meaning to try the greasemonkey extension, but still haven't gotten around to it. Today, I had a little time, so I googled to see if anyone had already written a greasemonkey script to make Amazon readable. I couldn't find one, but I did find a page from last October trying to fix a similar problem on another website, which mentioned difficulties in keeping scripts working under greasemonkey, and offered a Javascript bookmarklet with similar functionality.

Now we're talking! A bookmarklet sounds a lot simpler and more secure than learning how to program Greasemonkey. So I grabbed the bookmarklet, a copy of an Amazon page, and my trusty DOM Inspector window and set about figuring out how to make Amazon fit in my window.

It didn't take long to realize that what I needed was CSS, not Javascript. Which is potentially a lot easier: "all" I needed to do was find the right CSS rules to put in userContent.css. "All" is in quotes because getting CSS to do anything is seldom a trivial task.

But after way too much fiddling, I did finally come up with a rule to get Amazon's Editorial Reviews to fit. Put this in chrome/userContent.css inside your Firefox profile directory (if you don't know where your profile directory is, search your disk for a file called prefs.js):

div#productDescription div.content { max-width: 90% !important; }

You can replace that 90% with a pixel measurement, like 770px, or with a different percentage.

I spent quite a long time trying to get the user reviews (a table with two columns) to fit as well, without success. I was trying things like:

#customerReviews > div.content > table > tbody > tr > td { max-width: 300px; min-width: 10px !important; }
div#customerReviews > div.content > table { margin-right: 110px !important; }

but nothing worked, and some of it (like the latter of those two lines) actually interfered with the div.content rule for reasons I still don't understand. (If any of you CSS gurus want to enlighten me, or suggest a better or more complete solution, or solutions that work with other web pages, I'm all ears!)

I'll try for a more complete solution some other time, but for now, I'm spending my July 4th celebrating my independance from Amazon's idea of the one true browser width.

Tags: tech, web, css, mozilla, firefox
[ 20:01 Jul 04, 2007    More tech/web | permalink to this entry ]