CSS applied on a per character basis?

[Noozer]

I'm pretty sure that the answer is "no", but it doesn't hurt to ask...

What is the best way to apply CSS formatting to single characters of text?

For example, what if I want a style the places a 1 pixel green border around
each character?

One method that I know works:
CSS:
.box { border: 1px solid #00FF00; }

HTML:
<span class="box">T</span><span class="box">h</span><span
class="box">e</span>

.... puts "The" onto the page with a 1 pixel green border around each letter.

Sure seems like the hard way to do something that should be simpler. Is this
there an easier way?

 

[Sid Ismail]

: I'm pretty sure that the answer is "no", but it doesn't hurt to ask...
:
: What is the best way to apply CSS formatting to single characters of text?
:
: For example, what if I want a style the places a 1 pixel green border around
: each character?
:
: One method that I know works:
: CSS:
: .box { border: 1px solid #00FF00; }
:
: HTML:
: <span class="box">T</span><span class="box">h</span><span
: class="box">e</span>
:
: ... puts "The" onto the page with a 1 pixel green border around each letter.
:
: Sure seems like the hard way to do something that should be simpler. Is this
: there an easier way?
:


No. You did fine. bte, don't u want padding?

Sid

 

[Noozer]

: What is the best way to apply CSS formatting to single characters of
text?

: One method that I know works:
: CSS:
: .box { border: 1px solid #00FF00; }
:
: HTML:
: <span class="box">T</span><span class="box">h</span><span
: class="box">e</span>
:
: ... puts "The" onto the page with a 1 pixel green border around each letter.
:
: Sure seems like the hard way to do something that should be simpler. Is this
: there an easier way?

No. You did fine. bte, don't u want padding?

Prolly... but keeping it simple for my example.

 

[Jukka K. Korpela]

What is the best way to apply CSS formatting to single characters
of text?

It depends.

For example, what if I want a style the places a 1 pixel green
border around each character?

Stop wanting that.

<span class="box">T</span><span class="box">h</span><span
class="box">e</span> - -
Sure seems like the hard way to do something that should be
simpler.

Why should it be simpler? You're not really supposed to do such things
at all. In special cases, you might want to style an individual
character, but using <span> is then tolerable. In some cases, you could
use the :first-letter pseudoelement.

But if you really, really wanted to style each character, you could use
<span>T</span><span>h</span><span>e</span>
without class attributes, though then you would need to take care of
overriding your CSS rules for <span> in general when needed, if you use
<span> for other purposes as well.

You could even save typing by using <a> (without attributes) instead of
<span>, but that's really trickery.

 

[Noozer]

It depends.


Stop wanting that.


Why should it be simpler? You're not really supposed to do such things
at all.

Hrm.. what if I want to simulate the Wheel of Fortune letterboard? Perfect
example of needing to decorate individual characters. Using a SPAN for each
letter is logical, but it does add a lot of overhead.

In special cases, you might want to style an individual
character, but using <span> is then tolerable. In some cases, you could
use the :first-letter pseudoelement.

But if you really, really wanted to style each character, you could use
<span>T</span><span>h</span><span>e</span>
without class attributes, though then you would need to take care of
overriding your CSS rules for <span> in general when needed, if you use
<span> for other purposes as well.

You could even save typing by using <a> (without attributes) instead of
<span>, but that's really trickery.

True, but definately not kosher.

I just wanted to make sure that I hadn't overlooked some CSS
attribute/functionality that would negate the need for all the SPAN tags.

 

[Beauregard T. Shagnasty]

Hrm.. what if I want to simulate the Wheel of Fortune letterboard?
Perfect example of needing to decorate individual characters. Using
a SPAN for each letter is logical, but it does add a lot of
overhead.

Just for kicks, see my visitor counter. <g>
http://home.rochester.rr.com/bshagnasty/

Uses the CSS:

..cnt {
background-color: #000;
border-top: 2px outset #d0d0d0;
border-left: 2px outset #d0d0d0;
border-right: 2px outset #a9a9a9;
border-bottom: 2px outset #a9a9a9;
color: #32cd32;
font-size:175%;
text-align: center;
margin: 0 -0.2em 0 0;
padding: 0.1em;
width: 1.1em;
}

 

[rf]

Just for kicks, see my visitor counter. <g>
http://home.rochester.rr.com/bshagnasty/

Uses the CSS:

.cnt { ....
}

Hmmm.

..cnt span
{
....
}

<p class="cnt>
<span>&nbsp;</span>
<span>4</span>
....

 

[Beauregard T. Shagnasty]

Hmmm.

.cnt span { ... }

<p class="cnt> <span>&nbsp;</span> <span>4</span> ...

Ok ok... <g> All these hits have raised my counter, too.

 

[rf]

Ok ok... <g> All these hits have raised my counter, too.

What? Is it four million and two now?

 

[Beauregard T. Shagnasty]

What? Is it four million and two now?

<p class="cnt">
<span>&nbsp;</span>
<span>5</span>
<span>,</span>
<span>0</span>
<span>0</span>
<span>0</span>
<span>,</span>
<span>0</span>
<span>0</span>
<span>0</span>
</p>

 

[rf]

<p class="cnt">
<span>&nbsp;</span>
<span>5</span>
<span>,</span>
<span>0</span>
<span>0</span>
<span>0</span>
<span>,</span>
<span>0</span>
<span>0</span>
<span>0</span>
</p>

WOW!

That &nbsp; is reserved for future expansion?

 

[Beauregard T. Shagnasty]

WOW!

That &nbsp; is reserved for future expansion?

Sure. With this exposure, I might get a lot more visits. Remember when
odometers started having that extra digit?

 

[dorayme]

Newsgroups: alt.html
Date: Thu, 30 Dec 2004 17:03:22 -0500
Subject: Re: CSS applied on a per character basis? snip
Just for kicks, see my visitor counter. <g>
http://home.rochester.rr.com/bshagnasty/

Saw your website. The blue box in the font size experiment does not work on
my Mac, in IE all fonts get bigger when zoomed (9.1, IE 5.1.6). I have heard
rumours about this sort of thing though...

dorayme