Table formatting assumes a monospace font

Prettier 1.18.2 Playground link

--parser markdown

Input:

Syntax | Description
---|---
Header | Title
Paragraph | Text

Output:

| Syntax    | Description |
| --------- | ----------- |
| Header    | Title       |
| Paragraph | Text        |

This looks fine with a monospace font, but not a proportional font:

| Syntax    | Description | | Syntax    | Description | | --------- | ----------- | | Header    | Title       | | Paragraph | Text        |

Expected behavior: In this case, the output should be the same as the input.

• Columns should not be aligned (which assumes a monospace font) because it decreases readability and usability with proportional fonts (non-monospace fonts where characters are different widths and assumptions cannot be made about code alignment). Aligned tables should be unaligned for consistency.
• If spaces are missing next to pipes (|), they should still be added, as Prettier does currently. This improves readability, like changing const variable=value to const variable = value, without decreasing usability for proportional fonts.

Explanation: Besides making tables less visually appealing in proportional fonts, this issue makes tables difficult to edit if they’re wider than the editor. For example, let’s say you’re editing a table with some very long content cells, but very short heading cells. Using Prettier’s formatting with a monospace font is fine because you can always scroll up to see the current column’s heading aligned above. However, when using a proportional font, the heading row will often be invisible because it doesn’t align with the current content cell, and you won’t even know whether to scroll left to right as it depends on the width of each row. Currently the workaround is to disable Prettier or change your font, which I think is too limiting.

Overall, I feel that Prettier formatting should not cause code to be less readable in any situation, even if it means not making it more readable in some situations. It’s also worth noting that most modern editors (including VSCode and JetBrains) have built-in markdown previews if users still want to see their tables aligned.

[nickmccurdy]

That’s good, can we enable it by default and have it regardless of line length? There should still be an option to disable it though.

[Austaras]

It will be helpful for me and other CJK user. There is only a limited number of fonts in which hanzi/kanji are strictly twice the width of characters so remove this feature makes long table formatting better

Prettier 1.19.1 Playground link

--parser markdown

Input:

Pilot|Airport|Hours
--|:--:|--:
John Doe|SKG|1338ewrqewrewrewqrewrqwerewrweqrwerew
Jane Roe|JFK|自分自身の状態を管理

Output:

| Pilot    | Airport |                                 Hours |
| -------- | :-----: | ------------------------------------: |
| John Doe |   SKG   | 1338ewrqewrewrewqrewrqwerewrweqrwerew |
| Jane Roe |   JFK   |                  自分自身の状態を管理 |