The precondition is that I use monospace as my font-family, but it doesn't seem to work properly, I've tried some solution but neight of them work, my HTML structure is as below:
<!DOCTYPE html>
<style>
body {
font-family: monospace;
letter-spacing: 0;
word-spacing: 0;
font-size: 32px; /* large enough to see the effect */
}
div:last-of-type {
padding-left: 1em; /* what's the value? */
}
</style>
<div>123456</div>
<div>abcdef</div>
use em
em should be equals to the computed font-size value, but padding-left: 1em; doesn't work:
use px
padding-left: 32px; makes the same output as padding-left: 1em;.
use ex
ex should be the computed height of the letter 'x', and it doesn't work either:
use ch
OK, webkit doesn't support ch as a css unit.
So how can I write the css to exactly indent the second div one character width, that is, the first '0' should be left-aligned to the letter 'b', without any deviation.
One possible way, although a bit hacky, would be to insert a space before the row using the :before pseudo selector with content:
div:last-of-type:before {
content: " ";
white-space: pre;
}
I have no idea as to which browsers support this, but I'd assume all modern browsers would.
http://jsfiddle.net/cavqM/
Based on the Tatu's approach you can use a unicode representation of a none breakable space like
div:last-of-type:before {
content: "\00a0"; /* this is */
}
HTH,
--hennson
Related
I got some example CSS code (well written and working) with many span statements inside, that I modified for my use. What exactly they do? VS Code shows me as an error, but browsers don't complain, and I couldn't find any references in the CSS documentation, as if this syntax does not exist.
Example:
h2 {
letter-spacing: 2vw;
font-size: 2vw;
font-weight: bold;
text-align: center;
span {
display: block;
font-size: 8vw;
letter-spacing: -1vw;
}
}
VS code complains:
"code": "css-colonexpected",
"severity": 8,
"message": "colon expected",
"source": "css",
If I add colon it would be suggesting keys right away, and would not accept anything in curly brackets{}
Thanks
the brackets { and } define scope so that
body {
color: #000;
}
Would define that the color (text color) of the body element type (css query selector) would be #000 (which is hex for black)
however, if you have an element in an element like this using a precompiler such as less for css using the less syntax.
body {
color: #000;
span {
color: #FF0000;
}
}
this would do as the previous css did, but in less you can create a hierarchy
the body's color will be set to black as before.
and then any span child of the body element will have its color set to red (#FF0000)
CSS/LESS are used in conjunction with the HTML DOM object model.
You're correct that this syntax doesn't exist for CSS, as it doesn't support nested selectors like this.
The correct syntax would be:
h2 {
letter-spacing: 2vw;
font-size: 2vw;
font-weight: bold;
text-align: center;
}
h2 span {
display: block;
font-size: 8vw;
letter-spacing: -1vw;
}
This syntax is of course perfectly acceptable if you use a CSS preprocessor, like SASS or LESS for example. CSS preprocessors compile CSS written like you've done into standard CSS syntax, and add extra functionality, like using variables and conditional statements.
I think that modern browsers are probably capable of understanding syntax like this in certain situations, but if you want to use to this sort of syntax then using a preprocessor is a safer option to avoid errors.
I'd like to have the following written in css where the underline is positioned lower down than the other letters.
Almost like a vertical indentation
co_defy
It would be great to have the dash at the same level as the bottom of the y.
Is this possible?
Simply adjust vertical-align of the underscore
body {
font-size:60px;
font-family:arial;
}
span {
vertical-align:middle;
}
co<span>_</span>defy
You can also use custom values to adjust like you want:
body {
font-size: 60px;
font-family: arial;
}
span {
vertical-align: -0.1em;
}
co<span>_</span>defy
Use the text-underline-position property in CSS. Like so:
.example {
text-decoration: underline;
text-underline-position: under;
-ms-text-underline-position: below;
}
As you can see, IE and Edge have a different syntax for the property. Hope this works!
Another way to do it is as such:
body {
font-size: 50px;
}
span {
vertical-align: middle;
}
co<span>_</span>defy
Im reading about optimal font sizing and layout sizing...and Im looking into em instead of px.
From what I understand, if I make the css like this;
html {
font-size: 16px;
}
body {
font-size: 1em;
}
It will force the browser to make 16px = 1em, and that will enable me to do width and height properties by calculating desired pixels/16, right?
Almost all browsers gave their default font size as 16px.
So if you simply set font-size:100% on your body tag then work from that you'll be golden.
Here's a good site that I use for calculating font-sizes from your base size:
http://riddle.pl/emcalc/
In the settings tabs simply change it to 16px and that's you set.
You are correct, and so is #Billy Moat.
You're not really gaining anything by explicitly declaring the 16px value on the HTML element - browsers tend to do that anyway.
Another trick that you can use is the "62.5%" trick.
If you declare:
body { font-size: 62.5% }
You can make further declarations in em's that map neatly to pixel measurements. e.g.:
h1 { font-size: 3em; /* equals 30px */ }
h2 { font-size: 2.4em; /* equals 24px */ }
.nav { width: 50.5em /* equals 505px */ }
That's because 10/16 = .625. So with this trick, you can rebase your measurements and not have to do the math later of dealing with a 16px base.
The only trick of this method is that once you declare a font size for an element, all children elements have to have their em values based on that parent's value (this is true of all relative units of measurement).
I was reading about rem units in CSS3, and was a little confused. If you use rem, do you still use em or does that replace it?
For example:
.selector {
margin-bottom:24px;
margin-bottom:2.4rem;
font-size:16px;
font-size:1.6rem;
}
or
.selector {
margin-bottom:24px;
margin-bottom:2.4em;
margin-bottom:2.4rem;
}
Just trying to figure out if rem takes the place of em, or if it's just another unit.
Rem is the em size for the root (html) element. That means once you define the html element's font-size, you can define all rem units relative to that.
For example:
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
Rem is supported in Safari 5, Chrome, Firefox 3.6+, and even Internet Explorer, but for older browsers you still have to use em, percent or px.
No, it’s a different unit. em is based on the font-size of the parent, while rem is based on the root font-size, which I believe is the font-size of the html element.
Rem is just one more unit, it doesn't replace em like em didn't replace pixel.
Oldish topic, but I think it needs some more clarity.
Both em and rem are relative units, but rem is always relative to the html font size (the “root” element) rather than the inherited font size.
Never use px, or pt for that matter, on the screen. By hard coding the font size, you ignore the user’s personal preferred font settings and make zooming less cooperative.
Both em and rem have a useful role to play. Neither is perfect for all occasions. Here are some examples:
Use rem to avoid compounding sizing:
ul#something li { font-size: 1.2rem; }
… or …
ul#something li { font-size: 1.2rem; }
The first one will result in nested lists having progressively larger sizes, since the em unit will inherit from a parent li element.
Use rem to set sizes independently:
article { font-size: .8rem; } /* article base font size */
article>h2 { font-size: 2rem; } /* … except for h2 */
And, of course you can use both:
div#something { font-size: 1.2rem; } /* based on html size */
div#something>h2 { font-size: 2em; } /* based on div#something */
Two years down the track, now, and we can use it, safely ignoring Legacy Browsers.
I noticed that some stylesheets have something like this:
body { font-size: 62.5%/1.2em; }
I got a warning "unexpected token /" when I wrote this in NetBeans. And if I changed the EM value, say,
body { font-size: 62.5%/1em; }
the computed font-size remained 16px.
My question is, Is it standard compliant to write something like that? And how to computed the actual font-size?
In CSS2, the font-size property does not allow a value of the form x/y.
What you're using is the font short hand property, which allows x/y as a short-hand of font-size: x; line-height: y;. So either use
body { font: 62.5%/1.2em sans-serif; }
/* ^^^^^^^^^^ the font-family is needed. */
or
body {
font-size: 62.5%;
line-height: 1.2em;
}