I'd like to use HTML <ruby> to mark up Japanese text with its pronunciation. However, I've found that at large font sizes, the baseline of the <rt> text is well above the top of the characters it's marking up. Here's an example which shows what I mean:
ruby {
font-size: 72pt;
}
<ruby>遅<rt>おそ</rt>い</ruby>
For reference, this is how it appears in my current browser (Firefox on Linux), though I've seen similar behavior in other browsers:
What I would like is to adjust the height of the ruby text to be something more like this:
However, nothing I try seems to have any effect on the positioning of the ruby text. These are all things that I have tried which did not work:
vertical-align: -10px
postion: relative and top: 10px
transform: translateY(-10px)
Is there any way that I can adjust the positioning of this text?
I think I've found a solution which allows for styling <ruby> elements while preserving their semantics. Here's a demonstration, and then a few key insights:
body {
font-size: 72pt;
}
ruby {
display: inline-flex;
flex-direction: column-reverse;
}
rb, rt {
display: inline;
line-height: 1;
}
<ruby><rb>遅</rb><rt>おそ</rt></ruby>い
Set the <rt> element to be display: inline.
Chrome seems to have some special behavior when <rt> is display: block, which prevents styling it as a normal block-level element. That special behavior appears to be disabled when using display: inline.
Use a separate <ruby> element for each annotation.
While there are several valid ways to mark up ruby text, using a new <ruby> element for each annotation gives us a nice container element and makes styling much easier. This is semantically equivalent to using a single ruby element with multiple <rt> and <rb> elements.
Use flexbox to position ruby text.
Flexbox is by far the simplest and most powerful way to position ruby text. If your browser doesn't yet support flexbox, you can try using inline-table, but I didn't have much success in styling content using it. Users of older browsers might also want to see Paul Fioravanti's answer.
I used display: inline-flex to treat the ruby elements as if they were normal text while still having flex contents, and then flex-direction: column reverse to position the text vertically with the <rt> on top.
Set line-height: 1 in the <ruby> element.
A lot of the extra space between the text and its ruby markup can be attributed to the fact that the line height is not the same as the text height by default. Setting line-height: 1 will ensure they are the same.
If the spacing between elements is still not the desired spacing, setting margin-bottom on the <rt> element can adjust it. It can be set to a positive or negative value.
In order to attempt to provide an answer to this question, I went to https://japanese.stackexchange.com/ to see how actual experts in this would do it. There, they seem to have dispensed with the <rb> and <rt> tags and instead changed them to <span>s and styled them appropriately.
Based on the styles I found there, I came up with this CSS jiggery-pokery that seems to get at least in the ballpark of what is needed to take some control of the sizing and positioning of furigana text.
ruby {
font-size: 72pt;
display: inline-block;
line-height: 1em;
position: relative;
}
span.rb {
display: inline-block;
padding-top: 0.6em;
}
span.rt {
font-size: 0.55em;
position: absolute;
display: block;
line-height: 1.3em;
top: 0;
}
<ruby>
<span class="rb">遅</span>い
<span class="rt">おそ</span>
</ruby>
For me, simply using <rt>'s margin-bottom works on Firefox:
<html>
<head>
<style>
div {
float: left;
border: solid;
margin: 1em;
}
ruby {
font-size: 5em;
background-color: rgba(255, 0, 0, 0.3);
}
rt {
font-size: 1em;
background-color: rgba(0, 255, 0, 0.3);
}
</style>
</head>
<body>
<div>
<ruby>
<rb>数多く</rb>
<rt style="margin-bottom: 0em;">kazuooku</rt>
</ruby>
</div>
<div>
<ruby>
<rb>数多く</rb>
<rt style="margin-bottom: -0.4em;">kazuooku</rt>
</ruby>
</div>
<div>
<ruby>
<rb>数多く</rb>
<rt style="margin-bottom: -0.4em; margin-top: -0.2em">kazuooku</rt>
</ruby>
</div>
</body>
</html>
This solution makes sure that if <rt> is wider than <rb>, the characters in <rb> will be separated (notice the space between "数" and "多" below).
Firefox:
However it doew not work so well on Chrome (I am using Chromium, though):
Some fonts have this problem and others don't. We can try to trick the browser into thinking the ascent and descent are different by first loading a font "emptied" with unicode-range, and then falling back to the font we actually want. Some trial and error may be needed in figuring out what fonts have the best or most compatible metrics, and if they are too short letters like g might collide.
#font-face {
font-family: "Empty";
font-weight: 400;
font-style: normal;
unicode-range: U+000A;
src: local("Webdings"), local("Times New Roman"), local("Arial");
}
ruby {
font-size: 72pt;
font-family: "Empty", "My Font Here", sans-serif;
}
<ruby>遅<rt>おそ</rt>い</ruby>
<ruby>語<rt>go</rt></ruby>
Related
I have this code:
<p style="line-height: 1;overflow: hidden;">blah_blah</p>
<p>blah_blah</p>
<p style="line-height: 1;overflow: hidden;">qypj;,</p>
<p>qypj;,</p>
which results in (notice no underscore, and cut characters):
That is, it behaves that way in Firefox (66.0.3 on Windows 10). Other browsers seem to render the underscore. The above snippet runner also seems to work (even in Firefox), unless you run it in "Full page".
This Q is similar to Text changes height after adding unicode character except there are no tricks here. "_" is just a simple ASCII character.
My question is which behavior is the correct one.
Is specific character allowed to change line height (I thought it was only supposed to be font dependent)? Shouldn't line-height: 1 imply it can fit exactly any text?
I suppose some characters are special, such as "p", "g", "j" (and possibly "_") that draw below its line. Still which behavior is the correct one. Is it considered overflow or not?
PS: Furthermore I find it funny either overflow-x: hidden;overflow-y: visible; and overflow-x: visible;overflow-y: hidden; still causes this. Which seems more like an actual bug to me.
My question is which behavior is the correct one.
All of them are correct because we don't have the same default font in all browsers and it's also different depending on the OS.
Is specific character allowed to change line height (I thought it was only supposed to be font dependent)?
Character doesn't change line-height. To be more accurate, line-height is a property that can only be changed by setting line-height but you are probably confusing with the line box that is defined by the line-height and a character alone cannot change it.
Shouldn't line-height: 1 imply it can fit exactly any text?
Not necessarely, line-height:1 means that the line box will be equal to the 1xfont-size 1 but is the font designed to include all the character inside this space? Probably most of them will do but we don't know.
Basically, you have two things to consider. The content area that is defined by the font properties and the line box that is defined by the line-height. We have no control over the first one and we can only control the second one.
Here is a basic example to illustrate:
span {
background:red;
color:#fff;
font-size:20px;
font-family:monospace;
}
body {
margin:10px 0;
border-top:1px solid;
border-bottom:1px solid;
animation:change 2s linear infinite alternate;
}
#keyframes change {
from {
line-height:0.2
}
to {
line-height:2
}
}
<span >
blah_blah
</span>
The red is our content area and its height is defined by the font properties and if you inspect the element you will see it has a height equal to 23px (not 20px like the font-size) and the borders define our line box that we control using the line-height.
So if the line-height is equal to 1 we will have a line box equal to 20px which is not enough to contain the 23px of the content area thus it will get truncated and we may probably hide some characters (or a part of them) which is logical:
span {
background: red;
color: #fff;
font-size: 20px;
font-family: monospace;
}
body {
margin: 5px;
line-height: 1;
overflow:hidden;
}
html {
overflow:auto;
}
<span>
blah_blah ÂÄ j p
</span>
a different font-size will remove the underscore in Firefox:
span {
background: red;
color: #fff;
font-size: 26px;
font-family: monospace;
}
body {
margin: 5px;
line-height: 1;
overflow:hidden;
}
html {
overflow:auto;
}
<span>
blah_blah ÂÄ j p
</span>
Another example with a Google Font where the result should be the same cross browser. The underscore is visible but not the ^/¨
span {
background: red;
color: #fff;
font-size: 26px;
font-family: 'Gugi', cursive;
}
body {
margin: 5px;
line-height: 1;
overflow:hidden;
}
html {
overflow:auto;
}
<link href="https://fonts.googleapis.com/css?family=Gugi" rel="stylesheet">
<span>
blah_blah ÂÄ j p
</span>
Another example where the underscore is not visible:
span {
background: red;
color: #fff;
font-size: 27px;
font-family: 'PT Sans', sans-serif;
}
body {
margin: 5px;
line-height: 1;
overflow:hidden;
}
html {
overflow:auto;
}
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<span>
blah_blah ÂÄ j p
</span>
You can clearly see that we have a different overflow everytime we use a different font which confirms that this is font related. We have no control over it unless we know how the font is designed.
Related questions:
Understanding CSS2.1 specification regarding height on inline-level boxes
Why is there space between line boxes, not due to half leading?
Line height issue with inline-block elements
Here is a good article to get more accurate details and calculation: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
A quote from this article:
It becomes obvious that setting line-height: 1 is a bad practice. I remind you that unitless values are font-size relative, not content-area relative, and dealing with a virtual-area smaller than the content-area is the origin of many of our problems.
1 : I considered a simplified explanation but in reality the calculation of the line box is not only relate to the line-height property.
The default line-height (depending on the font-family) when not otherwise specified is about 1.2 in most browsers. This includes Firefox.
This would explain why the underscore did not show in FireFox when the line-height was set to 1 - the bottom was of the line was cut off. So I don't think it's entirely to do with the font (although this does contribute), but also browser defaults.
Some font-sizes are bigger than other even at seemingly the "same" font size (as I'm sure you've seen when typing documents in e.g. Georgia vs Times new Roman/Baskerville ; so you wouldn't be guaranteed that text would always show on a specified line height of 1 (or 1.2). There are ways of measuring a font in pixels however
Hope this helps
If I use the browser tools in Firefox to inspect my snippet below, there is no height difference between the lines with and without underscore. The only difference is caused by the line-height setting: 16px with line-height: 1, 19.2 px with the browser's default line-height. So the underscore doesn't make a difference here (Firefox 66.0.3 on Mac), and it is visible in both cases.
Note that I set margins to 0 to see the "pure" line-height without distances between the lines. Also, I didn't specify a font-familiy setting, so the default font of the browser for p tags is used.
The only reason for what you describe which I can think of is a font with very particular dimensions/settings, where the descenders (i.e. the parts of letters like p q j which extend below the baseline) are not inside the line-height as defined by the font.
After a bunch of comments back and forth: I suppose it could be caused by the different default (system) fonts on Windows and Mac. Still a bug, I would say (if you are using the default font).
html,
body {
margin: 0;
padding: 0;
}
p {
background: #fb6;
margin: 0px;
}
<p style="line-height: 1;overflow: hidden;">blah_plah</p>
<p style="line-height: 1;overflow: hidden;">blah plah</p>
<p>blah_plah</p>
<p>blah plah</p>
Is there a way of hiding an element's contents, but keep its :before content visible?
Say I have the following code:
HTML:
<span class="addbefore hidetext">You are here</span>
CSS:
.addbefore:before {
content: "Show this";
}
.hidetext {
// What do I do here to hide the content without hiding the :before content?
}
I've tried:
using display: none and setting display: inline on :before, but both are still hidden
using width: 0; overflow: hidden;, but then additional space seems to be added (?)
using color: transparent;, but then, of course, the content of the span still takes up space
using text-indent: -....px, but
this is frowned upon by search engines and
it seems not to work for span elements (?)
Any other ideas as to how I might do this?
Clean Solution
You could use visibility: hidden, but with this solution, the hidden content will still take up space. If this doesn't matter to you, this is how you would do it:
span {
visibility: hidden;
}
span:before {
visibility: visible;
}
Hackish Alternative Solution
Another solution would be to set the font-size of the span to zero* to a really small value. Advantage of this method: The hidden content won't take up any space. Drawback: You won't be able to use relative units like em or % for the font-size of the :before content.
span:before {
content: "Lorem ";
font-size: 16px;
font-size: 1rem; /* Maintain relative font-size in browsers that support it */
letter-spacing: normal;
color: #000;
}
span {
font-size: 1px;
letter-spacing: -1px;
color: transparent;
}
Example on jsfiddle.
Update (May 4, 2015): With CSS3, you can now use the rem (Root EM) unit to maintain relative font-sizes in the :before element. (Browser support.)
*A previous version of this post suggested setting the font size to zero. However, this does not work as desired in some browsers, because CSS does not define what behavior is expected when the font-size is set to zero. For cross-browser compatibility, use a small font size like mentioned above.
For better browser support:
Wrap the text that should be hidden within an additional span element, and apply classes to that span to hide the text you wish to be hidden.
HTML:
<span class="addbefore">
<span class="visuallyhidden">This text will not show.</span>
</span>
CSS:
.addbefore:before {
content: "Show this";
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
The .visuallyhidden class used above is from the current version of HTML5 Boilerplate: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
The advantages of this solution:
Semantic HTML
Complete browser support
No problems with tiny text like other small font-size solutions.
The hidden content won't take up space
See it in action here: http://jsfiddle.net/tinystride/A9SSb/
I took a similar approach as suggested here with visibility, but that still has a content box.
My solution is to simply use font-size to hide the target text.
span {
font-size: 0;
}
span:before {
font-size: 16px;
}
Building on #anroesti's excellent hack, here's a solution if you need to apply in unknown contexts in terms of font size and color, i.e. you are not sure if resetting to color:black;font-size:1rem; will not mess things up:
<span abbrev-content="Intl.">International</span>
#media only screen and (max-width: 700px) { /* very narrow viewports */
span[abbrev-content] { font-size: 0.001em; visibility: hidden; }
span[abbrev-content]::before {
content: attr(abbrev-content);
font-size: 1000em;
visibility: visible;
}
}
If your span content is a paragraph and not just a word, you may also need the negative letter-spacing.
I don't think it's possible with pure css and html. Looking at this example http://jsbin.com/efeco4 you will see that what is inside content property of css, is wrapped by the element. So any manipulation of the element will affect the css content also.
So an alternative thought could be to use jquery, to empty the html content inside tag div with class hidetext without affect the content of css. A sample code could be this:
$('.hidetext').empty();
Example: http://jsbin.com/efeco4/2
I have an issue while using custom font(poppins-regular.ttf). The issue is when I set background-color for span tag which is wrapper of text.
The words like g,y,.. etc got cut at the bottom. But, If I change the font-family from poppinsRegular to tahoma it looks good.
But the real issue here is i need to maintain same line-height
.passageBody, .passageBody2 {
width: 414px;
padding: 10px 0;
margin: 0px;
font-size: 24px;
line-height: 32px;
font-family: 'Poppins', sans-serif;
}
.passageBody2 {
font-family: tahoma;
}
.highlightPhrase {
background-color: yellow;
}
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<div class="passageBody">
<span>“Good-bye to you and your funny feet.</span>
<span class="highlightPhrase">Thanks for all the eggs to eat!” I was speaking to Bess, our chicken, and Mother laughed.</span>
</div>
<hr/>
<div class="passageBody2">
<span>“Good-bye to you and your funny feet.</span>
<span class="highlightPhrase">Thanks for all the eggs to eat!” I was speaking to Bess, our chicken, and Mother laughed.</span>
</div>
Example jsFiddle link here...
You can either remove the line-height property or try to set it in em units.
line-height: 1.5em;
Edit 1
If you don't want to change line-height, use vertical align with inline display
.highlightPhrase {
background-color: yellow;
display: inline;
vertical-align: text-bottom;
}
Edit 2
The above code might have visually changed the line height. So this example might be an elegant solution to your problem. Just wrap the content in another element and set the position to relative, so that background of each line will not hide the above line.
.highlightPhrase span {
position:relative;
}
or you can use some small image as background and repeat it to highlight entire text.
Problem here is the vertical placement of the glyphs.
Designer decided to set the font glyphs like that.
So, basically designer decided how much space there is below the baseline, and how much space is above the height of uppercase letters. Typically these spaces are equal, but they don't need to be.
I think that only solution for you is to put bigger line-height on the paragraph that is using that font or just choose a different font.
Change:
line-height: 32px; to line-height: auto;
Try this
.highlightPhrase {
padding:5px;
}
I have a heading (<h1>) that has a sort of tagline below it. (I used a <small> tag and set font-size to a certain percent so it lines up perfectly when I change font-size of the heading for smaller screens. I'm using em units, if that matters.)
At first, the <small> tag sat nicely underneath the main heading, but I realized I forgot the HTML5 DOCTYPE declaration. So, after I discovered this omission and corrected it, the spacing was all wrong.
Here's my code:
HTML:
<h1 class="banner">Justin Wilson<br /><small>WEB + GRAPHIC DESIGNER</small></h1>
CSS:
h1.banner {
text-align: center;
display: block;
font-family: 'arvil';
font-size: 6.5em;
color: #94babd; }
h1.banner > small {
font-family: Helvetica, Arial, sans-serif;
font-size: 27%;
color: #888;
letter-spacing: 1px;
font-weight: 100; }
And here's the before and after:
I have searched through StackOverflow, but I'm not sure how to proceed. I've read that a <br /> tag simply line breaks, but it inherits the line-spacing, and line-spacing: (value) does not work, nor do margins or padding.
What I need is a simple, cross-browser solution. I used Chrome for the screenshot. Support for IE6-7 is not needed, though support for IE8 would be nice.
The problem is caused by the default line height for the heading element. The default depends on the browser and on the font, but it tends to be about 1.1 to 1.3 times the font size. In any case, with a very large font size set, this creates a problem, because the line height value also sets the height of the second line. By CSS specifications, for a block element, line-height sets the minimum height of line boxes.
There are various ways around this. Setting display: block on the small element is one way, since then its default line height will be determined according to its own font size. Another way is to set a line height that is considerably smaller than the font size, e.g.
h1.banner { line-height: 0.5; }
You need to control the line-height css property (see W3 Schools) to make sure all browsers set the same height for each line.
It's actually advisable to do this to pretty much all elements containing text, which is why most people use CSS resets for production, which sets a default line-height across all elements.
In this case, the <span> and <h1> will likely have different line heights.
I'm sure the <br /> tag is doing nothing wrong, unless you've altered its properties with CSS which I would not advise.
There's also a shorthand version in case you're setting other font properties for the same element(s):
font: <font weight> <font size>/<line height> <font face>;
For example:
font: bold 12px/18px sans-serif;
Hope this helps.
Drop the <br /> and set the display of the <small> element to block.
http://cssdeck.com/labs/uoqfo4xw
<h1 class="banner">Justin Wilson <small>WEB + GRAPHIC DESIGNER</small></h1>
h1.banner {
text-align: center;
display: block;
font-family: 'arvil';
font-size: 6.5em;
color: #94babd; }
h1.banner > small {
font-family: Helvetica, Arial, sans-serif;
font-size: 27%;
color: #888;
letter-spacing: 1px;
font-weight: 100;
display: block; }
An alternative is to set the span to display: block; and then adjust the line-height of the <h2> tag.
I would do this, instead of using a <br /> tag.
Ultimately the answer that works as the best solution is found here (3rd example):
http://www.w3.org/html/wg/drafts/html/master/common-idioms.html#sub-head
#cimmanon posted a very helpful solution, but to be safe, I'll stick with what Steve Faulkner said about this being a more semantic and SEO-friendly solution over using an <h1> tag and <h2> tag for a subheading, or inline elements inside a heading tag, regardless of styling.
Here's the solution:
HTML:
<header>
<h1 class="banner">Justin Wilson</h1>
<p>WEB + GRAPHIC DESIGNER</p>
</header>
CSS:
h1.banner {
text-align: center;
display: block;
font-family: 'arvil';
font-size: 6.5em;
color: #94babd;
font-weight: normal;
margin: 1em 0 0 0;/*purely for display purposes, really*/ }
header > p {font-family: Helvetica, sans-serif;
font-size: 1.75em;
color: #888;
letter-spacing: 1px;
font-weight: 100;
text-align: center;
margin:0; }
And the live demo (might not look good to you without the free Arvil font, from Lost Fonts).
http://cssdeck.com/labs/xysgkffs
Thanks for all the answers thus far.
UPDATED....
Change <small> to <p> in HTML and CSS and add line to the h1.banner > p
margin: 0 auto;
FIDDLE
Say I have a single span element defined as an inline-block. It's only contents is plain text. When the font size is very large, you can clearly see how the browser adds a little padding above and below the text.
HTML:
CSS:
span {
display: inline-block;
font-size: 50px;
background-color: green;
}
<span>BIG TEXT</span>
Looking at the box model, it's clear the browser is adding padding inside the content edge. I need to remove this "padding", one way is to simply alter the line-height, as with:
http://jsfiddle.net/7vNpJ/1/
This works great in Chrome but in Firefox the text is shifting towards the top (FF17, Chrome 23, Mac OSX).
Any idea of a cross-browser solution? Thanks!
It appears as though you need to explicitly set a font, and change the line-height and height as needed. Assuming 'Times New Roman' is your browser's default font:
span {
display: inline-block;
font-size: 50px;
background-color: green;
/*new:*/
font-family: 'Times New Roman';
line-height: 34px;
height: 35px;
}
<span>
BIG TEXT
</span>
The browser is not adding any padding. Instead, letters (even uppercase letters) are generally considerably smaller in the vertical direction than the height of the font, not to mention the line height, which is typically by default about 1.2 times the font height (font size).
There is no general solution to this because fonts are different. Even for fixed font size, the height of a letter varies by font. And uppercase letters need not have the same height in a font.
Practical solutions can be found by experimentation, but they are unavoidably font-dependent. You will need to set the line height essentially smaller than the font size. The following seems to yield the desired result in different browsers on Windows, for the Arial font:
span.foo
{
display: inline-block;
font-size: 50px;
background-color: green;
line-height: 0.75em;
font-family: Arial;
}
span.bar
{
position: relative;
bottom: -0.02em;
}
<span class=foo><span class=bar>BIG TEXT</span></span>
The nested span elements are used to displace the text vertically. Otherwise, the text sits on the baseline, and under the baseline, there is room reserved for descenders (as in letters j and y).
If you look closely (with zooming), you will notice that there is very small space above and below most letters here. I have set things so that the letter “G” fits in. It extends vertically a bit farther than other uppercase letters because that way the letters look similar in height. There are similar issues with other letters, like “O”. And you need to tune the settings if you’ll need the letter “Q” since it has a descender that extends a bit below the baseline (in Arial). And of course, if you’ll ever need “É”, or almost any diacritic mark, you’re in trouble.
I'm a designer and our devs had this issue when dealing with Android initially, and our web devs are having the same problem. We found that the spacing between a line of text and another object (either a component like a button, or a separate line of text) that a design program spits out is incorrect. This is because the design program isn't accounting for diacritics when it is defining the "size" of a single line of text.
We ended up adding Êg to every line of text and manually creating spacers (little blue rectangles) that act as the "measurement" from the actual top of the text (ie, the top of the accent mark on the E) or from the descender (the bottom of a "g").
For example, say you have a really boring top navigation that is just a rectangle, and a headline beneath it. The design program will say that the space between the bottom of the top nav and the top of the headline textbox 24px. However, when you measure from the bottom of the nav to the top of an Ê accent mark, the spacing is actually 20px.
While I realize that this isn't a code solution, it should help explain the discrepancies between the design specs and what the build looks like.
span::before,
span::after {
content: '';
display: block;
height: 0;
width: 0;
}
span::before{
margin-top:-6px;
}
span::after{
margin-bottom:-8px;
}
Find out the margin-top and margin-bottom negative margins with this tool:
http://text-crop.eightshapes.com/
The tool also gives you SCSS, LESS and Stylus examples.
You can read more about it here:
https://medium.com/eightshapes-llc/cropping-away-negative-impacts-of-line-height-84d744e016ce
I had a similar problem. As you increase the line-height the space above the text increases. It's not padding but it will affect the vertical space between content. I found that adding a negative top margin seemed to do the trick. It had to be done for all of the different instances of line-height and it varies with font-family too.
Maybe this is something which designers need to be more aware of when passing design requirements (?)
So for a particular instance of font-family and line-height:
h1 {
font-family: 'Garamond Premier Pro Regular';
font-size: 24px;
color: #001230;
line-height: 29px;
margin-top: -5px; /* CORRECTION FOR LINE-HEIGHT */
}
This worked for me:
line-height: 80%;
If its text that has to scale proportionally to the screenwidth, you can also use the font as an svg, you can just export it from something like illustrator.
I had to do this in my case, because I wanted to align the top of left and right border with the font's top |TEXT| . Using line-height, the text will jump up and down when scaling the window.
The best way is to use display:
inline-block;
and
overflow: hidden;
I've been annoyed by this problem often. Vertical-align would only work on bottom and center, but never top! :-(
It seems I may have stumbled on a solution that works for both table elements and free paragraph elements. I hope we are at least talking similar problem here.
CSS:
p {
font-family: "Times New Roman", Times, serif;
font-size: 15px;
background: #FFFFFF;
margin: 0
margin-top: 3px;
margin-bottom: 10px;
}
For me, the margin settings sorted it out no matter where I put my "p>.../p>" code.
Hope this helps...