text height

**james438** · 04-14-2011, 09:06 PM

Hi, I wasn't sure what to name this topic, but I am trying to use css to write a sentence where one word in the middle of a sentence is of a different font, color, and size than the other words in the text, but also about 5px elevated than the other words while remaining on the same line.

I am hoping to do this with minimal divs, but use of any css is fine.

**bluewalrus** · 04-14-2011, 09:31 PM

You could probably use the sup with a class and apply the following css attributes to it line-height, color, font-family.

Code:

This <sup class="that_word">one</sup> word.

Code:

<style ="text/css">
.that_word {
color: #f00;
font-family: Arial, Times, Serif;
line-height:5px; /* this maybe/is wrong */
}
</style>

**james438** · 04-15-2011, 12:16 AM

Thanks, I was not aware of the sub and sup tags. It helps, but is still not quite right. Take a look at the following:

Code:

<body>
This <sub class="that_word">→</sub> word.
</body>
<style ="text/css">
.that_word {
color: orange;
font-family: Arial, Times, Serif;
vertical-align:text-bottom;
font-size:24px;
line-height:777px;
font-weight:bold;
}
body{background-color:blue;
color:white;}
</style>

For some reason the surrounding text is affected as well. Try the code without the highlighted line as well and you will see an interesting change.

Ideally, I would like to be able to raise and lower the word, or in this case arrow, with pixel precision and if I raise or lower it high enough it will overlap with the text above or below. In other words raising the word will not interfere with the text above it.

**james438** · 04-15-2011, 12:25 AM

Got it.

Code:

<body>
This <sub class="that_word">→</sub> word.
<br>here is some more text.
</body>
<style ="text/css">
.that_word {
color: orange;
font-family: Arial, Times, Serif;
position: relative;
top:-5px;
font-size:24px;
font-weight:bold;
}
body{background-color:blue;
color:white;}
</style>

Found the answer here.

**davelf** · 04-15-2011, 02:40 AM

nice, thanks for sharing. i never mention about that tag too.

**LearningCoder** · 04-15-2011, 03:24 AM

You could also use the <span> tag if you wish. Just give the <span> and "id" and in your CSS just set your properties. =D

**james438** · 04-15-2011, 03:56 AM

The <span> and <sub> tags operate slightly differently, but yes, I do like using the span tag more. Thanks for the tip LearningCoder.

If I were to improve upon this a little further I would like to make the increased font size of the word not displace the upper and or lower lines of text and even overlap them if the tagged text were large enough to do so, but I am quite happy with this the way it is. This will give me many more options with manipulating text.

**LearningCoder** · 04-15-2011, 07:46 PM

No problem.

Thread: text height

Thread Tools

Search Thread

text height

The Following User Says Thank You to bluewalrus For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions