Website font overlapping?
January 17, 2013 11:57 PM   Subscribe

Occasionally I will run across a webpage that has some or all of the text look like this. It's all bunched up and completely illegible. What gives?

I'm sure you web gurus have a name for this but I don't even know what it's called, hence I can't research it to find a solution.

I'm on OS X 10.7, running Firefox. I have a (fantastic) add-on called NoSquint, one that will resize--and remember--the text on a particular webpage, but it doesn't seem to be able to handle this page. For this page: Google Lit Trips, the text isn't all like this, but for it to fit comfortably in the frames I have to make it small, which is also hard to read.

So what to do? Is there some addon or greasemonkey script that can whip this site into shape?
posted by zardoz to Computers & Internet (6 answers total)
 
hmm...not sure about firefox, but in safari, at least, you can quickly adjust your font size by hitting command-+ and command-- (that doesnt look right...command and also plus or minus is what i mean)
my guess is that nosquint is conflicting with the html tag +3 (or whatever number) in a way that magnifies the magnification...as the text box is prob a fixed size there, it has no choice but to jam up the text...
posted by sexyrobot at 12:11 AM on January 18, 2013


Google Lit page is a font issue caused by someone coding that page who has no idea what they are doing and thinks it's 1997.

The Google Lit page wants to render the text in a font called Baskerville. Unfortunately, most people do not have that font installed and the website creator isn't embedding it (so that it automatically displays in your browser.)

When you and I do not have Baskerville, we render in Times New Roman (or another serif font) and the line spacing is different for the two fonts. When text is shown in TNR, you get overlapping issues.

I have no idea what's up with your first example; it looks like you're not fully loading the CSS maybe. What happens when you refresh and can you give us a link to the original of that screenshot?
posted by DarlingBri at 1:41 AM on January 18, 2013


DarlingBri--I shrunk the text with NoSquint and it looks normal, though the text is really reallly really small. Oh well, better than before. The funky overlapping is gone.

Good to know it's not just me, that the site itself if part of the problem. Thanks folks.
posted by zardoz at 3:07 AM on January 18, 2013


Unfortunately this is a problem with how the website was programmed, not a problem with your browser.

Browsers are more technically referred to as "user agents." When you build a public-facing website, the standards dictate that you should not excessively impose a particular font size or rendering style onto a user agent. In a perfect world, any program that can read HTML should be able to display every website.

This is important, for instance, for supporting handicapped users. Some user agents are completely non-visual – they render content from the web for a blind user using a machine that generates braille.

In this case, the developer probably didn't test the site in more than one zoom level, and did not account for the possibility that the font size might grow and that the content of the box should grow with it – a fairly common use case, especially considering the need for the visually impaired to have easily enlarged text. Simply put, the developer screwed up.

One thing you could do, since you have a Mac: try using the operating system's zoom function. I'm not sure how to trigger it with your version, but on my version (10.8.2), I can zoom with Option+Cmd+8.
posted by deathpanels at 6:56 AM on January 18, 2013 [1 favorite]


Wow, that particular site has some pretty terrible CSS. The reason your extension doesn't work is because the site sets separate styles for each individual paragraph.

Here's a GreaseMonkey script that should work. Because it's modifying so many elements it's a bit slow, though. Edit the @match directive to make it work only on that site, of course, and the CSS to whatever style you want:
// ==UserScript==
// @name       Text fixer
// @namespace  http://use.i.E.your.homepage/
// @version    0.1
// @require    http://code.jquery.com/jquery-latest.js
// @match      http://*/*
// ==/UserScript==

jQuery('p, p > span').css({
    'font-family': 'serif',
    'font-size': '12pt',
    'line-height': '16pt'
});

posted by neckro23 at 10:15 AM on January 18, 2013


neckro23, thanks for the greasemonkey script, but unfortunately the only greasemonkey scripts I've installed have been the simple kind. I'm in the dark on how to add this to the page. Can you help me out? Or point me to a tutorial? Thanks!
posted by zardoz at 4:35 PM on January 18, 2013


« Older I need some fast, easy, health...   |  Brother suspended for three da... Newer »
This thread is closed to new comments.