Measure column width by browser, Add left align for GFM

[zenyr]

Issue

All CJK characters, like 안녕하세요 breaks width calculation since '안녕하세요'.length === 5 unlike their apparent width.

This is even more pronounced with various emojis.

'🏴󠁧󠁢󠁷󠁬󠁳󠁿'.length === 14

'🏴󠁧󠁢󠁷󠁬󠁳󠁿'.split('').join() === 
  '\uD83C,\uDFF4,\uDB40,\uDC67,\uDB40,\uDC62,\uDB40,\uDC77,\uDB40,\uDC6C,\uDB40,\uDC73,\uDB40,\uDC7F'

I tried various regex approaches but there was no way I could cover them all. So I decided to just give up and let the browser renderer calculate the character count instead. Since this project was already running on jQuery ... I felt no need to go pure js this time.

This approach is still not perfect but it almost works. Especially compared to github's output.

previous	improved	github editor

Font

I've changed the font to monospace to reduce visual discrepancy but if you change the font to a true fixed width font you can achieve this beautiful result:

D2Coding font

However I decided to stick with good ol' monospace.

GFM left align

I also added left align support for numeric columns and allow empty cells in numeric columns.

Result

| +_+ | 안녕! |  ⛹🏾‍♂️  |  ☝🏿  | 🙌🏾🙌🏾 | . | .  |    .    | . | Number row |
|-----:|------:|------|------|------|--:|----|---------|--:|-------------:|
|    . |     1 | 😉😉 | 👍👍 | 2️⃣   | , | .  | .       | . |            1 |
|    . |     2 | .    | .    | .    | . | 🏴󠁧󠁢󠁷󠁬󠁳󠁿 | .       | . |            2 |
|    . |     3 | .    | .    | .    | . | .  | mañana | . |     123,456 |
|    . |     4 | .    | .    | .    | . | .  | mañana |   |              |

Far from perfect but hey ,

Update

I tried canvas based measurement this time and it SLIGHTLY improved the result. See below, from the same input as above:

| +_+ | 안녕! | ⛹🏾‍♂️   | ☝🏿   | 🙌🏾🙌🏾 | . | .  |   .    | . | Number row |
|----:|-----:|------|------|------|--:|----|--------|--:|-----------:|
|   . |    1 | 😉😉 | 👍👍 | 2️⃣   | , | .  | .      | . |          1 |
|   . |    2 | .    | .    | .    | . | 🏴󠁧󠁢󠁷󠁬󠁳󠁿 | .      | . |          2 |
|   . |    3 | .    | .    | .    | . | .  | mañana | . |    123,456 |
|   . |    4 | .    | .    | .    | . | .  | mañana |   |            |

Still struggles at emojis (they're measured as 2.14 character wide but 1.66 in the textarea ಠ_ಠ could be OSX/Chrome quirk...