i have this simple html and css http://jsfiddle.net/JVfVv/1/
Problem is the text is being cropped under safari/chrome/firefox on mac. Removing overflow: hidden corrects the problem, however this line is necessary for other reasons. Removing line-height: 1; appears to fix the problem, however i get this from my reset stylesheet, and I don't understad why having it causes a crop.
Can someone explain why this is happening, and how to fix it please? thanks
To answer the question of why this happens, I think the key is this particular phrase from the Fonts section of the CSS 2.1 spec (emphasis mine):
The font size corresponds to the em square, a concept used in typography. Note that certain glyphs may bleed outside their em squares.
The line-height: 1 declaration sets the height of the paragraph to the same height as the font-size (since the paragraph only has one line). The fact that some characters are cut off implies that their glyphs bleed outside their em squares (I don't know how to definitively prove that this is true; I'm just speculating based on the evidence).
As for a solution, the most straightforward solution would be to use a larger line-height setting, such as 1.1 or 1.2.
You can set the height in CSS which solves the problem?
p {
line-height: 1;
overflow: hidden;
font-family: "Helvetica Neue", Helvetica, Arial; font-size: 30px;
height:32px; /* this appears to solve the problem */
}
See: http://jsfiddle.net/JVfVv/4/
Related
My font is doing something weird. There seems to be space being added below the font (Not the margin) that is pushing it up above the line-height. If I adjust the height it seems to be anchored to the bottom of the line height so instead of increasing the space below it actually pushes the top of the font above the line height. Is there any way, save adding margin or padding to the top, to make sure it's anchoring to the top of the line-height or middle?
CSS:
#font-face {font-family: 'AvenirLTStd-Book';src: url('/us/_media/font/2CA9EF_0_0.eot');src: url('/us/_media/font/2CA9EF_0_0.eot?#iefix') format('embedded-opentype'),url('/us/_media/font/2CA9EF_0_0.woff2') format('woff2'),url('/us/_media/font/2CA9EF_0_0.woff') format('woff'),url('/us/_media/font/2CA9EF_0_0.ttf') format('truetype');}
#font-face {font-family: 'AvenirLTStd-Black';src: url('/us/_media/font/2CA9EF_1_0.eot');src: url('/us/_media/font/2CA9EF_1_0.eot?#iefix') format('embedded-opentype'),url('/us/_media/font/2CA9EF_1_0.woff2') format('woff2'),url('/us/_media/font/2CA9EF_1_0.woff') format('woff'),url('/us/_media/font/2CA9EF_1_0.ttf') format('truetype');}
h1,h2,h3,h4,h5,h6 {
font-family:'AvenirLTStd-Black', Arial, sans-serif;
margin-top: 0;
font-weight: normal;
line-height: 1em;
color: inherit;
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
letter-spacing:1px;
}
I know this is old, but I thought I'd leave a comment for others Googling this issue.
It looks like you are using Avenir from MyFonts.com, which allows you to 'tweak' your webfont package.
I had the same issue as above, changing the Line Height Adjustments to use Bounding Box (Match the bounding box of the glyphs, line gap will always be 0) fixed the issue
I used the settings in the screenshot below:
[link to screenshot is down]
The idea is to increase line-height to decrease the space at the baseline, i.e.:
h1 {
font-size: 2rem;
line-height: 3rem;
}
I was on this for a while now and since I have no Myfonts.com account and the font is free font generated by FontsQuirrel or downloaded from GF I had to experiment. In PS my font looks correct by comparison,
Montserrat vs Open Sans
But webfont is completely off.
I was than forced to test several font editing software. First I tested FontForge and could simply not figure out the proper metrics, than i got trial FontCreator that has this great feature that auto calculates the metrics which when entered in FontForge fix the issue.
But paying $79.00 min to just fix this and never use the software again did not seem feasible and I also did not want to go back and forth between the two to get the metrics. I continued to play with FontForge and finally found the solution. You must reset all values to 0 in Element -> Font Info -> OS/2 -> Metrics and than uncheck the "Is Offset"
Instead another image here is short video that shows how to fix this
http://take.ms/rJpqh
Note that for some fonts it is better to uncheck the Really use Typo metrics which helped in my case.
The attribute you have missed out is 'vertical-align' and it is probably causing all of the trouble
This tells the browser where to align the text
It has the following values (not all are listed):
baseline
sub
super
middle
top
bottom
To find out more click here
I often embed webfont (#font-face) in sites that I develop and I have never encountered a major problem until today.
In fact, I feel there is a big issue with the line-height, I'm not extremely good at English so I'll try to illustrate it with pictures. I already contact the support from fontshop.com (where the font was bought) but they do not seem to understand / solve the problem.
What we had before with standard desktop font (= rendering is good for us):
What we had with the font-face (no change in CSS stylesheet):
Here is the CSS:
#content h1 {
background:#000000;
color:#FFFFFF;
font-family:"DINPro-Bold","Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
font-size:35px;
line-height:30px;
padding:10px;
text-transform:uppercase;
}
Usually font websites will have ways to configure the webfont package when you download it. I buy all my fonts from myfonts.com and under the advanced settings there are options for line-height adjustments. Try downloading the font using native line-height adjustments if this option is available. If not, try uploading the font to fontsquirrel's online font generator and upload the new version.
That's not the same font. The shape of the O and the curvature of the arm on the R give it away, which means the fallback fonts are being used, likely due to #font-face not loading properly. Different fonts will have different default spacing, as stated already, which would also lead you to believe it's a line-height issue.
Try making your fallback fonts something totally obvious, like:
font-family:"DINPro-Bold",serif;
This worked for me:
Generate the webfont at Font Squirrel. After uploading the fonts select 'Expert', scroll down and check the checkbox 'X-height Matching'. This resizes the height to match the x-height.
If you have problem with line-height of your webfont (especially if font suppose to be big in your project) try this: close your font in div or other block element and set "overflow" to "hidden". Div will have exact height of your font so any additional space will be cut off.
Try adding "position: relative; top: 5px;" to the "h1" tag
Try position: relative; paddint-top: 5px; padding-bottom: 0px;
Line height according to wikipedia
In typography, leading (rhymes with heading) refers to the amount of
added vertical spacing between lines of type.
This can be achieved like this...
.class{
line-height: 1em;
}
But if you are referring to the height of the letters then this is not something that can be adjusted. It is part of the font you have chosen to use.
I have a div class set up with the following CSS style:
div.multiple_choice{
border: 1px solid black;
max-width: 300px;
max-height: 200px;
overflow: auto;
}
The problem is, when the text inside doesn't force the DIV to reach the maximum height of 200px, the vertical scroll bar still shows up. I can click on the up and down arrows but it only moves the contents up and down by about a pixel or two.
This is occuring in Google Chrome (version 18.0) and Iceweasel 11.
As it turns out, another CSS style was causing the issue:
body{
line-height: 1;
}
Anyone interested in learning about how and why this would cause an issue, can read about the line-height property here
I was having an issue with this, and I found that having position: relative on the child elements was causing the problem. Obviously this can't be the solution for everyone, especially if position: absolute is being used, but for me it worked.
Just to put in evidence the #Kuba Orlik's solution (he posted as comment on the accepted answer) that's the only one that worked for me.
Add this on inside elements:
line-height: normal;
Note: Explicitly normal not 1 because it's different
I have encounter this problem.But I solved this use the following css style:
div.yourcontainer{overflow-y:auto;}
If the container was higher than max-height,the vertical scrollbar will show.
I had this problem when trying to wrap a list (flex column) of react components in a div, I resolved it by changing margin of elements within each list item to be 0.
The approach to troubleshoot this for me was to inspect the list items (perhaps each <li> in OP) and see what styles were making the div think each list item was larger than what was visible to the human eye.
Here is an example of inspecting a rogue margin on an icon within a list item in my project:
Solution is to set the style of that icon to have a vertical margin of 0, though in my application I just made all the margin 0 and added some padding-right.
I also had this problem using Bootstrap and nav. It occurred because bootstrap definds the li in nav-tabs as: .nav-tabs > li { margin-bottom:-1px; }. To counteract this, you must also do:
.nav-tabs > li:last-child {
margin-bottom:0;
}
Without setting the last-child, the following example would always show scroll, no matter how much content is in the list:
<ul class="navs nav-tabs nav-stacked" style="max-height:80px;overflow:auto;">
<li></li>
...
</ul>
I came across this bug earlier today. In my case a list of child elements had display: inline-block instead of display: block. Switching to display: block for my list of child elements in the truncated div fixed the issue for me.
In my case, the problem was with the font. We use font-family: Galano Grotesque. Apparently, this font is rendered higher than the computed height.
<div>
<p>some text</p>
</div>
So even without max-height, when the inner p and the outer div were both computed as 20px height, there was still a scroll bar (with overflow: auto) because the font was about 1px higher than expected.
So the solution can be any one of:
Use a different font.
Add padding to the outer div. This way it will be large enough to cover the extra pixel that comes from the font. In my case, adding one pixel of padding to the bottom and one to the top solved the problem.
Set line-height to a bit larger value (in my case, from 1.25 to 1.4), so it won't interfere with the font.
Set line-height to normal because then the actual value will be influenced by the font. However, according to Mozilla, this is not the preferred way.
The reason for the vertical scroll is obvious: the scrolled content is higher than scrolling area. But when you observe their heights, they are equal!
The causes are multiple but all come down to a common one: an element inside the scrolled content overflows it and makes the result taller.
How to fix this?
find the guilty element by looking near the bottom edge of the scrolled element (or to the right if you're scrolling horizontally), because they are the most likely to overflow. You should observe a height larger that their parent's.
see what makes them overflow, be larger than their container. As other answers suggest, it can be line-height, some margin, etc. Change those properties to make them fit, or as an alternative, set overflow-y: hidden to their immediate parent.
I'm running into a vertical positioning problem with a couple of elements on a page in Firefox 5. When I set a line-height on a piece of text, and give it an equal height, it doesn't center vertically the way it should. Instead it sticks to the top of its line-height.
The page in question is here: http://www.tyndale.ca/~missiodei/
Here are the two problem elements along with their CSS. In both cases the text is pushed up in FF5 but displays properly (vertically centered within its line-height) in Chrome/Chromium.
the large title link in the banner (#blogtitle a)
position:relative;
display:block;
margin:0;
padding:0;
color:#fff;
text-decoration:none;
letter-spacing:.1em;
font-family:"Palatino Linotype", Palatino, serif;
font-weight:bold;
opacity:0.6;
height:120px;
line-height:120px;
any of the drop-caps that float at the beginning of new sections of body text (p.openingPar:first-letter)
font-size:3em;
font-weight:bold;
position:relative;
float:left;
height:48px;
color:#ccc;
line-height:48px;
margin-right:4px;
You might not see these drop caps unless you look at the page using Chrome or Safari, since most of them aren't showing up at all in FF. (I'm not sure why these styles aren't being respected either).
Finally, it would be helpful to know whether this is a problem unique to FF5 or whether 3.6 and 4.0 have the same problem. I don't have any old versions of FF available for quick testing.
Thanks ahead of time for help. I've imprinted my keyboard on my forehead bashing my head over this one!
The vertical centering seems to work fine for me....
The lack of first letter styling is https://bugzilla.mozilla.org/show_bug.cgi?id=8253
Try using <span class"dropcaps">W</span> instead of styling your opening first letter in the paragraph by selector :first-letter. Let us know if it works.
I am using CKEditor on a webpage.
Quite impressive but I have few very annoying issues I hope you can help me overtake.
1) When the editor is created by Javascript the default font size (12px, I guess) is too small for my7 needs. I would like the font size to be 18px as the user starts typing on a new document.
2) I can change the font size of a block of text by selecting the block of text and then using the combo for the font size. What I can't do is set the combo for the font size (i.e. to 30px) and then type at that size. I think I can do the latter on Microsoft word, for example.
Thanks,
Dan
Pretty easy guys,
open 'ckeditor/content.css', edit this part :
.cke_editable
{
font-size: 21px;
line-height: 1.6em;
font-family:'me_quran' //example font
}
If you are using the default styles, then you must change it at:
Providers\HtmlEditorProviders\Fck\FCKeditor\editor\css\fck_editorarea.css
Just change the style:
body, td
{
font-family: Arial, Verdana, Sans-Serif;
font-size: 12px;
}
Does thi help?
Source