Comments (49)
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)?
from libjass.
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
"it looks like font problem solved or something like this hhhhhhhh"
from libjass.
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?
from libjass.
hi all
libjass can't load fonts that attached in .ass file?
from libjass.
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.
from libjass.
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
from libjass.
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
from libjass.
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
from libjass.
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.
from libjass.
thank u for the tutorial arnavion-kun
we will try then tell u the result
from libjass.
Thank u ArnaVion 👍
from libjass.
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
like u see, the font become smaller
here the font become bigger
from libjass.
script
http://3k.ae/translation/fjsvcblhromyueitqdagwpxknz.ass
from libjass.
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.
from libjass.
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.
from libjass.
so from what i understand from ur explain that there is no solution for the right time ??
from libjass.
@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.
from libjass.
but we don't understand what to do exactly?? or how to apply your solution?
more explain plz arnavion-kun??
from libjass.
git clone https://github.com/Arnavion/libjass
cd libjass/
npm install
Now use lib/libjass.js
from libjass.
ok, we'll try then tell u
thanks
from libjass.
@ken-lofi Did you try it?
from libjass.
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.
from libjass.
I explained in #55 (comment) What specifically did you not understand?
from libjass.
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"]]
]);
});
from libjass.
The same place where you are currently using libjass.renderers.DefaultRenderer - your website's JS file.
from libjass.
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
from libjass.
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.
from libjass.
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?
from libjass.
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.
from libjass.
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?
from libjass.
Give me the script and the font.
from libjass.
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.
from libjass.
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
from libjass.
Join #libjass on Rizon and PM me
from libjass.
It says this: [14:28] == #libjass Cannot join channel (+b)
But I never logged in this channel
from libjass.
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.
from libjass.
-
You define the font face CSS rule with
font-family: 'nunitoregular';
but the font name in the ASS script isNunito
. Your font face rule should havefont-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.
-
The font size and margins are correct in my local testing.
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.
from libjass.
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.
from libjass.
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.
from libjass.
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.
from libjass.
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
from libjass.
No, the video on your site is 720x408 and target resolution is 850x482
from libjass.
The video I put on the testing site yes, is 720x408
but the video of this screen: #55 (comment)
is 720x480
from libjass.
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.
from libjass.
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!
from libjass.
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
from libjass.
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.
from libjass.
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
from libjass.
Please open a new issue when your issue is not the same as the current one.
from libjass.
Related Issues (20)
- "PlayResX" is not treated as optional! -> breaking HOT 15
- When PlayResX or PlayResY are defined as zero, tab crashes. HOT 1
- Unexpected style margin collisions HOT 1
- \n being rendered in plain text, wrapping style 2 HOT 2
- Request for new release HOT 2
- How to crate subtitle from JSON Object ? HOT 2
- libjass.deserialize dialogue style changes not work HOT 2
- When playing preroll ads, sometimes the text appears very small HOT 1
- Why the npm package doesn't contains a type definition file. HOT 1
- Line-specific styles do not override style definitions HOT 2
- \fad with a fadeout of 0 is treated as fading out for the duration of the line HOT 1
- Opt-in support for command execution HOT 3
- [Feature Request]Can you convert a .ass subtitle to VobSub format? HOT 2
- dialogues ID will be created next to the last dialogues ID from previous object HOT 3
- when I create new dialogue can I get a dialogue class tag? HOT 1
- Update Typescript version HOT 6
- Serialize back to .ass HOT 1
- implement smart line wrapping
- Lines can be "pushed away" by other lines on the same layer HOT 2
- Lines are moved down when lines underneath it are removed HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from libjass.