I'm trying to style the kbd buttons to have all the same min-width, based on the font size of the element.
kbd {
min-width: 1.5em;
}
The problem is that it works for all the symbols I've tried, except for ⌃...
It has a different min-width:
Why that? How can I fix it?
They're all the same size, the 1.5em that you specified but the caret (ctrl) is a narrower character than the others. If you set the buttons to have a width of 1.5em instead a font-size, that'll make them all the same size.
Give me a shout if this doesn't work and I'll see what I can do to help - might be worth setting up a JSFiddle to play around with.
I am not 100% sure about this but what i would suggest is that all the other buttons have the same "character size" or rather the same distance after and before the character and the "^" has another one. This would mean with another font it could also look different again.
Look at following picture:
It seems like all the other characters/symbols are like the a and e on this picture, they just have the same width. Your "^" is like the f for example. It's not as wide as the others even if it has the same font-size.
I would suggest you not using width instead of min-width so you can be sure they all have exactly the size you gave them.
Related
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?
I have an h1 I want to fit the entire width of the viewport which consists of 13 characters in a monospaced font. After reading the CSS-Tricks article on viewport sized typography it seems like logically if I want to achieve this I simply have to set my h1's styles to:
h1 {
font-size: 13vw;
font-family: monospace;
}
This however is rendering with a bit of space left over (highlight the text to see the white space):
(There would be an image here but I don't have enough rep so click here for the JSFiddle)
I have tried other sizes, font-size: 14vw; is slightly too big, font-size: 13.99vw; seems just right, but strangely font-size: 13.999vw; is still too big?
Can someone explain what is going on here? Why would each character of a 13 character length string in a monospaced font require more than (100/13)% of the viewport width to fit the entire viewport width?
Before I begin I'm just going to say that I'm not going to give you a workaround due to issues I've raised in comments on Stoyan Dekov's answer. Instead I'm only going to answer your question of Can someone explain what is going on here?
font-size != width
The problem here is that you're assuming font-size is the same thing as width. It isn't. The CSS Fonts Module defines font-size as:
...the desired height of glyphs from the font.
This means that font-size is more comparable to height than it is to width.
This isn't specific to the vw unit, either. If you specify a font-size in pixels you'll also notice that the computed width does not match the font-size.
But even then it all depends on which font-family you're using anyway, as the same paragraph continues to say:
For scalable fonts, the font-size is a scale factor applied to the EM unit of the font. (Note that certain glyphs may bleed outside their EM box.) For non-scalable fonts, the font-size is converted into absolute units and matched against the declared font-size of the font, using the same absolute coordinate space for both of the matched values.
The key words here being scalable and non-scalable.
Even if a non-scalable font was being used though, 13vw would not reflect each character's width. This would never work with vw, but it may work with vh but only if the aspect ratio of each individual character matched the screen's aspect ratio.
The problem is if a text is the exact same size as the parent container, it will span across a second line.
body {
margin: 0;
width:100px
}
h1 {
font-family: monospace;
width:100px;
}
That will cause the text to go onto a new line as they are both 100px. That's why 14vw is too big, but 13.99 is just enough: Fiddle DEMO
However, you can use text-align: justify; to achieve what you want.
Take a look at this Fiddle DEMO.
I have a %-based grid with a fixed-width (for the moment). The code is based off of this css-tricks article: http://css-tricks.com/dont-overthink-it-grids/
Works great until I have a column that has multiple responsive images in it that are the same size and need to be stacked next to each other (floated). Because of padding issues and what-not, I can not get all three images to come out the same width and height, despite the fact that they start that way. The last one is always taller. Here is a codepen showing the issue: http://codepen.io/joshmath/pen/dEuIv
Any help with this would be really appreciated. I've run into this issue before and always just end up hacking my way through it on a case-by-case basis. Thanks!
For whatever reason, if you remove the padding-right: 0 style from the last element, it fixes the issue.
It looks like you're trying to add spacing between the elements using padding. What I tried instead using the Chrome dev tools was to use a margin instead of padding, and then slightly reducing the width of your elements to around 29.5%. That seemed to work.
just add the following to your css. set the size to whatever you like and all images within your grid will remain that size, if they need to grow / shrink use height/width percents instead.
.grid img
{
width: 350px;
height: 400px;
}
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.
Is it good to add line-height in body{line-height:1.5} or it would be better if i add separately for tag by tag like p{ line height:1em} etc.
Edit:
body {line-height:in em} create problem with if we put image with float inside
Edit: 24 April 2010:
If i have to add different line heights to elements
like
p {line-height: 1.4}
h1 {line-height:1.6}
h2 {line-height:1.2}
ul li {line-height:1.1}
then shouldn't i use line height in body {line-height:1.4}
if body {line-height:1.4} and h1 {line-height:1.6} then what would be line height for h1?
It just depends. If you put it in the body then you get to be lazy and not worry about ever doing it again, but your going to lose control because everything on the page will have the line-height set to 1.5. Whereas if you declared it in each tag, you gain lots of control, but will have to do more work.
Personally I would go for the tag-by-tag solution, but I'm a control freak, so...
A word of caution on putting line-height on the body tag:
If you specify a height in percent, you would intuitively expect to enlargen / shrink all line-heights (e.g. 50% shrink to half, 200% duplicate space, 100% nothing happens).
body {
line-height: 120%
}
This is not the case. For paragraphs and normal-sized text it works fine. But for headings it's a disaster, since the same line-height as for normal text gets applied... See what happens here: https://jsfiddle.net/11jgwzzu/ .
It works, if you use for example 1.5 instead of 150%.
With this in mind, I think it's quite okay to use something like this:
body {
line-height: 1.61 // Golden Ratio
}
to make the entire page a bit more spacious. You can still overwrite this behaviour for some specific elements if you want to, but I often find I don't even have to overwrite it since I think line-height: 1.61 looks pretty good everywhere.
The obvious answer is specifying it once in the body is less work (and overhead).
There is a definite CON: if you use a unit (like 'px') in the line-height, and you specify it on the body, it will be used like that throughout the page. This may create crazy results with fe big page titles overlapping eachother or tiny aside text getting ridiculous whitespace between lines. If you dont use a unit, and specify it nowhere else, the vertical rythm of the page becomes messy.
Read this: http://www.alistapart.com/articles/howtosizetextincss/
Specifying a unit (in this case, px) when setting the line-height
enables the value to be inherited throughout the page. If a unitless
line-height had been specified, the multiplier would have been
inherited, resulting in line-heights being rendered proportionally to
the text size, thus breaking the vertical rhythm.
It is common in websites to never use a unit on line-height, which is one of the reasons why the most websites look a bit messy, designwise. Just look at this page, already :-)
I would specify a unitless line-height on the body element, and use a unit-based line-height on a designated 'content' area where you know exactly what sort of content to expect (the 'content body').
*-pike
put it where it's appropriate
if you want line-height: 1.5 on everything within the body, put in on the body
if you only want line-height: 1.5 on everything in the main content area, put it on the div id="MainContent"
etc.