This post is a test of my new CSS pseudo elements. I have added special quotes for English, Francais and German (only seems to work in Gecko, hmm). I have also added a neat hack to show the cite attribute right after a blockquote, to show the source of that blockquote, as well as language markers for the given lang attribute. Anyway, this post is just to test them out. Note that this will not work in IE, so go get FireFox.
This is a quote in
English
, using normal quotes and since the main language of this site is english there is no extra language identifier.
Se c’est un quote en
Francais
, et i’ll y a un marker pour language. Je ne parler pas francais.
Vis is ze quote en
German
, but I von’t speken ze German, but anyvay, vere is an extra language marker.
This is a test blockquote and has a cite attribute of http://mattread.com/ and a lang attribute of en. You will notice the nice Source thing at the bottom of this blockquote, and the [en] language marker, which is done entirely in CSS. Pretty cool isn’t it?
Now lets test a paragraph in French, with a quote in french
and a quote in english
. Notice the language marker before this paragraph. Ya ya, I know this isn’t French but like I said earlier, I don’t speak French very well. Again, all CSS.
I have also added a print CSS file, so do a print preview to see the print style of this site. Have fun, and let me know what you think. Have a look at my main language CSS file.
Inspired by James.
Matt is the owner of this site and primary author. He also
Comments
The opinions expressed in comments are entirely the responsibility of the various contributors. While I will do everything within reason to ensure that they are not defamatory, I accept no liability for them or the content of links included in them.
Hrm, that’s cool. I’ll look at it when I finish my homework
Not sure which bit I inspired
but your blog is getting better all the time.
1976design.com has the javascript for taking the cite url and putting it after blockquotes and even using the title attribute as the link text. I need to update my old blockquotes but thankfully I’d been assuming someone would do it and most of them are already working fine.
Anonymous, It was the image:after thing
. Dustan’s blockquote thing is pretty cool, but I’m trying to stay away from JS. Although a linked source would be nicer.