Back to previous post: “The flying shards of a better tomorrow”

Go to Making Light's front page.

Forward to next post: I got your cold equations right here

Subscribe (via RSS) to this post's comment thread. (What does this mean? Here's a quick introduction.)

August 12, 2006

Typography and Its Discontents
Posted by Patrick at 09:55 PM * 95 comments

Norman Rockwell's 'The Debate' Some of you are probably aware that Teresa and I have a long-running disagreement about Making Light’s default type size. Teresa likes to see as many words as possible on screen at any given time. I prefer to be able to see actual letterforms and words without experiencing insane eyestrain and headaches. Since Making Light was Teresa’s blog before it was anyone else’s, so far she’s won.

Of course most modern browsers allow the user to increase the type size, but for whatever reason (probably mistakes deeply encoded into our heavily-messed-with front-page template), that screws up our page layout.

It would be ever so much nicer if we simply had one of those setups by which users who agree with me could click a button which reset Making Light to use an alternate CSS stylesheet that specified a larger type size in the center column. Unfortunately, I’ve tried the canonical recipe here, with no success. Surely someone among our readers can help? I honestly don’t want an explanation of principles as much as I’m hoping for a Quick Fix.

Comments on Typography and Its Discontents:
#1 ::: Teresa Nielsen Hayden ::: (view all by) ::: August 12, 2006, 10:08 PM:

If I'd written the description of our opposing viewpoints, it would have come out a little differently. But it's Patrick's post; and if he wants to impair his reading comprehension by turning essays into unnaturally elongated vertical stacks of choppy sentence fragments set in oversized type, he's of course free to say so.

#2 ::: julia ::: (view all by) ::: August 12, 2006, 10:12 PM:

Locking it in to sans serif (I suggest Lucida) and increasing the leading helps a lot, without necessarily increasing type size.

#3 ::: Patrick Nielsen Hayden ::: (view all by) ::: August 12, 2006, 10:17 PM:

As you can see, Julia, little incremental changes like increasing the leading, changing the specific sans-serif font, or bringing in United Nations observers to patrol south of the Litani aren't among the options.

Two Stylesheets in One Country is the only viable solution. But this can only be accomplished with technical aid from the international community.

#4 ::: Nick Caldwell ::: (view all by) ::: August 12, 2006, 10:42 PM:

It's possible that the javascript already resident on the page is interfering with the ALA switcher script; most style-sheet switchers rely on setting cookies, so there may be a variable name clash.

I'll have a dig around for a good drop-in switcher js file.

#5 ::: Avram ::: (view all by) ::: August 12, 2006, 10:45 PM:

Y'know what's a funny thing? Using a Mac, I like to have my browser be a consistent size -- about two-thirds to three-quarters of the screen. But I've been keeping it that size across several different screen resolutions over the years, so effectively my browser has been getting larger in pixels, even though it occludes about the same portion of the visual field.

Under Windows, on the other hand, I keep my browser maximized to full screen size. Who knows what sort of browsing habits I'd develop if I used Linux regularly; maybe reading everything in text-only.

Anyway, what happens when you try to use that CSS-swapping script?

#6 ::: Patrick Nielsen Hayden ::: (view all by) ::: August 12, 2006, 11:00 PM:

You mean, Mark Pilgrim's? Nothing whatsoever. And I'm pretty sure I changed all the variables as I should have.

#7 ::: Patrick Nielsen Hayden ::: (view all by) ::: August 12, 2006, 11:05 PM:

Anyone who wants to look at our setup needs only these two pieces of info:

(1) Our stylesheet is at Making Light's URL plus "newstyle2.css", and

(2) Our front-page template is viewable by loading Making Light's URL plus "index.html.tmpl" and then doing "view source".

#8 ::: Nick Caldwell ::: (view all by) ::: August 12, 2006, 11:09 PM:

Hmm.. the existing javascript file has this: function setCookie (name, value, expires, path, domain, secure) {

and the ALA style-switcher has this: function createCookie(name,value,days) {

Even if those variables were changed, I'm guessing that at some level both functions are trying to work with the same cookie. On ther other hand I'm a CSS/XHTML guy, and not so much a JS coder.

If you remove the existing JS and try the style-switcher, what happens? And what's in your alternate stylesheet?

#9 ::: Nick Caldwell ::: (view all by) ::: August 12, 2006, 11:09 PM:

OK, just seen Patrick's second post. Sorry. I'll take a look.

#10 ::: Avram ::: (view all by) ::: August 12, 2006, 11:30 PM:

Mark Pilgrim? The ALA page you linked to credits Paul Sowden.

Anyway, I just knocked together a very simple test case using that code, and I can't get it to work either. The directions aren't very well-written.

On the other hand, this page here is using what (at first glance) looks to be approximately the same code, just running through a form control instead of links, and it works.

#11 ::: Mike Kozlowski ::: (view all by) ::: August 12, 2006, 11:59 PM:

I don't know if this will help you at all, but I'm doing a style-switch thing on my booklog, and the Javascript for it is at:

http://www.klio.org/weblog/styleswitcher.js

I remember reading that ALA article, and some of the code in mine is the same as theirs, but I ended up significantly changing parts of it, so apparently, their code didn't work for me, either.

#13 ::: Fran ::: (view all by) ::: August 13, 2006, 01:16 AM:

I've always liked the elegance of Eric Costello's method, allowing the visitor to choose text size and font independently.

His JavaScript is here: http://glish.com/textResizer.js

#14 ::: Danny Yee ::: (view all by) ::: August 13, 2006, 02:50 AM:

I'm with Patrick on this one -- I find the default font here way too small. Yes, I can and do resize my browser window's font, but then when I follow a link to another site I often have to undo that...

See #5 on http://www.useit.com/alertbox/9605.html
There's no reason for web sites to specify a font size at all - just let the user's browser use the browser's default. (And if you don't like the way your site looks in your browser, you should change your default font!)

#15 ::: Rob Rusick ::: (view all by) ::: August 13, 2006, 02:53 AM:

I found an example of stylesheet switching at www.nozen.com (a collection of zen parables), which I was able to adapt for one of my own ongoing projects. I don't recall that I had much trouble getting it to work. It uses a clickable link, rather than a form. The largest part of the code was for setting a cookie to keep the preference.

#16 ::: Rob Rusick ::: (view all by) ::: August 13, 2006, 02:56 AM:

I should mention that the code itself is not posted on the site. I pulled it out of my cache after I had been at the site to see how it had been done.

#17 ::: Evan ::: (view all by) ::: August 13, 2006, 03:36 AM:

Back in 2001 when that CSS switching article appeared, CSS support in the different browsers was so badly broken that native resizing either didn't work at all, or only worked if you used certain blessed units. These CSS/JS switchers were designed to work around problems that have since been solved natively in the browser.

In any case, the CSS switcher won't help that much. If your alternate stylesheet is simple and only changes the font size, you'll probably see the same overflow problems. If your alternate stylesheet is sophisticated enough to simultaneously increase the font size *and* correct the divs, that CSS hacking effort would have been better spent on the main stylesheet in the first place. :)

Or you could just leave this stuff alone, on the theory that life is too short...

#18 ::: Anna Feruglio Dal Dan ::: (view all by) ::: August 13, 2006, 06:26 AM:

Wish I could offer technical help, but I will just observe that I have to regularly increase ML's font size, and so I am rooting for Patrick. :-)

#19 ::: Tuwa ::: (view all by) ::: August 13, 2006, 07:24 AM:

I can't tell you why the Javascript isn't working, but I can tell you that it's generally a bad idea to define font sizes in terms of pixels. IE for Windows will not allow a user to resize the text on a site defining the font size in pixels; and since IE/Win still has 85-90% of the browser market, it's possible that a large number of your would-be readers simply can't read the text.

Absolute positioning removes the elements from the document's flow and makes it very easy to overlap them (intentionally or otherwise). Absolutely positioned containers usually take a width declaration to prevent unintentional overlap. The template designer chose to define the widths in pixels rather than percentages or ems.

#20 ::: Arthur D. Hlavaty ::: (view all by) ::: August 13, 2006, 07:56 AM:

I do not love your small sans-serif typeface, but you voluntarily do one thing I would like to make mandatory: black on white, rather than the other way around.

#21 ::: Lucy Kemnitzer ::: (view all by) ::: August 13, 2006, 09:00 AM:

I have my own gripe. When I try to change the text size on this or many other pages, nothing happens at all, which I can only guess is due to defining font size in absolute rather than relative terms. Why do people do that? Making Light is readable, but only just: some are not. Once in a while I have to copy the text I'm trying to read and paste it into Word Perfect as unformatted in order to get something I can read The most recent was last night, when I was trying to read a discussion of the appropriate uses of beach wells vs. open surface intakes for desalination plants. If anything should have been set in relative size font, it should have been that! It was sufficiently technical, and yet aimed at a general audience: dealing with itty bitty colored type and new vocabulary and concepts all at once is too much to ask.

Making Light is not bad considering the tiny tiny type: the colors and layout do a lot to make up for it. But why don't you guys use a relative font size so those of us with failing eyes can read in complete comfort? Wherever I see it used, it works fine. And I've seen it work fine in three columns, so that's not it.

#22 ::: Lila ::: (view all by) ::: August 13, 2006, 09:11 AM:

As a victim of presbyopia, astigmatism, and bifocals, I'd sure appreciate a larger-type-size option if I could have it without its annoying anyone else.

#23 ::: Jules ::: (view all by) ::: August 13, 2006, 09:16 AM:

I'm not sure about switching style sheets, because it's not something I've ever worked with, but I *can* tell you why the existing style sheet breaks if you increase the font size.

Looking at your current style sheet (at http://nielsenhayden.com/makinglight//common/newstyle2.css) I see the following:

#left {
position: absolute;
left: 0px;
top: 128px;
width: 250px;
overflow: hidden;
padding-top:5px;
padding-left:5px;
}

#right {
position: absolute;
right: 0px;
top: 128px;
width: 175px;
overflow: hidden;
padding:5px;
}
...
#content {
margin-right: 185px;
margin-left: 260px;
border-right:1px dotted #999;
border-left:1px dotted #999;
}

This is putting the left and right columns at a specific point on the page, then leaving space for them in the margins of the central column. That's not a good way of doing it.

Try something like:

#left {
float:left;
width: 250px;
overflow: hidden;
padding-top:5px;
padding-left:5px;
}

#right {
float:right;
width: 175px;
overflow: hidden;
padding:5px;
}

That should tell the left column to be on the left of the page, the right column to be on the right of the page and the central one to be a rectangular area sitting between the two. You'll probably need to bring the right column up before the central one in the template for it to work.

Personally, I'd just drop the CSS layout and use a table-based one. Table layouts just work, while CSS ones can be fiddly to get right. But I guess there's something appealing about the CSS solution.

#24 ::: Patrick Nielsen Hayden ::: (view all by) ::: August 13, 2006, 09:19 AM:

"I have my own gripe. When I try to change the text size on this or many other pages, nothing happens at all, which I can only guess is due to defining font size in absolute rather than relative terms. Why do people do that?"

I did it back in 2001-2002 because at the time it was the only way to guarantee that Making Light would render the way Teresa wanted it to in all browsers. Since then, as others have observed, browser CSS compliance has improved. In an ideal world I would have the time and skill to re-do all of Making Light's stylesheets in relative type sizes. In this world I don't frequently have that sort of time and I certainly don't have the skill. I am not a programmer--at best I can cope with this stuff by concentrating very hard, but six months after I've successfully dealt with some combination of scripts and Movable Type markup language, I can't remember what any of it means, and I have to go back and make a study of it all over again.

Which is why I asked the question I asked: how can I set up an easy-to use style switcher?

#25 ::: Jo Walton ::: (view all by) ::: August 13, 2006, 10:04 AM:

So how do people individually increase the font size?

I'm using Firefox, since I gave up barfy old Netscape 4. (I recently discovered it has very cool tabs. Yesterday, in one of our interminable DSL discussions, Sasha informed me in all seriousness that I couldn't have been online in 1993, because there wasn't any Internet then.)

#26 ::: Teresa Nielsen Hayden ::: (view all by) ::: August 13, 2006, 10:09 AM:

These days, if I don't have my glasses on, my focal distance starts about six feet away. (My hands and eyes will never again have unmediated acquaintance.) I have astigmatism, presbyopia, and progressive trifocals, plus a lumpy old scar that slashes across my right cornea and causes assorted visual distortions. (If I cover my good eye on nights when the new moon is a thin sliver, I seldom see fewer than eight or nine moons. My record is fourteen.)

Mind, I'm not complaining, because aside from all that I have extremely good vision. But I really am aware that visual disabilities exist.

What I'd like to say for the record is that my attachment to relatively small, dense type is not just an aesthetic preference. Being able to scan larger blocks of text significantly increases my reading comprehension and speed. I'm at my worst with narrow columns and wide leading. I switch back from that to dense, slabby text with a tangible sense of relief.

I know my typographical preferences aren't perfect for everyone. No single set of type specs will ever be universally satisfactory. But this is the one that makes me happy. If we can set up additional options that make others just as happy, I'm all for it.

#27 ::: Gabriele Campbell ::: (view all by) ::: August 13, 2006, 10:10 AM:

The script is a bit on the small side for me. But since I only read the non political posts, I'm not the most avid reader of this blog. :)

#28 ::: Teresa Nielsen Hayden ::: (view all by) ::: August 13, 2006, 10:15 AM:

Jo, in most circumstances hitting "Command+" will increase your text size. It may mess up the page layout. If that leaves you trying to read lines that have lapped over low-contrast areas, highlight the portion of the text you're trying to read.

This is Firefox advice, not just Making Light advice.

#29 ::: Teresa Nielsen Hayden ::: (view all by) ::: August 13, 2006, 10:18 AM:

Oh, and tell Sasha to look up ARPANET.

#30 ::: Stephen Bounds ::: (view all by) ::: August 13, 2006, 10:28 AM:

I don't mean to sound obtuse, but what isn't working exactly?

If you click "Small", the page reloads and the font becomes small. If you click "Larger", the page reloads and the font becomes larger -- at least on both Firefox and IE.

Is there another effect you were expecting?

#31 ::: Greg London ::: (view all by) ::: August 13, 2006, 10:29 AM:

I have nothing to offer.
I just wanted to say that given the context,
I absolutely love that Norman Rockwell image.

Will the shards of a better tomorrow be flying soon?

#32 ::: Patrick Nielsen Hayden ::: (view all by) ::: August 13, 2006, 11:01 AM:

Stephen Bounds has spotted the work-in-progress, down at the bottom of the right-hand column. It's been there for about an hour. Once it's all working better, I'll move it to the top of the column.

I'm using Rob Rusick's method, which he kindly emailed to me as a set of easy-to-understand examples which I was able to suitably alter. Thank you very much, Rob!

The only problem is that, currently, the user has to reset their preferences twice: once on the front page, and once on any archive page--a monthly archive page, or any individual archive page, such as the one you're looking at now. Once the user has done this, the setting is permanent for that browser, until they deliberately reset it.

What I'd like, ideally, is for a single click on the front page to set a cookie that affects all the parts of Making Light at once. Not being a programmer (see above) I am not immediately seeing a way to do this.

Here are the current links to pertinent style sheets and templates:

Default (small type) style sheet: http://nielsenhayden.com/makinglight/common/newstyle2.css

Larger-type style sheet: http://nielsenhayden.com/makinglight/common/newstyle3.css"

Making Light's front-page template: http://nielsenhayden.com/makinglight/index.html.tmpl, then View Source

Making Light's individual-entry-archive-page template: http://nielsenhayden.com/makinglight/individual-entry-archive.tmpl

Making Light's monthly-archive-page template: http://nielsenhayden.com/makinglight/date-based-archive.tmpl

Rob Rusick's javascript called from the heads of each of those templates: http://nielsenhayden.com/makinglight/SetStyleExample.js

#33 ::: John M. Ford ::: (view all by) ::: August 13, 2006, 11:09 AM:

(If I cover my good eye on nights when the new moon is a thin sliver, I seldom see fewer than eight or nine moons. My record is fourteen.)

In a fantasy novel, this would Mean Something. You know, a Destiny, Latent Magic Powers, the ability to command root vegetables. Your difficulties with Web formatting would be identified along about Chapter Two as a Quest, requiring that you accumulate a party of colorful characters, to, like, explore arcane lore and discuss matters of import and beat up trolls and crap.

Hmm.

I'm not suggesting that this is an immiscible blessing. For instance, I am obviously the guy who catches a trenchant glaive (to the astonishment of everyone but the reader) a couple of chapters before the Ultimate Foofaraw so everybody else finally has a reason to dislike the Bad Guy. Then again, if you're gonna go, you can go worse than Mercutio.

#34 ::: Martin Wisse ::: (view all by) ::: August 13, 2006, 11:14 AM:

Lucy: if being able to change font sizes no matter what the page author has specified is a must, you might want to try out Opera, which has had that function like since forever (and is in general the bestest browser in the whooole world). A simple press on the + key and fontsize increases ten percent, to a maximum of 1,000 percent. With Making Light, this works quite well, without things breaking, up till about 170 percent magnification. (After that, text started overlapping the picture on top of this post...)

#35 ::: Graydon ::: (view all by) ::: August 13, 2006, 11:16 AM:

Well, you have to nail the sidebars to fixed sizes, but want the center text to be adjustable?

Generally, it's a good thing to take a default browser font size for the main body of the text, set everything else in that block in relative terms, and let the users work out their own damnation, because there are too many browser over-rides for things like font and font size to get any specific particular result. (And boy howdy does ML look odd when I've got your stylesheet turned on.)

.posted {
font-family:verdana,arial,sans-serif;
font-size:10px;
margin-bottom:15px;
}

could be replaced with

.posted {
font-family:verdana,arial,sans-serif;
font-size:medium;
margin-bottom:15px;
}

And push most of the problem off on to user preferences.

#36 ::: Avram ::: (view all by) ::: August 13, 2006, 11:18 AM:

Using Safari, I have no trouble increasing font size. It doesn't quite break the page layout, but it bruises it. I don't think I've ever tried resizing this site with Firefox, because I use that at work on a Windows machine, and Windows renders everything with huge type.

Anyway, yeah, as Patrick says, a few years back using pixels as your font-size measuring unit was what all the CSS sites recommended to get around shabby standards compliance. Things are better nowadays, but who has time to recode a three-column layout unless they already enjoy that kind of thing?

#37 ::: Patrick Nielsen Hayden ::: (view all by) ::: August 13, 2006, 11:20 AM:

Jules, thanks. I figured it was something like that, and I'll definitely try your method when everything else has settled out.

#38 ::: Patrick Nielsen Hayden ::: (view all by) ::: August 13, 2006, 11:29 AM:

Incidentally, while I of course appreciate all the expertise that our friends and readers offer--and of course I've been the guy asking for help!--nonetheless, the constantly flow of advice about how we should fix the problem by methods we've already explained why we're not using--coughGraydoncough--is starting to make me blink.

No, actually, it's starting to make my sympathize with PC users who ask online how to do this, or fix that annoying problem, and half the answers they get are "Get a Mac."

Mind you, we love you all.

#39 ::: Teresa Nielsen Hayden ::: (view all by) ::: August 13, 2006, 11:35 AM:

But Mike, you already are a recurring character in various works of fantasy, and so far there've been no trenchant glaives winging their way you-ward.

#40 ::: Mary Aileen Buss ::: (view all by) ::: August 13, 2006, 11:36 AM:

Suddenly the Last 400 Comments page has big, underlined text and a white background. Was that intentional? (Note that I'm not complaining, just temporarily disconcerted.)

--Mary Aileen

#41 ::: Graydon ::: (view all by) ::: August 13, 2006, 11:40 AM:

Patrick --

If you explain that you're not a programmer, and then explain that you're determined to do this the really hard way, permit me my curiosity.

#42 ::: Teresa Nielsen Hayden ::: (view all by) ::: August 13, 2006, 11:44 AM:

Only fair, Graydon.

MAB, we're likely to be having these little events for a while. Do please feel free -- encouraged, even -- to report them.

#43 ::: Stephen Bounds ::: (view all by) ::: August 13, 2006, 11:56 AM:

Patrick,

I think your problems are being caused by your main site being "www.nielsenhayden.com", while your archive posts are just "nielsenhayden.com".

Change:

document.cookie = name+"="+value+expires+"; path=/";

to:

document.cookie = name+"="+value+expires+"; path=/; domain=.nielsenhayden.com";

and try again. This should force your script to always set a cookie which is accessible to nielsenhayden.com and any subdomains.

#44 ::: Patrick Nielsen Hayden ::: (view all by) ::: August 13, 2006, 12:03 PM:

Thank you, Stephen! I'll try that as soon as the current site rebuild grinds to its conclusion.

#45 ::: Lizzy L ::: (view all by) ::: August 13, 2006, 12:10 PM:

I freely admit I have pretty much no idea what most of you are talking about. Screwing around with programming for me is like me rebuilding my car. Not gonna happen. I say this because I may have fellow ignoramuses out there who are more comfortable with larger type and want to know how to get it.

I use Firefox, and I appear to have two methods to increase the type size on my screen. 1) Go up to the toolbar, hit View, then Text Size, then hit Increase. 2) Hit the Ctrl key and the + key together. I believe Teresa suggested that upthread. Method #1 doesn't appear to work for comments in Haloscan but method #2 does, and both methods work for Making Light. I haven't noticed a problem with page formatting when I increase the type size to my comfort level but perhaps I would notice it if I enlarged the type sufficiently.

#46 ::: Patrick Nielsen Hayden ::: (view all by) ::: August 13, 2006, 12:28 PM:

Stephen: For whatever reason, that made it stop working altogether; I've now restored the original line in SetStyleExample.js, and I'm rebuilding the site again.

Lizzy: Those are two ways to increase text size. Another useful thing to know about is the "Fonts and Colors" dialog box in Firefox's preferences. Choose "Advanced", then change the default serif font point size to something larger. This will increase the font size on plenty of web sites which are properly specced to relative font sizes, unlike Making Light.

#47 ::: Teresa Nielsen Hayden ::: (view all by) ::: August 13, 2006, 12:36 PM:

Greg London, that cover illustration has often popped up in my head when Patrick and I are arguing about type size. When we finally agreed that he should put out a request for help, I went looking for a copy of it. It took some hunting to find it, and some photoshopping to get it right, but it is perfect for the occasion.

Rockwell did a lot of paintings of people arguing. He did another version of the husband/wife standoff during the Truman/Dewey race. It's a funny painting, but way too emphatic for our circumstances.

#48 ::: Patrick Nielsen Hayden ::: (view all by) ::: August 13, 2006, 12:41 PM:

And now, despite my having restored that one line in SetStyleExample.js and rebuilt, the entire system is broken altogether.

#49 ::: C.E. Petit ::: (view all by) ::: August 13, 2006, 12:45 PM:

As noted above, using the px (pixel) element as the default measurement is just asking for trouble, particularly for font sizes (if less so for placement of elements). For example, try replacing

.comments-body {
font-family:verdana,arial,sans-serif;
background:#FFF;
font-size:11px;
font-weight:normal;
line-height:15px;
padding:10px;
}

with this

.comments-body {
font-family:verdana,arial,sans-serif;
background:#FFF;
font-size:1em;
font-weight:normal;
line-height:1.4em;
padding:0.8em;
}

which will draw default type sizes from the user's browser settings without having to choose an alternate style sheet. You have to be judicious in deciding which elements really can be sized relatively (font size, leading, and so on are good candidates) and which cannot (border width is a good example). However, it's very much a "fire and forget" solution: Once the style sheet has been established, it will automatically resize to the user's default. Thus, if Teresa wants to use 10pt type as her browser's standard, while Patrick wants to use 16pt type as his, that's fine—and each one should be fine.

To see one way (that has been pretty successful and stable for several years now with only occasional tweaking), you can look at the style sheet for my main website at
Authorslawyer.com
Unfortunately, the only CSS standard unit that is actually both relative and cascading from the user's default is the em. On the other hand, given Our Gracious Hosts' respective backgrounds in typography, that's no sillier than designing page layouts in picas in this day of proportional fonts…

#50 ::: Avram ::: (view all by) ::: August 13, 2006, 01:12 PM:

Jiggle the cable! Hit Control-Alt-Delete!

#51 ::: Teresa Nielsen Hayden ::: (view all by) ::: August 13, 2006, 01:24 PM:

The rebuild has failed to restore the previous situation. Patrick is in semi-despair, and is taking a lunch break.

I don't understand all the technical issues either, and I'm certainly not a programmer. What I do know is that the reason Patrick's specifying some stuff as absolute rather than relative is to keep me happy. I don't know how or why that works, but I know that's what he's trying to do.

Charlie Petit, I've been reading your website for years, and there's no denying its stability.

Ems and picas are good. Or did they somehow become not-good while I wasn't looking?

Ems and Ens have always been relative. It keeps you from having to remember separate sets of measurements for paragraph and poetry indents, caesuras, and other stuff of that ilk, for every typeface and point size.

#52 ::: Sharon Sbarsky ::: (view all by) ::: August 13, 2006, 01:40 PM:

Patrick & Teresa, please excuse if some of this was mentioned already above, I just skimmed through some of the comments.

The simplist solution is to have an alternate style sheet on the page that users can choose. The problems are that this doesn't work for all browsers (i.e. IE) and that the "memory" doesn't stay. I used this solution to offer a navigation/no navigation choice on a couple of NESFA web pages. ( http://www.nesfa.org/Music_and_Drama/DecomposersPhotos.htm )

Another solution is an "accessibility" script that can change the font-size on the fly. See http://www.socialaction.com/ for an example. This only partially works, since it only changes the size for the "content" styles, not the headings and the "template" pieces. If you are interested in seeing if this would work for you, I'll look into doing the final fix and making it available.

As I was skimming the comments, I noticed different ones talking about which size specification should be used for easier resizing (when the browser permits it.) AFAIK, using "small", "x-small", "large", "x-large", etc. for the basic body size instead of pt and px specifications would help. and then use percentages in other parts of the style sheet to to set other tags, classes or IDs.

Sharon

#53 ::: Lisa Goldstein ::: (view all by) ::: August 13, 2006, 01:42 PM:

(If I cover my good eye on nights when the new moon is a thin sliver, I seldom see fewer than eight or nine moons. My record is fourteen.)

There's a Sufi parable about a kid who sees double. One day his father takes him aside and says, "You know, my son, you see everything double." And the kid says, "No, that's impossible -- if I did I'd see four suns in the sky, and I only see two."

(I don't know what this means -- well, that's redundant, it's a Sufi parable -- but I've always liked the story.)

#54 ::: Lucy Kemnitzer ::: (view all by) ::: August 13, 2006, 01:46 PM:

Patrick, the new clicky works for me.

#55 ::: P J Evans ::: (view all by) ::: August 13, 2006, 01:46 PM:

Teresa, it's also fun having astigmatism, myopia, and presbyopia. My focal distance is from about 8 inches to about 12 or 15 inches, without glasses. It's good for embroidery: I can take off my glasses and see stuff. (Getting a good view of anything small with glasses is another matter.)

My mother quit playing piano when, as she put it, if the music was close enough to read, it was too close to see, and if it was far enough away to see, it was too far away to read (farsighted - whatever that's formally called - and presbyopia).

#56 ::: Patrick Nielsen Hayden ::: (view all by) ::: August 13, 2006, 01:55 PM:

Lucy, I suspect if you try to use it again, you'll find it no longer works.

I have no idea why this is.

#57 ::: TW ::: (view all by) ::: August 13, 2006, 01:56 PM:

I find nothing wrong with the text format. I can read the prose with no issues. My eyes and brain are fine with this. I might like a better colour background contrast from the gray but not the starkness of white.

I have ocasional problems with the linkage and page loading but that is something else. I would prefer less manual inserting of tag codes in comments but oh well it forces me to practice.

#58 ::: Lisa Spangenberg ::: (view all by) ::: August 13, 2006, 02:20 PM:

I've written a friend who's written a Really Good javascript book, and uses MT for blogging; perhaps said friend will be able to take a look. Said friend is writing under deadline pressure so . . .

#59 ::: sharon ::: (view all by) ::: August 13, 2006, 02:39 PM:

The smaller text (site default) and larger text switch links are working fine as of now (firefox, XP).

Thanks!

#60 ::: Lizzy L ::: (view all by) ::: August 13, 2006, 02:43 PM:

Thank you, Patrick. Sometimes ignorance is bliss. I find that not fiddling around with all the Preferences and Options that I don't know about saves me quite a bit of time. I already spend too much time in front of this screen.

#61 ::: Dave ::: (view all by) ::: August 13, 2006, 03:30 PM:

This was an interesting topic, so I blogged something about it on my site. Click here for a post with a simple example of how to select stylesheets using PHP and cookies.

#62 ::: Catja Pafort ::: (view all by) ::: August 13, 2006, 03:52 PM:

I hate pages that set the size and style for me. Right now, I'm reading this on a low-res Windows monitor, and it's fine. At home, I'm using my 12' laptop screen with a 15' resolution because I need the real estate more than I need the letter size - but what is just about readable small type on this monitor becomes unreadable type on my own.

Let the reader decide.

#63 ::: JESR ::: (view all by) ::: August 13, 2006, 04:31 PM:

Eh.

I'm with Teresa on this: I'm myopic and presbyopic and have an old orbital fracture which makes my left eye unrelaible in its focus, wear either lineless bifocals or contact lenses with cheap readers, and I love the current site format.

Of course, I come from fandom, where blog formats and web pages combine such elements as black background, chrome yellow, red, cobalt blue or deep brown letters, and fancy fonts which break up if you are not using precisely the right resolution, browser and OS. Since I'm also on MacOS9.2 and a version of ie used by Noah on the ark, the fact that this site is simple, legible, and dark on light earns my deep regard.

#64 ::: Don Fitch ::: (view all by) ::: August 13, 2006, 04:37 PM:

" in most circumstances hitting "Command+" will increase your text size"

That's another reason, Teresa, you have my undying gratitude. Doing this twice makes it Just Right (for legibility). Making Light is far too rewarding to give up on when eyestrain becomes excessive, and using copy & paste into an offline MS Word document (my previous solution) is typical of my stumbling across the most awkward of all possible workarounds. I hope (& expect) this will work equally well on many seriously-obnoxious sites.

#65 ::: Robert L ::: (view all by) ::: August 13, 2006, 04:39 PM:

I just tried hitting Control and the + sign, then did it again (running Firefox on a Mac). This works just fine: the type is much bigger, and the layout is unspoiled.

Arthur: If you're using a Mac, hitting Control, Option, Command, and 8 all at once will make the screen a black-&-negative of whatever it's displaying. Doing the same again will toggle it back to color normal. I sometimes do this for sites that display in white-on-black (or some other difficult color combination). I would imagine there's some sort of Windows thing that does this too, but don't ask me.

#66 ::: Linkmeister ::: (view all by) ::: August 13, 2006, 04:49 PM:

Well now. I never knew about Control +. I had a moment of apprehension when I thought "OK, now how do I go back?" until I tried Control -, which toggles you back one sequence/size at a time.

#67 ::: Tracey C ::: (view all by) ::: August 13, 2006, 05:25 PM:

Although I have nothing at all technical to contribute to the discussion, I will weigh in on the issue at hand. I love the font size and color scheme on ML. For exactly the reasons that Teresa gives. Nothing I hate more than having to wade through horrible oversized columns of things when a good scan would have done the job in half the time.

So there's at least one other person who would like the original format to continue to be available, please.

#68 ::: Clifton Royston ::: (view all by) ::: August 13, 2006, 06:11 PM:

Well, the "clicky thingy" (to use a Technical Term of the Trade) now seems to be working just fine for me, to either go up or down in size. (I'm viewing with Firefox 1.5.0.6 on Windows XP.)

Generally speaking I'm with Teresa - maximum content helps my reading speed and comprehension - but I totally sympathize with anybody who needs things larger for legibility. Sometimes I use the Control-plus trick myself.

#69 ::: Clifton Royston ::: (view all by) ::: August 13, 2006, 06:30 PM:

Ahh, I see the issue now. It doesn't work on the main page of the blog. Two issues I think - first, a different cookie is being set and consulted under a different hostname for the main page vs. the topic/comment pages. The topic pages are using "nielsenhayden.com" as the page name and the cookie name. The other problem (and the one which is keeping it from working at all on the main blog page) is that the cookie for that page is referencing a nonexistent stylesheet URL - it points to http://www.nielsenhayden.com/common/newstyle3.css, where it should point to http://www.nielsenhayden.com/makinglight/common/newstyle3.css

Fix the latter issue and it'll start working on the main page. If you can get them both to set and work with the same domain (hint: try setting it as ".nielsenhayden.com") then one cookie will do for both and you'll be golden.

#70 ::: Robert L ::: (view all by) ::: August 13, 2006, 06:35 PM:

Linkmeister: Oh yeah, right. I thought after i'd posted that I should add how to make the type go back to the size it was, but you figured it out for yourself.

#71 ::: Ailsa Ek ::: (view all by) ::: August 13, 2006, 06:37 PM:

I just switched back & forth between here & my LJ to check, and yours is easier to read than mine, so I have no complaints. And definitely no suggestions - what you guys are working on is far beyond my feeble coding skills.

That Ctrl-Opt-Helicopter-8 thing is really neat, though.

#72 ::: Dori ::: (view all by) ::: August 13, 2006, 06:41 PM:

Lisa: I've written a friend who's written a Really Good javascript book, and uses MT for blogging; perhaps said friend will be able to take a look. Said friend is writing under deadline pressure so...

Said friend met the press deadline for said book on Friday, and has just now gotten her lazy butt out of bed... ;-)

I'd be happy to make it work if you'd like -- the impression I get from what I read above is that things are in too much flux at the moment for me to start taking a thwack at it, as it's unlikely that things will be the same 30 minutes from now. If that's incorrect, or if y'all want to take a break while I try my hand at it, let me know. Best bets for reaching me: my name (at) my name dot com (email) or my name (at) mac dot com (IM).

#73 ::: joann ::: (view all by) ::: August 13, 2006, 07:20 PM:

"Dark on light earns my regard"

Amen. On the main page (and the items at the tops of the subpages) the light isn't light enough for my taste; still lighter would be easier to read.

(For the record, I find the default font size to be just fine on a 19" lcd monitor.)

But my real kvetch is about link colors; there is *not* enough difference between the blue of an unvisited link and the lighter blue of a visited one. This may have something to do with my difficulty is distinguishing blue from black, but I doubt it. In any case, as I do comments by navigating my way through the "last 400" by where I visited which thread last, it's even more problematic on gray than it would be on white, or even something lighter gray.

#74 ::: Patrick Nielsen Hayden ::: (view all by) ::: August 13, 2006, 08:04 PM:

Okay, my fingers are crossed, but the toggle now seems to work in Firefox, Safari, and Omniweb. And you only have to click it once; the cookie applies to all pages, including archive pages.

It behaves funkily in Safari and Omniweb--the browser jumps several screens down the page, and appears to go into "reloading forever" mode. However, if you then just reload the page manually, you'll find that your setting has "taken". I'd love to know how to fix this.

It doesn't work at all in Internet Explorer for the Mac, but that's an old, no-longer-supported browser at this point. I'd like to know if it works in MSIE for Windows. I'm assuming, I hope correctly, that since it works in Firefox for the Mac it'll work the same in Firefox on other platforms.

(The trick seemed to be strategically deploying the "$MTBlogURL$" tag in certain path statements on the archive templates, while carefully not using it anywhere on the main index template. I'm not sure I could explain it at this point; the logic is already leaking out of my memory.)

#75 ::: P J Evans ::: (view all by) ::: August 13, 2006, 08:19 PM:

Patrick, I'm seeing larger type in the middle column on the front page. It's comfortable on the archive pages also. Thank you! (IE6, WinXP, but this isn't my normal computer)

#76 ::: Patrick Nielsen Hayden ::: (view all by) ::: August 13, 2006, 08:24 PM:

(Oh, and many thanks to Clifton Royston, who noticed that one cookie was referencing a nonexistent stylesheet URL--that was what got me to suspecting that there was a MT-tag-related path-statement problem going on.)

#77 ::: Ross Smith ::: (view all by) ::: August 13, 2006, 09:13 PM:

On Firefox you can change the text size on the fly by holding down Ctrl and scrolling the mouse wheel up (smaller) or down (larger).

(Most browsers do something similar, although which key you hold down, and whether scroll-up means smaller or larger, varies annoyingly from browser to browser.)

#78 ::: antukin ::: (view all by) ::: August 13, 2006, 10:29 PM:

ooh this is fascinating. as I read this thread and followed the toggling, I have just discovered that though my first instinct is to prefer a large font size, Teresa's preferred format for "Being able to scan larger blocks of text" does increase my reading comprehension and speed. huh. that'll be something to throw at my bosses when they complain about small text in our documents and webpages.

apologies for deviating from the main topic, (Patrick seems to have solved the problem so I feel safe in asking this), but can I ask a question about cookies? are they or are they not safe to use? there seems to be some dubiousness about them because they get information from users' PCs, which may pose a privacy/security issue and may supposedly be forwarded to companies and/or spammers looking for that very information...

a quick peek into wikipedia shows that I didn't just imagine the above dubiousness.

hope somebody here can enlighten... thanks much!

#79 ::: Patrick Nielsen Hayden ::: (view all by) ::: August 13, 2006, 10:31 PM:

(just BTW, we're back to stuff Not Working, but the excellent and very helpful Dori Smith is On The Case.)

#80 ::: Michael Weholt ::: (view all by) ::: August 13, 2006, 10:33 PM:

It works extra special spiffy in Firefox in W2K. I like the bigger type, myself. Actually, here's what I really like: switching back and forth. At whim. This is America. The land of what you want, uh-hunh, uh-hunh.

#81 ::: antukin ::: (view all by) ::: August 13, 2006, 10:39 PM:

and Patrick posted the above just after I said the problem was fixed! reporting: I'm on Firefox 1.5.0.1, Windows XP, and after refreshing my page, the clickies are still working fine.

(looking at the timestamps, it's exactly 12 hours earlier here in our part of the globe. how cool is this internet thingie that people can have discussions whether it's day or night where they are?)

#82 ::: Dori ::: (view all by) ::: August 14, 2006, 12:42 AM:

Well, I think that I have now (1) added the feature P&T wanted, and (2) fixed the bugs introduced while doing (1).

Patrick, you may have to rebuild the individual entry templates.

To all: let me know if there are problems with the style changer. If you do have problems, please try this first: (1) set the style the way you want it on any page, (2) leave ML -- that is, load some other page on some other site into the same browser window, (3) reload ML -- don't just hit the back button. If you still have a problem after that, let me know what browser/version/platform you're on and what's happening that isn't what you want.

#83 ::: Don Fitch ::: (view all by) ::: August 14, 2006, 12:46 AM:

As of now (more or less), using IE 5 on a Mac, the magic "command+" works, and clicking on the new option "Larger Type" doesn't change the font size (I think), but either renders it Bold-face or substitutes a much heavier sans-serif face. (Actually, I'd prefer a weight about half-way in between, or Palatino or Bembo, but that's immaterial and the options available are quite okay, for my eyes.)

#84 ::: Aquila ::: (view all by) ::: August 14, 2006, 01:05 AM:

I've gotten used to the font being slightly smaller than I like, since in other ways it's very clear and nice to read. Sometimes I make it bigger and sometimes I don't. But I have ongoing issues with the fact that on two of the four computers I use the unread link and read link blues are very difficult to distinguish between. I haven't worked out any settings I can change to increase the colour differential, but I often use the 'zap colors' applet someone here posted when I'm getting frustrated at trying to recognise unread comments on the 'Previous 400 comments' page.

#85 ::: Meg Thornton ::: (view all by) ::: August 14, 2006, 01:13 AM:

Well, jot me down as one of the "small font, large lumps" group (but then, I've always been told by others that my screen is nigh on unreadable - my joke is that my preferred font is Flyspeck 3). However, I tend to cheat on that one - I go for a large screen resolution (proportional to monitor size) as well as choosing the smaller font sizes for my browser or document.

I blame far too many years of reading dense paperbacks, as well as an inherent preference for privacy (it's harder for stickybeaks to stickybeak if they can't read what you're reading).

#86 ::: Don Fitch ::: (view all by) ::: August 14, 2006, 01:14 AM:

Oops! A few minutes later: The aforementioned change to bold-face after dlicking on the "larger type" option happens only when the text is under the influence of the "command+" enlargement. If the site is opened normally and the "larger type" area is clicked, the light face simply gets larger. Not _quite_ enough larger for me, but reverting to Teresa's preference, then using "command+" twice makes all fine. This is probably just one of those IE Things, and one you'd do best to ignore.

#87 ::: Aquila ::: (view all by) ::: August 14, 2006, 01:16 AM:

Ooh, and I like the larger font option, very smooth.

#88 ::: Dori ::: (view all by) ::: August 14, 2006, 02:55 AM:

For those of you who want the links here to change color (and text to be black on white elsewhere), here's a bookmarklet for you: B on W. It's not a link to click here; instead, you drag it to your bookmarks/favorites bar and then click it when you're on a site you want to change.

And, because they get requested from time to time (usually by Lisa), here's a couple I've mentioned here before: ROT-13 and Disemvowel.

#89 ::: Lucy Kemnitzer ::: (view all by) ::: August 14, 2006, 03:17 AM:

Well, it's working now, and the larger size is a nice size, not too large as I originally thought.

But it's past my bedtime so I keep clicking the clickies to get little, big, little, big.

#90 ::: oliviacw ::: (view all by) ::: August 14, 2006, 05:01 AM:

Oh Dori, thank you for that B on W bookmarklet! I hate to admit it, but I read a gossip blog that's an awful pink on black, and that makes it so much more legible. (ok, ok, for those who want to look at it, it's Pink is the New Blog).

#91 ::: Kate Nepveu ::: (view all by) ::: August 14, 2006, 10:01 AM:

Larger type also works in Opera 9. Thank you all for working on it.

And thanks for the ROT13 bookmarklet; for some reason the last time I tried one it didn't work for me, but now it does and I will use it frequently.

#92 ::: Laurence ::: (view all by) ::: August 14, 2006, 11:00 AM:

This is wild. I always thought the Making Light font was too small, but now that I can compare it with a larger font, it seems to me that the larger font takes longer to read. It's as if the smaller font fits more words into my eyespace. That's weird.

But on reflection, I think that reading Making Light more slowly is a good thing.

Also - when the page first loads, it shows up in the small font. When it's all done loading, it switches to the large font. That makes it easy to compare the small and large font, which is cool.

But there seems to be a downside: when I click on a comment in the "Recent Comments" list, it takes me to that spot on the page. But when the large font kicks in, everything on the page moves down, and I'm left looking at a previous post.

#93 ::: Patrick Nielsen Hayden ::: (view all by) ::: August 14, 2006, 11:06 AM:

Yeah, I noticed that. Not sure what to do about it. Basically, Movable Type was never designed to host a conferencing system on the scale of Making Light, and we need to figure out what to do about that in the long term.

#94 ::: Doug K ::: (view all by) ::: August 14, 2006, 01:20 PM:

late to the party as usual, but as an observation: I'm using PC Firefox with both font and colours fixed to my preferences (tools/options/content/font and colors/advanced is where they may be found, uncheck the 'allow pages to choose their own fonts/colors').

The site appears the same now as before the changes, which is to say pleasantly readable in 20pt Roman, black on pale grey.

These settings do mung the occasional site, but usually it's one trying to sell me something, so I just catch the next wave of electrons and surf on out of there..

#95 ::: Barbara Nielsen ::: (view all by) ::: August 14, 2006, 02:09 PM:

This discussion is much too technical for me, but PLEASE let Patrick prevail in the type sizing. If you see a cartoon of someone in trifocals resting her chin on the bottom of the iMac screen, that is I. I know that my eyesight is faulty, but an option to increase type size would help.

Welcome to Making Light's comment section. The moderators are Avram Grumer, Teresa & Patrick Nielsen Hayden, and Abi Sutherland. Abi is the moderator most frequently onsite. She's also the kindest. Teresa is the theoretician. Are you feeling lucky?

Comments containing more than seven URLs will be held for approval. If you want to comment on a thread that's been closed, please post to the most recent "Open Thread" discussion.

You can subscribe (via RSS) to this particular comment thread. (If this option is baffling, here's a quick introduction.)

Post a comment.
(Real e-mail addresses and URLs only, please.)

HTML Tags:
<strong>Strong</strong> = Strong
<em>Emphasized</em> = Emphasized
<a href="http://www.url.com">Linked text</a> = Linked text

Spelling reference:
Tolkien. Minuscule. Gandhi. Millennium. Delany. Embarrassment. Publishers Weekly. Occurrence. Asimov. Weird. Connoisseur. Accommodate. Hierarchy. Deity. Etiquette. Pharaoh. Teresa. Its. Macdonald. Nielsen Hayden. It's. Fluorosphere. Barack. More here.















(You must preview before posting.)

Dire legal notice
Making Light copyright 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020 by Patrick & Teresa Nielsen Hayden. All rights reserved.