Re: Styling of SVG 2.0

Hi Cameron,

On May 25, 2012, at 6:58 PM, Cameron McCormack wrote:

> Dirk Schulze:
>> The current draft of SVG 2.0 makes use of the style sheet for CSS
>> specs. I really facilitate it, but it also leads to some questions.
>> 
>> The CSS WG has some style guidelines:
>> http://www.w3.org/Style/spec-mark-up
>> 
>> How much do we want to follow this guideline? I am not necessarily
>> speaking about the short hands like: 'property' that gets transformed
>> to <a class=property href="#text-indent">'property'</a>.
>> 
>> I am more speaking about the formatting of elements, attributes,
>> properties and values.
>> 
>> Just elements and attributes have a certain styling. But the font
>> size is smaller then the rest of the text and the font weight is
>> bold. Both is not the case for CSS.
> 
> CSS also rarely talks about attributes and elements in prose, I guess.
Yes, one of the biggest issues of CSS spec styling.

> 
>> Values are surrounded by double quotes and sometimes bold but
>> sometimes not. In CSS we have single quotes and blueish color, like
>> for properties.
> 
> This is what I am currently doing, which is now a mix of the previous 
> SVG 1.1 conventions and the new CSS conventions:
> 
>   * Element names are marked up with class="element-name", which makes
>     them bold, red, smaller text, with round quotes around.
The red reminds me a bit on Wikipedia, where red links are not existent yet. That was my first thought when I saw that :) I think it is a good idea to have a different color for elements. Can we find a bit more neutral color?
> 
>   * Attribute names are marked up with class="attr-name", which makes
>     them bold, dark blue, smaller text, with round quotes around.
> 
>   * Property names are (now) marked up with class="property", which
>     makes them paler blue, not bold, same size text, with round
>     quotes around.
> 
>   * Attribute values are marked up with class="attr-value", which makes
>     them black, bold, smaller text, with straight quotes around.  (That
>     should perhaps change to round quotes.)
> 
>   * Property values are marked up with class="prop-value", which
>     makes them black, bold, smaller text, but without straight quotes
>     around.  I was thinking though to adopt the CSS formatting here for
>     consistency.
My personal feeling is that bold texts (especially when they have smaller font sizes) are harder to read and interrupt the text flow. It is of course a very subjective feeling.

> 
> I've been moving towards using the CSS property definition table 
> styling, too.
> 
>> The blueish color differs between SVG and CSS.
>> 
>> There are more differences, but in general I just want to know if we
>> try to adapt our design to CSS3 as much as possible, or if we want to
>> continue with the old SVG design.
I noticed another snippet on CSS specs. Quotes are not part of the style change. So it is NOT <a href="#property"><code style="property">'property'</code></a> but '<a href="#property"><code style="property">property</code></a>' which might make more sense from the notation point of view. What do you think?

> 
> I am reasonably happy with the current styling, and I like the 
> distinction between elements/attributes/properties.  I am happy to align 
> with the CSS spec formatting for CSS related things, but otherwise I 
> like our more "unique" formatting. :)
I really like the new design in general. I hope that we (in opposite to CSS specs), can leave the design on entering WD. Thanks Cameron for the great work! Makes reading the spec a lot easier :).

> 
> (Our styling is also quite different from HTML, and ReSpec-generated 
> specs, which tends to use orange <code> formatting for attribute and 
> element names.)

It looks like the WhatWG seems to have different styles for different audiences.

Greetings,
Dirk

Received on Saturday, 26 May 2012 15:44:43 UTC