[Discussion] Font Awesome Changes #1473
Comments
Some people turn it off for security reasons. I think Noscript disables it by default. |
Is there an offline version of this? |
In which case, SVGs could be used? There are plenty of benefits for the SVG option, along with their suggested articles.
I've only ever used the online interface, but according to the README there's a |
|
I saw that FA was updated to 4.7.0 and it made me think of this. That covers 1. Regarding 2, the which means you'd need to know the finer details and couldn't just list the ones you'd want. I assume something like 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? |
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. |
|
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. |
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 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. |
|
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 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:
And proposed additions:
|
|
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. |
|
I would say that's a design flaw with Font Awesome 4.7.0, as the stroke thickness across icons are inconsistent.
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 |
|
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 If we do change anything appearance-wise, we should make it easy to switch everything back with custom CSS. |
|
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 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 .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';
} |
|
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 The big disadvantage with having SVGs as Your best bet for icon replacement is
|
|
Thanks, I'll take a look at it later.
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. |
When this happens I'm happy to sift through 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 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 Elements could, in theory, stay the same, with only their Instead of having Either way, something to consider. |
|
Having an and changing code like to something like 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. |
|
I just pushed an update, and I hope I did that thing correctly where I also pull changes from
The web font looks smaller because it actually is. Despite being set at The bottom row is edit: I think everything has been switched.
|
This ought to work:
Also here you don't need the
|
This is a result of the way the thread watcher link is done currently, with SVGs as |
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. |
|
Finished that checklist. edit:
Now that I think about it, I guess the credit for Font Awesome should go as a comment above the 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? |
There's a mention in the LICENSE file already, but something brief in the Icon object would be good to make it clear.
Sounds good. I'll probably have more to say when I have time to review the code.
If you want to. Might be good to wait until the PR is finalized. |
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: 0all those×.Just some things to consider, I guess. Thanks for reading.
The text was updated successfully, but these errors were encountered: