Currently, I have created a HTML file displaying some rounded number from Unicode table
Unicode table from 2000 to 2FFF
You can see than on Opera Browser (it is same thing on all browsers), some number are rounded in large circle and some other in small circle.
I have then created following HTML file to display some of this Unicode
<html>
<head>
<style type="text/css">
.unicode
{
font-size: 32px;
cursor: pointer;
min-width: 56px;
display: inline-block;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr><td>0x2780</td><td><span class="unicode">➀</span></td><td> white small</td></tr>
<tr><td>0x278A</td><td><span class="unicode">➊</span></td><td> black small</td></tr>
<tr><td>0x24EA</td><td><span class="unicode">⓪</span></td><td> white large</td></tr>
<tr><td>0x2460</td><td><span class="unicode">①</span></td><td> white large</td></tr>
<tr><td>0x2776</td><td><span class="unicode">❶</span></td><td> black large</td></tr>
<tr><td>0x24EB</td><td><span class="unicode">⓫</span></td><td> black large</td></tr>
<tr><td>0x24FF</td><td><span class="unicode">⓿</span></td><td> black large</td></tr>
</table>
</body>
</html>
When I display this file using distinct user I don't obtain same result as on Wikipedia (see previous image). Some circle small when they must be large and some are too large.
On Opera
All circles are ... small.
Only 0x2780 and 0x278A unicode characters are correctly displayed !
Score: 2/7
On Chrome browser
0x2776 is small and must be large !
0X24FF is too large !
Score: 5/7
On Edge Chromium browser
As on Opera browser
All circles are ... small.
Only 0x2780 and 0x278A unicode characters are correctly displayed !
Score: 2/7
On Edge Chromium brower (Cannary = test release)
As on Chrome browser
0x2776 is small and must be large !
0X24FF is too large !
Score: 5/7
On Firefox browser
Characters 0X24EA, 0x2A60 and 0x24EB are small instead of large as 0x2776 and 0x24FF !
Score: 4/7
On Safari browser
I don't have any Apple computer and it is not more possible to download a Windows version !
Score: 0/7
Question: How can I display rounded number with correct circle size on all browsers ?
In previous image (that is loadable in another Tab for zooming), you can quickly compare fonts (Arial, Cambria Math and Calibri) and browsers (Opera, Chrome, Firefox and Edge Chromium).
The rendering of the characters specified in your HTML file is determined by the font being used rather than the browser, and it is easy to confirm this. For example, I get a similar result to you in Opera if I use Arial font to render the characters in your HTML file:
However, if I change the font to Calibri (Easy Setup > Go to browser settings > Advanced > Appearance > Customize Fonts > Standard Font > Calibri), the size of some of those characters immediately changes:
This is because the size of the characters being rendered is a matter of style, and is determined by the font designers. There is nothing in the Unicode standard that states (say) ❶ should be rendered larger than ➊, and the descriptive terms being used in the OP ("black large" and "black small" respectively) are nothing to do with the Unicode specification.
It's also worth noting is that characters in the range U+2700 to U+27BF form the Dingbats Block, whereas characters in the range U+2460 to U+24FF form the Enclosed Alphanumerics Block. Characters from different blocks which happen to be visually similar, such as ➀ (➀ DINGBAT CIRCLED SANS-SERIF DIGIT ONE') and ① (① 'CIRCLED DIGIT ONE') have no real relationship at all.
The font designers for Calibri chose to render characters in the Enclosed Alphanumerics Block larger than some of those in the Dingbats Block, and the font designers for Arial did not.
Hence there is no definitively correct or incorrect way to render those characters. Just pick a font that renders them in a manner that is appropriate for your needs.
Related
See the two simple web pages below.
Only difference in them is the length of the text that starts: "This is a very".
However, look at the difference in how they render on a mobile device.
The screenshots shown are from developer tools in Chrome, but I get same results on my Anrdroid and Kindle (only two physical devices I have).
Why don't the two pages render the text the same size?
FYI am using the two files for illustrative purposes.
I can get bigger text from Fontsize.html by editing and adding text to it.
Baffled.
Fontsize.html
<html>
<body>
<span style="font-family:'Open Sans';font-size:20pt">SAMPLE TEXT - 20pt</span>
<br><br>This is a very long line that may well force it into the larger font but we cant be sure can we
</body>
</html>
FontSizeLarger.html
<html>
<body>
<span style="font-family:'Open Sans';font-size:20pt">SAMPLE TEXT - 20pt</span>
<br><br>This is a very long line that may well force it into the larger font but we cant be sure can we
This is a very long line that may well force it into the larger font but we cant be sure can we
This is a very long line that may well force it into the larger font but we cant be sure can we
</body>
</html>
Pages Rendered
you should use rem , em , instead of pt. I think it depends on the screen resolution so the font gets adjust according to res.
You can know more about units here
Researched and found answer.
Mobile browsers, including Chrome, evidently have their own heuristics for adjusting text size that override applied styles in some cases. The idea is that when mobile was new, many web sites rendered poorly on mobile devices when their own styling was applied. This was because they were designed for the desktop. To help w/this, mobile browsers sometimes adjust text size on their own, hoping to make such sites more readable.
When a site is designed w/a "mobile first" mindset, this adjustment is not needed. In fact, it can get in the way as in my case.
Solution is to turn it off w/below CSS or similar.
Thanks
html,body {
text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
}
I have a page with an emoji followed by a space and some text. For example, "👥 Friends" (character is "busts in silhouette", U+1F465). In Safari and Firefox on macOS, it renders with a space between the emoji and the following text as expected.
In Chrome, however, the space appears as if it's absent:
If I remove the space, Chrome renders the text overlapping with the emoji. It seems like the width of emojis as rendered in Chrome is less than the actual character width.
Is there any way I can get the desired appearance (a normal-width space) cross browser without resorting to an image or icon font? I've tried messing with some CSS properties like text-rendering without success.
<style>
.friends {
font-family: Helvetica, Arial, sans-serif;
}
</style>
<span class="friends">👥 Friends</span>
JSFiddle
I had the same issue, and found out that it happened on non-retina screens only.
To fix it, we applied a margin through a media-query like this:
<span class="friends"><span class="emoji">👥</span> Friends</span>
<style>
#media
not screen and (min-device-pixel-ratio: 2),
not screen and (min-resolution: 192dpi) {
span.emoji {
margin-right: 5px;
}
}
</style>
This is a pretty minimal media-query. You should probably use a more complete one like https://stackoverflow.com/a/31578187/1907212.
This is a Chrome bug (See detail here)
This is related to displaying emojis in Mac Chrome on a non-retina screen. My monitor had a non-retina screen (where the spacing / cursor position were info), but were absolutely fine on my Mac.
It's February, 2020, and this issue still very much exists (link to open Chrome bug). Chrome 88.0.4324.150 on MacOS X 10.15.7 on a 2019 16" MacBook Pro: dragging a browser window between the internal Retina monitor and an external ultrawide monitor changes the rendering of the emoji.
As an alternative to Julien's answer, instead of selectively specifying a margin-right to correct an imbalance, we can "force" the width of the actual emoji character(s) to be equal in a cross-browser way using letter-spacing.
In essence, our issue is that most characters with the Roman alphabet don't have a height-to-width ratio of 1:1, but most emojis (roughly) do have a height-to-width ratio of 1:1. This is one way of describing what we're seeing with the spacing between emojis and ANSI characters.
See example screenshot here
letter-spacing sets the horizontal spacing behavior between text characters. When paired with CSS em units, we can use this property to "force" each character/emoji to render in a roughly 1:1 box. This might need to be adjusted depending on the font or character set you use.
According to the sources below, a Roman character is often roughly 0.5 as wide as it is tall, so we can simply do:
span.emoji {
letter-spacing: 0.5em;
}
<span class="friends"><span class="emoji">👥</span> Friends</span>
<style>
span.emoji {
letter-spacing: 0.5em;
}
</style>
This method means that in browsers that render emojis correctly, we aren't adding an extra margin-right.
https://graphicdesign.stackexchange.com/a/114955
https://web.archive.org/web/20210118205344/https://www.lifewire.com/aspect-ratio-table-common-fonts-3467385
What I would do is add another span within the .friends span that contains the emoji, have it use a right margin, and not have a space after it:
.friends {
font-family: Helvetica, Arial, sans-serif;
}
.friends span {
margin-right: 10px;
}
<span class="friends"><span>👥</span>Friends</span>
That way you don't have to worry about space rendering ;)
Hope this helps! :)
Removing BlinkMacSystemFont from font-family fixed issue for me, you need to close and reopen tab to see effect.
As of (at latest) Chrome 79, this issue no longer exists.
This problem still exists on Chrome 83 on MacOS 🤨
I think I found the solution
[data-emoji] {
font-style: normal;
font-weight: normal;
}
[data-emoji]:before {
content: attr(data-emoji);
margin-right: .125em;
}
I am using a font which has non English numbers in it like: ۰, ۱, ۲, ۳, ۴, ۵, ۶, ۷, ۸, ۹,
I have no problem with Firefox, chrome and opera but the IE....
I have added below css
body,input {
/*The B Roya is the font with persian numbers and is loaded correctly*/
font-family: 'B Roya', Tahoma, Arial;
font-size: 18px;
}
For all charters and numbers the fonts is applied correctly. But for inputs the font is applied to characters but not to numbers, The numbers are displayed in English!!
I have found that applying the direction:rtl to input will force IE to show numbers in Persain !! But the numbers will be put in the left!
To correct this I have added text-align:left now the number is displayed correctly in correct position but when you put cursor in the input box, and hit the left arrow the caret moves to the right and vise versa.
See the complete story at: http://jsfiddle.net/w6mnN/5/
Any comments !!
unfortunately it seems a bug in IE and I could not find any way to fix it.
Interestingly you see this behavior on office tools too
Has anyone found the magic coding snippet to get a good register mark across the board in email readers? Not browser-based email like google, hotmail as they use the browser engine to render but actual email programs: Entourage/Outlook/.
We use old-school html and only css for styling fonts not structure of course. And we don't send big images so we're doing it right for across the board but the only stickler now is getting the register character superscripted and legible.
This is close but not legible Outlook:
<sup style="font-size: 0.6em; line-height: 0;
*vertical-align: baseline; *position: relative; *bottom: 4px;">®</sup>
Try
<font class=reg>®</font>
with e.g.
<style>
.reg { font-family: Verdana, Arial; }
</style>
The REGISTERED SIGN ® has very varying implementations in fonts. I you don’t like it in the font selected, then changing font is probably a lesser evil than trying to style the character—I mean styling that changes the glyph size or vertical placement. One reason to this is that you cannot change the stroke width: by reducing size, you would reduce the stroke width, possibly beyond recognizability.
There’s usually no point in making ® superscripted or small-size. It’s a typographic design decision, and if the font designer decided to make it a small superscript, fine, use that if you agree with the decision. If the font designer decided otherwise, then, if he did his work well, the character does not behave well when superscripted.
Consider the following example: (live demo here)
HTML:
<div>Hello World</div>
CSS:
div {
font-family: monospace;
font-size: 1em;
}
JS:
$(function() {
alert($("div").css("font-size"));
});
In Firefox, the font size is 16px, while in IE8 the font size is 13px.
Why ?
(I tried to change the font-family to Arial, and both Firefox and IE8 say 16px.)
Each browser is a different product by a different company, they program their product differently, and font size is one of them. From this link, 1 em is equal to the current font size, which maybe different for different browsers, also user can change it, i have changed the text size to largest in IE, and the font size is now 21.33 px.
Using em means it is dependent on a lot of things, use %age for consistency.
1 em will be different for different browsers (depending on their default or of user has changed it). For example you said IE has font size of 13 px and firefox has 16 px, when i checked, firefox had 13 px and IE has 16 px, which was changed to 21.33 px when i changed the text size to largest (view -> text size)
Because em is a relative unit. An em is equal to the current font-size. If the font-size of the document is 16pt, 1 em is equal to 16pt.
MSIE seems to think that monospace doesn't need to be as big as Arial (in pixels) to be readable. For example, 12pt Times New Roman is about a big as 10pt Arial.
If you want fixed font sizes, use font-size: 16pt.
Because its an implementation choice. For instance, firefox has a configuration option to set the default font face and sizes for Sans, Serif and Monospace.
Because Firefox builders messed up in how they coded "monospace". To get "monospace" to work properly in Firefox you need to type "monospace,;" not "monospace;".
I kid you not. It is that simple of a problem.
Check it out for yourself. Change your css style to have a comma after the "monospace" and before the semicolon and watch how dramatically it instantly changes the way that text appears.
Conventional belief was that you needed to have it type "monospace, monospace;" to work but they were wrong. That second "monospace" was meaningless, only the comma mattered. Which actually means you could have put anything there and it would have worked. So if you wanted to leave a funny easter egg in your code you could do something like "monospace, hellofromthecoder;" and it would function perfectly fine without that extra bit of text changing anything.