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?
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?
Best answer: 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
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
Response by poster: 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
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
Best answer: 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]
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]
Best answer: 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:
posted by neckro23 at 10:15 AM on January 18, 2013
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
Response by poster: 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
posted by zardoz at 4:35 PM on January 18, 2013
« Older I wouldn't like a bag of beef or a beer or a cup... | Appealing high school suspension? Newer »
This thread is closed to new comments.
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