font size changed in libjass

[ken-lofi]

hello
i have two problem after using libjass on website
the first is about support fonts
i think the pre-loading not work properly
i have all the font in my pc and also i have attached font to the script
but here photo of what appears

in libass
http://im49.gulfup.com/8NvrgU.png

in libjass
http://im49.gulfup.com/Bp3V1O.png

the second problem with font size... sometimes become smaller and sometime bigger

here in libass
http://im49.gulfup.com/8NvrgU.png

and here in libjass
http://im49.gulfup.com/Yn5u5K.png

[Script Info]
; Script generated by Aegisub 2.1.8
; http://www.aegisub.org/
Title: العربية
ScriptType: v4.00+
WrapStyle: 0
PlayResX: 1280
PlayResY: 720
YCbCr Matrix: TV.601
Last Style Storage: rapu
Video File: ?dummy:23.976000:40000:1280:720:47:163:254:c
Video Aspect Ratio: 0
Video Zoom: 3
Video Position: 33204

[Aegisub Project Garbage]
Audio File: ../../274 [720p].mkv
Video File: ../../274 [720p].mkv
Video AR Mode: 4
Video AR Value: 1.777778
Video Zoom Percent: 0.250000
Scroll Position: 146
Active Line: 152
Video Position: 830

[V4+ Styles]
Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
Style: Default,Adobe Arabic,63,&H00FFFFFF,&H00FFFFFF,&H00020203,&H00000000,-1,0,0,0,104.274,100,0,0,1,1.7,0.74,2,21,21,30,1

[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:01:55.90,0:01:58.19,Default,,0000,0000,0000,,!عليّ أن أسأل أحد شينوبي السحاب حول طريقة استعمالها

[Arnavion]

the first is about support fonts
i think the pre-loading not work properly
i have all the font in my pc and also i have attached font to the script

For the browser to show the font you need to have a CSS @font declaration for each font name that contains the URL to download the font. Preloading just requires you to pass in a map that contains these URLs. Do you have a @font declaration? Are you giving the fontMap parameter of the RendererSettings when you construct the renderer?

the second problem with font size... sometimes become smaller and sometime bigger

I will test this. But just to confirm, both images are for the same script you put at the end? So did the font change during playback from the wrong one to the right one, which is how you got two different screenshots for the same script (one with wrong font, one with wrong size)?

[ken-lofi]

first, thank you for replyy 👍 )
no, i didn't make @font declaration.... i will make it then try
+++
no, i just made modification on the script to take screenshots that show the problem
and for real here the right problem
one picture from aegisub and the other from browser
you'll see the font size become smaller in libjass then the real size in libass
and sometimes become bigger

aegisub libass

browser libjass

"it looks like font problem solved or something like this hhhhhhhh"

[Arnavion]

If libjass uses the wrong font then it is quite possible the resulting size will be wrong. On my machine I used the script from your OP and got almost the same size as in your libass image (it was slightly smaller than libass, but not so much smaller like in your libjass image). Can you confirm that the size is correct after you add the @font declaration?

[realfinder]

hi all
libjass can't load fonts that attached in .ass file?

[Arnavion]

It is not a commonly used feature, so no. Not yet, atleast. I can imagine the only way to get the browser to use it would be to generate a @font declaration and use a data URL for the font.

[ken-lofi]

hello arnavion
i have made @font declaration
but can u explain to me what u meant with this: ((Are you giving the fontMap parameter of the RendererSettings when you construct the renderer?))
+++
the font size in libjass always still smaller than in libass ans vsfilter

[Arnavion]

but can u explain to me what u meant with this: ((Are you giving the fontMap parameter of the RendererSettings when you construct the renderer?))

You need to pass in that parameter in renderer settings when you create the renderer, otherwise it will not know which fonts to preload. http://arnavion.github.io/libjass/api.xhtml#libjass.renderers.RendererSettings.fontMap

[Yukusawa]

Hii , Can u Give us a Simple Example Plz :)
My Font-map :
@font-face { font-family: eng; src: url(infini-gras.otf); }
@font-face { font-family: Dani; src: url(Dani.ttf); }
@font-face { font-family: stc; src: url(stc.otf); }
@font-face { font-family: mobily; src: url(mobily.ttf); }
@font-face { font-family: gom; src: url(theboldfont.ttf); }
, What more I need

[Arnavion]

I guess I should clarify the docs a bit more.

• "How do I make the browser show this text in the font I want?"

  For this you need to make the CSS @font-face declarations. This is not specifically related to libjass - you would do this for any web content where you want to use your own font. It would look like what you already have:

  <style type="text/css" id="myfonts">
  @font-face {
      font-family: "Foo";
      src: url("./fonts/foo.ttf")
  }
  
  @font-face {
      font-family: "Bar";
      src: url("./fonts/bar.ttf")
  }
  </style>

  or you could put them in a .css file and use a <link> tag instead.

• "How do I get libjass to preload fonts?"

  For this you need to give the fontMap property of the renderer settings.

  var renderer = new libjass.renderers.DefaultRenderer(video, ass, {
      fontMap: new libjass.Map([
          ["Foo", ["./fonts/foo.ttf"]],
          ["Bar", ["./fonts/bar.ttf"]]
      ]);
  });

  The fontMap is a tiny implementation of ES6 Map. The constructor takes in an array of key-value pairs. Each key-value pair is an array of key and value. Each key is the name of the font in the ASS script, and the value is an array of all the URLs for the font (probably you'll only have one URL, so this will be array of one value).

  If you already added @font-face declarations, then you would have either a <style> tag or a <link> tag with that CSS like what I gave above. For this, libjass has an easy way to generate the fontMap using the RendererSettings.makeFontMapFromStyleElement function:

  var renderer = new libjass.renderers.DefaultRenderer(video, ass, {
      fontMap: libjass.renderers.RendererSettings.makeFontMapFromStyleElement(document.getElementById("myfonts"))
  });

  Usually you would do it this second way, so that you don't have to type the font name -> url mapping twice (once in CSS, once in JS).

• "What happens if libjass doesn't preload a font and it's not already installed on the user's device?"

  In this case, when libjass wants to calculate what font size to use, it may end up using a temporary font provided by the browser while the browser downloads the real font. So it may calculate the wrong size. This doesn't mean the subtitle will also be displayed with the wrong font, because by the time libjass renders the subtitle the browser may have finished downloading the font. So it's possible the font is right but the font size is wrong. Once libjass calculates the wrong font size, it will stay wrong forever, because libjass only computes font metrics once for each font.

  By preloading the font, you force the browser to have the font available before libjass ever tries to calculate the font size, so it should calculate font size using the correct font.

[ken-lofi]

thank u for the tutorial arnavion-kun
we will try then tell u the result

[Yukusawa]

Thank u ArnaVion 👍

[ken-lofi]

hello ArnaVion
we have added some font succufuly
but the problem of font size still existe
in some font become bigger than the real size and in another font become smaller than the right size
here pictures that show the problem
libass pic

libjass pic

like u see, the font become smaller

---

libass pic

libjass pic

here the font become bigger

[ken-lofi]

script
http://3k.ae/translation/fjsvcblhromyueitqdagwpxknz.ass

[Arnavion]

I can reproduce it for the second case (the one using Hacen Typographer). The issue is that when libjass wants to measure the font metrics by setting the font-measure div to "Hacen_Typographer" font family, the browser renders it as Arial first and then later renders as Hacen Typographer. So the font metric becomes wrong because it calculates the metric for Arial.

[Arnavion]

It doesn't have anything to do with the fact that Hacen Typographer is loaded via XHR, since the metric is calculated when the clock starts ticking, which for DefaultRenderer is after it has preloaded the fonts. To be absolutely sure, I added a delay of 1s between finishing preloading fonts and starting the clock, and the issue still repros.

It might be that browsers (or atleast Chrome anyway) apply local font families in the first tick and then update them to use custom @font-face declarations in the next tick. This could be fixed by making getFontSizeForLineHeight and getLineHeightForFontSize asynchronous, but this will affect the entire renderer API as well in the current form where metrics are calculated in the render cycle.

An alternative is that preloading fonts can also calculate font metrics since it is already asynchronous, but this still hurts users of WebRenderer unless they also duplicate the same mechanism. I may have to expose an API for calculating font metrics explicitly for users of WebRenderer. I forgot preloading fonts is in WebRenderer, not in DefaultRenderer.

[ken-lofi]

so from what i understand from ur explain that there is no solution for the right time ??

[Arnavion]

@ken-lofi @Yukusawa Seems I forgot to update this thread. Can you check if the commit above fixes your issue? Your second line seems to be fine with it, but I only checked the second one because I don't know the timecode of the first line in your script.

[ken-lofi]

but we don't understand what to do exactly?? or how to apply your solution?
more explain plz arnavion-kun??

[Arnavion]

git clone https://github.com/Arnavion/libjass
cd libjass/
npm install

Now use lib/libjass.js

[ken-lofi]

ok, we'll try then tell u
thanks

[Arnavion]

@ken-lofi Did you try it?

[giggioman00]

Hi guys, I'm facing the same problem about font size.
Using libjass, font size is bigger than the font size on PC.
I read all this thread but I didn't understand very well what to do for fix the problem.
Could you please explaine me with more info? Thank you.

[Arnavion]

I explained in #55 (comment) What specifically did you not understand?

[giggioman00]

I need to preload font for make the font appear at the right size, right? So which file should I edit for add this:
var renderer = new libjass.renderers.DefaultRenderer(video, ass, {
fontMap: new libjass.Map([
["Foo", ["./fonts/foo.ttf"]],
["Bar", ["./fonts/bar.ttf"]]
]);
});

[Arnavion]

The same place where you are currently using libjass.renderers.DefaultRenderer - your website's JS file.

[giggioman00]

I'm using v 0.10.0 downloaded here: https://github.com/Arnavion/libjass/releases
I opened every JS file but I can't find that libjass.renderers.DefaultRenderer anywhere

[Arnavion]

libjass is a library. You have to include it on your web page and then write your own JS to use it.

For example look at the demo page. It includes libjass.js and its own index.js, and index.js contains the code to use libjass to show subtitles.

[giggioman00]

In my site I'm going to use videojs-ass.
In their .js there isn't libjass.renderers.DefaultRenderer

There is:
libjass.renderers.AutoClock
libjass.renderers.RendererSettings
libjass.renderers.WebRenderer

But there isn't libjass.renderers.DefaultRenderer.
What should I do?

[Arnavion]

videojs-ass uses WebRenderer which is fine - the fontMap property is for both WebRenderer and DefaultRenderer. It lets you give options so that is where you would expect to be able to set the fontMap property, but videojs-ass only uses the enableSvg property from the options. You should file an issue there.

[giggioman00]

SunnyLi have fixed the problem, but still the font is too big.
I'm doing the testing on localhost.
As you can see, now the font is preloaded succesfully.

But this is how I see the font on my PC Desktop.

There is a big difference. I also included the font using @font-face, but nothing.

I have also installed this font on my Windows, but it shouldn't be a problem.

Any help?

[Arnavion]

Give me the script and the font.

[Arnavion]

Also, try replacing videojs-ass's copy of libjass.js with the one from https://raw.githubusercontent.com/Arnavion/libjass/gh-pages/demo/libjass.js and see if it makes a difference. That is from v0.11.0 that contains some font size fixes.

[giggioman00]

Using v0.11.0 I don't see any difference....
Anyway I also notice that margin of the subs are not the same I set on Aegisub.

Please tell me how can I send to you the script and the font in private

[Arnavion]

Join #libjass on Rizon and PM me

[giggioman00]

It says this: [14:28] == #libjass Cannot join channel (+b)
But I never logged in this channel

[Arnavion]

Heh, apparently Rizon auto-banned all of Italy from every channel I'm in last year.

:irc.rizon.io 367 Arnavion #libjass *!*@*.it irc.rizon.io 1445916612

Unbanned now.

[Arnavion]

1. You define the font face CSS rule with font-family: 'nunitoregular'; but the font name in the ASS script is Nunito. Your font face rule should have font-family: 'Nunito'; for it to work because libjass uses the font name in the ASS script as the CSS font family.

   Since you installed the font on your machine it does use the font in your screenshot.

2. The font size and margins are correct in my local testing.

   • With 720x480 video according to your script's resolution (top aegisub, bottom libjass):
     
   • With 1080x604 video according to your MPC-HC screenshot (top aegisub, bottom libjass):
     

Do you have a URL to your site where I can see how you're using it? Since your video resolution and script resolution are different ratios (1.78 vs 1.5) I suspect there is some bug related to that on your site.

[giggioman00]

I fixed the problem on font-face but still the font is big...
I'm doing everything on localhost...
The margin problem appear in subtitle with many words. For example the line @ 12:38:74
I set 5px margin on the left and on the right and 20px of margin at the bottom. But if you look this images:

• On the left and on the right seem to be more than just 5 px
• On the bottom seem to be less than 20px.

Also, in this image subtitle is rendered in 3 lines. In aegisub is rendered in just 2 lines. But this is due the big size of the font, I think.

[giggioman00]

I uploaded everything from my localhost to a testing site.
Due to the low HDD space this free service offer, I needed to change video source and subtitle script.

You can find everything here: http://test995.altervista.org/index.php/player/8/8

Even here the font is big.
Anyway it's less bigger than the other script. I don't know why.

[Arnavion]

For the margin problem - libjass's letterboxing calculation was wrong. See #62 That is why your 1.5:1 script was not stretching to the full width of a 1.78:1 video and giving the appearance of having too much horizontal margin.

[giggioman00]

The source of my script is 720x480, but also the video source I used was 720x480...
The video become bigger than 720x480 only in Fullscreen mode...
I don't know if this info can help

[Arnavion]

No, the video on your site is 720x408 and target resolution is 850x482

[giggioman00]

The video I put on the testing site yes, is 720x408
but the video of this screen: #55 (comment)
is 720x480

[Arnavion]

It looks 852x480 to me.

Anyway that example shows in two lines for me with the fix in #62 for both 852x480 video and 720x480 video, as it should. Now you just have to wait for SunnyLi to update videojs-ass to use it.

[giggioman00]

Thank you very much. I used the code you posted there and replaced with the old code and now works perfect, even the line of the previous screen now is in 2 lines. Thank you very much!

[giggioman00]

Sorry, another question. Now I'm using the script you gave to me: https://raw.githubusercontent.com/Arnavion/libjass/gh-pages/demo/libjass.js

Anyway, should I also use the new css: https://raw.githubusercontent.com/Arnavion/libjass/gh-pages/demo/libjass.css ?
I seen there are some changes from the old 0.10.0

[SunnyLi]

Yes you should use the updated styles.

FYI, I've updated the videojs plugin to work with the latest dev version.
Code is on branch v0.6.

[giggioman00]

In PC desktop everything works great, but there is a very critical problem on mobile device.
Margin bottom seems to be 0 on mobile device. Then, when there is a subtitle line with 2 line, subtitles are overlying each other...

So there is just 1 line but is impossible to read since there are 2. Please take a look at the screen, this show there is no margin and the overlay of 2 line sub:

http://s8.postimg.org/7wp24f5zo/Screenshot_2016_01_24_22_12_15.jpg

[Arnavion]

Please open a new issue when your issue is not the same as the current one.