Applying font with emojis only - css

Basically I will make a font with some unicode characters. (not all) How do I apply it so that it will only apply on emojis?
Using unicode ranges will solve my problem, but will create another one. It takes the fonts for all other unicode characters away and replaces it with the default one. Is there any way to avoid this as well?
Thanks.
Edit 1
I also want to do this for input areas, so span shouldn't work..

Related

How to evenly size font with CSS

I would like to make each font take equal amount of space, similar to fonts displayed in a Linux terminal
For example:
Notice that each character take same amount of space
Use a font designed so that every character in it is of the same width.
These are called monospaced fonts.
The CSS generic font family monospace will select the system's default font of that style.
Various values of the white-space property such as pre will cause multiple spaces to be treated as significant, although the <pre> element should be used if the semantics of the text mean that the spacing is significant rather than just presentational.
It's not super clear to me what you're asking for, but I'll try to help.
-Terminal fonts generally used monospacing, here is a list of monospaced fonts: https://www.typewolf.com/top-10-monospaced-fonts
-If you're looking to evenly increase the amount of spacing between letters I suggest checking out letter spacing for css: https://www.w3schools.com/cssref/pr_text_letter-spacing.asp

Minus inside circle

I have this CSS:
.icon-plus-circled:before { content: '\e80f'; }
Which is displayed as a white plus inside black circle (Unicode I guess).
Need to make one more class, that would be a white minus inside black circle. But I can't find a Unicode code for that. Does anyone know?
Solved the problem. It was custom font.
There is no Unicode character for a white minus inside black circle.
There is U+2296 CIRCLED MINUS “⊖”, though it is not clear whether you want to use that or rather U+229D CIRCLED DASH “⊝”.
The notation '\e80f' means U+E80F, which is a Private Use code point. This means that the Unicode standard does not assign any character to that code point and promises to never do so. The code point is only for use by private agreements and has no meaning outside such agreements. The code you are using probably sets the font to a privately encoded special font, embedded with #font-face. While this generally works (when implemented properly) in the the sense of displaying the specific symbol, it easily causes trouble e.g. when content is copied and pasted (losing the font assignment).
Consider using images instead. Created in sufficiently large size and then scaled to font size with CSS, they do the job reasonably well.
Unicode number: U+002D HTML-code: '&#45';
Here is the complete table: http://unicode-table.com/fr/#002D
Unicode characters you might be interested in:
MINUS SIGN (U+2212): − −
HYPHEN-MINUS (U+002D): - -
CIRCLED MINUS (U+2296): ⊖ ⊖
CIRCLED DASH (U+229D): ⊝ ⊝
content: '\e80f' Which is displayed as a white plus inside black circle
U+E80F  doesn't display as anything for me, that's a Private Use Area character that could render as anything or nothing.
There is no standard Unicode character for a filled circle with a plus or minus removed. Presumably you have some icon font where U+E80F looks like a circled plus. In that case you will have to look up the glyph set for that particular font to see if there is a matching minus.
None of the common icon fonts I know of use U+E80F for circled-plus so possibly you have a custom-made font (from Fontello or similar), in which case no-one can tell what the code point would be for a circled-minus without looking at the font file itself. Possibly the circled-minus might not have been included in it, in which case you'd have to create a new version of the icon font with it in.
Or, as Jukka mentions, switch to images (possibly SVG); icon fonts are a bit of a nasty hack.

Font Suggestions - Need an equally spaced font

I'm building a CSS/Javascript Graphing engine and one of the components on it is a circular text wheel. I need a font for it that is equally spaced between letters and spaces so that all the labels take up the same amount of space regardless of the letters. Now if I have some letters like 'L' in one of the labels the extra spacing between it in the font I'm using now causes the whole wheel to get offset.
A simple fix for this is to have a font that has equal or almost equal spacing between all letters, spaces and characters.
Any suggestions for me to try out?
As you can see some the wheel is off center because it is smaller than it is most of the time and therefore the diameter is off.
What you are looking for is called a 'monospace' font. Try Courier or Courier New.
Try using a monospaced font where all of the letters take an equal amount of space. Here is a collection of web usable monospace fonts to try out:
http://www.fontsquirrel.com/fonts/list/classification/monospaced?filter%5Bweb%5D=Y&filter%5Bdownload%5D=all

Is there a character that will take up the full height of a line on a terminal?

I'm making a command line version of the board game Blokus and I'd like to have the pieces take up the full height of a line. I tried to use the Unicode character █ (U+2588) but it leaves vertical gaps in the lines like so:
Does anyone know how I can have it take up the full line?
Those characters are, by definition, supposed to fill the entire character cell. If they aren't, there may be an issue with the font you're using. (For instance, your default font may not have that character, so the terminal is having to use a substitute font with different metrics.)
You may be able to work around this by "faking" a block character by entering inverse video mode ("\x1b[7m") and outputting a space character, then switching back ("\x1b[0m") when you're done.
The U+2588 should take full height of a line in a terminal, but due to font issues, it does not always do that.
The Block Elements characters are described in clause 15.8 Geometrical symbols in the Unicode character: “the legacy block elements are designed to fill some defined fraction of each display cell or to fill each display cell with some defined degree of shading. […] When emulating terminal applications, fonts that implement the block element characters should be designed so that adjacent
glyphs for characters such as U+2588 full block create solid patterns with no gaps between them.”
However, fonts that support U+2588 do not always implement it correctly. So you should check whether you can set the font to one that has a correct glyph for U+2588, such as DejaVu Sans.
If you are using U+2588 and friends in an environment that is more complicated than a simple terminal, such as software emulating a simple terminal, or in a word processor, you probably have another issue, too. Even though U+2588, when implemented correctly in a font, takes the full height of the font, it does not usually take the full height of the line. Normally line height is larger than font height (font size), and you would need to take extra measures to make them the same (to make the text “set solid”).

How can I force vertical text to be horizontal?

I'm working on an ASP.NET website that needs to be internationalized. I'm using .resx files (essentially key-value pairs in a file) to populate static string fields on a page in different languages depending on the chosen culture/locale. I'm implementing Japanese and getting some stubborn vertical strings.
When copy and pasting them into the .resx file, they are horizontal (source of strings is Google Translate, for testing purposes). All of the strings appear normal, but one always displays vertically. The misbehaving string is a few div's deep (like all of them) and only has font-size, font-family, color, and an uppercase transform applied to it.
Removing any or all of the above rules does not change the orientation of the text. I've cleaned the formatting off the offending text with Notepad and shortened it (to ensure it wasn't a length problem). I'm stumped as to why this particular string is stubbornly vertical.
Here is the text in question: ログアウト
(Translation: Logout)
Edit
Clarification of the issue.
What it should look like:
The vertical text in question:
How can I force vertical text to be
horizontal?
Other than the title, I don't really understand your question. I'll take a guess anyway.
Try adding white-space: nowrap to the div that's misbehaving.
Recently I was doing some learning about right-to-left on the web and learned that Unicode characters have a directional property associated with them at the character level. So this might have something to do with that, though I certanily wouldn't know how to ascertain that or fix it, especially given that Google Translate is the source of the strings.
It happens quite often for Asian scripts (not just Japanese but also Korean and Chinese) to have text rendered incorrectly. Usually you just need to play with element width, especially if it is part of HTML table.

Resources