How do you map fontsize from frontend javascript to backend ffmpeg?

[MittalShruti]

If text size is 16px (or 12pt) in frontend, how did you calculate the correct text size that should be passed to backend ffmpeg?

Any help would be greatly appreciated! Thanks

Context -

I am building a simple video editor in react js. For backend, I am using ffmpeg (python)

I need to set the heading font-size for a (say) 1920x1080 (16:9 aspect ratio) resolution video. In react, the video dimensions that I am using are width:515px, height:289.688px. If I set font-size=20pt, how do I ensure that the final video has 'right' (scaled up or down) font size. Pretty sure, I can just pass 20pt to backend to set the font-size; because ffmpeg could produce different width&height video.

That is, in react js, font size - 20px would occupy different space depending upon the width and height of video. But in ffmpeg, once I set the aspect ratio (16:9), fontsize=20px will always occupy same space. Say, I want heading to occupy exactly one line, and fontsize=16px occupies exactly one line in the reactjs video. But same, 16px may not 'finally' occupy exactly one line in the rendered video.

[daem-on]

Hi there!

Thank you for commenting on this old project because this encouraged me to work on it a bit, and now I have rewritten the text editor and it works much better, although it's still not very good.

The text editor in fwf uses HTML canvas, so I'm not sure it's the same as your React project. But I think I can still help you. If you have the exact dimensions for both the video displayed in the UI, and the video that will be rendered, it's easy to calculate the ratio of the two, then you can convert the text size to and from the two values.

Example:

Backend              UI
w=1920               w=515
15px    -----------> 4,02px
55,92px <----------- 15px

backendSize = UISize * (BackendWidth/UIWidth)

This is assuming your UI already has the same aspect ratio as the backend, which you have to take care of beforehand.

I hope this helps and good luck with all the awful font stuff that js&ffmpeg involves!

[MittalShruti]

Haha Thanks! This makes sense.

But why use width specifically? Why not height? If my aspect ratio is 9:16 instead, should I use height in that case? Basically, larger of the two dimensions?

[daem-on]

If the two aspect ratios match, using width or height will give the exact same result. In the example, I used width because both values were round numbers.

[MittalShruti]

correct. my bad

[MittalShruti]

It seems that setting font-size=X doesnt exactly occupy X pixels in ffmpeg. Hence, direct scaling down by (out_width/1080) produce text a little larger in size (in UI) than what is shown in ffmpeg rendered video.

In .ass file, I set PlayResX: 1080 PlayResY: 1920 and then the font-size=130. But, this font-size doesnt occupy exact 130 pixels on screen, when I render the video using ffmpeg. My final video output is 1080:1920 (9:16 aspect ratio), after padding.

If my video (in react js UI) width is 108px; height=192px; then font-size = 13px (=130*(192/1920)) appear much larger than what 130px looks in 1080px:1920px (in proportion). However, if I multiple 13px by 2/3, I get almost the correct size.