[Discussion] Font Awesome Changes

saxamaphone69 commented 6 years ago

Not an issue per say, more just a general thought dump of something I noticed.

Font Awesome 4.7.0 is the latest version, however 4.6.3 is currently used.
Currently 4chan X uses a data URI of the Font Awesome WOFF font in its entirety. Alone, it is roughly 120KB. On top of that, it also includes having the CSS for each icon (such as .fa-reddit-alien:before {content: "\f281";}) despite this not being used, adding another ~30KB. I was going to suggest using a service such as Fontello, which allows someone to select only the icons that are intended to be used, eliminating a lot of 'waste'. A random selection of 57 icons from FA 4.7, which I think is more than 4chan X uses anyway, results in a 10KB WOFF file (vs the 96KB WOFF file of the full FA set). Data URI-ing that brings it to ~15KB. I assume (?) 4chan X's CSS is cached somehow, but if it isn't, this one change alone could improve rendering since the browser wouldn't get stuck loading 120KB of data URI it doesn't end up using.
I noticed there was an issue regarding no web font support, however according to caniuse, WOFF seems to be extremely well supported so don't see how it could possibly break (I'm going to assume those random browser forks). I bring this up, because my next point, again to save filesize, would be to move onto the WOFF2 format. The only caveat though, is browser support is "far less", with your minimum being Firefox 26 and WOFF2 support coming at 39. This one is more "muh evergreen" than anything, as the saving is almost negligible at ~1KB, and I do wonder if 2 years later, if it is still technically an issue.
There's also the opportunity to increase consistency and convert some of these CSS icons/controls into Font Awesome icons. There may be more hidden away that I've forgotten about. This could make userstyling a lot simpler too, by not having to font-size: 0 all those ×.

Just some things to consider, I guess. Thanks for reading.

ccd0 commented 6 years ago

I noticed there was an issue regarding no web font support, however according to caniuse, WOFF seems to be extremely well supported so don't see how it could possibly break

Some people turn it off for security reasons. I think Noscript disables it by default.

ccd0 commented 6 years ago

I was going to suggest using a service such as Fontello, which allows someone to select only the icons that are intended to be used, eliminating a lot of 'waste'.

Is there an offline version of this?

saxamaphone69 commented 6 years ago

noscripters

In which case, SVGs could be used? There are plenty of benefits for the SVG option, along with their suggested articles.

offline version

I've only ever used the online interface, but according to the README there's a make option. Don't know if that helps.

saxamaphone69 commented 4 years ago

I saw that FA was updated to 4.7.0 and it made me think of this. That covers 1.

Regarding 2, the make option seems rather annoying now that I look at it because the config.json file you use looks something like this:

{
  "name": "",
  "css_prefix_text": "fa-",
  "css_use_suffix": false,
  "hinting": true,
  "units_per_em": 1000,
  "ascent": 850,
  "glyphs": [
    {
      "uid": "cfaa8fbbdcc7bb8d636cb974aad1f9b9",
      "css": "glass",
      "code": 59392,
      "src": "fontawesome"
    },
    {
      "uid": "9ea0a737ccc45d6c510dcbae56058849",
      "css": "music",
      "code": 59393,
      "src": "fontawesome"
    },
    {
      "uid": "9dd9e835aebe1060ba7190ad2b2ed951",
      "css": "search",
      "code": 59394,
      "src": "fontawesome"
    },
    {
      "uid": "bf882b30900da12fca090d9796bc3030",
      "css": "mail",
      "code": 59395,
      "src": "fontawesome"
    },
    {
      "uid": "ccc2329632396dc096bb638d4b46fb98",
      "css": "mail-alt",
      "code": 61664,
      "src": "fontawesome"
    }
  ]
}

which means you'd need to know the finer details and couldn't just list the ones you'd want. I assume something like

include 'font-awesome'
 -> mail
 -> glass

or whatever would be better, so that way if another icon is needed, it can just be added to the list and then the font auto generates.

As for 4, is this something you'd be open to in a PR?

ccd0 commented 4 years ago

As for 4, is this something you'd be open to in a PR?

The sticky/locked/archived icons are part of the original 4chan HTML and should be left as is. For things added by 4chan X, it could be worthwhile, but it might aggravate the issues people have when web fonts are disabled for whatever reason. I believe NoScript disables them by default due to security concerns. I'm not sure how many people have web fonts disabled, though.

Having before/after screenshots of the changes might help in evaluating it. Also it's best to avoid breaking Oneechan and other userstyles if possible, so if we go ahead with this, you should also test with Oneechan.

ccd0 commented 4 years ago

In summary, if there's adequate fallback when webfonts are disabled, it doesn't break Oneechan, and people agree it looks better, I would be inclined to merge it.

saxamaphone69 commented 4 years ago

NoScript disables by default

I'm not sure if I've done something wrong, but on Chrome 75 and NoScript 11.0.1, Font Awesome icons load just fine. I've even tried disabling web fonts (leaving it unchecked, which means not allow) and they still work.

But I do agree that a web font detection script would be needed. I've come across this but not sure where it should be added in the scripts. I suppose a no-wf class could be added to the root and then something else could be worked out.

But if the fallback was to be SVGs, I'd be more inclined to say SVGs should be the default and then no web fonts would be required.

saxamaphone69 commented 4 years ago

font-awesome-changes

I suppose at this stage I should open a PR so you can test the changes yourself instead of me just posting screenshots of progress, but I'll admit I have no clue how to use command line git.

At the moment I manually open files in src/ using Atom, make changes, hit save, open a command prompt which was cd'd into 4chan-x, type make, let that do it's thing, open the 4chan-x-noupdate.user.js using Atom again, open TamperMonkey, copy paste the user.js making sure to rename it to 4CHAN X TEST, save that, refresh the browser, and fiddle around there.

That's besides the point. The screenshot shows Gallery icons turned into Font Awesome icons, with and without OneeChan, and also the close button in the TW and QR.

But, this will be for naught if SVGs end up being the default for icons to solve the "no webfonts" issue.

le edit: The love heart icon for watching threads is an SVG, and is hard coded into the CSS. The CSS folder could just contain another folder for the PNG icons for linkify, and then another folder from let's say Font Awesome 5 since they provide SVGs for all the icons present in 4chan X. If someone wishes to add a new icon, they just need to add the SVG to the folder and let the build process compress the SVG and add the specific CSS (or, as a HTML element).

List of Font Awesome 4.7.0 icons used in 4chan X:

.fa-eye .fa-expand .fa-compress .fa-comment-o .fa-refresh .fa-wrench .fa-plus-square .fa-minus-square .fa-download .fa-angle-down .fa-close .fa-edit .fa-times-circle .fa-link .fa-clipboard .fa-clock-o

And proposed additions:

.fa-heart or/and .fa-heart-o .fa-plus .fa-play .fa-stop .fa-long-arrow-right .fa-{angle|arrow|caret|chevron}-{up|down|right|left}

ccd0 commented 4 years ago

In some ways this looks less consistent now. The buttons in the gallery are different sizes, and the close button on the thread watcher is more prominent than the menu button.

saxamaphone69 commented 4 years ago

I would say that's a design flaw with Font Awesome 4.7.0, as the stroke thickness across icons are inconsistent.

svg instead

This is Font Awesome 5 (the free solid style, as some regular styles are in the pro plan, as are all the light versions) using inline SVGs. You can also see the stroke thickness is consistent across icons. Inline SVG has other benefits over an icon font anyway. This is just using Dev Tools to edit the HTML. Each SVG is controlled with an .inline-svg class, and I've literally just got width: 1rem; height: 1rem; as it's only rule as colours inherit using currentColor. It's just some vertical alignment/spacing that would need to be tweaked. I suppose a wrapper element could be used for each SVG to capture clicks and also give the option to swap out SVGs using pseudo elements.

ccd0 commented 4 years ago

That would probably need some work before I could say it looked better than what we have now.

But I'd agree that transitioning to SVGs and reducing the filesize would probably be worthwhile even if we don't change the appearance. Can we make it work without changing the HTML so we have minimum impact on existing userstyles? Maybe the icons could be added with the background-image property.

If we do change anything appearance-wise, we should make it easy to switch everything back with custom CSS.

saxamaphone69 commented 4 years ago

The 25 SVG icons (including my proposed changes) weigh in at 14.2KB, and there is probably an opportunity to compress them by a few bytes here and there if you remove attributes/classes we don't really care about. That's compared to the original ~150KB of having the URI'd font and all those declarations - that's not even excluding the CSS that would be removed when you consider the rules also present to style the <i> CSS triangles.

I do agree, the SVGs would have to switched so that to the user, it just looks like the icons only have changed. But some changes to HTML would need to happen. A section in the wiki could be referenced to for the change. There will be a slight disruption, but as a userstyle author for 10 years, if 4chan X updates then the userstyle should update to match it. An issue could be opened on the current OneeChan fork notifying/warning of the new changes so they have time to update.

A generic .fourchan-x-icon class, .icon--eye class to identify, .icon--{s|m|l} class modifier for size, and then if someone wants to change the SVG for the love heart to a star they would only need to do:

.icon--heart {
  background-image: url(NEW ESCAPED SVG) !important;
}

sounds helpful.

If someone is desperate to return to Font Awesome 4.7.0 along with CSS triangles, the old CSS can be included in the wiki section and they can just add it themselves.

#qr .icon--close {
  background-image: none;
}
#qr .icon--close::after {
  content: 'x';
}

saxamaphone69 commented 4 years ago

https://github.com/saxamaphone69/4chan-x/tree/svgicons

Somehow, I did it. I have no ideas how, or how you can see these changes - and they're not even all done. If I've done something horribly wrong, I can provide the built user.js as a gist.

The big disadvantage with having SVGs as background-image is you can't do any styling to them from elsewhere in the CSS. fill, stroke, currentColor, --var(), nothing.

Your best bet for icon replacement is .inline-svg--fa { display: none; } and then adding a either a background-image to .icon--eye, or a pseudo element, to each instance of an icon. Then, if you wanted to have the icon change colour on hover, you'd have to play with filter, or declare a whole new SVG with a different colour.

This is just a proof of concept if anything.
File size of 4chan-x.user.js saw a reduction, ~1.08 MB to ~938 KB.
I've swapped the icons in the embedder window, Quick Reply, Thread Watcher, and the menu button for posts.
CSS style changes still need to be made to make the visual switch/impression as minimal/un-obvious as possible.
This is using FA5, not 4.7.0, and doesn't include my text-things-should-be-icons wishes.

ccd0 commented 4 years ago

Thanks, I'll take a look at it later.

The big disadvantage with having SVGs as background-image is you can't do any styling to them from elsewhere in the CSS. fill, stroke, currentColor, --var(), nothing.

Yeah, I've run into the currentColor issue myself. Probably worth the breaking changes to fix. I'll probably be landing some breaking changes of my own in the near future, namely starting to use ES6, so it would be good to land them at the same time.

I would prefer we land icon changes in two parts, part one in which we don't change the appearance of anything and fix the technical issues including filesize, and part two in which we update the appearance of any icons we decide we want to change without making any breaking changes to the HTML.

saxamaphone69 commented 4 years ago

es6 soon decaf soon minimum browser version bumped up

When this happens I'm happy to sift through style.css as well and add in CSS Custom Properties, remove prefixed flexbox and other stuff, and I think those vh|vw bugs are gone too.

Back to the topic at hand.

There was, and probably is, a better way to do this...

https://codepen.io/anon/pen/NQwebX?editors=1100

Here's the SVG version of all the icons present in 4chan X.

First I grabbed all the SVGs from https://github.com/encharm/Font-Awesome-SVG-PNG.

Hand picked the ones in 4chan X (22, 12 KB) along with potentially 21 other icons that could be used (7.59 KB).

As you can see though, some of the SVGs need to be modified because their viewBox is off (ninja edit: these are actually off in the web font as well if I’m not mistaken), and then they can be further optimised with SVGOMG to shave even a few more bytes off. I don't know if that's okay under their license, but it's all in the name of saving space and size and FA would still be credited somewhere.

As for icon sizes,

.notification .inline-svg--fa {
  width: 11px;
  height: 11px;
}

.inline-svg--fa {
  width: 13px;
  height: 13px;
}

#shortcuts .inline-svg--fa,
.watch-thread-link .inline-svg--fa {
  width: 15px;
  height: 15px;
}

these are the only 3 mentions of sizes currently (albeit through font-size). Some icons have some padding and margin to position.

Elements could, in theory, stay the same, with only their innerHTML being changed to be these SVGs instead of the usual a.fa or i.fa counterpart.

Instead of having [data-icon="heart"] on the SVG, perhaps that could be on the wrapping element, then within the build process, it could insert the correct SVG (already correctly sized and minified) from a folder.

Either way, something to consider.

ccd0 commented 4 years ago

Having an Icons object that reads in the SVG files during the build process

Icons =
  link: `<%= readHTML('link.svg') %>`
  ...

and changing code like

<a id="url-button" class="fourchan-x--icon icon--small" title="Post from URL">
  <svg xmlns="http://www.w3.org/2000/svg" class="svg-inline--fa fa-link fa-w-16" viewBox="0 0 512 512">
    <path fill="currentColor" d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/>
  </svg>
</a>

to something like

<a id="url-button" class="fourchan-x--icon icon--small svg-inline--fa fa-link fa-w-16" title="Post from URL">&{Icons.link}</a>

ought to be sufficient for making it easy to change the icons.

Also, I'm not sure what all of those CSS classes are for, but if any of them are redundant, it would be good to eliminate them.

saxamaphone69 commented 4 years ago

I just pushed an update, and I hope I did that thing correctly where I also pull changes from master.

svg-example Alternatively, here's a picture to show the difference. SVGs on the left, web font on the right, and OneeChan enabled underneath.

The web font looks smaller because it actually is. Despite being set at 13px, the font glyph itself is not - it ranges from 11.16px to 12.08px. So the SVGs are actually their intended 13px width and height.

The bottom row is 11px and 12px, respectively. Might need more icon size modifiers than I thought to better match the inconsistencies in the web font.

edit: I think everything has been switched.

[x] Main.coffee mentions .watch-thread-link but I don't understand why
[x] Hovering over the remove post thumbnail in the dump list doesn't work
[x] I have no idea how to switch the SVG in ThreadHiding or PostHiding - I'm using <%= html('&{Icons.minus_square_o}') %>, but once I try ?{type === "hide"}{minus}{plus} or #{if type is 'hide' then 'minus' else 'plus'} to change the minus or the square, I keep getting literal template errors.
[x] Stubs suffer the same fate as the remove icon in the dump list - mainly because the .fourchan-x--icon wrapper has a height and width set
[x] Download icon in File Info (this will lose the text-decoration: underline it inherited as a web font just FYI)
[x] Any icons used by tinyboard (lock/pin/archive)?
[x] Honestly OneeChan looks fine. They'll just need to update a few lines of code to make sure the gears icon they use is an SVG, and fix up the heart to star switch.

ccd0 commented 4 years ago

I'm using <%= html('&{Icons.minus_square_o}') %>, but once I try ?{type === "hide"}{minus}{plus} or #{if type is 'hide' then 'minus' else 'plus'} to change the minus or the square, I keep getting literal template errors.

This ought to work:

<%= html('&{type === "hide" ? Icons.minus_square_o : Icons.plus_square_o}') %>

Also here you don't need the html thing and can simplify that to

(if type is 'hide' then Icons.minus_square_o else Icons.plus_square_o)

ccd0 commented 4 years ago

Main.coffee mentions .watch-thread-link but I don't understand why

This is a result of the way the thread watcher link is done currently, with SVGs as background-image. Due to the lack of currentColor support, the SVGs have to be replaced with a light-colored version on Tinyboard sites with dark themes. After the change to inline SVGs, this code should no longer be necessary.

ccd0 commented 4 years ago

Any icons used by tinyboard (lock/pin/archive)?

The thread updater doesn't support Tinyboard yet but if it did, we'd probably want to keep the native versions of these icons like we do on 4chan. Neither on Tinyboard nor on 4chan should there be any HTML changes to these.

saxamaphone69 commented 4 years ago

Finished that checklist.

edit:

[ ] settings close button
[ ] clear threads in thread watcher

Now that I think about it, I guess the credit for Font Awesome should go as a comment above the Icon object?

Other than that, if there's anything else, I should open a PR?

Did you want me to do a write up for the Wiki?

ccd0 commented 4 years ago

Now that I think about it, I guess the credit for Font Awesome should go as a comment above the Icon object?

There's a mention in the LICENSE file already, but something brief in the Icon object would be good to make it clear.

Other than that, if there's anything else, I should open a PR?

Sounds good. I'll probably have more to say when I have time to review the code.

Did you want me to do a write up for the Wiki?

If you want to. Might be good to wait until the PR is finalized.

ccd0 / 4chan-x

[Discussion] Font Awesome Changes #1473