Point Text font Size uniform scaling.

49 views
Skip to first unread message

MUKUND THAKARE

unread,
Mar 8, 2021, 5:41:26 AMMar 8
to Paper.js
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

unread,
Mar 8, 2021, 1:36:04 PMMar 8
to pap...@googlegroups.com
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:
Typography_Line_Terms.svg.png
 
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

unread,
Mar 9, 2021, 12:32:08 AMMar 9
to Paper.js
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

unread,
Mar 9, 2021, 12:50:52 AMMar 9
to Paper.js
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.
scale1.PNG

Scale = 2. observe the gap.
scale2.PNG

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 !!
Reply all
Reply to author
Forward
0 new messages