I'm making an adaptive website, And when the user has some odd font size configuration (For visual issues and so) The design breaks in a terrible way... Obviously I don't wanna forget the accesibility... So: Is there a way to know when the user is trying to force the font size, disable that and give him different styles?
Normally your font size settings on a page override those set in browser settings, except if you use % or em when setting font-size, in which case they may be relative to the size set in browset settings (depending on exactly how you set the sizes).
This means that if you have, say body { font-size: 9px } in your CSS and a visually impaired user has selected the largest size in normal Chrome settings (corresponding to 24px), the user setting is overridden and the illegible size is used. This is one reason why browser font size settings as such are not often changed by users: their effect is rather limited, when used alone.
However, if the user has set the browser to ignore font sizes specified on web pages (this is possible e.g. in IE via Accessibility settings), then the font size in browser settings is used, no matter what you do. (Font size within the page might still vary, e.g. due to using small markup or heading elements, as per browser defaults for some elements, but any CSS settings on the page for font size would effectively be disabled.)
Similar considerations also apply minimum font size settings, which are rather common and might be set even by browser’s factory settings. They take effect after normal CSS cascade has resulted in some size—if that size is smaller than the minimum set, the minimum is used instead.
There are indirect ways to try to find out what the font size actually used by a browser is, e.g. by getting the height of an element using the clientHeight property. If you do that for an element with line-height: 1, you normally get the actual font size used. But you cannot disable it; it’s pretty much the essence of browser settings that override settings on web pages that web pages cannot override them.
You can get the default font size with getComputedStyle by reading the property of the root html element (unless you have a css rule which modifies its font-size).
// get default font size in px
var computedStyle = window.getComputedStyle(document.getElementsByTagName("html")[0], null);
var defaultFontSize = parseFloat(computedStyle.getPropertyValue('font-size'));
For most browsers the default value should be 16px.
To override a value from the user's style sheet, add !important to the rule specifying the font size, for example:
body {
font-size: 16px !important;
}
Note however that in general this should be avoided. See also this SO question:
when to use !important property in css?
Related
I would like to gather some statistics about what the range of default font sizes are, that users set in their browsers if they do not wish to use the standard 16px.
This information might be helpful in deciding up to which font size our layout needs to not break.
There are a lot of similar-ish questions on SO that ask for the effective font-size on the body element, but that is of not much use to me, as I'm interested in collecting data about the browsers default font size before CSS kicks in.
Or does anybody know if statistics like these already exist?
The best practice is to set the font sizes in ems which scale accordingly to the browser font size, but you can read this article : Users DO Change Font Size
This is actually one that isn't as simple as you may think as their is no JavaScript hook etc. you can call.
The way to get a reasonably accurate value is:-
create a <div> that has opacity:0 and set padding to 0.
Add a word that is in a specific font that you know the exact dimensions of, a word that can fit on one line on a small screen even at 200% font size.
Add the word to that div.
Set the font size of that div to be 1em or 100% (so that it scales with user font size)
Measure the width of that div in pixels with your browser set to normal font size.
Then when the user loads the page measure the width of the div and compare it to the size you know is 16px / default.
You can then use the width of the div (via JavaScript) to estimate the font size they are using. (so if it is normally 160px wide and the user has 200px wide you can estimate that they are using 20px font size or 125% (200 / 160).)
The above is reasonably accurate, it isn't perfect due to different browsers handling kerning slightly differently but would be sufficient for most needs.
I've been struggling with a layout that automatically(without JS) adjusts when the user alters the browser's default font size. Even in extension APIs there is not an event indicating that the user changed the default font size.
To get around this, upon blur of the window, the width of an off-screen element is recorded and, upon focus, the size of the element is compared to the size recorded. If there is a change, then the layout functions are run again. This generated the desired layout, but there was a remaining issue of it taking time for the browser to recognize that there was a change. By this, I mean the code was fine but, unless a setTimeout of 500ms was used to delay the running of the code that queried the elements' geometry, the layout would be incorrect. An offsetHeight queried upon focus would differ from that queried 500ms later.
I thought perhaps it was because I was doing all of this in JS and ought to have the browser perform it. Thus, I started learning about calc in CSS and using it in media queries, which led me to this question concerning the determination of rem in a media query. The issue mentioned appeared to be that the browser always uses 16px to determine rem rather than the adjustment placed in the root or html element for font size such as the common 62.5%. I thought I could get around the issue by using calc within the media query.
I tried the following in testing on my larger screen that is 1920px wide; and if use 191.9rem, the styles in the media query get applied, and do not for 192.0rem. So, it seems accurate to the pixel.
#media ( width > calc( 192.0rem * 0.625 ) )
However, when the browser's default font size is changed, it doesn't adjust as expected. For example, since the screen is 1920px wide, at a base font of 16px, the media query style should not be applied. But, if reduce the base font to less than 16px, the media-query styles should be applied because a rem is less than 10px, including the 62.5% adjustment, but they are not.
But, if leave the base font at less than 16px and then refresh the screen, the media-query styles are applied as they should be. Thus, it appears that the issue of a necessary delay for the browser to reflect the new geometry still applies. The browser isn't always using 16px but the media query processes before the geometry is fully updated, which is the same problem I had before using JS and why the 500ms delay was needed.
I attempted to illustrate this through the snippet but I don't know what width it will be displayed at in your browser so, it may not work properly for everyone. Plus, the snippet container doesn't appear to change with the default font size either. Nonetheless, the idea is there. The div.affected should change color from yellow to blue when the browser default font size is decreased to below 16px; but it won't upon change but only after reloading the page.
The snippet works for me. At default font size of 16px both boxes are blue. Change default font size to 10px and immediately come back to this page and both boxes will still be blue. Refresh the page and run the snippet again and the div.affected will be yellow. The converse works also. I want div.affected to change when the font-size is changed. I added the text so you can see that it isn't because the snippet itself isn't responding to changes in font size by observing the size of the 'A'.
Since the text size updated upon change of font size and without reload, perhaps this is part of a better answer, that is, instead of querying the size of an off-screen proxy element upon focus, query the font size of text. Maybe the 500ms can be reduced to zero for determining whether a change has taken place and, if so, then wait 500ms before querying to reset the layout. I'll test that out, if don't receive a better idea shortly. Tried it and it still requires a delay if use getComputedStyle to query font size.
My question is, is there a way to do this better and get around the delay, either in JS or CSS and media queries with or without use of calc?
I have it working in JS with a delay, but the the page has to be displayed but not visible and then wait 500ms before performing the calculation and making the page visible again. I'm looking for a way that doesn't require a delay because CSS media queries appear to have the same issue and unless use JS to add a class after a delay, media queries won't work at all.
Thank you for considering my rather confusing question.
div { width: 100px; height: 100px; background-color: rgb(73,110,147); margin: 10px;text-align: center; }
div.unaffected { font-size: 48px; }
div.affected { font-size: 3.0rem }
#media ( width > calc( 79.5rem* 0.625 ) ) { div.affected { background-color: yellow; } }
<div class="unaffected">U</div>
<div class="affected">A</div>
I have a problem with blocks in the site if the user increases the font size in the settings of the browser. How can I detect it, to solve the problem via JavaScript?
Assuming you have unformatted text, you could use Window.getComputedStyle(), passing in some element, and then check the text/font size properties.
Check out Mozilla's documentation for more info: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
Is it possible to trigger Browser's zoom-in and zoom-out function through JavaScript?
I want to add Zoom-In(+) and Zoom-Out(-) buttons in my website, and by clicking on the button want to call browser's zoom-in (which can be called by pressing ctrl and +) / zoom-out (ctrl and -) function.
I do not believe there is a standards based way to do this. Certain browsers may offer their own API to do this but I am doubtful.
That being said I have accomplished this effect in the past through some CSS trickery. Essentially in your CSS define every measurement (width, height, margin, padding, font-size, etc.) in em instead of px. This essentially makes the size of everything dependent on the default font size of the document. Then to zoom you change the font-size of the body tag to make things smaller or larger. If you do this carefully the effect will look the same as if the user zoomed using their browser.
To make life easier when doing this I like to use a CSS reset stylesheet that sets 1em to be 10px. That way if you want a div to be 200px wide you just set it to be 20em. You can accomplish this by setting the body font-size to 62.5% in your CSS reset stylesheet. Since most browsers have a default font size of 16px and therefore 1em=16px, 10px is 62.5%.
I hope this helps, it is a lot of work to do it right, but using em instead of px has helped me in countless ways when working with HTML and CSS.
Think this was already answered with
window.parent.document.body.style.zoom = 1.5;
"Zoom" a browser window/view with JavaScript?
I don't believe you can. On IE you could simulate it with the zoom CSS property, but that's non-standard and so support outside IE will vary.
my site is aimed purely at the laptop market (dont ask why or argue!), all my users (or 95%+) we on a screen width of 1200+,
netbooks are now taking off, with a resolution of 1024 wide.
my site still looks great on a netbook if you zoom out once (ctrl-minus), but i don't want to rely on users knowing about ctrl-minus.
what are my options besides redesign? I'm keen not to have zoom buttons on my page.
is there a javascript zoomer outer?!!!
While this doesn't sort out your zoom, you could try a little trick based on CSS & relative sizing.
If you have an image or a container that is 100px wide, try setting it to 10em wide (or faff with the em amount until you find the appropriate value). Eventually, if you do this to every single dimension specified upon your site, you'd be able to actively shrink the page by changing the default font-size. E.g. from 1em, to 0.91em.
People often use the relative sizing to allow people the flexibility of being able to shrink and grow font sizes as they want. It's not as commonly used on images (because they are by requirement, fixed in size). This needn't be the case though, and in this instance, might offer you a way out of a "full site redesign" and giving the effect of "zooming".
This might solve the problem without redesign, but may be tricky and would require a bit of testing. The way stylesheets cascade, shrinking the font a little more, element by element, might cause a few issues.
detect screen resolution via JS
apply appropriate CSS
ctrl + - is the browser feature and you should never rely on that.
try this article http://www.alistapart.com/articles/alternate/
or try to google "javascript switch css"
this is a bad idea for many reasons. zooming is client specific so you will run into cross browser compatibilities if even possible at all. your best bet is to use css and set a min and/or max width. you don't need to redesign but (assuming proper html structure and usage of external css) changing some width values should do the trick.