How to set the font in code and measure text dimensions?

132 views
Skip to first unread message

Nano Elefant

unread,
Jul 27, 2011, 12:20:20 PM7/27/11
to Google Web Toolkit
Hello,

Is there a way to set the font and font size of either a HTML,
RichTextArea or TextArea in code?
Is there a way to calculate the width and height of a text if i know
the font?

Any ideas?

Andrei

unread,
Jul 27, 2011, 9:36:33 PM7/27/11
to Google Web Toolkit
Font size depends on display resolution and display/browser settings
(users can increase or decrease the font size as they like). Also
remember that users are not guaranteed to have the font you want (even
the most popular ones), and their browser may use a sightly different
font instead.

You can render the page, then measure the element (span or div) that
contains your text, then adjust the font size as necessary, but this
may result in a jumpy page (in some cases a browser will have to re-
render the entire page if dimensions of a single div change). I don't
know your requirements, but if you have to be precise, you can use
canvas.

Philippe Blanc

unread,
Jul 27, 2011, 9:40:41 PM7/27/11
to google-we...@googlegroups.com
Something like that? http://www.visualfox.me/app/bold

I plan to open source this in the next few months

> --
> You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
> To post to this group, send email to google-we...@googlegroups.com.
> To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
>

J.Ganesan

unread,
Jul 28, 2011, 7:37:17 AM7/28/11
to Google Web Toolkit
You can measure the width and height of text using TextMeasurer class
in http://code.google.com/p/gwt-g2d/

J.Ganesan
www.DataStoreGwt.com

Philippe Blanc

unread,
Jul 28, 2011, 8:13:42 AM7/28/11
to google-we...@googlegroups.com
Thanks for the link. I didn't know about this project. Now the TextMeasurer class only apply for canvas not for pure HTML element correct?

Nano Elefant

unread,
Jul 28, 2011, 9:48:31 AM7/28/11
to Google Web Toolkit
Thanks for the great advise!

@Andrei, thank you for the enlightenment. I'll take the canvas
approach.

@Philippe, interesting site, thats pretty close to what i'd like to
achieve. Could you please give a brief technological overview? (About
how you've implemented it).

@J.Ganesan, thank you for pointing to gwt-g2d.



On 28 Jul., 14:13, Philippe Blanc <mecha...@gmail.com> wrote:
> Thanks for the link. I didn't know about this project. Now the TextMeasurer class only apply for canvas not for pure HTML element correct?
>
> On Jul 28, 2011, at 1:37 PM, J.Ganesan wrote:
>
>
>
>
>
>
>
> > You can measure the width and height of text using TextMeasurer class
> > inhttp://code.google.com/p/gwt-g2d/

Philippe Blanc

unread,
Jul 28, 2011, 10:12:20 AM7/28/11
to google-we...@googlegroups.com
Thank you! By using some simple css rule like position:absolute and float:left I remove all the size constraint attached to parent element of the text element I need to measure. This way I get the ideal font size for this element. In order to fill the full space I simply use the css rule: font-size and I pass either a em or % until I got the dimension I need. This is the basic canvas. Now the devil is in the detail as browser doesn't react exactly the same way and I also support the resizing of image, video and flash. I can provide you a more detail explanation later.

btw I am looking for a native english speaker to check my foolish and wild grammar.

Reply all
Reply to author
Forward
0 new messages