[pmwiki-users] Converting WikiStyle shortcuts to CSS classes

[Russell Bailey]

John Rankin wrote:

>> * Has anyone played with rewriting the WikiStyle engine before?  Have 
>> you documented any design or quirks?
>>   
>
>
> For typesetting wiki page collections, we completely replace wikistyles
> with print equivalents, to the extent practical. This means mapping
> styles to suitable xml tags first (either inline or block), as the 
> typesetting engine doesn't use css.
>
> I imagine that this is incompatible with what you are doing. I'd be
> interested in looking at an example of what you are producing.
>  
>
Your approach would be incompatible with mine,  but it's certainly 
interesting to hear about.

Here's the background:  I've written a set of scripts which allow PmWiki 
to use a WYSIWYG editor.  This means,  basically,  that I have to be 
able to take HTML fragments created by MarkupToHTML() and turn them back 
into wiki text.  The thing is,  certain wiki markups don't leave enough 
information to convert them back.  In most cases,  like (:include:) it's 
easy enough to just avoid processing the markup.  In others,  however,  
like WikiStyles,  I'd really like to be able to show what the style 
looks like,  but also be able to convert it back to wiki markup by name 
rather than by properties.  (See my original post for the problem this 
presents in the provided implementation.)

To get around this,  I've now written a simple script to transform 
WikiStyles in the $WikiStyle array into CSS classes.  The output looks 
like this:

 /* WikiStyles */
 .black{ color: black; }
 .white{ color: white; }
 .red{ color: red; }
 .yellow{ color: yellow; }
 .blue{ color: blue; }
 .gray{ color: gray; }
 .silver{ color: silver; }
 .maroon{ color: maroon; }
 .green{ color: green; }
 .navy{ color: navy; }
 .purple{ color: purple; }
 .comment{ display: none; }
 .decimal{ list-style: decimal; }
 .roman{ list-style: lower-roman; }
 .ROMAN{ list-style: upper-roman; }
 .alpha{ list-style: lower-alpha; }
 .ALPHA{ list-style: upper-alpha; }
 .left{ text-align: left; }
 .right{ text-align: right; }
 .center{ text-align: center; }
 .thumb{ width: 100px; }
 .cframe{ margin-left: auto; margin-right: auto; width: 200px; 
text-align: center; }
 /* End WikiStyles */


I'll also need to write a replacement for the ApplyStyles() function 
which uses these classes instead of writing out the style attribute.  
That should be fairly easy,  but I'm finding ApplyStyles() hard to 
follow in a few places.

Best,

Russell