In the documentation for Semantic-UI Icons, the framework purports to "include a complete port of Font Awesome 5.0.8" which supports SVG icons and Semantic-UI even includes in the assets an icons.svg file. I have searched and found no information in the Semantic-UI documentation as to how to actually use SVG icons. I have tried supplying the file as an argument to the #font-face property, but that is not supported by most modern browsers. Does anybody know how to use the SVG icons that Semantic-UI purports to support?
P.S. If anybody is wondering why I need the SVG icons, it is to work around a bug in IE11. I am dealing with a network of users on Windows 10 with the group policy to "Block Untrusted Fonts" enabled, and IE11 does not properly allow my website to serve .woff, .woff2, .ttf, or .eot files to the user. This is a confirmed issue with IE11 and the only workaround that is feasible for this project may be to use SVG icons.
Related
I have created a custom style, with custom tileset, which displayed correctly in Chrome, but not in Safari or in iOS app (tiles are downloaded for offline).
I am trying to figure out how to specify that I require png tile set and so far came up with nothing.
Can you please point me in the right direction?
Edit: Perhaps it is not png, vs jpeg after all and something else that is not configured correctly, but the guess so far is that it is due to the fact that jpeg is not transparent and thats why custom layer sent as jpeg does not show layer below. Although I am not sure why it is working in Chrome and not in Safari
Your raster tiles are being rendered as expected in Chrome but not Safari, because Chrome supports WebP images.
You can see detailed discussion of the issue here. The linked issue also discusses possible workarounds such as turning the image into an Image source on the map. Unfortunately, there's no easy solution to implement on the Mapbox side because of the limitations of the JPG format and browser support for WebP.
I am developing a PWA with VueJs and the latest Google workbox. As you can see here, the service worker does its job and cache the SVG files used in my application. LightHouse gives me the full score in the PWA section and I can install and use the application online.
However, when I am offline the parts using an SVG asset don’t work and display a fallback message, i.e. this code doesn’t load the asset and display Your browser doesn't support SVG:
<object
data="static/svg/Khmer_unicode_NiDA_layout.svg"
type="image/svg+xml"
id="keyboard-vk">Your browser doesn't support SVG</object>
It doesn’t work on Google and Firefox. If read well the W3C, it is because the fetch algorithm uses the network for OBJECT and EMBED tags to load the asset whether or not it is on the same origin (for security concerns?).
What are my alternatives as we can’t interact with the SVG object by using an IMG tag.
After many tests and some search, I do confirm that object and embed tags with a src attribute must be avoided in a progressive web application. Because, for obscure reasons, the specifications say (although it is not normative) that browsers should attempt to download the assets by the network without trying to fetch the cache first. Even if the asset is into the same location. Then if you're offline the application cannot work.
The best think to do is to inline the SVG content (i.e. copy/paste or include into the HTML page) if you want to interact with the SVG elements.
Trying to make a Firefox WebExtension work in Chrome, I realized that Chrome's icon support must differ. I have been using a multiresolution icon that contains the icon in 16x16, 32x32, 48x48, 64x64, 128x128 and 256x256, which seemed to work in Firefox without any errors. In Chrome I get errors that the icon is not supported...
Is it possible that my format is corrupt or does Chrome simply not support multiresolution icons?
Do I really have to create individual files for every resolution?
I'm looking for a way to whitelist fonts that pages in Chrome can use. In Firefox I would just simply disable Allow pages to choose their own fonts, instead of my selections above in content settings but Chrome seems to be keen on letting web designers force ugly and often unreadable fonts on us.
I don't want to use * { font-family: sans; } style in Stylish, because I want to keep sans (or serif) and monospace sections, and web designers, insane as they are, usually keep those at the end of the font-family list.
I've done my research and I still can't figure out how to do it via Chrome extension API.
I considered intercepting requests for CSS files and modifying them in response but this isn't possible via current API.
I could also traverse the DOM tree, inspect CSS on each node and replace it appropriately but it'd expensive. Moreover this wouldn't work for pages which build the content from JavaScript. So I'd have to use MutationObservers and that would be way too expensive.
If I could somehow read CSS files that the current tab is using, I could collect the rules with font-family style and inject appropriate <style> element into the page via content script. But I couldn't find a way to read those CSS file via current API. (I'd also have to read <style> rules embedded in HTML but that's doable).
I could also do it via some proxy but I'm not sure how to (securely) cope with SSL.
I could get close with fontconfig. It gets rid of Arial but doesn't work for external (and usually most ugly) CSS fonts.
Is it possible to achieve my goal via current Chrome extension API? How? If not, what would be the workaround?
I don't care about inline styles and styles set from JavaScript. I can live with those. Vast majority of pages I'm concerned about use styles from external stylesheets.
EDIT
wOxxOm's advice to modify document.styleSheets is the way to do it and I've made a simple extension that worked on all sites! Unfortunately, in current Chrome, CSSStyleSheet#cssRules returns null for stylesheets loaded outside of page origin https://code.google.com/p/chromium/issues/detail?id=45786. T_T
(I'll of course publish the extension on GitHub and post the link here after I polish it).
EDIT 2
As wOxxOm suggested, blocking web fonts is also an option (though less ideal I'd say) and there even exist good open source extension for it https://chrome.google.com/webstore/detail/disable-web-fonts/olmabeadgbpmhllgdkemfdnmkngkbkeg. It needs some white list for iconic fonts though. Local fonts can then be managed via fontconfig.
This issue is probably related to ugly looking web fonts https://code.google.com/p/chromium/issues/detail?id=173207.
EDIT 3
I ended up with this nice (and open source) extension https://chrome.google.com/webstore/detail/font-blocker/knpgaobajhnhgkhhoopjepghknapnikl. It's a blacklist but that's enough for my needs and it works with iconic fonts. As far as I can tell, to implement a font whitelist extension I'd have to be able to enumerate all fonts loaded by a web page and that appears to be impossible in current Chrome (see first edit).
Is there a way I can load view icons (ex: vwicn001.gif) within XPages being rendered by XPiNC? Most of what I've found only seems to work with web browsers.
My work around has been to use image resources, as that seems to work in both environments.
Look at a normal client installation (not Designer) - the icons are not there. You need to add them into resources