August 28, 2000

9:37 PM

Jason found a pretty cool javascript/CSS hackso I took a stab creating a bizarro kottke one (bookmark and try it at kottke.org). I think it improves the page :). This might be a killer hack for usability tweaking. If you set your backgrounds dark with light, 28px text for easy reading, few web pages follow that convention. Here's your chance to see things your way. Can anyone think of any other uses for this?
posted by mathowie (24 comments total)

Sounds pretty cool, but I can't seem to get it to work on my Mac with IE5.

Sigh . . . we miss out on all sorts of cool stuff - even though we do have the best browser.
posted by aladfar at 9:52 PM on August 28, 2000

wow, more screwing around produced this:

easy reading (drag to your IE toolbar or bookmark directly by right clicking)

now go to this A List Apart article and then envoke it. Easy reading indeed.

I've noticed it's far from a perfect hack. It requires that the site use stylesheets in some capacity, and it requires you to click for each and every page you want rendered this way. Yet, until the !important stylesheet handler is implemented fully, this might be a good workaround.
posted by mathowie at 9:57 PM on August 28, 2000

Agreed. Doesn't work on IE5/Mac. Doesn't seem to do anything at all, in fact.
posted by aaron at 10:20 PM on August 28, 2000

If you wanted the shiz big like that, couldn't you just set your 'view | text size' to "bigger" or "biggest"? And set your colors the way you like, overriding the document? ('tools | internet options | colors') I do here-by (sp) declare this 'hack' has no practical use. :]
posted by muffin at 11:19 PM on August 28, 2000

mathowie - I don't think there needs to be a pre-existing stylesheet - take a look at the createStyleSheet method.

Can't figure out why it's not working on Mac upon cursory testing.


posted by dweingart at 11:27 PM on August 28, 2000

cool-- now I can make almost every site i surf to from metafilter look exactly like metafilter. it's so un-meta, and yet.... so meta. i'm going crazy
posted by chaz at 12:27 AM on August 29, 2000

it would be nice to have a whole suite of these, every site should make one for itself... although in the tradition started by matt and jason, you should have to name your creation after someone else's site...
posted by chaz at 12:29 AM on August 29, 2000

just confirming that it does nothing in IE5/mac. sorry. :(
love you guys anyway.
posted by Zeldman at 12:45 AM on August 29, 2000

These are all examples of Bookmarklets.
I saw a good use (Mac compatible) quite long ago at Agitprop. Indeed it works with the createStylesheet method of the document object, pointing to a css file on a remote server.
And yes chaz, there is a whole suit of them ready to grab...
posted by pecus at 4:08 AM on August 29, 2000

Well, the obvious advantage of this 'hack' is that you can provide such bookmarklets to your site's visitors and instantly have several designs for your page. It looks pretty damn good, indeed.
By the way, the correct link to the Bookmarklets site is this one.
posted by kchristidis at 5:28 AM on August 29, 2000

IE5's text size doesn't work on Css'ed elements. However, as was said for multiple designs, this would allow one to define all sorts of "easy reading" links that could apply to one's *own* site. (i.e.: "Color Blind and use IE5? CLICK HERE", "Color Blind in that other way and use IE5? Click here!" "Do you like a:hover to ring an alter sound? Click here." etc.) It's a perfect compromise between designer control and browser-user control. (Now, if only NS and IE could get together on a DOM....)

No, what we need is a standard DOM and a CSS hack that allows you to switch tables into Lynx-friendly paragraphs.
posted by rschram at 6:01 AM on August 29, 2000

IE5 adjusts sizes of CSS'ed elements just fine, if you use the right CSS attributes. All the text-sizes on my page use "named" CSS sizes (X-Small, etc.), and an IE resize seems to scale everything just fine. I know hard-coded sizes (pixels, points) don't rescale worth a damn, though.
posted by harmful at 6:37 AM on August 29, 2000

If you use the right attributes?? Pixels are the right attribute. Screw the W3C!

(Well, I experimented with using named sizes, and found them to be quite nice, but I want control!)

Hard-coded sizes don't rescale at all. I like that. I like taking control away from the user. However, I know that I see things differently than color-blind users, or even bifocal wearers. This hack is great as a compromise. The desginer acts as professional shopper for different demographics.

(Now, if only we could get a standard DOM, a table-breaking CSS hack, and a way to override user-defined styles.)
posted by rschram at 7:41 AM on August 29, 2000

As pecus mentioned, this way seems a whole lot simpler, and more compatible.
posted by endquote at 8:40 AM on August 29, 2000

Pixels are resizable in IE5/Mac and will be in Netscape6/all platforms. Opera zooms anything. IE5/Windows must follow. There are too many accessibility problems connected with hardwired sizes for browser companies NOT to let users resize them, whether they're authored in pixels, points, or pistachios. Microsoft was the first company to get this right (on the Mac platform) and they will surely apply what they've learned to the Windows platform as soon as they can.

Before you embrace the W3C recommendation and use absolute font size keywords, read Fear of Style Sheets 4.

Endquote, linking to anything Todd Fahrner has to say on this subject is always wise and good.

posted by Zeldman at 9:20 AM on August 29, 2000

>As pecus mentioned, this way seems a whole lot
>simpler, and more compatible.

Absolutely, but I was shooting for a self-contained bookmarklet, not something that would rely on accessing a file from a server. But yeah, the createStyleSheet method would be perfect for making changes to the site you're already on, like if Matt wanted to add a "make font huge" button to MeFi.
posted by jkottke at 9:36 AM on August 29, 2000

Am I right in saying it does have to be reloaded on each visit to the page? If this is true, it's a bit of a pain - otherwise this is an excellent development.

They'll soon become the new must-have fashion accessory of sites (following the permalink, favicon trends etc etc.). But seriously, this has potential to be very powerful. Cheers to Jason for the eye-opener.
posted by williamtry at 12:18 PM on August 29, 2000

Well, it's all javascript, setting different stylesheet element values.

Theoretically speaking, you could call a function
(probably using the body onload event) after reading which setup to use from a cookie. That would eliminate the user having to click a button every time.
posted by cCranium at 1:01 PM on August 29, 2000

For IE5/Mac users, this should at least put you into black text on white background mode. I find it very useful when surfing those dark red on black sites, myself.
posted by Dori at 4:39 PM on August 29, 2000

Alright, folks I spent some time when I should have been working today playing with this for Mac/IE5 users.

Here's a bookmarklet that works with the existing page stylesheet to increase the font size by 20%. It loops through the stylesheet looking for font-size declarations. If it finds one it increases the size by 20%, regardless of units.

Only tested on MSIE5/Mac but should/could/may possibly work in other Microsoft browsers. It doesn't seem to mind the fact that the URL is over 255 characters.
posted by dweingart at 5:42 PM on August 29, 2000

>It doesn't seem to mind the fact that the URL is over
>255 characters.

I believe the upper limit for a URL is 1024 characters...or something like that.
posted by jkottke at 6:22 PM on August 29, 2000

The bookmarklets site mentions that some browsers may not be able to handle scripts over 255 characters.

Also, in testing BBEdit wanted to truncate the above script at 255 chars.

I know there's a limit to the amount of data you can put in a GET request, but javascript: urls are not HTTP requests so different rules apply.
posted by dweingart at 6:01 AM on August 30, 2000

1024, hmm....... You know what that means...?

Time for the MetaFilter ONE K contest.

Design a bookmarklet that creates a webpage in 1024 bytes or less.
posted by rschram at 6:02 AM on August 30, 2000

I just checked the HTML and URI RFCs, and it doesn't look like there's any limit to the size of URI's, at least in the specifications.

Actual software may vary ;)
posted by dweingart at 8:17 AM on August 30, 2000