css kerining (letter-spacing) question

[tench]

i have a problem that i need to resolve with css. displaying some text from db, i get strings which represent verb stems and endings, i.e. something like

lik|e (-ed, -ing)

i.e. there's a vertical separator character which marks off the end of the verb stem in the first word, so that the user knows where the stem ends and where the ending begins (this is common in dictionaries)

the way this gets normally displayed is not appropriate because there is way too much space between the letter preceding and following the vertical separator, which makes the first letter not very leggible. when i use letter-spacing, however, i can get the separator to move close to the letter following, but I can't keep it in the middle.

what would be the right way of dealing with this problem, making the separator equidistant from and very close to both letters with a span class for the separator?

does my question make sense?

 

[pixeline]

could you make an image with how you want it exactly made ?

this is how i would do it: a class for the word specifying the letter-spacing, and a class for the separator, specifiying a padding-left/right

example:

<style type="text/css">
<!--
.word {
	letter-spacing: 1px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.separator{
padding-left:0px;
padding-right:0px;
color:#FF0000;
}
-->
</style>
<span class="word"> lik<span class="separator">|</span>e (-ed, -ing) </span>

 

[dlloyd]

Hmm, are you trying to use a fixed-width font or something? It looks pretty good the way it came out on the board here...