Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use SIL Open Font in example #21597

Merged
merged 5 commits into from
Nov 4, 2022
Merged

Use SIL Open Font in example #21597

merged 5 commits into from
Nov 4, 2022

Conversation

Elchi3
Copy link
Member

@Elchi3 Elchi3 commented Oct 17, 2022

Description

This PR fixes #21553. I don't much about fonts. I picked a font from this list #21553 (comment) and removed the reference to fontsgeek.com.

Motivation

Use of open source fonts instead of a suggestion to break licensing agreements.

Additional details

None

Related issues and pull requests

None

@Elchi3 Elchi3 requested a review from a team as a code owner October 17, 2022 13:27
@Elchi3 Elchi3 requested review from estelle and removed request for a team October 17, 2022 13:27
@github-actions github-actions bot added the Content:CSS Cascading Style Sheets docs label Oct 17, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Oct 17, 2022

Preview URLs

External URLs (3)

URL: /en-US/docs/Web/CSS/font-variant-alternates
Title: font-variant-alternates

(this comment was updated 2022-11-04 11:46:20.820911)

Copy link

@drott drott left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you @Elchi3 for taking action - one suggestion below.

font-variant-alternates: swash(fancy);
}
```

#### Result

> **Note:** You need to install the OpenType font _Leitura Display Swashes_ for this example to work. You can find a few free versions for testing purposes, for example from [fontsgeek.com](https://fontsgeek.com/fonts/Leitura-Display-Swashes).
> **Note:** You need to install the OpenType font _Bellota Text_ for this example to work. The font is licensed under the [SIL Open Font License Version 1.1](http://scripts.sil.org/OFL) and can be found at <https://github.com/kemie/Bellota-Font>. More fonts can be found in the [Google Font corpus](https://github.com/google/fonts).
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While at it, could the test be changed to not require an install of the font (this sounds a bit dated given web fonts, but instead embedded it as a web font either by referring to a Google Fonts URL, or a local copy of Bellota in a src: url(...Bellota filename...)?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe using Google Fonts or local fonts doesn't work right now in MDN examples. See mdn/yari#5727 (comment)

I will ask around to see if anyone knows more.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the inability to use Google fonts because of the CSP?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Google fonts work well, but if you have a problem it is not always easy to tell whether the font file you generated from their API is the problem or your code. Hence the yari issue - in that case I had a known good font I could have used and that would have saved me a lot of time.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, loading a Google font works. I updated this.

Copy link

@drott drott left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Non-owner LGTM, thanks for updating this page.

@wbamberg
Copy link
Collaborator

It's great to see a live sample for this, but I'm not sure how this shows the use of font-variant-alternates specifically.

The first example shows the effect of not setting font-family at all, while the second shows the effect of using font-family: "Bellota"; and font-variant-alternates. So it's not clear whether the difference is due to the different font family or due to the font-variant-alternates declaration.

It looks like you can get just the same effect without font-variant-alternates:

Screen Shot 2022-10-18 at 9 01 24 AM

...so I'm not sure what it is adding here. Am I missing something?

@Elchi3
Copy link
Member Author

Elchi3 commented Oct 19, 2022

I'm seeing the same thing as Will. It is strange that the example has two differences, the font-family and font-variant-alternates. I guess it should be changed so that font-variant-alternates is the only difference.

It seems like this is only implemented in Firefox and I'm not sure if I see a visual difference in the rendering either. I'm using macOS. Is it a compat thing? Do we need to choose a different font? Is the code wrong?

@wbamberg
Copy link
Collaborator

I'm seeing the same thing as Will. It is strange that the example has two differences, the font-family and font-variant-alternates. I guess it should be changed so that font-variant-alternates is the only difference.

It seems like this is only implemented in Firefox and I'm not sure if I see a visual difference in the rendering either. I'm using macOS. Is it a compat thing? Do we need to choose a different font? Is the code wrong?

Since neither of us can apparently figure out how to use this, I think it's fair to say that the documentation is not very helpful :). Maybe we should merge this PR as is (since it does resolve the original issue about recommending piracy, which is not good) and have a separate issue about this page? Note that this is part of Interop 2022 and is marked as "done", presumably because the page exists - maybe we should also review pages that exist and decide whether we can improve them.

@drott
Copy link

drott commented Oct 24, 2022

font-variant-alternates is currently only supported in Safari and FF. This may help with testing. Also, if a font does not show differing results, you may want to check the font features in https://wakamaifondue.com/beta/ and if there's not the desired feature level for alternates, try a different one from the list above.

@Elchi3
Copy link
Member Author

Elchi3 commented Oct 24, 2022

I've tried like 15 fonts now and tested them in Firefox and Safari and I don't see any differences. :(

@drott
Copy link

drott commented Oct 24, 2022

Please check the font in Wakamai Fondue. Swash glyph alternates only exists for certain glyphs, usually S or A or something that has a curly part at the end or beginning of the letter. Wakamai Fondue will show you for which glyphs it has such swashes, then you can adapt the test text accordingly.

@Elchi3
Copy link
Member Author

Elchi3 commented Oct 24, 2022

I've tried more and still don't see anything. Do I need more code like font-feature-settings: "swsh" 1;?

Also, I don't know where on Wakamai Fondue it tells me that a font does swashes. I found the "Sansita Swashed" family and it does look like some letters are swashed but the CSS snippet doesn't change anything there either.

(Sorry to be so slow here, this isn't my area of expertise)

@drott
Copy link

drott commented Oct 24, 2022

If you use https://fonts.google.com/specimen/MonteCarlo it definitely has swash glyphs for the following glyphs (see below).

For example, for a capital A, without swsh, and with swsh they look as follows (slightly truncated, I was testing with hb-view).
$ hb-view MonteCarlo-Regular.ttf --features "swsh=1" "A" vs
hb-view MonteCarlo-Regular.ttf "A"

A_noswash
A_swash

So with this font, and using the glyphs from the list below, you'll be able to see difference.

        <SingleSubst index="0">
          <Substitution in="A" out="A.3"/>
          <Substitution in="B" out="B.3"/>
          <Substitution in="C" out="C.3"/>
          <Substitution in="D" out="D.3"/>
          <Substitution in="E" out="E.3"/>
          <Substitution in="F" out="F.3"/>
          <Substitution in="G" out="G.3"/>
          <Substitution in="H" out="H.3"/>
          <Substitution in="I" out="I.3"/>
          <Substitution in="J" out="J.3"/>
          <Substitution in="K" out="K.3"/>
          <Substitution in="L" out="L.3"/>
          <Substitution in="M" out="M.3"/>
          <Substitution in="N" out="N.3"/>
          <Substitution in="O" out="O.3"/>
          <Substitution in="P" out="P.3"/>
          <Substitution in="Q" out="Q.3"/>
          <Substitution in="R" out="R.3"/>
          <Substitution in="S" out="S.3"/>
          <Substitution in="T" out="T.3"/>
          <Substitution in="U" out="U.3"/>
          <Substitution in="V" out="V.3"/>
          <Substitution in="W" out="W.3"/>
          <Substitution in="X" out="X.3"/>
          <Substitution in="Y" out="Y.3"/>
          <Substitution in="Z" out="Z.3"/>
          <Substitution in="b" out="b.5"/>
          <Substitution in="d" out="d.16"/>
          <Substitution in="eight" out="crown1"/>
          <Substitution in="f" out="f.3"/>
          <Substitution in="five" out="embellish6"/>
          <Substitution in="four" out="embellish5"/>
          <Substitution in="g" out="g.7"/>
          <Substitution in="h" out="h.8"/>
          <Substitution in="k" out="k.7"/>
          <Substitution in="l" out="l.7"/>
          <Substitution in="nine" out="crown2"/>
          <Substitution in="one" out="embellish2"/>
          <Substitution in="p" out="p.4"/>
          <Substitution in="q" out="q.3"/>
          <Substitution in="s" out="s.5"/>
          <Substitution in="seven" out="embellish8"/>
          <Substitution in="six" out="embellish7"/>
          <Substitution in="t" out="t.8"/>
          <Substitution in="t_t" out="t_t.1"/>
          <Substitution in="three" out="embellish4"/>
          <Substitution in="two" out="embellish3"/>
          <Substitution in="y" out="y.6"/>
          <Substitution in="zero" out="embellish1"/>
        </SingleSubst>

For Wakamai Fondue: If you go to https://wakamaifondue.com/ (non beta), and upload the MonteCarlo-Regular.ttf file, then you'll see a swsh section, in which you can activate and deactivate the feature to observe the difference.

@Elchi3
Copy link
Member Author

Elchi3 commented Oct 24, 2022

I pushed a change to use MonteCarlo so we can all look at the same thing. The idea is that these two lines would render differently. They don't for me.

https://pr21597.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/font-variant-alternates/_sample_.enabling_swash_glyphs.html

@drott
Copy link

drott commented Oct 24, 2022

Yes, same here, but your test page works with the regular MonteCarlo from the download, Google Fonts seems to strip the swash feature, compare: https://roettsch.es/swash.html where I am embedding the full font with your test page.

@Elchi3
Copy link
Member Author

Elchi3 commented Oct 24, 2022

Ahhh finally seeing the swashes as well! :)
hm, now the problem is that MDN doesn't support local fonts right now, as discussed in the conversation above.

Maybe it is also worth filing a bug with Google Fonts.

@wbamberg
Copy link
Collaborator

wbamberg commented Oct 24, 2022

Thanks for your help understanding this, @drott .

Google Fonts seems to strip the swash feature

That was the critical fact we were missing :). I spent a bunch of time trying to get swashes to work with MonteCarlo last week, but didn't try locally.

For this PR, perhaps we could:

  • stop making this a live sample but instead make it use a local font and tell people where they can get a version of the font that will work
  • note that Google Fonts strips swashes

More work, but we could also, in a follow-up perhaps:

  • find a font-variant-alternates feature that is supported in a Google Fonts-hosts font, and include a live sample of that. It would be good anyway to have more than one feature example here.
  • we should also include something that fleshes out "The parameter is a font-specific name mapped to a number." in a practically helpful way, potentially with examples of what you could specify with a couple of fonts, or how you could figure out what to specify, given a font you want to use.

@drott
Copy link

drott commented Oct 24, 2022 via email

@wbamberg
Copy link
Collaborator

Can the full font asset be fetched or placed somewhere where the inline example can fetch it? how do you do examples with images usually?

Unfortunately not, because of mdn/yari#5727.

@drott
Copy link

drott commented Oct 25, 2022

Can the full font asset be fetched or placed somewhere where the inline example can fetch it? how do you do examples with images usually?

Unfortunately not, because of mdn/yari#5727.

That issue mentions using "our own CDN" as an alternative - so maybe manually placing it there, then referring to a CDN url for the asset might be an option? I am not sure how complicated that is.

@wbamberg
Copy link
Collaborator

Can the full font asset be fetched or placed somewhere where the inline example can fetch it? how do you do examples with images usually?

Unfortunately not, because of mdn/yari#5727.

That issue mentions using "our own CDN" as an alternative - so maybe manually placing it there, then referring to a CDN url for the asset might be an option? I am not sure how complicated that is.

I believe that's not a reference to an immediately usable alternative, but a suggestion for a possible way to solve it (i.e. it's also a project). I think that if we want to put time into building a solution, then the local files approach would be better in various ways.

@Elchi3
Copy link
Member Author

Elchi3 commented Nov 4, 2022

In order to move forward here, I documented how to best get to swashes using a self loaded font.

I removed the example rendering because MDN is unable to render it until something in mdn/yari#5727 happened. :(

Copy link
Collaborator

@wbamberg wbamberg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 thank you Florian. I think this is the best we can do for now :(

@wbamberg
Copy link
Collaborator

wbamberg commented Jun 8, 2023

Thanks to mdn/yari#7605, we now have a proper fix for this: #27206.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content:CSS Cascading Style Sheets docs
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Font-variant-alternates page suggests to pirate a copyrighted font
5 participants