Subtitled: html tables with Chinese characteristics
Subtitled: applying Chinese and Korean font metrics to html tables
I think html tables look much better when the table cells have a square aspect ration ie a perfect square rather than rectangular.
There is actually a very easy way of making your html table cells square. Firstly one needs to have some understanding of the characteristics of human language scripts. One characteristic of the Chinese language script is that each character 汉字 occupies a square. We can use this characteristic when coding html tables.
I wrote some html code for a Sudoku board. In each cell I have an input. The relevant code, for this article, is:
<td class='bordy'><input type='text' class='bigcol' size='1'></td>
Let's look at relevant CSS in class bigcol, specifically the CSS property font-family —
font-family:Courier,monospace; and font-family:monospace; give a rectangular aspect ratio, the height being greater than the width. Not good.
Let's now use a Chinese font: font-family:"Hannotate SC",monospace;. With Firefox, we now have a really good looking table with square aspect ratio table cells. Chrome, on the other hand, produces vertical rectangular aspect ratio table cells.
Using the template font-family: font name ,monospace;, let's try some more Chinese fonts.
Firefox + font PingFang SC produces a perfect square. Chrome + PingFang SC gives a vertical rectangle.
Firefox + Yuanti SC 圆体-简 produces a perfect square. Chrome + Yuanti SC 圆体-简 gives a vertical rectangle.
Firefox + Baoli SC 报隶-简 produces a perfect square. Chrome + Baoli SC 报隶-简 gives a vertical rectangle.
Firefox + Lantinghei SC 兰亭黑-简 produces a perfect square. Chrome + Lantinghei SC 兰亭黑-简 gives a vertical rectangle.
Using font Heiti SC, Chrome gives much better results than Firefox. Firefox is way out. Chrome + Heiti SC produces a near perfect square. Firefox + Heiti gives a horizontal rectangle.
My expectation is that all browsers, when Chinese fonts are specified, should give perfect squares for the table cells as the squared Chinese character is a fundamental characteristic of the Chinese language. From my experimentation, one can see that there are differences between browsers and a perfect square is not always produced.
One of the characteristics of the Korean language script Hangul (also romanised as Hangeul) 한글 is that the individual letters Jamo are formed into squared syllable blocks. Letʼs explore this characteristic with the Korean font Nanum Myeongjo 나눔 명조. Firefox + Nanum Myeongjo produces a near perfect square. Chrome produces a vertical rectangle.
Using font "Noto Sans Korean" results in really awful aspect ratios in both browsers. Chrome + "Noto Sans Korean" produces vertical rectangles. Firefox + "Noto Sans Korean" gives horizontal rectangles.
I reason that there are dependencies between browsers and font metrics. In the "Noto Sans Korean" case, it seems that the 2 browsers have a 90 degree difference in interpretation of this fontʼs metrics.
My favourite combinations, so far, are: Firefox + Hannotate SC 手札体-简, Firefox + PingFang SC 苹方-简, Firefox + Yuanti SC 圆体-简, Firefox + Baoli SC 报隶-简, Lantinghei SC 兰亭黑-简, Firefox + Nanum Myeongjo 나눔 명조 and Chrome +Heiti SC 黑体-简.
〖 thoughts — Should look at more fonts. Are there any other human language scripts that are squared?〗
Here is what my Sudoku board looks like with Firefox + Hannotate SC font. This font contains glyphs for English as well as Chinese. I do like the Hannotate SC font style used for English as well as the Hannotate SC font style used for Chinese. I had a bit of fun with the Emoji as I selected them by Chinese name. Actually, an Emoji Sudoku might be popular. Instead of the numbers 1 thru 9, an Emoji Sudoku would have 9 different Emoji.
Using the template font-family: font name ,monospace;, let's try some more Chinese fonts.
Firefox + font PingFang SC produces a perfect square. Chrome + PingFang SC gives a vertical rectangle.
Firefox + Yuanti SC 圆体-简 produces a perfect square. Chrome + Yuanti SC 圆体-简 gives a vertical rectangle.
Firefox + Baoli SC 报隶-简 produces a perfect square. Chrome + Baoli SC 报隶-简 gives a vertical rectangle.
Firefox + Lantinghei SC 兰亭黑-简 produces a perfect square. Chrome + Lantinghei SC 兰亭黑-简 gives a vertical rectangle.
Using font Heiti SC, Chrome gives much better results than Firefox. Firefox is way out. Chrome + Heiti SC produces a near perfect square. Firefox + Heiti gives a horizontal rectangle.
My expectation is that all browsers, when Chinese fonts are specified, should give perfect squares for the table cells as the squared Chinese character is a fundamental characteristic of the Chinese language. From my experimentation, one can see that there are differences between browsers and a perfect square is not always produced.
One of the characteristics of the Korean language script Hangul (also romanised as Hangeul) 한글 is that the individual letters Jamo are formed into squared syllable blocks. Letʼs explore this characteristic with the Korean font Nanum Myeongjo 나눔 명조. Firefox + Nanum Myeongjo produces a near perfect square. Chrome produces a vertical rectangle.
Using font "Noto Sans Korean" results in really awful aspect ratios in both browsers. Chrome + "Noto Sans Korean" produces vertical rectangles. Firefox + "Noto Sans Korean" gives horizontal rectangles.
I reason that there are dependencies between browsers and font metrics. In the "Noto Sans Korean" case, it seems that the 2 browsers have a 90 degree difference in interpretation of this fontʼs metrics.
My favourite combinations, so far, are: Firefox + Hannotate SC 手札体-简, Firefox + PingFang SC 苹方-简, Firefox + Yuanti SC 圆体-简, Firefox + Baoli SC 报隶-简, Lantinghei SC 兰亭黑-简, Firefox + Nanum Myeongjo 나눔 명조 and Chrome +Heiti SC 黑体-简.
〖 thoughts — Should look at more fonts. Are there any other human language scripts that are squared?〗
Here is what my Sudoku board looks like with Firefox + Hannotate SC font. This font contains glyphs for English as well as Chinese. I do like the Hannotate SC font style used for English as well as the Hannotate SC font style used for Chinese. I had a bit of fun with the Emoji as I selected them by Chinese name. Actually, an Emoji Sudoku might be popular. Instead of the numbers 1 thru 9, an Emoji Sudoku would have 9 different Emoji.
 |
| Firefox + Hannotate SC |
