Blog 1

Random Talk on Random Thoughts

After Reading About.com's Introduction to the SVG Viewbox

| Comments | ∞

While I was testing SVGPan, I saw the viewBox attribute. I learnt something from the first search result after googling “svg viewbox”. It was an article introducing the SVG viewbox. There’s no difficult concepts in the guide, but I can’t understand it because of the following claim.1

<svg width="800" height="400" viewBox="0 0 400 200">

This view box covers half the page starting in the upper right hand corner.

I have investigated into this, and I’m dubious about this idea. I’ll illustrate my doubts using two examples. Click “download” at the top right-hand corner to view the result.

My first example (viewBox1.html) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>My First SVG</title>
<style type="text/css" media="all">
div.fallback{color:red;}
</style>
</head>
<body>
<h1>My First SVG</h1>
<svg width="800" height="400" viewBox="0 0 800 400">
  <rect x="0" y="0" width="400" height="200" fill="red"/>
  <rect x="400" y="0" width="400" height="200" fill="blue"/>
  <rect x="0" y="200" width="400" height="200" fill="orange"/>
  <rect x="400" y="200" width="400" height="200" fill="green"/>
  <foreignObject display="none" width="600" height="30">
  <div class="fallback">
    Sorry, your browser does not support inline SVG.
  </div>
  </foreignObject>
</svg>
<p>
<a href="//validator.w3.org/check?uri=referer">
  <img src="/images/valid-html5.png" alt="Valid HTML 5" height="31"
  width="88"></a>
<a href="//jigsaw.w3.org/css-validator/check/referer"><img
  src="/images/valid-css.png" alt="Valid CSS" height="31" width="88">
</a></p>
</body>
</html>

“The view box covers the entire page”, as expected.

My second example (viewBox2.html) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>My First SVG</title>
<style type="text/css" media="all">
div.fallback{color:red;}
</style>
</head>
<body>
<h1>My second SVG</h1>
<svg width="800" height="400" viewBox="0 0 400 200">
  <rect x="0" y="0" width="400" height="200" fill="red"/>
  <rect x="400" y="0" width="400" height="200" fill="blue"/>
  <rect x="0" y="200" width="400" height="200" fill="orange"/>
  <rect x="400" y="200" width="400" height="200" fill="green"/>
  <foreignObject display="none" width="600" height="30">
  <div class="fallback">
    Sorry, your browser does not support inline SVG.
  </div>
  </foreignObject>
</svg>
<p>
<a href="//validator.w3.org/check?uri=referer">
  <img src="/images/valid-html5.png" alt="Valid HTML 5" height="31"
  width="88"></a>
<a href="//jigsaw.w3.org/css-validator/check/referer"><img
  src="/images/valid-css.png" alt="Valid CSS" height="31" width="88">
</a></p>
</body>
</html>

This time, the view box only covers the top left-hand corner.

In addition, I’ve found out that changing 0 0 400 200 to 400 200 0 0 doesn’t work.

  1. Ferrara, D. n.d. Viewbox Attribute in SVG: Understanding the SVG Viewbox. Retrieved from http://webdesign.about.com/od/svg/a/svg-viewbox-attribute.htm ↩

Linux Compose Keys List

| Comments | ∞

While writing a post on Ubuntu, I forgot how to type an en-dash – using Linux compose key. It would be quite inefficient if I use the corresponding Vim’s digraph <C-k>-n. Therefore, I tried to search for a Linux compose key list. However, both Wikipedia and Ubuntu Community Help Wiki points to a non-existent list at http://hermit.org/Linux/ComposeKeys.html

Luckily, I remembered that I had viewed the desired list in Firefox a long time ago. As a result, I opened Firefox and typed “linux compose” in the address bar. Finally, I was able to access the list hosted on http://www.topology.org

If you’re not willing to disclose whether you are a human or not1, you may refer to this one.

  1. There’s a human test for viewing any page on http://www.topology.org ↩

Zooming SVG in Web Browsers

| Comments | ∞

In my post about proving Pappus’s Hexagon Theorem1, I inserted some SVG graphics to illustrate the ideas.


An example illustrating the difficulty of enlarging an SVG graphics for ordinary users. The image is borrowed from the post about proving Pappus’s Hexagon Theorem.
$\rm \LaTeX$ Source code

Valid SVG 1.1

How can one enlarge SVG images only within web browsers?

Your browser does not support SVG

A working example showing the zooming, panning and dragging functions of SVG graphics. Drag the figure to translate it, and scroll to enlarge/reduce it.
Source code

Valid SVG 1.1

A Change of Encrypted MathJax CDN Access

| Comments | ∞

I’ve explained the reasons for accessing MathJax via HTTPS in one of my posts.1 About two hours ago, while writing and previewing a post about bitmapped Computer Modern fonts2, MathJax failed to load. I found out what’s wrong in a minute—at line 21 of in source/_includes/custom/head.html at my latest commit (i.e. commit 96938d3)3, there’s a , between two referenced scripts: the official MathJax script via HTTPS, and my local settings and macros in source/javascripts/MathJaxLocal.js. Googling “mathjax cdn https”, I discovered that in the official documentation of MathJax, the address for accessing the MathJax CDN had already been simplified.4 In my opinion, the new URL is better because it’s more easy to remember.

  1. Tam, V. 2014, Jun 5. MathJax in Octopress via HTTPS. Retrieved from https://vincenttam.github.io/blog/2014/06/05/mathjax-in-octopress-via-https/ ↩

  2. Tam, V. 2014, Aug 2. Avoid Using Ugly Bitmapped Computer Modern Fonts. Retrieved from https://vincenttam.github.io/blog/2014/08/02/avoid-using-ugly-bitmapped-computer-modern-fonts/ ↩

  3. My previous version of source/_includes/custom/head.html at commit 96938d3 ↩

  4. The MathJax Consortium. n.d. MathJax’s official documentation. Retrieved from http://docs.mathjax.org/en/latest/start.html#secure-access-to-the-cdn ↩

Avoid Using Ugly Bitmapped Computer Modern Fonts

| Comments | ∞

In a $\rm \LaTeX$ guide found on the website of George Mason University, it’s said that Computer Modern fonts can look ugly.1 Like most Computer Modern users, I didn’t notice that until I wrote an article using $\rm \LaTeX$ last weekend.

To illustrate the problem, I used a minimum example which I had posted on Gist.2 To simply matters, one may use \pagenumbering{gobble} to suppress page numbers.3

fig1

If one thinks that downloading the Blue Sky fonts from the American Mathematical Society is too troublesome, simply including the package lmodern will do.

fig2

P.S. I have learnt an ImageMagick command from a Stack Overflow question to convert a PDF file to an image.4

  1. Luke, S. (n.d.). Doing LaTeX Right: Correcting Common LaTeX Formatting Mistakes. Retrieved from http://cs.gmu.edu/~sean/stuff/DoingLatexRight/ ↩

  2. My Gist for testing Bib$\rm \TeX$ (URL) ↩

  3. $\rm \TeX–\LaTeX$ Stack Exchange question 7355 (URL) ↩

  4. Stack Overflow question 6605006 (URL) ↩

Evince Viewing Error

| Comments | ∞

Evince Firefox Sumatra PDF SVG
Evince Firefox Google Chrome SVG
bad ok1 good good

The Gist for the $\rm \LaTeX$ source code of the TikZ diagram

This afternoon, while I was using TikZ to fill a triangle with line pattern, I found that the filling pattern flowed out of the triangle. Using the clip command doesn’t help. Initially, I thought it was the problem of TikZ. As a result, I tried searching “tikz fill pattern triagnle”, and didn’t read anything useful. Finally, I found a question on $\rm \LaTeX$ Stack Exchange, and realized that it was a problem of the PDF viewer, instead of my use of the markup language for graphics. I tried using Mozilla’s pdf.js to open the file, but the grids weren’t being rendered properly either.

Luckily, if I use pdf2svg to convert the PDF file to an SVG file, the SVG file doesn’t have such problem.

  1. The results are the same in Firefox on M$ Windows and GNU/Linux. ↩

Pappus's Hexagon Theorem

| Comments | ∞


Source

Suppose that points $A,B$ and $C$ lie on the same straight line, and $D,E$ and $F$ lie on another one. Draw line segments $AE,BD,BF,CE,AF$ and $CD$.
Let $P$ be the intersection point of $AE$ and $BD$.
Let $Q$ be the intersection point of $AF$ and $CD$.
Let $R$ be the intersection point of $BF$ and $CE$.
Then $P,Q$ and $R$ are collinear. (i.e. The red dashed line and the red solid line are collinear.)

Star of David in Pascal's Triangle

| Comments | ∞

Yesterday, I learnt drawing simple TikZ diagrams.

In my opinion, defining nodes while connecting them will not look good.

\path[draw] (0, 0) node {A} -- (1,0) -- (1,1) node {B};

I define the nodes before connecting them, and the result is what I desire.

Drawing basic TikZ diagramslink
1
2
3

\node (A) at (0,0) {A};
\node (B) at (1,1) {B};
\draw (A) -- (1,0) -- (B);

I overlooked the meaning of clipping in Meik Hellmund’s short TikZ tutorial.1 I constructed the diagram using the edge command.

(DavidStar.tex) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14

\documentclass[tikz]{standalone}
\begin{document}
\begin{tikzpicture}
  \node (A) at (1,0) {${{n + 1}\choose{r}}$};
  \node (C) at (4,2) {${{n}\choose{r + 1}}$} edge (A);
  \node (E) at (1,4) {${{n - 1}\choose{r - 1}}$} edge (C)
                                                 edge (A);
  \node (B) at (3,0) {${{n + 1}\choose{r + 1}}$};
  \node (D) at (3,4) {${{n - 1}\choose{r}}$} edge (B);
  \node (F) at (0,2) {${{n}\choose{r - 1}}$} edge (B)
                                             edge (D);
  \node (G) at (2,2) {${n \choose r}$};
\end{tikzpicture}
\end{document}

Realising that $\displaystyle {n \choose k} = \frac{n!}{r! (n - r)!}$, one can easily see that

\[ \binom{n - 1}{k - 1} \binom{n}{k + 1} \binom{n + 1}{k} = \binom{n - 1}{k} \binom{n}{k - 1} \binom{n + 1}{k + 1}. \]

  1. See p.12 of the tutorial.

    “It is often better to define named nodes first and connect them later, since then the paths are clipped around the notes…”

    ↩

Interesting Linux Figures (1)

| Comments | ∞

I saw an interesting picture about GNU/Linux in a post on Facebook page Open Source For You.

A computer minus Linux equals zero.

As a GNU/Linux user, I strongly agree with the statement. Otherwise, if the current version of M$ Win* is so good, how can the company make $ from a newer version?