Jared Stein – Education, Technology, Culture, and the Internet

A question came up on the Canvas users list of how one might open an external web site at the same time that a quiz opens. This is possible with Javascript and use of the External URL option in the Canvas Modules (more…)

I just had the wacky idea that I could force users in an experimental situation to engage in movements that help track their reading behavior in a web browser. This method would employ Javascript and CSS–in short, the script would obscure text outside of the foveal vision area–the readable foveal vision area would be centered near the cursor, requiring the user to move the cursor with her fixations. Combine this with coordinate-based Javascript mouse tracking and user input that reports to a server via AJAX a la UsaProxy, and you’ve got an interesting, albeit limited, method of tracking eye movements (more…)

The My Moodle feature in Moodle 1.9x displays a list of registered courses to a user after logging in. The nice thing about the list is that each course link is followed by a listing of any recent news or events in the course. Unfortunately in highly active courses this list becomes quite lengthy, and ultimately obnoxious as the length obstructs quick access to other courses in one’s view.

To remedy this I have, for quite some time, maintained a custom bit of very basic Javascript and CSS that sets the default view of news items to hidden, with a clickable link to show the entire list from the My Moodle page (more…)

This article explains an experimental approach to ensuring consistent line-length and font-size for the readability of text on Web pages. This is the first time I’ve posted an article related to Web development, but I hope it to be the first of many.

Though there have been a number of articles proving the usefulness of flexible and elastic layouts in Web design, too many sites still use fixed or fluid layout. I say “too many” because the key problem both fixed and fluid hold for users lies with readability. Usability studies have shown that most users find a line length of 40 – 60 characters to be easiest to consume (though at least one report ranges from 35 – 95 and another a more modest 40 – 80, depending on the font used). This falls in line with print typography guidelines that recommend anywhere from 11-15 words per line. As you can see, there’s no final word on line-length readability, except that it falls somewhere on either side of 50 characters per line (cpl), or 13 words per line (wpl).

Presuming, then, that a Web designer wants to present reading text at around 50cpl, flexible or elastic layouts come in handy, as they measure the width of text column(s) in em space. One can set the width of the column to, say, 45em, depending on the font, and end up with a rough average of 13 words per line. The added benefit is as the user increases or decreases her font size for readability, the width of the text column increases proportionally.

Fixed width designs are often measured in pixels, and a user increasing the font size does not increase the width of the line, resulting in too few cpl. Neither do fluid designs, which are measured in %–these often result in too many cpl. And for most users with ultra-high resolution screens, fonts are often too small and require resizing.

A few years back I tackled this problem from a different angle. I thought, wouldn’t it be great if, rather than changing the size of my window and/or the size of my font for optimal readability, the font size changed automatically proportional to the size of my window? So if I had a high-res screen with my browser maximized, the font would be larger. If I had a low-res screen, the font would be smaller. In either case, the proportion would equal Your Favorite Line Length.

There is no % unit of measurement for font-size in CSS, so I had to turn to JavaScript to calculate my font’s size based on the DOM window size. A few years back, our Web developer Brandon Groff worked with me to write the JavaScript that would do this, and the effect was most elegant: here’s a quite plain example.

A few notes:

1. JavaScript recalculates the desired font-size based on the window size and reloads the page on resize
2. The font’s proportional size is based on a JavaScript variable that can be static or adjustable
3. Changing the value in the text input before resizing alters the font-size’s proportion. A “1″ roughly equates to 100% of the body’s width.
4. At least one known bug: if the user increases or decreases the font size through their browser, the script it breaks.
5. This JavaScript is a bit old, and I hope to evaluate it line by line for currency and efficiency.