SVG and CSS font-size specifications
Jason Harrison
Hi,
I have a programmatically generated SVG file with embedded CSS and
embedded font glyph information. Batik and Adobe SVG viewer render the
file correctly with but Opera reports errors on font-size (and
letter-spacing) specifications:
Inlined stylesheet
Invalid value for property: font-size
Line 46:
letter-spacing:0px;word-spacing:0;font-family:fnt0;font-size:15.469; }
I found that if I use:
font-size:15.469px;
Then Opera, Batik and Adobe SVG agree, but the pixel unit is the wrong
solution, points do not work, and attempts to use em failed to get the
correct size too.
Is the requirement for a unit when specifying font-size a defect in
Opera? Other WebKit browsers seem to require the px unit also, wondering
if there is a common issue that can be fixed or if we can get more
guidance on how to better produce SVG for browsers.
-Jason
jhar...@pdftron.com
--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
Eik
wrote:
> Invalid value for property: font-size
> Line 46:
> font-size:15.469;
>
> I found that if I use:
> font-size:15.469px;
>
> Then Opera, Batik and Adobe SVG agree, but the pixel unit is the wrong
> solution, points do not work, and attempts to use em failed to get the
> correct size too.
>
> Is the requirement for a unit when specifying font-size a defect in
> Opera?
You're required to specify units by the CSS spec, as are browsers required
to ignore properties and values that don't conform to the spec.
In practice, some old browsers accept mistakes like this and assume the
value to be px, and some modern browsers emulate this behaviour whilst in
quirks mode, but not in standards modes.
> wondering if there is a common issue that can be fixed or if we can get
> more guidance on how to better produce SVG for browsers.
If adding 'px' for Opera and Webkit don't produce the results you want, it
suggests one of three things. Either the value you've calculated is not a
pixel value, but a scale factor or something (have you tried "15.469%"?);
Your calculation is wrong; Or you've calculated something on an assumption
of how pixel values relate to other values in your SVG, but the vector
aspect of the rendering means that your pixel values are no longer aligned
with what the rest of the file is being rendered/scaled to.
If you explained what it is you're trying to do in reaching a value of
'15.469', perhaps someone can offer suggestions. Is this supposed to be a
fixed proportion of the width of another font size, length, box, screen
width or something? Do Opera and Webkit render the px value too small and
the em value far too big?
Just in case there's any different between renderers when not using
integers for px values, does it make any difference if you round that
value down to just '15px'?
Rijk van Geijtenbeek
> On Wed, 06 Jan 2010 23:49:39 -0000, Jason Harrison
> <jhar...@pdftron.com> wrote:
>
>> Invalid value for property: font-size
>> Line 46:
>> font-size:15.469;
>>
>> I found that if I use:
>> font-size:15.469px;
>>
>> Then Opera, Batik and Adobe SVG agree, but the pixel unit is the wrong
>> solution, points do not work, and attempts to use em failed to get the
>> correct size too.
>>
>> Is the requirement for a unit when specifying font-size a defect in
>> Opera?
>
> You're required to specify units by the CSS spec, as are browsers
> required to ignore properties and values that don't conform to the spec.
>
> In practice, some old browsers accept mistakes like this and assume the
> value to be px, and some modern browsers emulate this behaviour whilst
> in quirks mode, but not in standards modes.
Note that the SVG 1.0 editors, in their infinite wisdom, wrote in the SVG
spec that unitless numbers in style rules should be interpreted as pixels.
Yes, this was a serious error because it complicates live for user agents
that support both CSS and SVG style rules.
>> wondering if there is a common issue that can be fixed or if we can get
>> more guidance on how to better produce SVG for browsers.
I think you are better off SVG experts... but answers to the questions
below would be interesting to let non-experts take a stab at dealing with
your questions.
> If adding 'px' for Opera and Webkit don't produce the results you want,
> it suggests one of three things. Either the value you've calculated is
> not a pixel value, but a scale factor or something (have you tried
> "15.469%"?); Your calculation is wrong; Or you've calculated something
> on an assumption of how pixel values relate to other values in your SVG,
> but the vector aspect of the rendering means that your pixel values are
> no longer aligned with what the rest of the file is being
> rendered/scaled to.
>
> If you explained what it is you're trying to do in reaching a value of
> '15.469', perhaps someone can offer suggestions. Is this supposed to be
> a fixed proportion of the width of another font size, length, box,
> screen width or something? Do Opera and Webkit render the px value too
> small and the em value far too big?
>
> Just in case there's any different between renderers when not using
> integers for px values, does it make any difference if you round that
> value down to just '15px'?
--
Rijk van Geijtenbeek
Opera Software ASA, Documentation & QA
Tweak: http://my.opera.com/Rijk/blog/
"The most common way to get usability wrong is to listen to what users
say rather than actually watching what they do." - J.Nielsen