Suit symbols in html/xml/css

[cphastrup]

I am creating a bridge blog and in the process I wondered about the use of suit symbols:

 

Using CSS 2.1, I can define classes for red suits and black suits respectively. However, the code doesn't look particularly "clean" to me, with classes and spans all over the place, e.g. in auctions. However, that's only a minor concern - and only to the geeky part of me. The worst is that it's a pain having to type "<span class="blacksuit">♣</span>" every time I want to describe someone bidding or playing clubs ;) .

 

I would like it so that I can write 2!H in the input field, and the output becomes 2♥, just like in these forums. How is this normally done on bridge blogs and sites? Using JavaScript? PHP? MySQL? XML?

 

I think I am missing something obvious - enlighten me :(

[helene_t]

If you look at the source for this page, it shows the suit symbols in the way you suggest. The conversion from !s to <span class="spades">♠</span> takes place on the server. Your blog host probably doesn't support this.

 

Blogs sometimes use gif images. If you are a LaTeX user the easiest solution may be to use Latex2html.

[theli]

i created a small plugin for wordpress that helps you do something close to what you want

http://vlad.posea.eu/bridge/bridge-tinymce-plugin.html

it's in romanian but the explanations on how to install it are pretty obvious; if you have problems pls contact me with a private message here

[Rossoneri]

Most of the bridge bloggers here use Firmit's template generator: Firmit's site