In CSS/HTML, using a simple text within a div with no margin/padding with a given font-size (assume 36px) and a given line-height of 36px will not fit exactly, there's always some spacing at the top of the line. Reducing the line-height for 20% (i.e. in this case 29.8) seems the result in the desired effect.
Why is this, is there any browser thing I am missing? I'd assume having a line-height equal to font-size should actually NOT add any spacing around a line at all?
Update: The effect I am actually getting is called "half-leading". Howevever, I assumed that when setting the line-height equal to the font-size, no leading may occur at all as the browsers' calculated half leading should result in 0px.
Update 2: Just found this in the CSS-Spec: http://www.w3.org/TR/CSS2/visudet.html#line-height
However, I am still confused considering how to avoid having added ascender/descender at all?
Responding to your update #2:
Since ascender/descender height is calculated for each font, there are fonts that don't have ascenders/descenders, like all caps monospace. It would need to be a font that doesn't include any characters with a/d; just applying text-transform: capitalize wouldn't work.
A roundabout solution, but as you've stated it is a "feature not a bug".
Related
Is there any way to strictly enforce the line height of the whole paragraph or div?
I am using HTML+CSS for typography-precise printing of books, and I want each line to really have the same height, no matter what will be inside the line.
The common problems are with superscripts or enlarged portions of text, which are (more or less successfully) dealt with in several other questions here, on SO:
HTML <sup /> tag affecting line height, how to make it consistent?
How to strongly force line-height in css, with no stretches?
However, the problem with these solutions is that they are partial and fix only specific cases. I don't want to fix the particular problems, I want to make sure that these problems wouldn't have a chance to appear at all. I cannot be sure in advance what different kinds of elements may appear in the whole text, so I want to make sure that the lines stay the same and instead, in case of problems, fix particular cases where I need the line to grow because of some elements.
So the problems in previous "solutions", particularly:
<sup> tag solution requires manual playing with several sizes until it gets correct.
Second thread does not really solve the problem. When portion of text gets sufficiently big, no combination of display:inline-block;, overflow:hidden; and vertical-align:top; will do—the line will eventually grow.
What I have tried:
In short, see this JSFiddle.
I have tried applying all the combinations of these CSS rules:
display: inline-block; (or just inline)
overflow: hidden;
vertical-align: top;
line-height: 1px;
However, changing text size to big enough still causes the lines to get bigger. And adding images (e.g. graphical smilies, which could be just 1 pixel higher than normal line height), will cause the lines to get bigger, again.
What I want:
Ideally, I want a solution that will make sure these problems wouldn't appear at all. I don't mind trimming the large elements on top/bottom or both sides;
If (1) is not possible, then I need at least a way to highlight and clearly see each line where this happens. In other words, if any line gets just 1px higher, I need it to draw my attention even when just skimming the text.
I am using the Google font 'Lato' and I am having problems with having title and text align properly to the left... The font (when large) appears to have a kern space on the first letter and wont align left without space!?
So here also a fiddle:
<h1>Hello</h1> <p>Hello, this is sentance</p>
FIDDLE
Also, adding a negative value on the margin-left (magin-left:-10px) just seems like a terrible workaround... and this would not work overall for different font-sizes, unless individually adjusted as needed... surly there must be a better solution?
Can anyone help?
Okay, everyone who says it's due to automatic padding or margins due to the line being a header is wrong. See this fiddle as evidence:
http://jsfiddle.net/w25j9L7o/26/
The leading space is not being rendered by the browser or the CSS or anything else at the DOM/Browser level. It is the font. The H glyph has some built-in padding around it, and the larger the font size, the more noticeable that padding will be.
Even if you use negative margins to compensate:
The character itself is shifting over, which includes the empty space, so that empty space will be sliding over as well, affecting layout. The visible character isn't sliding into the empty space, the entire character (visible and invisible) is shifting to the left if you use CSS to fix it.
You would need to adjust that offset based on the font-size or figure out the underlying percentage so that the offset grows with any font-size set.
Or you can just use a different font that doesn't have this characteristic.
PX units are not such a good choice in this case. I recommend using EM unit if you working with font attributes like line-height etc. Because it's automatically calculated for each of font-size. It should look like this:
#yourDiv::first-letter {
margin-left: -0.12em;
}
Try using first letter
h1:first-letter {
margin-left: -10px
}
http://jsfiddle.net/w25j9L7o/1/
You can get kern.js from kernjs.com and edit your front kerning, like they said on their website "click and drag to adjust your kerning, line-height, letter placement, When you're done, copy the generated CSS and use it in your own stylesheet"
The white space is there because it is a header.
You can align it to the left by doing:
margin-left: -10px;
Most Web browsers have different default settings for the base margins and padding. This means that if you don't set a margin and padding on your body and html tags, you could get inconsistent results on the page depending upon which browser you're using to view the page.
The best way to solve this is to set all the margins and paddings on the html and body tags to 0:
Add this CSS:
html,body {
font-family:Lato;
margin:0px;
padding:0px;
}
p{margin-left: 11px;}
DEMO
This problem was driving me crazy so here is an elegant solution that uses ::first-letter selector. For example I was able to fix my spacing issue by adding:
#yourDiv::first-letter {margin-left:-5px;}
Hope this works for others that were in my situation. Here is a link for more information: http://www.w3schools.com/cssref/sel_firstletter.asp
You can use Gill Sans font. It is very similar to Lato. Problem is in Lato font itself not in Css.
Here is your link for GillSans
I noticed that line-height seems to affect blocks. Its strange to me, that i never noticed this disturbing effect before.
The problem is that it will affect blocks, even if they do not contain text at all.
I created a JSFiddle to demonstrate the issue. If you set line-height to 0, the grey area will no longer exceed that of the image inside the container.
Why is this happening and is there a clean way to prevent it?
The line-height value affects rendering even in the absence of text, since “'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties.” (CSS 2.1 about line-height.)
But that’s really not the cause here. Images are by default rendered inline, meaning that they act as big (or maybe small) letters, sitting on the baseline of text. The details are complicated, but by setting line-height considerably smaller than font size, you put baselines closer to each other and the space vanishes.
Another way to remove the disturbing effect is to set display: block on the img element. Then the element will be formatted in a different way.
Yet another way is to set vertical-align: bottom on the img element.
I have been inspecting a header element using firebug, and have noticed that the header container does not hug its contained text, even though I have no padding set.
<h2>test</h2>
http://jsfiddle.net/BTwk6/
The top and bottom spacing is greater than that on the left and right, the result of this is that my h2 does not sit squarely in its containing box.
Is this normal? Is there anyway to have the h2 box hug its text?
Thanks
Yes, it is normal, and things are supposed to be that way. If you e.g. set a border on a heading element, you will see that characters in the heading text will normally not touch the border.
There are two reasons to this. First, the height of a font is a design concept and does not (normally) correspond to the height of any letter; there is empty space above even capital letters as well as below the baseline of text. Descenders like that of “j” or “g” may, in some designs, reach the bottom of the font, and diacritic marks like that of “Ê” may reach the top, or even go beyond it.
Second, there is normally some leading above and below a line, typically a total of 15–20% of the font height. The default depends on the font (and on the browser). In practice, this is meant improve readability and to prevent characters from touching characters on the previous or next line.
The leading is indirectly set by setting line-height, since line-height sets the total height that is the sum of font height (font size) and leading. By setting line-height: 1, you set leading to zero; this is called “setting solid” in typography, and it can be suitable for isolated lines, like a one-line heading. But there is still spacing caused by the first reason mentioned, the spacing that has been “built in” into the font. You can even set line-height to a smaller value, like 0.85, making the leading negative. Beware that this may cause vertical truncation of characters if the font used differs from the one you suggest on your page.
Try adjusting the line-height property as well, by default different fonts have different spaces above and below them. You may not be able to entirely fix this. For example, the word
Tempura
Is a whole lot taller than the word
mum
But the word 'mum' will still have to have the same height above and below the line as 'Tempura'.
by default a h2 element has a margin of 19px top an bottom. Try to reset it
Try to reset margin and padding :
h2{margin:0;padding:0}
replace 0 with your own values ...
mimiz
How can you enforce the minimum width for a TD that can optionally contain an image? I ask this because I'm using a Javascript chess widget but when there are no pieces in any of the squares of a particular column, regardless of the width style of the td's being set to 36px, this column renders much narrower than those that have at least one row that contains the image of a chess piece.
Note that all the style is being set directly on each td cell. I read somewhere that a possible solution would be to instead create a div inside the td and set the width on that. Am hoping to avoid that as it might require significant modification to the underlying Javascript library. I've tried specifying !important along with the width but it had no effect.
Using firebug I can modify the width attribute but it seems the numbers are incorrect. For instance I can decrease the width all the way to 0 and it still appears the same. Or I can set the width to more than 36 and it appears to grow by width-36, but if for instance I set both the height and width of one of these narrow cells to the same number, lets say 60px, the height of what gets displayed is greater than the width and it appears as a rectangle not a square.
Furthermore not only can the td optionally contain an image, but each square specifies a background image too. So I am at a loss :( Thanks in advance
When I alter the CSS in your file using Firebug or the JS inspector in Chrome, setting the min-width property instead of the width property does the trick. Might want to try that? Not sure how IE will like that, though.
BTW: Why not use classes to do the CSS? It's kinda horrible to debug, this way.
By default tables will auto-size their columns.
If you set the table style to include:
table-layout: fixed;
then you'll have much better control of it via css and attributes.
You can use the td tags width attribute or you could use css and set the width.