In my project I want users to be able to zoom in on the webpage. But as the in-browser-zoom-function with JS isn't widely supported, I figured another way to zoom is to change the font-size: n%; as I have used rem units for everything size related.
If I change the font-size for * in css, everything else scales with the font-size. E.g.:
*{font-size: 110%;} Would be the same as changing browser-zoom to 110%.
Additionally, I would like to use a select > option to choose between 50% and 150%. That way I could utilize onchange="this.value"
How do I change the fontSize/font-size of * in CSS with Javascript?By * (CSS) I mean every element on the page, not just a div, form or id.
Edit:
As I used REM units on every element, all I needed to do was to change the fontSize of the root/<html> element. Here's the code I used for it to work out for me:
<html id="html">
----------------
<select onchange="document.getElementById('html').style.fontSize = this.value;">
<option value="125%">125%</option>
<option value="120%">120%</option>
<option value="115%">115%</option>
<option value="110%">110%</option>
<option value="105%">105%</option>
<option value="100%" selected>100%</option>
<option value="95%">95%</option>
<option value="90%">90%</option>
<option value="85%">85%</option>
<option value="80%">80%</option>
<option value="75%">75%</option>
</select>
Please don't do this!
As this is marked accessibility I cannot recommend doing exactly what you suggested.
Offering users the option to increase font size - massive bonus points.
Scaling everything on the page by an equal amount - massive no no.
The big problem with this is that the page will grow in width as you increase font size.
This will result in horizontal scrolling as well as vertical scrolling which is a big no no!
Why does it matter?
The people most likely to increase your font size are also likely to be the people who rely on a screen magnifier.
Scrolling in both directions is a nightmare for Screen Magnifier users, as part of a sentence may be off the screen.
It is also a bad experience for people with dyslexia etc.
They often struggle with making sure they don't skip a line, having to scroll side to side while reading makes this problem 100 times worse.
Why does browser zoom work for accessibility then?
The difference between increasing the size of everything and using the browser zoom is that when you zoom your browser it also calculates the effective width of the page in CSS pixels.
So if you zoom a 1920px wide screen 200% it exposes the width as 960px, which will trigger any media queries designed for a tablet view (for example) and adjust your styles accordingly.
What should you do?
As I said at the beginning, letting people change their font size - big bonus points!
However what you should do instead of scaling everything is that you should make sure all containers on the page can accept your larger font size and define all fonts in em or rem.
This way all you need to do is change the <HTML> font size and every single font on the page will scale by the same amount.
It will also obey user font size settings if you set your HTML units as percentages.
In the following example all you would do is change the HTML from 100% to 150% and all font sizes would increase without affecting container sizes etc.
The below example also illustrates what happens if you increase your font size and a container does not allow enough space at 150% font size.
Also try the below example with your browser font size set to maximum and you will see the text scales without affecting the container size.
Font size 100% example
html{
font-size: 100%;
}
h1{
font-size: 3rem;
}
p{
font-size: 1rem;
}
.container{
width: 33%;
background-color: #ddd;
overflow: hidden;
}
<div class="container">
<h1>Heading</h1>
<p>text</p>
</div>
font size 150% example
html{
font-size: 150%;
}
h1{
font-size: 3rem;
}
p{
font-size: 1rem;
}
.container{
width: 33%;
background-color: #ddd;
overflow: hidden;
}
<div class="container">
<h1>Heading</h1>
<p>text</p>
</div>
Don't define containers in the same units (as a general rule) so that they do not scale beyond the bounds of the page.
If you do this you will make the page far more accessible without introducing issues that actually reduce the accessibility of the page by forcing users to scroll in two directions.
Set form-elements font or font-size to inherit (in order to override browser defaults)
If your elements have relative font-size, all it takes is to control the font-size of body element
Stop using inline JS. Use Element.addEventListener() instead. It's easier to debug JS when you're not using it withing HTML tags.
document.querySelector("#fontSize").addEventListener("input", function() {
document.body.style.fontSize = this.value +"%";
});
h1 {
font-size: 4em; /* Demo */
}
input,
textarea,
button {
font: inherit; /* override browser defaults */
}
<label><input id="fontSize" type="range" min="10" max="2000" step="1" value="100"></label>
<h1>H1 title</h1>
<p>Lorem ut florem</p>
<blockquote>
blockquote
</blockquote>
<form>
<input type="text" value="Lorem ut florem">
<button type="button">Button</button>
</form>
Related
HTML and CSS
.pickthetime {
height: calc(var(--vh, 1vh) * 3);
width: calc(var(--vw, 1vw) * 25);
align-content: center; // center looks better, also tried left to stop it from breaking a new line on Safari on iOS
font-weight: 300;
}
<input class="pickthetime" type="time" id="pickthetime" name="pickthetime" required />
I have the actual picker set to a certain size as you can see on the CSS. No matter what I do, I can't seem to scale the font size automatically based on the size of the time picker. If I increase or decrease the font size too much using calc(var(--vw, 1vw) * somenumberhere) it's always too big or too small on some devices. Some font sizes work well on my Android phone, but then it won't work with my iPhone 11 or (using the Chrome device toolbar) iPhone X.
I have also tried to use FitText but the same issue occurs. It does scale a bit better on Chrome (using device toolbar) or on my Android phone.
I...don't know what to try from here. What works on 1 device, doesn't work on the other 2. All I want is for the font size of the time to render according to the width of the time picker (but I don't want it to become hidden by the little clock icon that browsers like Chrome or the arrow down icon that browsers like Safari on iOS use).
I would suggest not using vw/vh for styling the input, and instead using rem or another relative length unit.
This is why you're having trouble with mobile/desktop scaling: because the scale of the viewport width/height is so different between devices.
Using for example height: 1.25rem keeps the height relatively static across devices, depending on the root font-size property at a given breakpoint.
Assigning a rem value as the font-size of the input itself will likewise scale with the root element's font-size, and make it easier for you and other developers to understand the relationship between the input's height and its font-size.
Example:
/* Let's say the <body> has a font-size of 20px */
body {
font-size: 20px; /* 20px = 1rem */
}
.pickthetime {
font-size: 1rem; /* or 1x body's font-size = 20px */
height: 1.5rem; /* or, 1.5x body's font-size = 30px */
/* I would suggest not setting a width; if you do,
set a max-width as well, or style the containing
element with a set width/max-width */
width: 100%;
max-width: 300px;
}
In the above example, you can now tell that the font size will be the same as the rest of the text, and also that the height of the input element will be 1 and a half times the size of your text.
If you set the height of the field based on vh, you need to set the font size the same way. Font size is a height, not a width. If you set the width, depending on the width of the form field your text will either be too tall or too short for the box. I'm not really sure how you would want the form field to look when the shape of the text doesn't match the geometry of the form field.
I know this isn't really an answer, but the problem you've described has no solution. For a change that would help you can refer to another answer but I don't want to just say "Do this instead" because there are a lot of options depending on what you want.
I've noticed that as fonts get larger and larger, the vertical padding in a div element above and below the text grows larger. Is there anyway quick way to prevent this? Is this font dependent?
I'm attempting to create a word cloud, but these vertical spacings are proving to be quite annoying.
Here is an example:
You can use the line-height style rule to change the amount of space around the text
Setting the line-height is your answer but I would recommend the em unit and setting the line-height to 1em for all font sizes in your tag cloud. I always use em's to represent line-height because regardless of whether the font is set by pixels, ems, or some other unit, line-height is always relative to the size of the font.
According the the W3C specification for line-height
A value of 'normal' sets the 'line-height' to a reasonable value for
the element's font. It is suggested that UAs set the 'normal' value to
be a number in the range of 1.0 to 1.2.
This means the font size can vary but the vertical height of the fonts will always remain consistent and relative to the corresponding size.
Try in your css:
line-height: 20px;
You could research for some already done word clouds.
Or just put classes to the different sizes, and so you can put negative padding to the bigger sized words.
.span bigger {
font-size:2 em;
padding: -4px;
}
.span big {
font-size:1.5 em;
padding: -2px;
}
.span small {
font-size:0.9 em;
padding: 0;
}
Hope it helped or at least gave you some cool ideas! ;)
I have a text that is uppercase, e.g. ABC.
As it is uppercase, all characters have the same height.
I also have a container (div) with fixed height, e.g. 100px.
How do I make this text fill it vertically, so each letter is exactly 100 pixels high?
I tried font-size: 100px, but it does not fill the container (there are gaps above and below).
See http://jsfiddle.net/6z8un/1/ for an example.
UPDATE 1:
Let's assume all characters actually have the same height (difference either does not exist or is negligible). Otherwise the question does not make much sense.
UPDATE 2:
I am pretty sure it can be solved using https://stackoverflow.com/a/9847841/39068, but so far I had no perfect solution with it. I think ascent and descent are not enough, I would need something else for the top space.
line-height http://jsfiddle.net/6z8un/2/ will not solve the problem because this will not remove the whitespaces. You could apply the size by hardcoding (for me it fits with font-size of 126px) But this is different to every user (sans-serif can be configured by user/system/browser)
Windows default sans-serif font MS sans serif is different to Droid sans serif on Android or DejaVu Sans on Ubuntu.
To solve this problem, you could set a font to default, like Times New Roman, but not every system does have this font by default.
To solve this, you could use a custom font imported from a server like htttp://google.com/fonts
but not every browser does support custom fonts.
I think the only way to solve this is to use an image.
But custom fonts should do their job on modern browsers too :) (e.g.: http://jsfiddle.net/6z8un/5/ )
Is this ok?
http://jsfiddle.net/6z8un/4/
HTML:
<div><span>ABC</span></div>
CSS:
div {
height: 100px;
background-color: #ddd;
font-family: sans-serif;
}
span {
font-size:136px;
margin-top:-25px;
display:inline-block;
};
Use this code. I hope this can help you.
<div class="outer"><div class="inner">ABC</span></div>
.outer {
margin: 0;
padding: 0;
height: 75px;
overflow-y: hidden;
}
.inner {
font-size: 100px;
background-color: #ccc;
font-family: sans-serif;
margin-top: -18px;
}
Note: As I know whenever we use font-size the upper and lower gap is also the part of height. I mean font-size = upper gap + actual height of font + lower gap. So if we want 100px div then use font-size larger than 100.
So far I made a small script that measures letter heights using canvas (would be a good thing to put on GitHub I suppose).
It is currently slightly unprecise, mostly because of caching.
I have published it as a library on GitHub, see here: https://github.com/ashmind/textmetrics.
Unfortunately I did not have time to make demo work as a GitHub page yet, so I can't link to it.
My css has defined the font-family to cascade depending on what fonts are available:
.myfont {
text-transform: uppercase;
font-family: Calibri, Arial, sans-serif;
padding: 2em;
background-color: red;
}
and, depending on what font is rendered, I would like to adjust the padding to appropriately center the all-caps text in the <sarcasm>beautiful</sarcasm> red background. Is there a good way to calculate the size of the font descender so that I can adjust the bottom padding accordingly?
Bonus points for solutions that also calculate the ascender height, cap height, and x-height.
Thanks in advance!
This is possible: use this library: baseline ratio, or typography.js Insert two spans into a container div, with 0px font size and a large font size like 100 or 2000, call getBoundingClientRect();, get difference in height, and divide by the bigger ones height. The 0 px font lies on the baseline. This gives baseline ratio, percentage of ascender and descender.
AFAIK that's not possible with JavaScript. You may be able to find out the used font, but not the font parameters.
So you will need to search for these parameters (e.g. in font libraries) and store them by-font so that you can look them up once you know the used font.
A web dev agency called EightShapes have put together a tool that lets you generate CSS to crop away the space above and below text and so make layouts that work well around ascenders and descenders. There's an accompanying blog post about it.
I have two layout elements lets say one is 33%, the other 66%. They both use 100% of my screen size (So it is dependent on browser window). The smaller element also has a min-size property, so it cant fall below 250px;
Now if the layout is at least 757px large (so the size where the min property doesn't apply) everything looks fine. If the layout falls below the 757px the second element starts to overflow since it still takes the 66%, so the sum of both layouts exceeds the 100%.
I made some graphics to show the behavior:
Layout 1000px not overflowing:
Layout 500px overflowing
Is there a solution to prevent the overflow (not overflow: hidden) so the second element takes only the remaining space when the first element reaches it's min width.
Also JavaScript shouldn't be used excessive!
Regards, Stefan
Sure, this is actually pretty easy and requires a very minimal amount of code:
HTML:
<div class="sidebar">
...
</div>
<div class="content">
...
</div>
CSS:
.sidebar{
float: left;
width: 33%;
}
.content {
overflow: hidden; /* Ensures that your content will not overlap the sidebar */
}
You can view the live demo here: http://jsfiddle.net/7A4Tj/
Edit:
If you're trying to achieve a site layout that has equal-height background images for the sidebar and content, all you need to do is wrap both those elements in a containing div and use the Faux Columns technique.
Try using the following for the second widget:
position: fixed;
right: 0;
Here´s my five cents
min-width on both divs
and a wrapper that also has min-width, plus both of the divs having percentage width
JS fiddle code
PS seems to be working fine in IE8
PPS Also do check out #media queries if you want to have conditional CSS rules on different window sizes, might be helpful. Will run on browsers supporting CSS3: CSS Media queries at CSS Tricks