How to get cross browser <sup> without interrupting line height?
I tried vertical-align:top but it looks ok in FF 3.6 and IE but not in FF 3.0.
How to get consistent in size (size of superlative text) and position of <sup> identical in all browsers without interrupting line height.
I'm using <sup> to indicate footnote? not to show power
<p> Stackoverflow is killing<sup>10</sup> experts-exchange</p>
Your best chance for a consistent rendering are real superscripts:
HTML
<p>Stackoverflow is killing<span class="unicode">¹⁰</span> experts-exchange</p>
CSS
.unicode
{
font-family: 'Lucida Sans Unicode', 'DejaVu Sans', 'Arial Unicode MS';
}
Live
Stackoverflow is killing¹⁰ experts-exchange
sup {
vertical-align: super;
height: 0;
line-height: 1;
}
If that doesn't work, you can take it a bit further..
sup{
height: 0;
line-height: 1;
vertical-align: baseline;
_vertical-align: bottom;
position: relative;
bottom: 1ex;
}
vertical-align: text-top;
Related
I'm using anchor tags with 'content' set on :before to be : "——";
a.line {
font-size: 21px;
font-family: Khula,sans-serif;
display: inline-block;}
a.line:before {
content: "——";
padding-right: 25px;
font-weight: 400;
font-family: serif;
font-size: 24px;
letter-spacing: -10px;
transition: all .3s;}
Sometimes they render like this:
When they should render like this:
It doesn't happen every time the page loads, and appears to just happen at random. Has anyone encountered this before and found a solution?
Thanks in advance.
Use the Unicode value instead. An em dash is U+2014
content:"\002014";
I am using a Google Font: Baloo Bhaina and despite setting margin and padding to zero, it still seems to be double height.
As you can see, highlighting the font shows the extra space that I can't get rid of. Anyone come across this before? Google fonts are usually awesome to work with.
Class attached to this font:
.hero-element h2 {
font-size: 5vw;
font-family: $brand-font;
color: $brand-color;
padding: 0px;
margin: 0px;
padding-top: 20px;
}
I have a simple <a class="button"> element, and I noticed on Firefox, the text wasn't as vertically aligned as on Chrome.
Here is some sample code:
Here is my CSS:
body {
font-family: sans-serif;
}
.button {
font-size: 3em;
display: inline-block;
padding: 0.6em 1em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #333;
background-color: #7d8cdd;
}
.button > span {
background-color: #8cd5ed;
}
<span>CLICK ME</span>
Now what I'm not sure, is why Firefox is rendering the text so poorly. That is, it is putting a lot of space beneath the text, but not a lot above it.
Here are some screenshots:
Firefox:
Chrome:
Searching around, I wasn't able to find much reading material on the subject.
Anyone have any ideas why Firefox renders text with space at the bottom, but not at the top? Thanks.
NOTE: I am running Mac OS X Yosemite (10.10.5).
Figured it out. When putting font-family: sans-serif;, Chrome will choose Helvetica Neue, whereas Firefox will choose plain Helvetica. That difference of space is in the font files themselves.
Explicitly declaring
body {
font-family: "Helvetica Neue", sans-serif;
}
instead "fixes" the issue on Firefox, aka, makes it so FF and Chrome will use Helvetica Neue as the render font (assuming it is available).
See the example code:
span {
font-size: 150px;
background: lightgray;
margin: 8px 0px;
}
.sans-serif { font-family: sans-serif; }
.serif { font-family: serif; }
<span class="sans-serif">Done</span>
<br>
<span class="serif">Done</span>
I'm assuming the extra space is "built-in", but is there a way to remove it somehow?
I'm trying to left-align some huge page titles with the much-smaller subtitles underneath.
This has no correct way, because, it is the font that displays that way. Consider the below example:
span {
font-size: 150px;
background: lightgray;
margin: 8px 0px;
}
.sans-serif { font-family: sans-serif; }
.serif { font-family: serif; }
.serif2 { font-family: Times; }
<span class="sans-serif">Done</span>
<br>
<span class="serif">Done</span>
<br>
<span class="serif2">Done</span>
The above image has different layout if it is a serif in my computer. So, it is a trial and error basis and you have to make sure what you are doing is fine in all computers and browsers. The Times font fits perfectly and the serif font has some space. This is why I said it is a trial and error method.
The only hacky solution is to use a negative margin for the content, based on the font and you cannot generalize it.
You could add a minus margin-left. See here: https://jsfiddle.net/mna56yf9/5/ But if you're planning on having a background color, you might have to apply it to a wrapping div.
span{
margin-left: -20px;
}
When using a <h1> tag for example, is there a reusable formula for getting the outer border of that element to PERFECTLY follow edges of the type? In theory I would expect this to work:
h1{
display: block;
font-family: sans-serif;
font-size: 38px;
line-height: 100%;
height: 38px;
}
So the line height is set to be the same as the absolute text height, which is also the height of the block. However this never works. Here is an example of what does work for sans-serif 38px;
h1{
display: block;
font-family: sans-serif;
font-size: 38px;
line-height: 28px;
height: 35px;
}
Here is another working example.
h1{
display: block;
font-family: sans-serif;
font-size: 25px;
line-height: 19px;
height: 22px;
}
This is all well and good, but it has to be calculated manually in firebug each time. There is no formula I can find to do this.
Additionally, it would be nice if any solution also worked with #font-face fonts, but I understand there is more to take into account there. (like the top alignment that only occurs on Mac).
Does such a formula exist? Is it possible to write one? How about some LESS CSS fancyness?
I agree with #ToddBFisher in the comment, and at this point for me it's more of an usability issue. Consider people can also vary the font sizes in their browsers... in that case using ems would be better. But browsers also render font differently, so something that looks amazing in a mac will look pixelated in a pc. If you want something to look perfect, use images.
Check this other question for more info on line-height: How to achieve proper CSS line-height consistency
Or this one: CSS Line-Height Guide
You can also check the usability stack for discussions about these things: https://ux.stackexchange.com/ There are pretty amazing posts in there.