Log in

View Full Version : Resolved 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.


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


<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:

<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.


<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 (http://bytes.com/topic/html-css/answers/809852-adjusting-position-sup-sub-text#post3220867).
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. :)