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.
Related
I converted an SVG font to OTF using FontForge. I know the original font has certain errors, but really don't think any of those errors would cause the following issue:
When using CSS
writing-mode:vertical-lr; text-orientation:upright, I get the following results. The Firefox rendering is perfect, but for some reason the results seem to kern certain letter combinations in Chrome (ver. 96). I've tried doing everything I can think of in FontForge as far as clearing kerning tables, toggling options for "old kerning" and "microsoft kerning", etc. Nothing seems to make any difference to the result.
I know that upright orientation is not well supported by browsers in general, but it's apparent that Arial font renders perfectly under Chrome, so I think there must be something I can do to fix this problem.
The font is generated in FontForge from an SVG font that uses vert-adv-y. The values for that parameter are correct in the SVG (the SVG has other errors, but I don't think they have any bearing here). I'm linking a copy of the exported OTF file. Perhaps someone may discover some sort of kerning or letter-advancing issue there.
Or perhaps Chrome is doing some sort of automatic kerning, in which case, why doesn't it happen to the Arial font? Maybe the Arial font has GPOS settings, whereas my font has old-style kerning? I really have no clue.
LINK TO DOWNLOAD OTF FILE.
Although the letters on the left of the image are lowercase, they are produced using the uppercase keys A, B, C, etc.
Okay, so this seems to have been one of those miraculous-seeming instances when a problem seemed to fix itself. I resaved the file, which then kicks it to a microservice running FontForge, which coverts the SVG to an OTF, and when it reloaded everything appeared good.
I still have no idea why, since I didn't update the microservice, and I haven't changed the SVG-generating code AFAIK. All I did was upgrade Chrome (and the new version had been showing the issue with the old file), but it should still be sending the same data. Still, I'm not complaining!
Iām building a website using Google Fonts. In particular Iām using āArchivo Blackā.
The font supports special characters such as accents and others, however in Firefox those accents are rending in a really weird positionā¦ and in Chrome they look perfectly fine.
Iāve been looking all around but I donāt think there is a way to control the position of such elements via CSS, so I really donāt understand why this might be happening.
In the images below I'm just highlighting one instance when this is happening but if you look closer you'll see it's a consistent issue.
The problem is likely that you are using the 'COMBINING ACUTE ACCENT' (U+0301) along with the U character instead of the 'LATIN SMALL LETTER U WITH ACUTE' (U+00FA) Ć.
The former character set is not in your font so the browser has to use an other system font, which is why it may not render correctly. You can check this in the font panel of your dev-tools.
However, your font does have the Ć character, so if you fix it in your markup, you should be good in all browsers.
#import url('https://fonts.googleapis.com/css?family=Archivo+Black');
body{
font-family: 'Archivo Black', sans-serif;
}
<div>MUĢSICA (U + Ģ )</div>
<div>MĆSICA (Ć)</div>
I'm searching for a method to tell the browser to render each glyph rendered with a specific font, e.g. FreeMono, in a bigger font size than glyphs rendered with other fonts. The reason for that is, that I use characters like į in a website and these glyphs are rendered using FreeMono in Chrome (see inspect element ā computed ā rendered fonts) and they look always like they're to small to fit the surrounding text. Is there any way I can do that?
You cannot. CSS has no tools for such font-specific tuning, apart from the font-size-adjust property, which has very limited effect, limited browser support, and buggy support.
If you use a character such as āį ā U+16A0 RUNIC LETTER FEHU FEOH FE F on a web page, then it will be up to each browser in each system which font (if any) is used to render it, at least if you do not explicitly suggest some font(s) that contain it. It may be FreeMono, but most computers in the world do not have it. Besides, in FreeMono, āį ā is rather largeātaller than uppercase Latin letters. So if it looks too small, the reason might be a mix of fonts.
To make, say, Runic letters match the style of other text, you should try and find a font that is suitable for bothāso that you can use a single font, designer by a typographer to make things fit. You would then probably need to find a suitable free font and use it as a downloadable font (with #font-face). It might be FreeSerif or FreeSans; only in very peculiar circumstances would I consider FreeMono, a monospace font, suitable for rendering computer code in some cases and mostly unsuitable for everything else.
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.
I am editing font with fontforge font editor everything is good but in
ligature when i want to make multi word ligature (space between it) don't work on firefox and opera ,it will work with word pad and notepad.
is this bug or limit?
what should i do to solve problem?
note:i am using #font-face css syntax to import font and font is ttf.
Ligature making is an optional feature in an OpenType font. Examples of ligatures are the glued together sets of letters like, fi, ff, fl, ffi, ffl. A common font that has ligatures is Calibri that came as the default font in Microsoft Office 2007.
The font has a lookup table that goes like this:
f i -> fi
f l -> fl
f f -> ff
ff i -> ffi
ff l -> ffl
As you type the letters on the left hand side of the equation, the ligatures shown on right go and replace the currently displayed character (whether a single letter or an already formed ligature). Type 'difficult' inside Notepad using Calibri in some large size to see this happen. Notice that a ligature has multiple cursor positions inside it. You can stop automatic ligature formation by intervening the hidden character ZWNJ (Zero Width non-Joiner, u200C, HTML-‌) between letters.
Firefox 4 forms ligatures without the aid of CSS / SVG. MS Word can do ligatures starting from version 2010 but it needs to be enabled under Advanced tab, AbiWord (freeware) does also support it.
Check out this web site (use Firefox or Safari) that uses ligature feature to show a complex script on top of a transliterated text.
This smartfont has 400 odd ligatures that Firefox and Safari display without effort even after downloading the font.
A concrete example would be helpful, as this question is very unclear.
I assume that the issue is that you are attempting to access ligature features that are not part of the default for the font (i.e. it must be turned on as an opentype feature). CSS does not provide a way to specify opentype features to activate. Sorry.
If it is a logo, or similar, you could simply create the text as an image, either in something like png, or as an SVG.
For a short paragraph, SVG again might be suitable.
If not, then maybe there is a font that supports the appropriate ligature by default.
There's no way to make a "multi-word ligature" work in Firefox; it does not support ligatures (or other types of OpenType rule, such as contextual alternates) across inter-word spaces.
This is a fairly common limitation, actually; the same is true of XeTeX, for example. Inter-word spaces are not treated in the same way as normal printable characters by many text-layout systems, and so the OpenType lookups will not match in the way you expect.