dashboard icons: browser.display.use_document_fonts & material design icons #46

Thorin-Oakenpants · 2017-12-12T15:35:38Z

Exploer => Export

What icon font are you using, I seem to have some broken glyphs in 3.0.1 - I'm not even getting the usual tofu/hexidecimal-rectangular icon when a PUA is not mapped

This would be the first extension that has ever done this to me

The text was updated successfully, but these errors were encountered:

sylingd · 2017-12-13T01:24:32Z

I'm sorry for my negligence. The icon is google/material-design-icons

Thorin-Oakenpants · 2017-12-13T02:59:58Z

I'm sorry for my negligence
No negligence here :) You're doing an awesome job.

ON the material design icons github page they say

it is generally better to link to the web font hosted on Google Fonts

I see the icons are local under ..\third-party\material-design-icons - so I assume that no calls are being made to google, right? (I am not a developer)

The problem is caused by browser.display.use_document_fonts=0. This is the setting under

 * [SETTING-56+] Options>General>Language and Appearance>Advanced>Allow pages to choose...
 * [SETTING-ESR] Options>Content>Font & Colors>Advanced>Allow pages to choose...

I could probably live with the icons displaying text (a lot of them are truncated), and that is what I will have to do because I cannot allow documents fonts - doing so destroys my font fingerprinting defense and causes very high entropy,

Other extensions load various icon fonts just fine. I am not a developer, so please excuse my ignorance on this, but there must be a way for this to work with browser.display.use_document_fonts=0

@gorhill Sorry for taking up your time, but uBo and uM use icon fonts no problems. Could you please have a quick look at this, or explain in tech terms how you implement it. For all I know its not the implementation but how Firefox determines that Material design is not a glyph. It's beyond my knowledge, so would appreciate some help

gorhill · 2017-12-13T11:21:15Z

@Thorin-Oakenpants Looks to me you are afflicted by something similar to gorhill/uBlock#2878. My understanding: use_document_fonts=0 means "do no use document fonts, except when no code point is available in the system font".

However, somehow, your system font contains glyphs for code points which are used by the font-based icons -- hence the browser ends up using a glyph from your system font rather than the one from the icon font.

Thorin-Oakenpants · 2017-12-13T11:43:24Z

@gorhill - nope, I am getting NO icons, not even tofu ¹ (see first pic, unless tofu means I get some text displayed instead). I have no trouble getting your icon fonts, or anyone else's in various panels, etc. Back before mozilla added gfx.downloadable_fonts.enabled in FF41, there was the issue that uBo/uM icon fonts were blocked. That was years ago.

So it's something else, either:

material design icons and/or their PUA's are not being detected as glyphs/icon-fonts and covered under gfx.downloadable_fonts.enabled (which I have as true) and thus they fall under use_document_fonts (which I have as false)
the implementation in this extension differs from everything else that I have that shows icon fonts

¹ https://en.wikipedia.org/wiki/Tofu_(disambiguation)

Tofu, or tofu character, Internet slang for substitute character, the empty box or other marker shown in place of an undisplayable code point (character) in a computer font (typeface)

PS: my three allowed fonts are very stock standard for windows. this is something different AFAICT
PPS: Thanks for you time and input, btw

ghost · 2017-12-13T15:25:21Z

I'm also affected by this issue.

gorhill · 2017-12-13T16:08:54Z

Ok, I had to dig and today-I-learned about ligatures. Excerpt from the Material Fonts documentation:

This example uses a typographic feature called ligatures, which allows rendering of an icon glyph simply by using its textual name. The replacement is done automatically by the web browser and provides more readable code than the equivalent numeric character reference.

So no code point is used in the HTML source, but rather a symbol name, and from this symbol name the browser is able to fetch the proper icon in the font. I suppose if the browser can't find the icon from its name, it just does not render anything -- as opposed when a code point is declared, the browser will use tofu if no glyph exists for that code point.

sylingd · 2017-12-13T16:12:11Z

I found a solution. If you set use_document_fonts=0, Firefox will change the default font-family to sans-serif, "Material Icons", because the word "list" can be rendered by sans-serif correctly, the "Material Icons" will take no effect.
So, use <i class="material-icons"></i> to replace <i class="material-icons">list</i> can solute this problem, because the  is a special word which can not be rendered by sans-serif correctly, Firefox will use "Material Icons" to render it.

Thorin-Oakenpants · 2017-12-13T23:48:43Z

thanks @gorhill for the digging (now I know about ligatures as well) and @sylingd for the workaround

For the record: when you set/change use_document_fonts, it does not "change" your 3 default fonts, which you can do independently. The default fonts (.serif, .sans-serif, .monospace) are different per OS. And on top of that they will different on your language set (western, cyrillic etc)

Here's hoping the fix works universally :)

sylingd · 2018-01-17T07:15:40Z

Added

Thorin-Oakenpants · 2018-01-17T07:49:28Z

Yup, I noticed: got this repo starred. Just been waiting for AMO to update to a new release when you're ready :)

Thorin-Oakenpants · 2018-01-20T04:58:57Z

Just updated to 3.0.3 and can confirm on WIndows with browser.display.use_document_fonts=0, the icon-fonts/ligatures look great - thanks 👍

Thorin-Oakenpants · 2018-01-20T05:02:45Z

@sylingd I think you have a typo: not worth a new issue

Add "Add anti-anti-theif-link" to right-click menu .. thief is spelled with an ie, not ei

ghost · 2018-01-20T10:26:51Z

@Thorin-Oakenpants BTW what that option does?

Thorin-Oakenpants · 2018-01-20T11:27:27Z

@fancytenseletters - that is the pref behind:

[SETTING-56+] Options>General>Language and Appearance>Advanced>Allow pages to choose...
[SETTING-ESR] Options>Content>Font & Colors>Advanced>Allow pages to choose...

0=unchecked (so you limit fonts to the three families specified above)
1=default

This is for some font fingerprinting mitigation

ghost · 2018-01-20T15:36:38Z

@Thorin-Oakenpants
Nah, I meant what anti-anti-theif-link option do. 😄

sylingd · 2018-01-20T15:49:15Z

@fancytenseletters Don't like Google Photos, some online photo albums (e.g. Baidu, NetEase) don't allow users upload photos to it and using this photo in other websites(for example, someone's personal blog) because this will consume their bandwidth. It called "anti-thief-link".

Thorin-Oakenpants · 2018-01-20T16:23:46Z

^^ oh, so "hot-linking" then: https://en.wikipedia.org/wiki/Hot_linking . I wondered what it meant as well. The checkbox is just to add a menu item AFAIK, so I didn't bother to dig any further :)

sylingd · 2018-01-20T16:25:40Z

Oh I didn't know it called "hot-linking", I will correct it

Thorin-Oakenpants · 2018-01-20T17:05:47Z

That's just what I've always known it as - because... search google images for "hotlinking" or "hot linking" and you'll see some of the images sites use to serve up in lieu of ... back in the good old days of slow and costly bandwidth

The wiki link is an alias - the actual technical term according to them is "Inline Linking", but I don't think it's a very catchy name :)

Maryse47 · 2018-10-24T10:15:58Z

@sylingd after 4.0.0 release this prob;em is back.

sylingd · 2018-10-24T10:19:05Z

@Maryse47 Yes, I use a lot of new components and I am thinking about how to solve this problem.

Thorin-Oakenpants · 2018-10-24T10:27:49Z

I have the utmost confidence that sylingd will provide a fix/workaround, same as last time 💋

sylingd · 2018-10-24T16:37:37Z

Because of the many new components used, the old fix methods are no longer valid. I have some new ideas, but they are more complicated, so the time to fix this problem may be longer.

Thorin-Oakenpants · 2018-10-26T02:23:39Z

4.0.2 (or I assume more specifically, 22f1780) fixed it for me 💋

sylingd added a commit that referenced this issue Dec 13, 2017

Fixed a wrong word #46

baed68d

Thorin-Oakenpants changed the title ~~icons & a typo~~ dashboard icons: browser.display.use_document_fonts & material design icons Dec 13, 2017

sylingd added a commit that referenced this issue Dec 30, 2017

Add auto replace iconfont with codepoint (#46)

90181c1

sylingd closed this as completed Jan 17, 2018

Thorin-Oakenpants mentioned this issue Oct 23, 2018

1403: icon fonts: flip it and add a related pref arkenfox/user.js#521

Closed

Thorin-Oakenpants mentioned this issue Oct 28, 2019

Broken icons? [solved: browser.display.use_document_fonts which is no longer used] arkenfox/user.js#824

Closed

This was referenced Jul 26, 2020

[I] Broken icons in the extension for firefox pbek/QOwnNotes#1834

Closed

[I] Broken icons if document fonts are disabled in Firefox qownnotes/web-companion#25

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

dashboard icons: browser.display.use_document_fonts & material design icons #46

dashboard icons: browser.display.use_document_fonts & material design icons #46

Thorin-Oakenpants commented Dec 12, 2017 •

edited

Loading

sylingd commented Dec 13, 2017

Thorin-Oakenpants commented Dec 13, 2017

gorhill commented Dec 13, 2017 •

edited

Loading

Thorin-Oakenpants commented Dec 13, 2017 •

edited

Loading

ghost commented Dec 13, 2017

gorhill commented Dec 13, 2017 •

edited

Loading

sylingd commented Dec 13, 2017 •

edited

Loading

Thorin-Oakenpants commented Dec 13, 2017 •

edited

Loading

sylingd commented Jan 17, 2018

Thorin-Oakenpants commented Jan 17, 2018

Thorin-Oakenpants commented Jan 20, 2018

Thorin-Oakenpants commented Jan 20, 2018

ghost commented Jan 20, 2018

Thorin-Oakenpants commented Jan 20, 2018

ghost commented Jan 20, 2018 •

edited by ghost

Loading

sylingd commented Jan 20, 2018 •

edited

Loading

Thorin-Oakenpants commented Jan 20, 2018

sylingd commented Jan 20, 2018

Thorin-Oakenpants commented Jan 20, 2018

Maryse47 commented Oct 24, 2018

sylingd commented Oct 24, 2018

Thorin-Oakenpants commented Oct 24, 2018

sylingd commented Oct 24, 2018 •

edited

Loading

Thorin-Oakenpants commented Oct 26, 2018

dashboard icons: browser.display.use_document_fonts & material design icons #46

dashboard icons: browser.display.use_document_fonts & material design icons #46

Comments

Thorin-Oakenpants commented Dec 12, 2017 • edited Loading

sylingd commented Dec 13, 2017

Thorin-Oakenpants commented Dec 13, 2017

gorhill commented Dec 13, 2017 • edited Loading

Thorin-Oakenpants commented Dec 13, 2017 • edited Loading

ghost commented Dec 13, 2017

gorhill commented Dec 13, 2017 • edited Loading

sylingd commented Dec 13, 2017 • edited Loading

Thorin-Oakenpants commented Dec 13, 2017 • edited Loading

sylingd commented Jan 17, 2018

Thorin-Oakenpants commented Jan 17, 2018

Thorin-Oakenpants commented Jan 20, 2018

Thorin-Oakenpants commented Jan 20, 2018

ghost commented Jan 20, 2018

Thorin-Oakenpants commented Jan 20, 2018

ghost commented Jan 20, 2018 • edited by ghost Loading

sylingd commented Jan 20, 2018 • edited Loading

Thorin-Oakenpants commented Jan 20, 2018

sylingd commented Jan 20, 2018

Thorin-Oakenpants commented Jan 20, 2018

Maryse47 commented Oct 24, 2018

sylingd commented Oct 24, 2018

Thorin-Oakenpants commented Oct 24, 2018

sylingd commented Oct 24, 2018 • edited Loading

Thorin-Oakenpants commented Oct 26, 2018

Thorin-Oakenpants commented Dec 12, 2017 •

edited

Loading

gorhill commented Dec 13, 2017 •

edited

Loading

Thorin-Oakenpants commented Dec 13, 2017 •

edited

Loading

gorhill commented Dec 13, 2017 •

edited

Loading

sylingd commented Dec 13, 2017 •

edited

Loading

Thorin-Oakenpants commented Dec 13, 2017 •

edited

Loading

ghost commented Jan 20, 2018 •

edited by ghost

Loading

sylingd commented Jan 20, 2018 •

edited

Loading

sylingd commented Oct 24, 2018 •

edited

Loading