Point Text font Size uniform scaling.

[MUKUND THAKARE]

Hello Group !!
I have been wondering about the  fontSize:  parameter of the PointText, considering the following code snippet,

var text = new PointText({

    point: [50, 50],

    content: 'The contents of the point text',

    fillColor: 'black',

    fontFamily: 'Courier New',

    fontWeight: 'bold',

    fontSize: 25

});

I am trying to find the answer for following questions,  

1) In above code snippet, What is the significance of the font Size as number '25' in terms of text height and width  ? Is it height of the text ? I doubt it is height because my observation till now after calculating bounds of text object, the difference in min.y-max.y is not 0. It does differ by small value say in a range of 0.01-0.1.

2) Also in documentation it is said that, font size is a number of pixels ? Can I get more material on this topic ? how does 25 pixels represent the text ? 
http://paperjs.org/reference/pointtext/#fontsize 
 
Thanks !!

[Samuel ASENSI]

Hi,

1) In above code snippet, What is the significance of the font Size as number '25' in terms of text height and width  ? Is it height of the text ? I doubt it is height because my observation till now after calculating bounds of text object, the difference in min.y-max.y is not 0. It does differ by small value say in a range of 0.01-0.1.

Can you share the way you do your observation ?

This value represents the height of what is sometimes called the "body" of the text, which goes from the "ascender" to the "descender" metrics of the font.

You can find more about font metrics on the web but here's a picture from Wikipedia that summarize the most common ones:

 

2) Also in documentation it is said that, font size is a number of pixels ? Can I get more material on this topic ? how does 25 pixels represent the text ? 
http://paperjs.org/reference/pointtext/#fontsize

The pixel unit is maybe a bit misleading here because in the context of Paper.js canvas, it is a factor of the view zoom and the scale of the elements...

So think of it as a value that you can compare to other Paper.js items, a rectangle for example.

Here is a sketch demonstrating how this value can be compared to other shapes.

So if you set up a text with a font size of 25, its body will have the same height as a rectangle that has a height of 25.

Note that in this sketch, for convenience, I used the same value for `fontSize` and `leading`.

The leading can be compared to the `line-height` in CSS.

As mentioned in my answer to your other question, this is all related to how the web Canvas API works.

If you want to go more in details, maybe the best is to dig into the source code and check out the Canvas API documentation.

Hope it helps.

[MUKUND THAKARE]

It helped in clearing the understanding, I think I have answer to few questions now !!

Yeah about, How do I take the observations ?
1) I render the text with say fontsize 200.
2) Then I find it's bound's
3) Then bounds.max.y - bounds.min.y, I consider this number as height of the text.

Thanks !!

[MUKUND THAKARE]

Hey 
Also have you observed this weird things about scaling the text.

Visually it feels like there is less gap at ascent side that the of the descent side.
From you answers sketch link I tried scaling text by 2.
Scale = 1. Observe the gap.


Scale = 2. observe the gap.


Also if you have observe scaling referencing the base line of text, it's not uniform.

I guess answer to this behavior  of Web API of canvas.
Let me know if you have different thinking over this.

Thanks !!