Styling quotes with CSS3 ?

Hi !

In my eternal quest for a solution in styling quotes, I would want to 
bring you a new proposal (I hope it won't be the worst :)

I would be grateful for any kind of commentaries (I don't know if this
kind of mails interests W3C members - if not, please let me know ;)

The idea is to allow generate content to replace some given characters.

For instance, with this markup:

	<span class="quote">"This is a quote."</span>

getting:

	«This is a quote.» 

This is really easy to obtain using a property, I will call
"remove-content", and this stylesheet:

	.quote:before {
	 content: '«'; 
	 remove-content: '"';
	}

	.quote:after {
	 content: '»';
	 remove-content: '"';
	}

where 'remove-content' gives a list of strings which will be replaced by
the specified content (to the left for :before, to the right for :after).


Advantages
----------

 * for the user agent:

   To be able to properly render the HTML <q> element. For instance, it
allows UAs which presently do not add quotes around <q> content (encouraging
adding them directly in the HTML document) to properly format this
element, replacing quotes if they are.

	q:before {
	 content: '"';
	 remove-content: '"' "'" '« ' '«' <string>;
	}

   And it is very easy to implement...

* for the user:

   To create a document with common quotes " (assuring that the document
will be universally readable) and be able to style them.

   And maybe to be able one day to use <q> :)


Details
-------

For backward compatibility (in particular in case of a UA which only
implements the 'content' property), it is maybe better to create a new
property grouping 'content' and 'removed-content'. For instance
'modified-content':

	modified-content: <content>, <removed-content>;


-- 
Nicolas Lesbats - nlesbats@etu.utc.fr
85 r. Carnot 60200 Compiegne - France
 06 86 800 908

Received on Tuesday, 18 January 2000 11:22:20 UTC