Here’s a list of five numbers used as slang in various contexts.
The motivation for this post was an article Those HTML attributes you never use. I wanted to make a note of how to change the numbering of an ordered list in HTML, and this post is that note.
Fairly often I want to find out whether there is an HTML entity for a given Unicode character, or given an HTML entity I want to look up its Unicode value.
For example, ∃ has Unicode value U+2203. I might want to look up whether there is an HTML entity for this. There is, and it’s ∃.
Another example is ○ (U+25CB). There is no HTML entity for this character.
I imagine a few other people need to do this occasionally, so I make a web page to make it easier.
The page is very similar to my page for converting back and forth between Unicode and LaTeX commands.
I’ve written a few other online tools. Here’s a full list.
Update: If you enter a single character, the page will look up the Unicode value of the input. For example, entering ∀ is the same as entering U+2200.
There are Unicode characters for a few fractions, such as ½. This looks a little better than 1/2, depending on the context.
Here’s the Taylor series for log(1 + x) written in pure HTML:
log(1 + x) = x – ½x² + ⅓x³ – ¼x⁴ + ⅕x⁵ – ⋯
See this post for how the exponents were made.
Notice that the three dots ⋯ on the end are centered vertically, like \cdots in LaTeX. This was done with ⋯ (U+22EF).
The selection of available fraction number forms is small and a little strange.
There are characters for fractions with denominator d equal to 2, 3, 4, 5, 6, and 8, with numerators 1 through d-1, except for fractions that can be reduced.
If d = 7, 9, or 10, there’s a character for 1/d but not for fractions with numerators other than 1. For example, there is a character for ⅐ but not for 2/7.
For denominators 2, 3, 4, 5, 6, and 8 the HTML entity for characters is easy: they all have the form
& frac <n> <d> ;
where n is the numerator and d is the denominator. For example, ⅗ is the HTML entity for ⅗.
There are no HTML entities for 1/7, 1/9, or 1/10.
When I started blogging I was very cautious about what characters I used because browsers often didn’t have font support for uncommon characters. Things have changed since then and I’ve gotten less cautious. Nobody has complained, so I assume readers are seeing the characters I intend them to see.
There are Unicode characters for sets of numbers such as the integers and the real numbers, double-struck letters similar to the blackboard bold letters \mathbb{Z} etc. in LaTeX.
Here’s a table of the characters, their Unicode values, and two HTML entities associated with each.
ℕ U+2115 ℕ ℕ
ℤ U+2124 ℤ ℤ
ℚ U+211A ℚ ℚ
ℝ U+211D ℝ ℝ
ℂ U+2102 ℂ ℂ
ℍ U+210D ℍ ℍ
If you’re going to use these symbols, you will likely also need to use ∈ (U+2208, ∈) and ∉ (U+2209, ∉).
If you want more letters in the style of those above, you can find them starting at U+1D538 for . However, the characters corresponding to letters above are reserved.
So for example, is U+1D538, is U+1D539, but U+1D53A is reserved and you must use ℂ (U+2102) instead.
One letter not mentioned above is ℙ (U+2119). It has HTML entities ℙ and ℙ.
So the double-struck versions of C, H, N, P, Q, R, and Z are down in the BMP (Basic Multilingual Plane) and the rest are in the SMP (Supplementary Multilingual Plane). I suspect characters in the SMP are less likely to have font support, but that may not be a problem.
There are alternatives to using <sup> and <sub> tags for superscripts and subscripts in HTML. These alternatives may look better, depending on context, and they can be used in plain (Unicode) text files where HTML markup isn’t available.
When I started blogging I would use <sup>2</sup> and <sup>3</sup> for squares and cubes. Then somewhere along the way someone told me about ² (U+00B2) and ³ (U+00B3) and I started using these. The superscript characters generally produce slightly smaller subscripts and look nicer in my opinion.
Example with sup tags:
a2 + b2 = c2
Example with superscript characters:
a² + b² = c²
But there are no characters for exponents larger than 3. Or so I thought until recently.
There are no HTML entities for exponents larger than 3, nothing written in notation analogous to ² and ³. There are Unicode characters for other superscripts up to 9, but they don’t have corresponding HTML entities.
The Unicode code point for superscript n is
2070hex + n
except for n = 2 or 3. For example, U+2075 is a superscript 5. So you could write x⁵ as
<em>x</em>⁵.
There are also Unicode symbols for subscripts, though they don’t have corresponding HTML entities. The Unicode code point for superscript n = 0, 1, 2, … 9 is
2080hex + n
For example, U+2087 is a subscript 7.
The subscript characters don’t extend below the baseline as far as subscripts in <sub> tags do. Here are x‘s with subsubcripts in <sub> tags.
x0, x1, x2, x3, x4, x5, x6, x7, x8, x9
And here are the single character subscripts.
x₀, x₁, x₂, x₃, x₄, x₅, x₆, x₇, x₈, x₉
I think the former looks better, but subscripts in HTML paragraphs may increase the vertical spacing between lines. If consistent line spacing is more important than conventional subscripts, you might prefer the subscript characters.
This week’s resource post: some notes on typesetting, Unicode, etc.
See also blog posts tagged LaTeX, HTML, and Unicode.
Last week: C++ resources
Next week: Special functions
From Greg Brockman on Twitter:
Web programming is the science of coming up with increasingly complicated ways of concatenating strings.
Here’s a very simple idea: Use Project Gutenberg for content and Readability for style.
Project Gutenberg has a large collection of public domain books in digital form. The books are available in several formats, none of which are ideal for reading. Project Gutenberg provides text without much styling in order to make it easier for people to use the content as they please.
You can go to the HTML version of a book on Gutenberg and use Readability (or Instapaper) to format it for easier reading. Importing the HTML page to a Kindle similarly improves the formatting.
* * *
Has anyone made a style sheet to approximate the look of Readability or Instapaper? I’d like to use something like that to improve the appearance of the static HTML pages on my site.
Yesterday I thought about adding a style sheet for mobile devices to some static HTML pages. How hard could it be? CSS has a media type. Just set the media to handheld, specify a style sheet for mobile browsers, and you’re done.
Style sheet media types
One problem is that hand-held devices don’t always look for the handheld style sheet. According to Ben Henick, the handheld media type is “poorly supported by all but the very recently marketed devices, as of 2009.” From what I gather, most websites try to infer the browser type on the server side and generate different HTML for mobile devices using PHP etc. Apparently static HTML markup will have its limitations at this point in time.
The iPhone doesn’t consider itself a hand-held device as far as CSS is concerned. Fair enough: perhaps the handheld designation is more for tiny screens like more traditional cell phones. But it’s not a desktop either.
You can’t target the iPhone with a simple media type, but you can use the following CSS.
<link rel="stylesheet" type="text/css" href="iphone.css"
media="only screen and (max-device-width: 480px)" />
Of course a device other than an iPhone could grab this style sheet, and the iPhone will not grab the style sheet if they ever add one more pixel to the browser width. But this is the approach Apple gives in their online documentation.
Testing
It’s difficult to find emulators to test how pages appear on mobile devices. Someone said on Stack Overflow that Opera has a Small Screen view that is useful for emulating mobile devices. However, that recommendation was from November 2008. The current version of Opera either no longer supports that feature or has moved it somewhere else.
The Web Developer plug-in for Firefox lets you specify whether you want to display your page with the screen or handheld style sheet, but it does not emulate a hand-held device.
Apple makes an emulator for the iPhone, but only for Macintosh computers. MobiOne makes an emulator for the iPhone that runs on Windows. However, the emulator does not recognize the CSS statement above. I don’t have an iPhone, but I was able to borrow an iPod Touch, which runs the same browser as the iPhone. My pages worked correctly on the iPod when they did not work on the MobiOne emulator.
Suggestions?
Does anyone have any suggestions for making static HTML pages more friendly to mobile browsers? Any suggestions for testing?
Sometime around 1994, my office mate introduced me to HTML by saying it was 10 times simpler than LaTeX. At the time I thought he was right. Now I’m not so sure. Maybe he was right in 1994 when the expectations for HTML were very low.
It is easier to bang out a simple, ugly HTML page than to write your first LaTeX document. When you compare the time required to make an attractive document, the effort becomes more comparable. The more sophisticated you get, the simpler LaTeX becomes by comparison.
Of course the two languages are not exactly comparable. HTML targets a web browser while LaTeX targets paper. HTML would be much simpler if people only used it to create documents to print out on their own printer. A major challenge with HTML is not knowing how someone else will use your document. You don’t know what browser they will view it with, at what resolution, etc. For that matter, you don’t know whether they’re even going to view it at all — they may use a screen reader to listen to the document.
Writing HTML is much more complicated than writing LaTeX if you take a broad view of all that is required to do it well: learning about accessibility and internationalization, keeping track of browser capabilities and market shares, adapting to evolving standards, etc. The closer you look into it, the less HTML has in common with LaTeX. The two languages are not simply two systems of markup; they address different problems.