Take this text as an example:
𝚃𝚘𝚝𝚊𝚕𝙿𝚛𝚘𝚝𝚎𝚌𝚝𝚒𝚘𝚗
If you make an HTML file copy and paste the above text directly in your text editor from StackOverflow, it will show up on the webpage with that font. Why isn't this the standard way for using fonts in HTML and instead most people just use font color when they could simply use ASCII?
For one thing, these specific characters have very specific meanings beyond just the font. See Mathematical Alphanumeric Symbols on Wikipedia and its Unicode chart.
Secondly, presentation and content are separate matters. When the appearance of text has no bearing on the meaning of the text, then the appearance should be controlled by CSS, not the text itself. (Plus, why would you sacrifice all manner of flexibility by hardcoding the appearance in the content itself?)
Related
This sounds like the dumbest question, but what font is used on this webpage?
http://aquey.info/loaded-broccoli-potato-soup/
If it copy-pastes the same, then it's like this text here:
𝘮𝘦𝘥𝘪𝘶𝘮 𝘴𝘪𝘻𝘦𝘥 𝘤𝘢𝘳𝘳𝘰𝘵𝘴
I checked using DevTools, of course, but I don't think it's really a ... font? If I copy-paste the text into Gmail and choose "remove formatting", the text still looks like same, like Gmail doesn't see it as text. Gmail also doesn't spellcheck within the text. Notepad++ also doesn't un-format the text and View>Summary counts each letter as a word.
I'm seeing if it's possible to read this text in javascript (that's the programming bit), but right now I just want to understand what it is.
They are Unicode glyphs, specifically from the Unicode block Mathematical Alphanumeric Symbols.
As the name implies, they are intended for use within mathematics contexts but are commonly abused in places like social media where other formatting controls are not available to end users.
This may go without saying (and, I fully admit, outside the scope of the question), but it's worth mentioning to future readers that this is extremely counterintuitive to use such glyphs in any context other than their intended use as they pose a huge accessibility problem. It’s especially arbitrary in this particular context when styling the text in question with CSS would net an extremely similar visual effect while preserving usability for screen readers.
I was curious how Imgur was rendering their upvote/downvote arrows:
I assumed they were images, but I found something that I did not expect:
A custom font that contains glyphs for up and down arrows, mapped to the 'o' and 'x' characters, respectively:
Is this method considered acceptable these days? I have never considered using a custom font for something that doesn't semantically map into an alphabet. This approach is not even on my radar of best practices for web design.
I can imagine the reasons for:
Your site uses a standard icon set that can be mapped to single-character codes.
You only need control over foreground/background color for the icons.
You want icons that scale the same as text.
I want to know any specific reasons against using this method.
In particular, I'm looking for answers that address any of the following:
browser/platform compatibility
future maintenance implications
semantics
performance
standards compliance
The only thing I have come up with so far, is that, semantically, it does not make sense to map an upvote icon to the character 'o' and a downvote icon to the character 'x'. And, just to be specific, I'm not talking about keyboard mappings, but rather language mappings, character codes. It seems to me that raster images or SVG are much more preferable alternatives in this case.
I thought of one other possibility: language and encoding compatibility. Would the html lang attribute or character encoding of the page have any effect on the character mappings into the font in the CSS stylesheet (the stylesheet uses 'x' to represent a downvote icon)?
However, I'm certain Imgur has thought all of this through already. So, why am I wrong?
Modern browsers (e.g. IE9 above) support custom fonts.
Even Bootstrap also uses custom fonts for icons, known as Glyphicons! It is a nice way to beautify the websites icons without having to do it from Photoshop as an image which may cause responsive issues.
They are usually used by calling the class name which links to the CSS that call the icons from the font family. Html lang would not have any issues with it.
Many websites use "icon fonts". But yes, assigning language letters to them would be wrong. It would be best to assign an arrow icon to the Unicode character code for a similar arrow. Another option would be to use the Private Use Area of Unicode. In this case, if your font fails to load for any reason, you won't have a good fallback strategy. But if you choose meaningful char codes for your icons, you would.
Many people are in favor of using SVGs over icon fonts. But there are pros and cons to both icon fonts and SVGs. I think that it's great that as web developers, we get to choose among different implementations or solutions to the same problem.
To answer your question, I would say that if done right, there is nothing wrong with using fonts for implementing icons.
As Mike 'Pomax' Kamermans put it:
"Fonts are for encoding vector graphics that are to be used in
typesetting context. That can mean letters, or icons, or emoji"
One big reason is accessibility. There are many browser extensions which swap out a website's font for one that's more legible for people with different visual impairments. If you use fonts for your icons, these will be swapped out too, leaving your user looking at whatever string you placed in for your icons.
I have a bunch of HTML documents that contain some simple text in Windows-1252 encoding, but throughout the text there are numerous appearances of span elements with font-family: Symbol.
For example:
<span style='font-family:Symbol'>Ñ</span>
Which appears as the greek delta - Δ in the browser.
Google told me that using the Symbol font might show different results on different systems, as it's not actually a well defined font.
Is this really true? Is it "unsafe" to use the Symbol font?
If so, is there any way to reliably convert (on my own system) such symbols in the Symbol font to their Windows-1252 counterparts?
It's been always unsafe to rely on having certain font installed on all the computers/smartphones/gadgets that visit your site. There're some font embedding techniques that work reasonably well in some modern browsers but you'd need to repack the Symbol font and I doubt the copyright owner allows you to do it.
Of course, most characters in the Symbol font are not in the Windows-1252 encoding but that should not be an issue. You can use the following map to obtain the appropriate HTML entities. However, you'll have to write a script or program using a programming language (HTML is just a markup language).
When using font-family, if neither of the listed font faces are found on the client, that is without the webfont embeds, may result in changing to default font of client hence a different font replacement for what you'd show to your users.
You may want to use UTF-8 encoding and put the delta (Δ) sign in your HTML content, or use webfont embeds to provide an option, "use the font I want from this".
The problem is that the greek letter you see is just the appearance, the actual letter is something completely different.
I can think of two ways to convert it:
1. Write a script (in your language of choice) that converts each letter to it's Greek counterpart. (Ñ => Δ)
2. Take a screenshot of the document/page and use an OCR-program to convert it to Greek text.
I was thinking to replace user text like :), :P in comments with smilies (emoticons). Using regex. Do you think it's a good idea for the replacement to be a span element with a class? Then I apply the smiley image to that class?
Or should I just replace that text with <img> tags?
CSS is usually seen as not part of the content, but these image smileys are...
(if you disable the css, the text could change its meaning because emoticons are missing)
An emoticon is visual information presented using characters, so if you replace, say, “:-)” by something, the natural candidates are special characters such as “☺” (U+263A WHITE SMILING FACE) and an img tag like <img alt=":-)" src="smiley.png">.
Using an element with a background image has several drawbacks, including lack of any counterpart to the alt attribute and the common browser behavior of suppressing background images on printing.
It is somewhat risky to programmatically change anything emoticon-looking to e.g. an image. You cannot be sure that every “:-)” is an emoticon. All kinds of odd character combinations may arise in special fields. Besides, if the user was writing e.g. about emoticons, part of the content might get lost or distorted in the replacement.
if you have a lot of smileys you are better of using the css sprite trick because it means the browser only has to download one image file instead of downloading a dozen smaller ones
this will result in less overhead and better caching
Use CSS to display the pictures. The best practice is to strip unwanted characters, invisible characters and HTML tags from user input, to avoid HTML code injection and cross-site scripting.
Have the smileys in plain-text, and display a picture instead with CSS.
You can achieve that by using a <span> or another element.
For instance, :) should be <span class="normalsmiley">:)</span> in the code.
Then the text will make sense for people not seeing images or with CSS disabled (they will see a text smiley).
Using Sphinx, I'm editing pylearn documentation content at https://bitbucket.org/omidraha/pylearn/.
All paragraphs are Right-to-Left (because of Persian language) and code samples between text, rendered incorrectly.
Generally I'm looking for a way to apply bi-directionality algorithms of unicode or microsoft on a web page.
Is there a way to set css style of codes, to be LTR inside of a RTL paragraph? if not, how could I modify sphinx source to do seperate code samples, for example in a frame or something like that?
If you want to specify the direction in which the test is displayed, use the "dir" attribute.
See: http://reference.sitepoint.com/html/core-attributes/dir