How to represent a fraction using javascript and query [duplicate] - javascript

Is it possible to use any fraction symbol on a website, represented as ¼ rather than 1/4 for example?
From what I've gathered, these are the only ones I can use:
½
⅓ ⅔
¼ ¾
Is this right and why is that? The reason why I ask this is because I've done a Google web search and can't seem to locate any others ... eg. 2/4

You can test http://www.mathjax.org/ it is a JavasScript library to make a Math Formula if this is what you want.

The image below displays all unicode-defined fraction symbols. Each of them is treated as one single character. You can use all of them freely, of course, but if you want more, e.g. 123/321, then you should look out for a library that can create fractions dynamically.
An option for doing so would be using LaTeX. There is another question (with very good answers) on how to do this.
Image from http://symbolcodes.tlt.psu.edu/bylanguage/mathchart.html#fractions

As I undserstand HTML5 includes MathML which can represent any fraction you want.
While searching the unicode table I also found these: ⅑ ⅒ ⅕ ⅖ ⅗ ⅘ ⅙ ⅚ ⅛ ⅜ ⅝ ⅞.

A web page is built up with text, and that text is encoded in a certain character set. The character set you select decides on which characters can be displayed. This also means that characters or symbols that don't exist in the character set cannot be displayed.
As shown in Michael's answer, Unicode defines symbols for a number of fractions. These can be displayed without using all kinds of tricks, for example server or client side generated small bitmaps showing the desired fraction, or as indicated by
mohammad mohsenipur a Javascript library that transforms TeX or MathML.

There are several possibilities:
Use special character for fractions. Not possible for 2/4 for example, and problematic in font support for all but the three most common (vulgar) fractions you had found.
Use markup like <sub>2</sub>/<sup>4</sup>. Probably messes up your line spacing, and does not look particularly good.
Construct a fraction using some CSS for positioning and size control and using fraction slash character instead of the common slash. Rather awkward really, I would say.
Use OpenType <code>"frac"</code> feature. Rather limited support in browsers and especially in fonts.
MathJax, e.g. \(\frac{2}{4}\) or some more elaborated TeX code to produce a different style for fraction.
MathML. Verbose, and browser support to MathML inside HTML could be better.
These are explained more and illustrated in my page “Math in HTML (and CSS)”, section Fractions.
The choice thus depends on many factors. It also depends on the font quite a lot. I suggest that you test the different options using the font family declaration you intend to use. Despite the many alternatives, you might end up with using just the simple linear notation like 2/4.

Related

Unicode 'not perpendicular' symbol

According to this source, we have a neat way to show parallel, not parallel and perpendicular symbols. What I'm looking for though, would be crossed perpendicular symbol, or 'not perpendicular' symbol. I know it's very rare, but usage can be easily justified from math point of view, hence my question.
But it seems like it's not within Unicode character list.
How can I add the symbol and render it with HTML and JavaScript.
(Turning my comment into an answer.)
You can use Unicode's combining characters, e.g:
U+27C2 (PERPENDICULAR) followed by either
U+0338 (COMBINING LONG SOLIDUS OVERLAY):
⟂̸
or U+0337 (COMBINING SHORT SOLIDUS OVERLAY):
⟂̷
Or some other character that you find fitting.
Naturally this will only work with supportive fonts and proper renderers (i.e. browsers in this case), but then again font limitations can always cause problems, with or without combining characters.

How to place a checkMark as a character?

$("#status").html('<img src="available.png">Available');
Instead of checkMark picture I want a chekMark character.
Is there a way, please?
You could use U+2713 (Check Mark Symbol ✓):
$("#status").text("\u2713 Available");
Try
$("#status").html('✓');
try either of
✓
✓
one is hex, one is decimal. If I don't put code markers around them, you get
✓ ✓
See this: http://www.danshort.com/HTMLentities/index.php?w=dingb
✓ or ✔
Although I must say that I think a picture is a better option: you can modify it later at any time without changing your code.
Try this:
Decimal:
✓
or
hex:
✓
example: $("#status").html('✓');
You can also use a check mark in a web font.
This question (and the answers) are now five years old. For the sake of those coming from Google, I wanted to add another option that's become available in recent years, but is not mentioned in previous answers.
You can certainly still use unicode characters (.html("✓") or .text("\u2713"), but in the past few years web fonts have become more common. For example, material icons has a check mark:
https://material.io/icons/#ic_check
Google (who made and maintains material icons) also did a good job of explaining web fonts and how to use them here: https://google.github.io/material-design-icons/
Basically web fonts are the best of both worlds: the customization of images and the usage/dynamics of font characters. The advantages to using web fonts over unicode characters are:
control over style (you can make your own web font character of any style, whereas unicode characters are what they are)
use of multiple styles (you can make web fonts with numerous styles of check marks for different situations; you're not locked into one style)
code readability (very few developers will know what \u2713 or &#10003 means, but <i class="myfont">check</i> is easy to understand
portability: although every major browser uses a unicode font by default, there are still some computers or devices which may render with a non-unicode font by default. In fact, wikipedia's current list of unicode fonts is decently long, but the supported characters vary widely between each font, and there are clear differences between how the each font is rendered by different platforms. Including a webfont ensures that every user will see the same thing, regardless of platform or default fonts.
More options: having an installed webfont allows you to update the style, add new icons/characters to the font, etc. There is no way to currently do this with unicode.

Certain HTML Character Entities are HUGE in Firefox Only

For some reason, in my Firefox 12.0 for Mac OS X, my 〉 (〉) characters are much larger than they should be. On Chrome and Safari, they look exactly how I want them to be.
I have AddDefaultCharset utf-8 in my .htaccess as well as <meta charset="utf-8"> in my <head> (as the group I'm delivering these files to may not use my .htaccess).
Also, according to Adobe's Browser Lab, IE 7 and 8 just show a square box... is there anyone I can get these browsers to support that character? It would make things a lot easier (as the colors are going to be changing, so images are very inconvenient, and no color fade with images).
Demo: http://cameronspear.com/demos/rang/
This is what I see in Chrome and expect to see:
This is what my Firefox is showing:
This is a screenshot from Browser Labs of IE8:
TL;DR: I want all of these screenshots to look like the first one using 〉 aka 〉 characters. Use of JavaScript would even be acceptable.
Thanks.
[edit] I should specify that it's not as crucial I have the 〉 character as I am able to change its color with CSS and have it look the same across multiple browsers.
Solution
I just wanted to share exactly what I did for posterity's sake.
Thanks to Pointy's tips and resources, I created my own SVG with Inkscape using the template and methods as described at "How to make your own icon webfont". I mapped a big angle bracket to X and a small one to x.
The one thing I ran into was that my angle needs to touch the baseline and only go about 72% the way to the top of the box to fit "inline," so capital X was my original too-tall one, and lowercase x was the more inline one.
I then converted my SVG to TTF with http://www.freefontconverter.com/ and converted to a webfont with http://www.fontsquirrel.com/fontface/generator
... and that was it.
The demo (http://cameronspear.com/demos/rang/) is still up. You can see it looks consistent in all the browsers and the onclick rotation animation is dang close to the point, etc.
[Update] I found a great resource called IcoMoon that helps on making fonts and organizing fonts for the web, and it accepts regular svg vectors so you can make it in Illustrator and not mess with Inkscape since IcoMoon handles the keyboard mapping and stuff. You can only export the icons you use, so you only load 3 or 4 icons if that's all you need and not the entire font.
It's become an invaluable resource, and I recommend everyone else wanting to get into Icon Fonts check it out. You can learn more about the entire process from CSS-Trick's 113th Screencast.
Are you able to use images? They would provide a consistent look across all browsers. In many cases, images are preferable to character symbols.
This is a font issue. To maximize the odds of having a rare character (one that is not present in most fonts) rendered properly, specify a maximal list of fonts that all contain it.
The page now has just font-family: Arial,sans-serif set on the span elements that contain the bracket. Since Arial does not contain it, each browser will use its own definition for sans-serif. If the map that it is mapped to does not contain the bracket, clever browsers try something clever, like scanning through other fonts in the system, but this may still result in lack of any glyph for it.
There’s an additional problem. Normally it does not matter that you use entity references like 〉 instead of the character itself, but here it does. By HTML 4.01, 〉 means U+232A; by HTML5 drafts, it means U+27E9. IE obeys HTML 4.01 here, whereas Firefox uses the HTML5 definition. So it is better to use the character you really want, either as such in UTF-8 encoding, or as a character reference 〉.
If you can check e.g. the font coverage for U+232A and write the fonts in order of preference. But you should check that all of the fonts give an acceptable presentation. For example, if Cambria Math is used, the default line height will be very large, so you probably want to set line-height explicitly to some reasonable value like 1.3.
Finally—and this should perhaps have been asked very first—do you really want to use RIGHT-POINTING ANGLE BRACKET or MATHEMATICAL RIGHT ANGLE BRACKET? They are brackets, to be used as paired with left angle brackets, not arrow symbols.
Some more info: Guide to using special characters in HTML.
Making an icon font is easy enough that I can do it, though (for me) the process is somewhat mysterious. I suspect there are many actual graphic artists who are better at it, and surely many who understand the technical details more than I do.
Here is a pretty thorough blog post on the topic. (Not mny blog.) The main thing it doesn't describe very well is the relationship between the Inkscape "art board" area and the vertical positioning of each glyph in the font. It goes into some detail, but I've just never been able to figure it out.
What I did, therefore, is just make a square artboard 1024 pixels on a side. I then set up a grid in Inkscape so that the art board is divided up into a 16x16 grid. That makes it (somewhat) easy to design characters that will render nicely at a 16px font size. (Of course you could target a different font size, if you want; 16x16 is good for stuff that needs to be pretty small however.) Then, I just make sure that when I put the glyphs on the page, they're in a 1em by 1em box (or 16px by 16px; however you want to do it in your CSS) with no padding. I use <i> tags, and give them display: inline-block. That gives me a lot of flexibility, and it generally works great.
The Inkscape SVG font tool is, to put it mildly, pretty raw. It's literally the result of somebody's summer project. It works, but not much more than barely. Save often.
Now the process for generating the font files is somewhat crazy. I use FontSquirrel. I upload the .svg saved from Inksccape, and then ask for EOT, WOFF, and TTF. Amazingly, it works.
If you just need a few glyphs, this is a pretty sweet way to go, because you'll have a little bitty font file to download and it'll be cached by the browser. There are some accessibility issues however and the practice is sufficiently controversial that some more fanatical members of the community may consider you a barbarian for doing this :-)

What is the difference between using tab and space when we do source code formatting?

When we want to give some formatting to code to make it more readable. We can use both Tab and Space (by pressing space bar on keyboard). Many time I give space manually.
I've some confusions
Is there any difference between them?
Is using tab better than spaces?
Does using space increase the size of document and tab not?
Is there any differences between single tab/space and multiple. in terms of page size?
Is there any difference on using tab or space in HTML, CSS and Javascript?
Dreamweaver has this option in preferences
Tabs need less characters and are formatted by users (some display as 2, some as 4 spaces), what can make some code look bad on some other environment.
Spaces consume more KBs but look equal everywhere.
Good editors have retab-functions to convert those.
In JS and CSS it does not matter, HTML should not matter, but can in some cases.
Using tabs is annoying because some editors interpret a tab as 4 spaces, some others as 8 spaces, and some others as 2 spaces, which makes the indentation completely wrong if tabs and spaces are used in the same file.
I always use spaces only to avoid this problem.
It could slightly increase the download size of your pages, but you could also minify the JavaScript and the CSS files, and/or use gzip on-the-fly compression to mitigate this small problem.
Using Tabs :
Tab takes less space
Tab is user system defined :: So in my case if i prefer 2space::tab i can view it that way
Moving one indentation level back is lot easier if you use tabs .
Using Spaces :
Tab space ratio usually defaults to 1:8 . So on all 'newbie' systems your code will be difficult to read . Also if you view your code on github / pastebin there again it will be some what awkward .
My take : Go with tabs for development , find replace '\t' with ' ' [4 spaces] and then for release minify [ this strips tabs and spaces ] .
Personally, I see it as an issue of preference involving ease of formatting. I'd rather use tab, because it's only one click and it simulates 4-5 spaces. A lot simpler in my mind. Otherwise, I don't see much purpose.
In pretty much all cases, you can use tabs or spaces and it won't make a difference. Using tabs will make the source files slightly smaller, while using spaces will ensure that spacing is consistent for everyone (since tabs can have a variable width).
I believe the only language where it actually matters is Python. For any other language, tabs vs. spaces is basically even - just be sure to pick one and be consistent with it.
Using a tab technically takes up less memory than using, say, 5 spaces. So when trying to optimize file size it could be helpful. However minifying text would have a better effect. Look up minifying code for more on this topic.
Some people prefer spaces and some prefer tabs. Its a matter of preference and many folks have different reasons for it. Here is a great article on this point: http://www.jwz.org/doc/tabs-vs-spaces.html
Chances are for your application it wont matter much.
If your code is being downloaded, such as HTML or Javascript or CSS, it makes a difference because the file is larger if spaces are used. How much larger depends on the number of lines and indent levels. It's the same as including comments in the code: they do increase file size.
If your code will be compiled, such as Actionscript or Java or C, or tokenized such as Perl, it makes no difference whether you use spaces or tabs, and you can include as many paragraphs of comments/documentation as you like, because it's only for your own benefit. All those tabs and spaces and comments will be ignored when the final, lower-level code is built.

Getting font metrics in JavaScript?

I'm currently working on a JavaScript project that uses the HTML5 canvas as a rendering target. In order for my code to play nicely with the (rigidly specified) interfaces I've been provided, I need to be able to take a font and extract the ascent and descent heights of that font. This will allow clients to more accurately position the text. I'm aware that I can change where the text draws by setting the textBaseline attribute, but I actually need the numeric values describing these different heights. Is there a simple way to do this? If not, is there a (hopefully lightweight) library that can handle it for me? Most of the proposed solutions I've found are heavyweight font rendering libraries, which seems like massive overkill for this problem.
This article on HTML5 Typographic Metrics discusses the problem and a part solution using CSS - although the integer rounding of offsetTop etc is a problem (potentially can use getBoundingClientRect() to get proper floating point values for some browsers).
The short answer is that there is no built in way and you are sort-of on your own.
Because of this, most people simply estimate them. Some people pre-calculate all the values, which isn't too much work provided you are using only a few fonts.
The third way is to make a canvas in memory and print some letters (say, a Q and an O) and programatically attempt to determine the ascent and descent using per-pixel collision. It's a pain and can be slow depending on the number of fonts and how accurate you want to be, but it is the most accurate way of going about it if you do not want to pre-compute the values.
Just as a reference here:
The width of the text can be measured with:
ctx.measureText(txt).width
http://www.w3schools.com/tags/canvas_measuretext.asp

Categories