I have an image that represents my email address. I want that this image has the same height as font height or line height. So I tried this:
img.address { height: 1em; width: auto }
<p>My e-mail address is <img class="address" height="15" width="149" src="address.png" alt="[]" />.</p>
It seems to work for Chrome on desktop, but for Chrome on smartphone image is much smaller than the font. I don't understand why? Is there any remedy for that?
NOTE: since this method works for desktop browser, the question could be rephrased like this: why is in smartphone browsers the height of the font not 1em and how can one obtain the height of the font?
EDIT: I added few commands around the image to put it into the context.
The default font-size for a webpage is 16px (reference) where no more setting is applied on document. You didn't set any font size to your html or body or paragraphs and so:
the browser renders image by default font-size (16px) because there
is no more setting to control images size.
Text of webpage may not use default 16px for many other overriding settings as well as android initial settings, accessibility options, mobile friendly standards to render texts etc.
So you have to define your desired font size for entire document and then the texts and images height will have same reference.
Finally if you dont want to set initial font size, a javascript trick is to calculate the height of rendered lines and set it as image height. For example I suggest to extract first word from text and put it into a temporary div and after calculating the height of that div, set it as image height:
var myhtml=$('#imageId').parent().text();
var mywords=myhtml.split(" ");
var fisrtWord=mywords[0];
$(body).append('<div id="tempdiv">' + firstword + '</div>');
$('#imageId').height($('#tempdiv').heigh());
$('#tempdiv').remove();
Final note: the height of lines is about 1.5 times taller than the characters height. So you may reduce the calculated height by 1.5 to have better result.
Actually it is the image that is too small on the mobile. Also, 1em is
supposed to be the font height. This is what makes this problem really
mysterious.
Well not really. font-size: 16px; does not equal to height: 16px;. line-height: 16px; will not either, it actually "just" adds space on top and bottom of the chars. The font-size actually is the width of the widest character in the alphabet (I think it actually measure the letter M). So the thing you are trying to do won't work. Then there is the fact that you would have to cut the image exactly with no space, meaning there is a possible error source there. You would have to try to set the height manually by measure and compare in different viewports. If you give me a hint of what you are trying to do with a screen or something I could possibly present you a other solution. Is there a reason why you want to use a image for your email and not a regular html?
Related
I already searched and read SOF on this topic, I found some posts interesting, particularly one that suggested to use pt for font-size because it is neither related to the pixel density, nor to the resolution, but I'm still in search...
Is there any way so I could define a specific font size in my css document, but use it with proportion to the default font size of the browser? something like this:
x = default-font-size-of-browser %
unit-to-use = (x) / (my-target-size%) em
then use that for every padding, margin, etc. in the design, which is not possible in css as long as I know!
I've found people guessing like "usually, the default of browser is 16px font-size", I don't want to guess.
Some suggested to use 100% for html tag and define all other sizes with rem: now what if the user has a wrong font size as default of the browser? Then the user will see all sites that have that overwritten well, except my site, that is not overwriting it! Sure I can think of that as being the user's problem and leave it on, but I won't take that way.
Please give ideas.
Generally, you should not change the font size of body text. The user has configured his browser to suit his display and his eyesight. If you force the font size to something else, the user may not be able to read the text.
Option to use pt as unit to define font size is meant to be used with printers, but it is not good idea to use it for screen. It tries to set absolute size ( 1pt=1/72in). Even if the text is correct size on your desktop PC, it is most likely not correct on a small phone screen. (A phone screen is viewed from shorter distance, so the font needs to be smaller.)
In addition to that, pt size depends on the dpi setting on users computer. Many users have wrong dpi setting (it depends on the monitor used), so the size of the font will not be what you expect.
The unit px is not good since the size of pixels wary between displays, as does users eyesight. However, it is useful if you want the text to be aligned correctly with an image, since the image (when displayed in actual size) is dimensioned as pixels.
In most cases, the size of body text should be 100% (i.e. do not change it). For other elements, use relative sizing (e.g. as %). If you must change the font size for body, the other elements will automatically change relative to that. The size given as % is size relative to the font size on parent element.
The default font size is the same in every browser, AFAIK.
The common suggestion for font size is:
body {
font-size: 62.5%;
}
This sets the base font size to 10px, but with scaling.
Then lets say for example you want the text of your website to be 16px, you do:
p, ul, ol, table {
font-size: 1.6em;
}
And then to set your headings:
h1 {
font-size: 2.5em;
}
h2 {
font-size: 2em;
}
For 25px and 20px respectively.
This method means that even if the default font size isn't as you would expect, the text should still scale accordingly.
See this other post by me for some cool things you can do with fonts and font sizes. Works well with responsive layout
I am working on removing tables from my site, and just learning the div tricks involved. My home page currently has a centered table nested in another table. Removing the outer table was a bit tricky for someone just learning non-table methods, but it's done.
My problem is, the inner table is super-easy to center ("margin:0 auto" in the CSS), but its div equivalent is not. The div will center if I specify an absolute width (such as 640px), but since I'm designing with the user's font size (not something I specify), I don't know how wide it will actually be for a given user.
I've simplified the home page and have it online (test.html and HoH.css Here is an overview image of test.html.
Sorry for all the links. But with a floaty thing inside another floaty thing, I don't know what is relevant. The file test.html contains 63 lines of formatted HTML. The 640px hr is there for reference only; it will not be part of the final page.
PS: I'm removing the tables because when I asked for site reviews, the first comment almost everyone had was, "get rid of the damn tables".
Probably you shouldn't worry about users font size because all modern browsers zoom whole page, not only font size, and everybody will be happy with your fixed width.
Also you can use EM values instead of PX, 1em = font size in px. You can change 640px to 40em if you have 16px font size. If someone have for example twice bigger font, he will get twice wider block.
And if you want css-solution for unknown width block centering, you can use inline-block and text-align:center: http://jsfiddle.net/rBc4T/
use CSS and jQuery -
css -
#divID{ left:50%;}
jQuery -
(function(){
var marginLeft = $('#divID').width();
$('#divID').css('marginLeft','-'+ marginLeft /2 +'px');
});
There are many articles and questions about percentage-sized vs other-sized fonts. However, I can not find out WHAT the reference of the percent-value is supposed to be. I understand this is 'the same size in all browsers'. I also read this, for instance:
Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
Source: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
But if you say "ie 12 pt = 100%", then it means you first have to define font-size: 12pt. Is that how it works? You first define a size in an absolute measure, and then refer to this as '100%'? Does not make a lot of sense, as many samples say it is useful to put:
body {
font-size: 100%;
}
So by doing this, WHAT is the font size relative to? I notice that the size I see on my screen differs for every font. Arial looks way bigger than Times New Roman, for instance. Also, if I would just do this, body size = 100%, would that mean that it will be the same on all browsers? Or only if I first define an absolute value?
UPDATE, SAT JUL 23
I am getting there, but please bear with me.
So, the % value relates to the default browser font size, if I understand correctly. Well, that is nice but gives me again several other questions:
Is this standard size always the same for every browser version, or do they vary between versions?
I ! found (see image below) the settings for Google Chrome (never looked at this before!), and I see standard "serif", "sans-serif" and "monospace" settings. But how do I interpret this for other fonts? Say I define font: 100% Georgia;, what size will the browser take? Will it look up the standard size for serif, or has the "Georgia" font a standard size for the browser
On several websites I read things like Sizing text and line-height in ems, with a percentage specified on the body [..], was shown to provide **accurate, resizable text across all browsers** in common use today. But from what I am learning now I believe that you should actually choose between either resizable text (using % or em, like what they recommend in this quote), or having 'accurate, consistent font-sizes across browsers' (by using px or pt as a base). Is this correct?
Google Settings:
This is how I think things could look like if you do not define the size in absolute values.
The browser default which is something like 16pt for Firefox, You can check by going into Firefox options, clicking the Content tab, and checking the font size. You can do the same for other browsers as well.
I personally like to control the default font size of my websites, so in a CSS file that is included in every page I will set the BODY default, like so:
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px
}
Now the font-size of all my HTML tags will inherit a font-size of 14px.
Say that I want a all divs to have a font size 10% bigger than body, I simply do:
div {
font-size: 110%
}
Now any browser that view my pages will autmoatically make all divs 10% bigger than that of the body, which should be something like 15.4px.
If I want the font-size of all div's to be 10% smaller, I do:
div {
font-size: 90%
}
This will make all divs have a font-size of 12.6px.
Also you should know that since font-size is inherited, that each nested div will decrease in font size by 10%, so:
<div>Outer DIV.
<div>Inner DIV</div>
</div>
The inner div will have a font-size of 11.34px (90% of 12.6px), which may not have been intended.
This can help in the explanation:
http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage
My understanding is that when the font is set as follows
body {
font-size: 100%;
}
the browser will render the font as per the user settings for that browser.
The spec says that % is rendered
relative to parent element's font size
http://www.w3.org/TR/CSS1/#font-size
In this case, I take that to mean what the browser is set to.
A percentage in the value of the font-size property is relative to the parent element’s font size. CSS 2.1 says this obscurely and confusingly (referring to “inherited font size”), but CSS3 Text says it very clearly.
The parent of the body element is the root element, i.e. the html element. Unless set in a style sheet, the font size of the root element is implementation-dependent. It typically depends on user settings.
Setting font-size: 100% is pointless in many cases, as an element inherits its parent’s font size (leading to the same result), if no style sheet sets its own font size. However, it can be useful to override settings in other style sheets (including browser default style sheets).
For example, an input element typically has a setting in browser style sheet, making its default font size smaller than that of copy text. If you wish to make the font size the same, you can set
input { font-size: 100% }
For the body element, the logically redundant setting font-size: 100% is used fairly often, as it is believed to help against some browser bugs (in browsers that probably have lost their significance now).
Sorry if I'm late to the party, but in your edit you make a remark about font: 100% Georgia, which the other answers haven't responded to.
There is a difference between font: 100% Georgia and font-size:100%; font-family:'Georgia'. If that was all the shorthand method did, the font-size part would be meaningless. But it also sets a lot of properties to their default values: the line height becomes normal (or around 1.2), ditto for the style (non-italic) and weight (non-bold).
That's all. The other answers already mentioned everything else there was to mention.
It's relative to default browser font-size unless you override it with a value in pt or px.
As you showed convincingly, the font-size: 100%; will not render the same in all browsers. However, you will set your font face in your CSS file, so this will be the same (or a fallback) in all browsers.
I believe font-size: 100%; can be very useful when combining it with em-based design. As this article shows, this will create a very flexible website.
When is this useful? When your site needs to adapt to the visitors' wishes. Take for example an elderly man that puts his default font-size at 24 px. Or someone with a small screen with a large resolution that increases his default font-size because he otherwise has to squint. Most sites would break, but em-based sites are able to cope with these situations.
According to ALL THE SPECS DATING BACK TO 1996, percentage values on font-size refer to the parent element's (computed) font-size.
<style>
div {
font-size: 16px;
}
span {
font-size: 75%;
}
</style>
<div><span>this font size is 12px!</span></div>
It's that easy.
What if the div declares a relative font-size, like ems, or even worse, another percentage?? See “computed” above. Whatever absolute unit the relative unit converts to.
The only question that remains is what happens when you use a percentage value on the root element, which has no parent:
html {
font-size: 62.5%; /* 62.5% of what? */
}
In that case, see the “duplicate” of this question. TLDR: percentages on the root element refer to the browser default font size, which might be different per user.
References:
CSS 1 spec (1996)
CSS 2.1 spec (2011)
CSS Fonts Level 3 spec (2013)
CSS Fonts Level 3 editor’s draft (2017)
Relative to the default size defined to that font.
If someone opens your page on a web browser, there's a default font and font size it uses.
As to my understanding it help your content adjust with different values of font family and font sizes.Thus making your content scalable. As to the issue of inhering font size we can always override by giving a specific font size for the element.
I wasn't sure how to word the question for this topic...sorry.
I'm just starting to learn CSS.
I have a <div> with a background image and there is text within the <div>. I read that choosing font sizes in em is a good choice because some people might require larger text sizes in their browsers. So setting the font-size with em would accommodate these types of users better.
But the problem with allowing the text to be resized, is that in many cases, the text within my <div> is going to go beyond the size of the background image and make the page look terrible and poorly designed.
Is there a way to use CSS and allow the background image to 'match' or 'expand' to accommodate to larger text size?
You could set the width of the div to the img width so that it never expands wider (beyond the image).
Of course, the enlarged text would force the div to grow height-wise.
You could also set the background-img to repeat (if the image allows for it), so that when the text expands, the image is repeated.
background-image:url('whatever.png');
background-repeat:repeat-x;
// x = horizontal, y = vertical
Since you are starting out, you might want to read http://na.isobar.com/standards/#_pixels_vs_ems wherein they say:
We use the px unit of measurement to
define font size, because it offers
absolute control over text. We realize
that using the em unit for font sizing
used to be popular, to accommodate for
Internet Explorer 6 not resizing pixel
based text. However, all major
browsers (including IE7 and IE8) now
support text resizing of pixel units
and/or full-page zooming. Since IE6 is
largely considered deprecated, pixels
sizing is preferred. Additionally,
unit-less line-height is preferred
because it does not inherit a
percentage value of its parent
element, but instead is based on a
multiplier of the font-size.
Correct:
#selector {
font-size: 13px;
line-height: 1.5; /* 13 * 1.5 = 19.5 ~ Rounds to 20px. */
}
Incorrect:
/* Equivalent to 13px font-size and 20px line-height, but only if the browser default text size is 16px. */
#selector {
font-size: 0.813em;
line-height: 1.25em;
}
We have a CSS file with some rules similar to the following:
.directory-result ul
{
margin-top: 20px;
width: 60em;
}
.about-text
{
margin-top: 1em;
margin-bottom: 1em;
}
Everything is working ok, but we're wondering specifically about the inconsistencies between the margin-top values. One is 20px and the other is 1em.
Which is the best one to go with? What are the points I should consider when deciding which to use? Thanks.
em units are used for better scalability of the page when the size of the elements depend on the page's scale. It's especially important for old browsers (e.g. IE6) and mobile platforms.
px units are used for absolute values, while em is relative to the font size of the particular element.
1em means one font-line, e.g. you have a box with font-size 12px that means that 1em will be equal to 12px
Also, using px seems easier because you know the exact value, but em units inherit the value of their container.
<p>Text</p>
<div class="box">
<p>Lorem</p>
</div>
p {
font-size: 1.2em;
}
.box {
font-size: 1.2em;
}
In this case, the first <p> will have font-size equal to the basic font-size * 1.2, and the second <p> will display with font-size * 1.2 * 1.2.
They're simply two different ways of measuring. Em is linked to the font size (traditionally, 1em is roughly the width of the letter M in a given typeface), while px is pixels.
If you build everything using em, everything will scale accordingly when the user adjusts their font size (e.g. using IE's Page > Text Size menu). It also makes it easier to work to a vertical rhythm.
Pixels are better when you want to build something "pixel-perfect". Be aware that a CSS pixel doesn't always equal a screen pixel - mainly because modern browsers and mobile devices allow for zooming. This isn't usually a problem though because the entire page is scaled accordingly.
Whatever you do, make sure you're consistent throughout - it makes life much easier later on.
The ems unit is relative to the current font size in the browser. So if the user increases the font size*, or if you change an element’s font size in the CSS, the margins should still look “right” in proportion to the text.
*(This ceases to matter if the user zooms the page instead of increasing the text size (as is the default in Firefox and Chrome now, and is an option in IE).
If you're using a margin to position something a set number of pixels away from something else, then you should obviously stick with pixels.
Also here is a very good in depth tutorial:
px – em – % – pt – keyword
In this example directory-result ul represents a block - some sort of list/menu where pixel dimensions are quite important. We can’t always rely on em which defines the text size, because if we need 20px space due to some background image – well, we need 20px, no compromises.
Note that you can't create and save the image i.e. 10em wide, therefore I see no reason why should I use different units on a web page. It just creates confusion and later on it is very difficult to maintain the layout.
There is a one place though, where using em is advisable – I’m talking about text blocks. I’m guessing in your code about-text is placed within other text where adding top/bottom margin of 1em (height of text) makes sense. It’s like in any text editor (i.e. line spacing in MS Word) – text looks best when spacing between lines is defined by multiplying the height of text
So in my opinion – everywhere where you deal with design and you use images by default measured in pixels – usepixels for all padding/margin.
Everywhere where you deal with text inside a text block, and you want to add even spacing between the text nodes – useem.