How should I express fractions like 15/16ths in HTML? - html

I know there are HTML entities for 1/2, 1/4, and 3/4, but are there others? Like 1/3 or 1/8? Is there a good way to encode arbitrary fractions?

how about 15⁄16? (<sup>15</sup>⁄<sub>16</sub>)

1/2 → ½ or ½
1/4 → ¼ or ¼
3/4 → ¾ or ¾
1/8 → ⅛ or &frac18;
3/8 → ⅜ or &frac38;
5/8 → ⅝ or &frac58;
7/8 → ⅞ or &frac78;
1/3 → ⅓
2/3 → ⅔
1/5 → ⅕
2/5 → ⅖
3/5 → ⅗
4/5 → ⅘
1/6 → ⅙
5/6 → ⅚
...but you could also encode them as decimals: 15/16 = 0.9375 ;)

For the existing fractions as Unicode codepoints (which are mapped to by HTML entities), search for "vulgar fraction" in the Unicode Character Names Index.
Now, for generic fractions, which work in HTML but also work in plain text, use the super- and subscript digits (see Unicode Codepoint Chart, search for "Superscripts") separated by the fraction slash character.
Your example implemented as above:
¹⁵⁄₁₆

Isn't just 15/16ths alright? Or even 15/16ths (15/16<sup>ths</sup>)?

For more complex scenarios there is also MathML. The support for this is slowly getting better. Internet Explorer seems to lag behind with this as well.

There is also a standard called MathML. But is for XML unfortunately. However if you have more expressions you might consider switching to basic XML.

This would depend on your exact needs and audience.
For most purposes many methods would be appropriate.
15/16, 15 parts of 16, 93.75%, 15/16 all mean the same,
you might even use symbols like
++++++++++++++-
For some more complex scenarios you will need more complex solutions more like LaTeX than html. I believe there are also server side components that take LaTeX descriptions and create images that are browser compatible, such as described here: http://www.fauskes.net/nb/htmleqII/

In HTML, this can be done with Unicode code 2044, preceded by &#x and ending with a semicolon. The whole thing is placed between the numerator and the denominator.
For instance, with this solution, 15 divided by 16 in HTML is rendered like this: 15⁄16
This works for combinations of integers acting as numerators and denominators.

Related

What are the exponent characters (in non-formatted text)? How can I create these exponent characters?

I´m searching for a list of exponents like ¹²³ and so on and the same with letters. Note these still remain superscripted even in plain text.
Does something like these exist? If not, how can I create those?
(I need them for a website-project)
Unicode versions of superscripted/subscripted characters exist for all ten digits but not for all letters. They remain superscripted/subscripted in a plain-text environment without the need of format tags such as <sup>/<sub>.
However (as of v14), not all letters have Unicode superscripts. Furthermore, they are scattered along different Unicode ranges, and are in fact used mainly for phonetic transcription. Additionally, they are used for compatibility purposes especially if the text does not support markup superscripts and subscripts.
Exponent characters:
These are mostly used for mathematical and referencing usage.
- ⁰ [U+2070]
- ¹ [U+00B9, Latin-1 Supplement]
- ² [U+00B2, Latin-1 Supplement]
- ³ [U+00B3, Latin-1 Supplement]
- ⁴ [U+2074]
- ⁵ [U+2075]
- ⁶ [U+2076]
- ⁷ [U+2077]
- ⁸ [U+2078]
- ⁹ [U+2079]
- ⁺ [U+207A]
- ⁻ [U+207B]
- ⁼ [U+207C]
- ⁽ [U+207D]
- ⁾ [U+207E]
- ⁿ [U+207F]
- ⁱ [U+2071]
The "linear", "squared", and "cubed" subscripts are the most familiar and are found in Latin-1 Supplement. All the others are found in Superscripts and Subscripts. Add 0x2070 to all the non-Latin-1 Supplement superscripts to obtain the code point value of these digits. See this Wikipedia article and the official Unicode codepage segment.
Interesting notes
There are also subtle differences between <sup> subscripts and Unicode subscripts; Unicode subscripts are entirely different codepoints altogether, and some fonts professionally design subscripted letters because <sup> subscripts may look thin.
Compare x² with x2, similarly x⁺ with x+ (the first involves Unicode, the second is markup)
The best solution is to use markup, such as <sup>.
You can't create the characters, but you can format then as super-scripts if you are generating HTML.
As to find which exist, you just have to use an unicode-character searching resource and look for "superscript" to have a listing -
This query, for example:
https://www.fileformat.info/info/unicode/char/search.htm?q=superscript&preview=entity
As you can see, all digits are available (more than once, even), but very few letters.
However, if you intend to generate HTML output, the <sup> tag will work for any text you want, and give the necessary semantic meaning to the text - you can read about it and try it online here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup

difference between " " and nbsp; or " "

Hello I am trying to compile an EPUB v2.0 with html code extracted from Indesign. I have noticed there are a lot of "special characters" either at the beginning of a paragraph or at the end. For example
<p class="text_indent0px font_size0_8em line_height1_325 margin_bottom1px margin_left0px margin_right0px sans_serif floatleft">E<span class="small_caps">VELYNE</span> </p>
What is this
and can I either get rid of it or replace it with a "nbsp;"?
&#9
Is the ascii code for tabs. So I guess the paragraphs were indented with tabs.
If you want to replace them with then use 4 of them
That would be a horizontal tab (i.e. the same as using the tab key).
If you want to replace it, I would suggest doing a find/replace using an ePub editor like Sigil (http://sigil-ebook.com/).
represents the horizontal tab
Similarly represent space.
To replace you have to use
In the HTML encoding &#{number}, {number} is the ascii code. Therefore, is a tab which typically condenses down to one space in HTML, unless you use CSS (or the <pre> tag) to treat it as pre formatted text.
Therefore, it's not safe to replace it with a non-breaking or a regular space unless you can guarantee that it's not being displayed as a tab anywhere.
div:first-child {
white-space: pre;
}
<div> Test</div>
<div> Test</div>
<pre> Test</pre>
See https://developer.mozilla.org/en-US/docs/Web/CSS/white-space and http://ascii.cl/
is the entity used to represent a non-breaking space
decimal char code of space what we enter using keyboard spacebar
decimal char code of horizontal tab
and both represent space but is non-breaking means multiple sequential occurrence will not be collapsed into one where as for the same case, ` will collapse to one space
= approx. 4 spaces and approx. 8 spaces
There are four types of character reference scheme used.
Using decimal character codes (regex-pattern: &#[0-9]+;),
Using hexadecimal character codes (regex-pattern: &#x[a-f0-9]+;),
Using named character codes (regex-pattern: &[a-z]+;),
Using the actual characters (regex-pattern: .).
Al these conversions are rendered same way. But, the coding style is different. For example, if you need to display a latin small letter E with diaeresis then you could use any of the below convention:
ë (decimal notation),
ë (hexadecimal notation),
ë (html notation),
ë (actual character),
Likewise, as you said, what should be used (a) (decimal notation) or (b) (html notation) or (c) (decimal notation).
So, from the above analogy, it can be said that the (a), (b) and (c) are three different kind of notation of three different characters.
And, this is for your information that, (a) is a Horizontal Tab, the (b) one is the non-breaking space which is actually   in decimal notation and the (c) is the decimal notation for normal space character.
Now, technically space at the end of the paragraph, is nothing but meaningless. Better, you could discard those all. And if you still need to use space inside <pre> elements, not in <p> or <div>.
Hope this helps...

HTML Special Characters for fraction with equal Numerator and Denominator

In my html page I have displayed fractions using html special character. My idea is to display 1/2, 2/2 and 3/3.
I have used &frac13; for 1/3 and &frac23; for 2/3 and the special charactera are displayed correctly. I took reference from this link HTML Special Characters
But when I tried using &frac33; for 3/3 it is not working. It is just displaying as it is, not converting to special character.
Could you someone please tell me what is the html special character for 3/3.
Thank You
<sup>3</sup>⁄<sub>3</sub>
Result: 3⁄3
Not all fractions have their own special character. For those fractions (like 3/3) which don't have slanted fraction characters, use the HTML entity ⁄:
<sup>3</sup>⁄<sub>3</sub> = 3⁄3
There is no named (or numeric) character reference for a character representing 3/3, since there simply is no such character.
In theory, the FRACTION SLASH U+2044 “⁄” character (representable as ⁄ in HTML, among other thing) can be used between digits to suggest that rendering routines present the combination as a typographic fraction. In practice, only some typesetting programs can do this, and web browsers come nowhere near.
Trying to play with HTML markup and/or CSS to construct something that looks like a typographic fraction (comparable to ½ in appearance) tend to produce messy results, including uneven line spacing.
The practical option is to use just common notations like 2/2. But if you want something like a typographic fraction, you could use MathML with MathJax. More exactly, you would use the mfrac element in MathML with the attribute bevelled="true". Sample code:
<!doctype html>
<title>Fractions with MathJax and MathML</title>
<script src=
"http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
Here we have the common fraction ½, then
a simulation with HTML and CSS:
<sup>1</sup>⁄<sub>2</sub>.
Note that this tends to create uneven line spacing.
There are some cures to that, but let us see how MathML works:
<math>
<mfrac bevelled="true">
<mn>1</mn>
<mn>2</mn>
</mfrac>
</math>.
Some text here to demonstrate that line spacing has not
been disturbed here.
Sample rendering:

What is the difference between   and  ?

I have written one XSLT to transform xml to html. If input xml node contains only space then it inserts the space using following code.
<xsl:text> </xsl:text>
There is another numeric character which also does same thing as shown below.
<xsl:text> </xsl:text>
Is there any difference between these characters? Are there any examples where one of these will work and other will not?
Which one is recommended to add space?
Thanks,
Sambhaji
  is a non-breaking space ( ).
  is just the same, but in hexadecimal (in HTML entities, the x character shows that a hexadecimal number is coming). There is basically no difference, A0 and 160 are the same numbers in a different base.
You should decide whether you really need a non-breaking space, or a simple space would suffice.
It's the same. It's a numeric character reference.
A0 is the same number as 160. The first is in base 16 (hexadecimal) and the second is in base 10 (decimal, everyday base).

HTML Entity for DASH

Putting two dashes on a page sometimes, like this -- in rare occassions messes the HTML up.
For instance, if you enter -- into your Wordpress blog it'll actually munch it into a single -. This doesn't work well for code that requires --options --to --be --specified --this --way.
The HTML entity for – is &ndash and the longer — is — but what is the HTML entity to enter NORMAL DASH - in a page?
This should do it. It's not listed as a dash, you need to find a place that lists it as the minus sign.
Code block shows code:
-
In use: - (-)
Double: -- (--)
EDIT: My source for this answer.
This tool makes it easy to find (instead of looking through a chart): http://amp-what.com/#q=dash
The HTML character names dash; and hyphen; (use with leading &) have the same Unicode, U+2010.
From Wikipedia (Dash, Hyphen, Plus and minus signs) and HTML spec:
character
Unicode (hexadecimal)
HTML entity
hyphen
‐
U+2010 ‐ ‐
&dash; ‐&hyphen; ‐
Figure dash
‒
U+2012 ‒ ‒
En dash
–
U+2013 – –
– –
Em dash
—
U+2014 — —
— —
Horizontal bar
―
U+2015 ― ―
&horbar; ―
minus sign
−
U+2212 − −
− −
https://en.wikipedia.org/wiki/Dash#Unicode also lists the unicode codes for similar characters/marks like hyphen, minus and tilde.
Also see:
https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
https://en.wikipedia.org/wiki/Unicode_and_HTML
Besides the "ndash" and "mdash" that you've mentioned (and which I think are valid for most uses), there is the hyphen as represented by &hyphen; (rendered: &hyphen;) and the math symbol for minus represented by − (rendered: −).