https://kotlinlang.org logo
Join Slack
Powered by
The main adaptive website renders very poorly on F...
# fun-adaptive
l
The main adaptive website renders very poorly on Firefox one my workstation. Here's a screenshot:
t
@loke Thanks, that is a text length measurement bug, which is I think is already fixed. I'll upload a new version of the site later today (I have a demo at the morning, I have to prepare for that now.)
Hm, it looks OK for me using https://adaptive.fun with Firefox 115.25 (Mac OS 10.3) and 140.0 (Mac OS 15.5). Which OS are you running on? I'll try it for Windows after the demo as well.
Well, turns out even the same type browsers measure text width very differently when running on different OS. Switched off hiding text overflow and disabled wrap from CSS in index.html. Now all browsers I have on Windows (Firefox, Edge, Chrome) render the pages properly.
l
Did you push that change to the main website?
t
Not yet, I'm about.
l
Ah, OK. Let me know when, and I'll test.
t
Added the version number to the site to be clear about updates.
It's there. Thank you for checking this.
l
A lot better.
Although there seems to be a font issue somewhere. Maybe a Linux issue, but I don't think I've seen anything like this before:
image.png
t
You mean the gr / gu, rigth?
The font should be included with the application, I guess I'll install a Linux next week as well. 😀
Do you use screen magnification?
l
I'm using 1.25x scale
Currently trying out wayland. Perhaps this is yet another wayland problem.
t
Might be, that part uses the default web browser rendering, I don't do anything special with it.
Maybe the face of the "g" is the problem. Would you check if you see the same problem on fonts.google.com when looking at Open Sans?
l
Looks good, even at small sizes:
t
I'm using weight 300 (thin maybe?)
l
That one also looks good for me.
I went into the console and disabled various style definitions. Disabling 
font-weight: 400
fixed it.
Hmm, actually it's the combination of font-size 11, and font-weight 400 that triggers it.
t
Thats interesting, 400 is the default weight, if it is not there, then the default of 300 will be used.
I mean 400 is the normal the browser would use without me setting the default to 300... that sentence above is a bit confused.
l
Actually, it's not just that. There are more visible problems later on the same page:
I didn't even notice them at first.
t
I guess I'll just install a Linux and try it out. I've tried on Windows today, for some reason Firefox really messes with text measurements.
That will have to wait until next week tho, I don't have an easily reachable VM at hand.
l
Wait, I can see what happens.
The spans have absolute positioning.
So of course they won't flow correctly.
t
It seems like the text measurement returns a width returns than the actual width. That explains the problems inside the definition. But the top "guide" cannot be explained like that.
Yes that is intentional. :)
Everything is absolute because I want my layout to be deterministic. Of course browsers mess with that and font measurements do not return the same width with the same font in different browsers on different platforms.
The alternative would be to drop HTML and go pure Canvas as Compose does... brrrrr....
l
Yes, of course fonts come out differently. They'll always show more narrow on windows compared to osx and linux.
Also, system-level antialiasing settings will change the results.
t
They should not (but they do). Font metrics should be determined by the font.
l
Yes, the metrics of individual characters. But layout is done by the compositor (Harfbuzz on Linux and OSX, and the windows whatever it's called on Windows).
I implemented font support for a graphical UI framework once, so I had to learn that stuff 🙂
t
I measure words and then decide what is in one line based on the length of the words.
(and the spaces ofc)
But it seems like that the simple addition of the measured lengths does not work here.
l
Spacing between words might be a problem then. You can get away with that in English, but Arabic is going to break. Also, languages like Thai will have a different set of problems.
t
I don't really worry about that right now to be honest. Considering I do this alone it is close to impossible to cover all cases.
l
It is extremely difficult. It took me months of work just to get a basic implementation working, and that with having access to the low level Harfbuzz API's.
t
This whole spacing problem exists mostly for document rendering tho. I do want to work on that and a have a kind of a rich text editor, but not now.
l
I'm a bit curious though, why rebuild the low level text rendering infrastructure instead of using the thing that is already in the browser?
t
Because I want to work everything the same on all platforms (apparently browser is the hardest 😄 ).
Compose does the same. They just use Canvas and do everything by themselves in WASM.
AFAIK
l
Yes, but I think they have compiled Harfbuzz for Wasm?
Harfbuzz does a lot of the heavy lifting.
Although, perhaps the same functionality is available with JS API's. I don't know about that.
t
It is, somewhat. You can measure any text with any font with any weight, variant, etc. Only it returns with different values on different operating systems. :D
So I do not have the actual font handling. I just say: how big is this word in this font, size, weight? And the browser tells me. Only if it wouldn't lie. :S
What I do not undertand is why the "guide" on the top looks strange. Because that is independent of my positioning. It is just a simple span.
Also, this stuff works for all browsers on Mac and Windows (as of today).
l
Yeah, and changing the size or weight causes it render correctly.
Even though exactly the same size/weight in the google fonts panel looks fine.
t
But that is independent of my measurements.
It's just a simple span...
l
Indeed
I have no explanation
t
Nevermind, I'll check it in detail next week. Even if platforms act a bit different, according to the browser APIs this should work properly. Thank you for the time and the effort you've put into this, it really helps.
This is what I meant in my original post about the effort to make the project available for public. It is a lot of work to clean up things like this.
l
I haven't even gotten to the point of using it yet 🙂 Although I'm working on it now.
t
The interesting thing about this approach is that I would be able to use it to render into PDF or images. Because the core system is independent of browser.
2 Views
Open in Slack
PreviousNext
Powered by