Get font-family from external css?

[darkflame]

Is it possible to get the font information set by a Class (ie, not on the element directly).

I assume it can be done by looking at the Css file and sort-of parsing it for the information needed.....but this seems a bit of a thudge.

Is there a better method?

Background;

I would like to get the font information at run time so I can recreate the look of a bit of text in a canvas object.  I wish to keep the css file editable, and not burnt into the project as a bundle. (Its a fairly small project, not concerned with loading times)

[Jens]

I think you could read the computed style of an element by using a simple JSNI method.

Here is an example: https://code.google.com/p/gwt-examples/source/browse/trunk/GoneVertical-Core/src/org/gonevertical/core/client/style/ComputedStyle.java?spec=svn3084&r=3084

-- J.

[Thomas Wrobel]

Bingo, that was far easier then expected. Thanks a bunch. 

~~~
Thomas & Bertines online review show:
http://randomreviewshow.com/index.html
Try it! You might even feel ambivalent about it :)

--
You received this message because you are subscribed to a topic in the Google Groups "Google Web Toolkit" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/8Qja9HPsmEk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-web-tool...@googlegroups.com.
To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.

[Thomas Wrobel]

Actually another related query.

Looking at the computed style of some fonts (supplied by the google font API)

I get this;

font-family:'Sorts Mill Goudy', serif;
font-family:'Rouge Script', cursive;
font-family:'Gloria Hallelujah', cursive;
font-family:Tangerine, cursive;

Notice the last one doesn't have single quote marks around the name.....and also doesn't work in canvas.
The first 3 work just fine.

The css for all the fonts is very similar;

.StoryStyleThree {

  font-family: 'Gloria Hallelujah', cursive;

  font-weight: normal;

 font-size: 15px;

}

.StoryStyleFour {

   font-family: 'Tangerine', cursive;

  font-weight: normal;

  font-size: 33px;

}

Any ideas why "Tangerine" is behaving differently? I am assuming the lose of the quotes is whats preventing it working on the canvas element. But given they are defined the same way, I cant work out why its being treated differently.

~~~
Thomas & Bertines online review show:
http://randomreviewshow.com/index.html
Try it! You might even feel ambivalent about it :)

[Jens]

Probably depends on the browser. Technically the font name must be a CSS identifier and if the font name contains any character that is not allowed inside an CSS identifier you must escape that character or quote the whole font name. 'Tangerine' is a valid CSS identifier so it seems fine if the browser removes the quotes internally during CSS processing.

http://www.w3.org/TR/CSS2/fonts.html#propdef-font-family also has some short info about quoting

-- J.

[Thomas Wrobel]

So its probably just no spaces so no need to quote. That makes sense. 

I was looking completely the wrong place anyway. The reason that last font didnt appear on the canvas was I also has Sans-Serif specified, and that font is Serif-ed.
Thanks again.

Canvas is really fun to play with. 

~~~
Thomas & Bertines online review show:
http://randomreviewshow.com/index.html
Try it! You might even feel ambivalent about it :)

--