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.
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;
We have a number of divs on a page containing text. The text is explicitly set to a certain font-size via CSS. In some circumstances the font-size is increasing without our intervention. It seems to be related to the length of the text in the DIVs. i.e. once it gets to a particular size adding a character increases the font-size, removing it again reduces the font-size.
We haven't got any fancy libraries included to scale the font.
In chrome dev tools it shows the variation in the font set via CSS, and then the computed size here:
Why does the font go from 16px to 19.555555px? What are we missing?
thanks!
I'm building a phonegap app for IOS, and I have one <p> tag who's contents must be exactly one line across.
These elements have the full width of the device minus a little outer padding. What I want is for the text to scale to as large a font-size as possible without wrapping to next line, without being cutoff by ellipsis or being clipped, or overflowing.
So far I can accomplish this by precisely setting the font-size (which can be done - there are only about 10 devices to think about), but I'd rather have IOS UIWeview display figure it out for me.
Is it possible to achieve this with CSS?
With CSS only, you can achieve this using Viewport Units by setting the font-size to fill up the space, but now with the text size responsive based on the viewport's width.
p {
font-size: 7vw; //set to the preferred size based on length of text
}
Here is a simple demo using vw units: https://jsfiddle.net/gmattucc/mh3rsr0o/
You would have to check if vw, vh units are supported in the device you are targeting: http://caniuse.com/#feat=viewport-units
You might also want to check out this article to learn more: https://css-tricks.com/viewport-sized-typography/
When using same font, chrome and firefox give them different line heights, and sometimes you need them to be the same across browsers... Right now when encountering this issue, i have to give both font size and line height in pixels, but it doesn't seem like the best solution. Should different units be used may be? How do i make chrome and firefox render fonts similarly?
You can set line height as a pure number, which will by definition be taken as relative to the element’s font size, e.g. line-height: 1.2.
You can alternatively use the em unit, e.g. line-height: 1.2em, but then inner elements would inherit (unless they have their own line height set) the computed value, not the relative number. This matters if nested elements have different font sizes, and usually it’s the relative line height that should be used.
Please use a CSS reset from Yahoo, that should resolve cross browser issues.
Check this jsfiddle
Why is there a difference in size of the datepicker when font-size is set to 1.5em?
The amount of em's is not important I have tryd different font-sizes and I still get the same problem. The red box is set to 460px and is there for you to see the difference in size of the datepicker in firefox and chrome/safari.
Edit: I have already try'd using px insted of em
Firefox uses DirectWrite to render text, and Chrome doesn't.
That is the reason for the ever so slightly different size of the rendered text.
There is no way to make the text pixel-perfect the same size between the two browsers.
Read this: http://www.basschouten.com/blog1.php/font-rendering-gdi-versus-directwrite
And this, particularly the "Hinting and spacing differences" section: http://blog.mozilla.com/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/
Because 1.5em isn't a precise size and depends on what the browser decides the relevant font metrics to use are.
If you want a precise size, use either px or points.