/    Sign up×
Community /Pin to ProfileBookmark

Supressing broswer option to "decrease" font

Copy linkTweet thisAlerts:
Apr 04.2006

Hi there,

One of my customers has asked me to fix the minimum font of his site so that it cannot be reduced further. He is quite happy for people to be able to increase the font, but apparently several of his customers have experienced problems when “fiddling” with the increase/ decrease font size in the brower, rendering the site unreadable.

The body font is set to .75 ems, which means that reducing the font size by even one “notch” results in unreadable font. Increasing the font to 1ems makes the site font too large but partially solves the “decrease font” problem.

Setting the font to pixels seems to kill the increase/ decrease font functionality entirely – shoddy for accessibility.

The ideal solution would be to “switch off” the “decrease font” button, or somehow make it so that the default font can only be increased.

Can anyone help me with this? I have tried searching but tend to come up with solutions that modify ems/ pixels/ points and my attempts to use these solutions have failed.

The live site is [url]www.ldl.co.uk[/url].

Thanks so much for your help!

Suzanne

to post a comment
Full-stack Developer

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangApr 04.2006 — This 'fiddling' is a problem. A partial solution is using this script:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>font size</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
window.onload=function() {
var obj=document.getElementsByTagName('div')[0]; // could also be a reference to a hidden div
var h=14;
if(obj.clientHeight) { // FF Opera
h=parseInt(obj.clientHeight);
} <br/>
else {
if(obj.offsetHeight) { // IE
h=parseInt(obj.offsetHeight);
}
} <br/>
if(h&lt;14) { // change this value depending on the font-family and size!
alert("Browser 'Text Size' is set too small.nPlease change your option.");
}
}
&lt;/script&gt;

&lt;style type="text/css"&gt;
body {
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:0.75em;
}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;some text&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;Set the browser Text Size to a smaller value and reload the document. The user is then alerted.

It of course requires JavaScript enabled.

In Opera it will not work if the zoom has been used, but it works if Ctrl-min is used
Copy linkTweet thisAlerts:
@felgallApr 04.2006 — The person who owns the browser has complete control over the fonts used to display your web page and what size that the page content displays at. If they want to display it using a 4 pixel font to make it ultra-small then there is noting you can do to stop them because their stylesheet and Javascript cmmands override any that you put in your page.
Copy linkTweet thisAlerts:
@brandyouauthorApr 05.2006 — Thank you both for your input. I had a horrible suspicion that the browser would override the site's CSS but wasn't confident enough to go back to client and say that restriciting the "decrease" button wasn't possible.

The "popup" solution is something I can suggest, but the client isn't too keen on popups.

Thanks again!

Very best wishes,

Suzanne
×

Success!

Help @brandyou spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...