styling a pipe character

...without making it a list item

[mightymid]

I'm looking for ways to style a pipe character. I've found a few sources that suggest styling it as a list item with a border. That works fine, but I'm wondering whether there's an easier way (short of using the evil font tag).

Does anyone have other ideas?

Thanks,
Mid

[SuzyUK]

?

Mid, maybe I picked you up wrong, but you don't style "characters", you apply styles to elements

You don't need to use the "evil font tag" (that would be the font *element* then.. sorry pet peeve ) or the <li> element - though you can use either if you want to, they're both elements that can be styled, using CSS, as well an any other.

The logical, or preferred term these days is semantic element/tag and the one I'd use would be the

<span>

- if the pipe is inline with other characters then the span is the generic inline element to use, and yes if you want to target it separately via CSS they you will have to give it a hook which in the first instance means wrapping it in a "containing" element, <font> will do but span with a class might be better seeing as <font> is deprecated

FYI generic containers are:
<span> for inline elements
<div> for block level ones

[Stratus42]

Hi Mightymid,

I think what suzyuk is trying to say is .. for example if this is your line of stuff that you want pipes in..

<p>This ¦ Is ¦ An ¦ Example ¦ of ¦ Pipes</p>

That you could wrap each pipe in a span

<style type="text/css">
.pipe{font-size: 4em; color:#f00; font-weight;bold;}
</style>
<p>This <span class="pipe">¦</span> Is <span class="pipe">¦</span> An <span class="pipe">¦</span> Exampl <span class="pipe">¦</span> of <span class="pipe">¦</span> Pipes</p>

it strikes me though that, perhaps there's some sort of annoying but interesting way of writing a javascript function that would go through and check for all pipes and replace them with with "<span class="pipe">¦</span>" on the fly. - this that example seems like a lot of markup - i'm no javascrip guru though, so I'll leave that to others to speculate on :-)

Cheers!

Stratus

[mightymid]

Yes, <span> of course. I must have had a serious mental block on Friday, as does happen. Also, I use the term "style a character" as a general turn of phrase common to designers. I know that's not technically what we're doing in applying styles to elements, so I apologize for triggering pet peeves. :)

Mid

[SuzyUK]

hehe Mid.. no problem mental blocks do happen (too often to me too) also consider pet peeve untriggered :)

Thanks for the clarification/sample too stratus

just an FYI did you know that if you're working on a site that already has <font> elements in place, and you have no access to change the HTML, you can use them just like a <span>

Suzy

[mep00]

Another option to consider, especially if the pipes are being used as separator between two elements in a horizontal list (which is often the case, even if list elements aren't being used) is to use

border-left

and/or

border-right

. Visually they are very similar, while semantically they are very different. In the case of a list, the semantic separation is already achieved by the having different items in different elements, so the pipe is superfluous.