change select tag to radio tags

We will move topics to this forum, once we've implemented the requested feature(s) and/or enhancement(s).
Hafonton
Top Typographer
Top Typographer
Posts: 441
Joined: Wed Aug 29, 2018 2:22 pm

change select tag to radio tags

Post by Hafonton »

In the newer version of FC when viewing the font in web preview you added "Default" option. To do that you replaced the checkbox with a select box.
So now, in order to toggle a feature on and off, you need to click twice: one time on the select box, and the second time on the wanted option.
I suggest changing it to radio buttons, so you can save that one click, something like this:
Image

Thoughts?
Erwin Denissen
Moderator
Moderator
Posts: 11108
Joined: Fri Oct 04, 2002 12:41 am
Location: Bilthoven, The Netherlands
Contact:

Re: change select tag to radio tags

Post by Erwin Denissen »

We are open to all suggestions related to the Web Font Test page. We are by no means web developers and are convinced other people can make major improvements to it without making the css and js more complex than needed.
Erwin Denissen
High-Logic
Proven Font Technology
Hafonton
Top Typographer
Top Typographer
Posts: 441
Joined: Wed Aug 29, 2018 2:22 pm

Re: change select tag to radio tags

Post by Hafonton »

I'm a web developer, I'd love to help with that.
How can I change it?
Erwin Denissen
Moderator
Moderator
Posts: 11108
Joined: Fri Oct 04, 2002 12:41 am
Location: Bilthoven, The Netherlands
Contact:

Re: change select tag to radio tags

Post by Erwin Denissen »

The template along with the required files are in this folder:
C:\Program Files\High-Logic FontCreator\WOFFTest

We will most likely need to implement additional code into FontCreator to allow for custom or pre-selected preview text, etc.
Erwin Denissen
High-Logic
Proven Font Technology
Hafonton
Top Typographer
Top Typographer
Posts: 441
Joined: Wed Aug 29, 2018 2:22 pm

Re: change select tag to radio tags

Post by Hafonton »

Great, I'll look into that and will give new files very soon.
Just to clarify, was is the reason you added a Default option in the first place? What problem did it solve?
Hafonton
Top Typographer
Top Typographer
Posts: 441
Joined: Wed Aug 29, 2018 2:22 pm

Re: change select tag to radio tags

Post by Hafonton »

I've added three new functionalities the the WebFont Previewer.
You can download the attached new WOFFTest html,css,js files.

The new features:

1. new previewtext variable in wofftext.html. Right now it has an array of strings.
Image
I need the fontcreator software to "pull" a new file called webpreview.txt (I suggest to put it here: C:\Users\elron\AppData\Roaming\FontCreator13\webpreview.txt) and convert each line to an array.
I suggest making a new fontcreator varaible: %WEBPREVIEWTEXT% for that.

Also, I think FC accidentally exports the web files in different encoding than utf-8 because the Hebrew letters turns into weird characters, so please look into that and make sure that it exports the Hebrew characters currectly.

Image


2. new radio buttons for opentype feature
Image

3. A new functionality that determines if the preview should be initialized as rtl or ltr. (you can change the boolean to false/true to see that it works)
I suggest you export a new variable from FC: %ISRTL% which will return a boolean, and add a new checkbox: "Turn Test Web Font Preview Right-to-Left" under Tool->Options->Preview.
Image

Thoughts?
Attachments
WOFFTest.zip
(6.08 KiB) Downloaded 666 times
Erwin Denissen
Moderator
Moderator
Posts: 11108
Joined: Fri Oct 04, 2002 12:41 am
Location: Bilthoven, The Netherlands
Contact:

Re: change select tag to radio tags

Post by Erwin Denissen »

Hafonton wrote: Fri Apr 03, 2020 11:03 pm Great, I'll look into that and will give new files very soon.
Just to clarify, was is the reason you added a Default option in the first place? What problem did it solve?
It came to our attention that HarfBuzz (the shaping engine used in Firefox and Chrome) uses a three state for features, even the though the specs only mention two (active and inactive features). This is an issue with init, medi, fina, and isol, where HarfBuzz by default applies input selectively, but if a feature is on, it will be applied for all glyphs in the text. We are not sure if it affects other features as well. That is why we made a generic solution.

We consider adding the web test template files to
C:\Users\<yourname>\AppData\Roaming\FontCreator13\WOFFTest\

We can then also include a preview.txt file.

That way it is more convenient for users to make modifications.

I'm not sure if the proposed way to set RTL is what we prefer, but I like the other suggested enhancements.

I'm not sure what fails with the display of Hebrew characters, as it seems FontCreator correctly stores the file as utf-8.
Erwin Denissen
High-Logic
Proven Font Technology
Hafonton
Top Typographer
Top Typographer
Posts: 441
Joined: Wed Aug 29, 2018 2:22 pm

Re: change select tag to radio tags

Post by Hafonton »

Erwin Denissen wrote: Sat Apr 04, 2020 8:46 am
Hafonton wrote: Fri Apr 03, 2020 11:03 pm Great, I'll look into that and will give new files very soon.
Just to clarify, was is the reason you added a Default option in the first place? What problem did it solve?
It came to our attention that HarfBuzz (the shaping engine used in Firefox and Chrome) uses a three state for features, even the though the specs only mention two (active and inactive features). This is an issue with init, medi, fina, and isol, where HarfBuzz by default applies input selectively, but if a feature is on, it will be applied for all glyphs in the text. We are not sure if it affects other features as well. That is why we made a generic solution.
I understand, thanks for explaining. I kept it that way – there's all three options: default, on, and off.

Erwin Denissen wrote: Sat Apr 04, 2020 8:46 am
We consider adding the web test template files to
C:\Users\<yourname>\AppData\Roaming\FontCreator13\WOFFTest\

We can then also include a preview.txt file.

That way it is more convenient for users to make modifications.
Great idea! very nice and organized.
Just make sure not to run the file over when updating to a newer version of FontCreator. But you probably already thought about this.

Erwin Denissen wrote: Sat Apr 04, 2020 8:46 am
I'm not sure if the proposed way to set RTL is what we prefer, but I like the other suggested enhancements.
That's ok, I trust you can find a better solution for RTL users.
Do you have other thoughts?

Erwin Denissen wrote: Sat Apr 04, 2020 8:46 am
I'm not sure what fails with the display of Hebrew characters, as it seems FontCreator correctly stores the file as utf-8.
Me neither.

Last time I checked, the wofftest.html file is encoded to utf-8 currectly in the folder
C:\Program Files\High-Logic FontCreator\WOFFTest
as you can see in this image:
Image

but when FontCreator makes a new TEMP files for the new web font test export and I look at the Source Code in the browser, I see that doesn't keep the Hebrew letters as they are, and messes with some more characters (that are not Hebrew) like ffi ffl and so on:
Image

From what I checked FontCreator does store the file as utf-8 correctly like you said, so maybe the problem is not with that.
I suspect something mingles some unicode letters before it get exported and stored as new TEMP files.

Thoughts?
Erwin Denissen
Moderator
Moderator
Posts: 11108
Joined: Fri Oct 04, 2002 12:41 am
Location: Bilthoven, The Netherlands
Contact:

Re: change select tag to radio tags

Post by Erwin Denissen »

The source file (wofftest.html) is not utf-8.

No, I don't have a clue about the RTL request. Can you explain a Dutch guy who only knows Latin script why it is important? Does it look better, or is there another reason?
Erwin Denissen
High-Logic
Proven Font Technology
Hafonton
Top Typographer
Top Typographer
Posts: 441
Joined: Wed Aug 29, 2018 2:22 pm

Re: change select tag to radio tags

Post by Hafonton »

Erwin Denissen wrote: Sat Apr 04, 2020 4:02 pm The source file (wofftest.html) is not utf-8.
Why is it not? It should be, in order to view most glyphs currently (in Hebrew and other languages too, I suppose).
Erwin Denissen wrote: Sat Apr 04, 2020 4:02 pm No, I don't have a clue about the RTL request. Can you explain a Dutch guy who only knows Latin script why it is important? Does it look better, or is there another reason?
Sorry, of course! I take it for granted because its my mother language.
The reason its important is because Hebrew is written and read from right to left.
If you make a text that includes text that is both in Hebrew and English, it shows it in a bad order.
And as a Hebrew font designer I must use English and Hebrew together, not only for readability, but also for spacing and designing the font itself.
As you can see in the image below, the words are not placed in the right order, the punctuation are not placed in the right order, and sometimes numbers too.
Image

You can reproduce this easily, just open a notepad and write this:
עברית? English! לא כיף משמאל לימין...
and flip the direction from LTR to RTL (shift+ctrl on the right keyboard and left keyboard) and you'll see that the order is messed up, and Hebrew readers can't read it and work with it.
Image

As I'm writing this, I thought of better idea on how to fix this RTL problem: how about making a cookie that remembers the last user choice in the browser? If it was rtl or ltr.
That way it will not intervene with FontCreator. Just pure JavaScript. I'd like to create that for you if you agree and think its a neat solution.
Just give me an O-K and I'll write the script and send it to you.
Hafonton
Top Typographer
Top Typographer
Posts: 441
Joined: Wed Aug 29, 2018 2:22 pm

Re: change select tag to radio tags

Post by Hafonton »

Done.
Pure JavaScript solution.
Look at these three functions in the I file attached:
Initialize() - initalizes the next function:
InitializeDirection() - makes the direction as the last saved option selected in the browser
UpdateDirection() - whenever a direction change is made, save it to the browser (using localstorage)
Attachments
wofftest.js
(11.13 KiB) Downloaded 544 times
Erwin Denissen
Moderator
Moderator
Posts: 11108
Joined: Fri Oct 04, 2002 12:41 am
Location: Bilthoven, The Netherlands
Contact:

Re: change select tag to radio tags

Post by Erwin Denissen »

Thank you for clarifying the importance of RTL.

I don't think cookies work local, and I don't like this approach.

See:
https://stackoverflow.com/questions/860 ... -html-file

Maybe we need a settings.dat file with some optional settings. We can extend it later if there is a need for it.
Erwin Denissen
High-Logic
Proven Font Technology
Hafonton
Top Typographer
Top Typographer
Posts: 441
Joined: Wed Aug 29, 2018 2:22 pm

Re: change select tag to radio tags

Post by Hafonton »

Erwin Denissen wrote: Sat Apr 04, 2020 10:03 pm Thank you for clarifying the importance of RTL.

I don't think cookies work local, and I don't like this approach.

See:
https://stackoverflow.com/questions/860 ... -html-file
You're right, cookies are not the best solution,
Thats I why I didn't use cookies, I used local-storage (similar to cookies but different, no need for server or local files, just a browser).
You can read about it here:
https://developer.mozilla.org/en/docs/W ... calStorage
And here's a video to demonstrate that it works perfectly: https://imgur.com/utYlaQQ
It works with the solution I attached in my last comment (where I attached wofftest.js file)
Erwin Denissen wrote: Sat Apr 04, 2020 10:03 pm Maybe we need a settings.dat file with some optional settings. We can extend it later if there is a need for it.
But a settings.dat is also a nice option too for later extension.
For now just to fix rtl-ltr I think the local-storage is fine.
Hafonton
Top Typographer
Top Typographer
Posts: 441
Joined: Wed Aug 29, 2018 2:22 pm

Re: change select tag to radio tags

Post by Hafonton »

Do you have a GitHub repository for the WOFFTest folder?
Maybe I can create a pull request for you. that would be easier and less work for you (maybe).
Erwin Denissen
Moderator
Moderator
Posts: 11108
Joined: Fri Oct 04, 2002 12:41 am
Location: Bilthoven, The Netherlands
Contact:

Re: change select tag to radio tags

Post by Erwin Denissen »

Hafonton wrote: Sat Apr 04, 2020 10:25 pm You're right, cookies are not the best solution,
Thats I why I didn't use cookies, I used local-storage (similar to cookies but different, no need for server or local files, just a browser).
You can read about it here:
https://developer.mozilla.org/en/docs/W ... calStorage
And here's a video to demonstrate that it works perfectly: https://imgur.com/utYlaQQ
It works with the solution I attached in my last comment (where I attached wofftest.js file)
I think there are also issues with localstorage:
https://stackoverflow.com/questions/249 ... local-file

We generate a new html file with a unique name for each test.
Hafonton wrote: Sat Apr 04, 2020 10:25 pm But a settings.dat is also a nice option too for later extension.
For now just to fix rtl-ltr I think the local-storage is fine.
I'll see what we can do to make a setting file.
Erwin Denissen
High-Logic
Proven Font Technology
Post Reply