no support for Arabic text in a-text component, also all the A-Frameโs built-in fonts doesn't support Arabic.
a-frame v: 0.6 ,
testing in Chrome ,
Mac
You can either:
1. use a custom font, by pointing a url to the .fnt file ( and the .png font file) as described in the documentation. Its done by simply defining
font:urlto.fntfile;fontImage:urlto.pngfile in the text component or primitive.
2. As described in the docs, rendering 2D text is no easy task, so You could make a transparent image containing Your text in arabic.
(2) Seems to be simpler, but it's a pain when You need to change a typo, or sth in the text. I use it for Polish characters anyway.
You will need to generate a custom font from a fontset that contains Arabic characters. In WebGL, we don't get fonts for free, they are converted into glyphs and vertices.
https://aframe.io/docs/0.6.0/components/text.html#custom-fonts
A more recent component aframe-troika-text provides a simpler solution that can render directly from a referenced font file.
https://github.com/lojjic/aframe-troika-text
Related
I am digging into an existing reactJS site, and many images are being rendered by using the css content property. I am looking at the css sheet in VSCode, and many classes are appearing with content listed as "๏". I'm not sure if I need a plugin to view the actual content, but I can't find a way to see it at this point.
I can use alter the content attribute to point to a different image, but want to know where this is being generated so I can alter it at the source. The site is setup to use Contentful, but assets there are called directly on pages, not in css.
.fa-discord:after {
content: "๏";
}
I'd like to be able to track down where this image is being stored or generated. Any help is appreciated!
That's a Font Awesome icon for Discord, and can be found here. Yes, you need to include Font Awesome on your website if you want to render any of their glyph icons. And you can easily work out whether a website is attempting to use Font Awesome glyph icons or not, as their selectors all start with fa- and replace the content.
Font Awesome icons are generated through an included CSS file, most commonly located in a folder like /fonts/font-awesome/css/font-awesome.min.css.
This file uses unicode characters to generate the corresponding glyph representations, and the specific unicode character for the Discord icon is 392. Thus, content: "\f392" will render the relevant glyph icon.
If a box or square shows up instead of an actual glyph, that means that the font you're using doesn't incorporate that particular unicode glyph. Font Awesome rapidly expands its coverage of unicode glyphs, and you will need to update to at least Font Awesome 5.0.0 in order to use the Discord glyph.
I am converting some custom icons to web fonts (for internal use only) and I was able to use a local client tool to export to the various font formats (woff, eot, ttf, svg) needed for each icon.
I am using the character map utility in Windows to see the Unicode value for each icon. For example, an airplane icon I have has a unicode value of: U+0021 (Exclamation Mark).
So, now, in my CSS file, I am using code like so:
.myIcon-airplane:before {
content: "!"
}
This outputs an airplane icon as expected.
However, is there a way to use the unicode value (ie, U+0021) instead of the exclamation mark? Or, what's the correct way for me to map my icons using the CSS content key?
Unfortunately, I can't use a public tool due to the proprietary nature of these icons.
Use the backslash escape character followed by the unicode value, like so:
.myIcon-airplane::before{
content:"\0021";
}
<p class="myIcon-airplane"></p>
I cannot get Chrome on OSX to print emoji, is there any css trick or other?
Here are 2 emoji: ๐๐ฆ๐น
When I try to print this page, the emoji space is preserved, but it's white. In Safari printing the emoji works just fine.
Here is a screenshot of the print preview of this page on Chrome:
After a lot of dialog in the question's comments, it seems you have a font rendering issue (perhaps a Chrome bug). I do not think this can be solved with any combination of HTML, CSS, or Javascript.
There is, however, the option to work around the issue by not using a font.
You can use a vector image like SVG to have the same kind of scaling capabilities as a font:
SVG for ๐THUMBS UP SIGN Unicode character
SVG for ๐ฆ REGIONAL INDICATOR SYMBOL LETTER A Unicode character
SVG for ๐น REGIONAL INDICATOR SYMBOL LETTER T Unicode character
SVG for Thumbs up sign
SVG for Austrian flag
Just link to the SVG as an image and specify its dimensions either in HTML or in CSS as needed.
With a little work, you could automate conversion of user-generated emojis to images by using a dictionary of known images and supplement the misses with the either the SVG or the emoji PNG at FileFormat.Info. They have a list of emojis you could scrape (assuming it's not a violation of their terms of service) for PNGs as well as an SVG for every character (emoji or otherwise) which can be obtained from from just the character code. For example, here's U+1f44d (๐):
http://www.fileformat.info/info/unicode/char/1f44d
It'll be the only SVG link on the page, so you could do this in JS:
var svg_src = fileformat_info.querySelector('a[href$=".svg"]').href;
That said, it'd be vastly preferable to have this ready-made rather than creating from scratch. #pandawan's answer suggesting twemoji looks promising.
Perhaps there is a CSS-only workaround: I've also read elsewhere that you can properly print these characters by avoiding bold (and perhaps all font and text manipulation? perhaps just make the font size bigger?). This may depend on the fonts installed on the client system.
This is due to a rendering difference between Chrome and Safari, I would not named it a bug since I do not believe that the expect behavior is defined anywhere (Firefox has issues rendering your emojis too by the way).
If you want a full and simple emoji support across all platforms you can use twemoji, a small library developed by Twitter for this specific need.
So, I know that this isn't something that is normally a good idea for a website, but I have a special purpose/intent for such a use:
I have a multilingual dictionary that I'm working with online, where I need one of the languages to be in a specific font, from a file that I specify locally. However, I want this language to be rendered ONLY in this font, as if it is rendered using any other font, it will render incorrectly. That's all fine and dandy, and I can load the file in CSS and whatnot.
But I want to make it so that if it can't load that file, either for one reason or another, or something goes wrong, it can't go to another font. Basically, render this text using this font, and if you can't do that, don't just try and render it with Arial or whatever is the default -- show me blocks, show me a stark something.
I've spent a bit looking around, but am not sure what in CSS I would be using for this. Suggestions/help? Thanks :)
As an update to this question, since April 2013 there exists the Adobe Blank Font, which can be used for that purpose.
You may build a cross-browser css with FontQuirrel WebfontGenerator and the Adobe Blank font files.
If you just need the font in OpenType format you can use this single css file with the already embedded font
You can't do this. Text is text and text has to have a font that it is to be rendered in. If you really want, there's probably some weird JavaScript function that can detect the actual font being used for the text and if it doesn't match the one you want, then you can hide it or something. But in the end, your only option is to have the text displayed in some obscure font, or completely hide the text. If the text is visible, it has to be rendered using some font.
You could also theoretically create your own font where all the characters are just blank, but that seems highly illogical and such a waste of resources to make people download a font just so it can display meaningless emptiness.
There is no "don't render fonts" option. It's a font, it needs to be rendered, or else it's hidden visually in the DOM.
You could use Javascript to find out the font being applied to a certain block, and if it's not the font you want, just hide it. Or display a message.
Another solution is somehow specify the content to be empty. For example, I'm trying to override the +/- character that a Webix tree displays using Font Awesome:
#lhn-tree-container .webix_tree_open:before {
content: '';
}
This only works with the :before and :after pseudo-elements though.
When working with Visual Studio, I always see that # character when selecting font family in CSS editor and finally I decided to ask what that is.
Sample image right below :
The Unknown Character http://img341.imageshack.us/img341/5895/cssunknown.png
P.s : It seems like fonts installed only my computer or not general fonts but I am not pretty sure though.
These are fonts that are appropriate for East Asian languages when the text is displayed vertically. The preferred traditional reading direction for Japanese, Chinese and Korean. The glyphs in the font are rotated so that after you create a rotated font, the character displays the right way.
This wikipedia article is excellent, also mentions the #.