I have multi column (css3 webkit columns with fixed heights) layout in my document. When I increase font sizes for elements (using element.style.setProperty('font-size', ...); my body.scrollWidth increases also and this is OK. However, wehn decreasing font size body.scrollWidth stays the same and I'm left with a lot of blank space on the far right.
Any thoughts how I can solve this problem? How to force body.scrollWidth to reflect the changes to the document and shrink when necessary?
Related
One of the specs for Web accessibility level AA that is text can be resized to 200% without loss of content or function.
So if I zoom up to 200%, everything needs to look right.
How can I achieve that regarding the font size?
The issue is not so much a matter of font size or font size units, since most common browsers have a built-in zoom function that will zoom any text, regardless of the font size unit. The issue is that resizing may result in text containers that start to overlap, which then causes some content or functionality to become invisible (because it ends up behind something else). Success criterion 1.4.4 was written when zooming functionality was not yet as widespread as today. (In 2008, there were several browsers that supported zooming, but many people were still using older browsers that didn't support zooming, and text resizing—which is not quite the same as zooming—could cause overlap in web content.)
So, while using units such as em, %, rem etc. is a good idea, you need to make sure that text containers (such as section elements, nav, etc.) that are displayed next to each other don't overlap when you zoom in to 200% or resize text up to 200%. For example, you can describe column width using units such as % or em, or you can make sure that text containers that are next to each other at the default size end up below each other when zoomed in. If you use responsive design to make your web pages adapt to different screen sizes, you should also be able to handle zooming in desktop browsers.
You should try using em instead of px..
For example if you have div inside yourbody - suppose the font-size of the body of the page is set to 16px.
If the font-size you want in div section is 12px, then you should specify 0.75em (because 12/16 = 0.75).
You should try use "rem" (support most of the browsers).
Then you set the font-size of the root ( the html).and all the page reasize for example if you want the "h1" be always 2 times the body ,set it to 2rem;
I've designed an image grid using bootstrap using images that are either 360px square, or 360px high by 720px wide. For some reason, the wide images display taller in the row. Any idea why this is happening and how to fix it?
Here is the code in bootply
Thanks!
The images won't display at the same height just because they're the same physical height because they are scaling with your layout. And the padding in each column and elements in the columns reduces the horizontal space available for the images, and when the horizontal size changes, the vertical size will change, too (to scale the image properly).
Look at how the left/wide image is only in a single column, but the 2 images on the right are in 2 columns. There is more padding in the 2 images on the right than on the left (twice as much padding, since there are twice as many images). That's scaling the height of each to be shorter than the image on the left.
I removed the padding from the .col-* classes and .thumbnail to show that if you remove those, the images line up.
http://www.bootply.com/KacXrRCbYH
You would fix this any number of ways, but I think that needs to be up to you as to what's going to work best for your layout. The easiest way is probably just to change the height of the image on the left to account for that padding. 720x341 seems to be the resolution that works there.
http://www.bootply.com/T4F3fdgNyf
I'd like to be able to increase the default font-size, but only within a certain DIV.
Obviously, this seems like exactly the sort of case that ems were meant for. My problem is I only want to increase the font-size, without affecting other things that are sized with em, like padding and margins.
This might seem like an odd use case, or perhaps I'm just "doing it wrong™". My use case here is essentially as follows:
I have a website that is displaying a chart containing tabular data. The chart can be viewed in two modes, summary mode and full mode. Summary mode shows a smaller version of the chart, with many data omitted. The "full" version shows everything, and takes up almost the width of the browser window.
I'd like to be able to use the same style sheet for both versions. But the "full" version should probably have a larger font-size. However, the "full" version (and just about every module aligned on the left side of the screen) has a certain left padding, which keeps all text aligned the same distance from the left edge of the screen.
If I wrap the "full" version chart in a DIV that simply increases the base em, it will also increase the padding, thus making the data in the chart not left-aligned with everything else on the screen.
So...
What are some solutions to increase the font-size without increasing padding?
Am I "doing this wrong" somehow - is it a mistake to use em units for things like padding or margins?
Use rem instead of em for paddings for example in your case, as it is not affected by the changes of other elements in the page, as it is based on the root font-size of your page (html if I remember well).
Good reading here : https://j.eremy.net/confused-about-rem-and-em/
I'm designing a website and using jquery UI majorly for the icons/icon-classes it provides.
While testing in chrome what I see the default height of a span element which wraps some text without padding or border gets a height of 20 px.
I understand it will differ with the type of font and size, the defaults and the browser. Is there anyway I can set height of a text to a given size?
If I understand correctly, it seems your facing this problem because of the way different browsers render fonts.
If you font sizes are influencing their parent elements size, then you may need to rethink how you are using margins and padding's.
EDIT
You could use line-height to try and tame the behavior.
I had a page that displayed some text and a centered table below that text. I added another table adjacent to the first table. The font size remained the same on screen, but in print the font size got reduced.
This is probably so that two tables could fit one besides another. Problem is in the fact that font size got reduced on the entire page, even outside the tables (which is undesired). Does anyone know the cause for this behavior, and how can I keep the declared font size outside the tables (it is explicitly declared but in print it has no effect).
Original answer by user #celicni
It seems that font size did not decrease but the whole page was scaled to fit the paper size. So explicitly setting the outer text to larger size couldn't help, but setting the table text to smaller size helped by reducing the page width hence no need for scaling.