htmlarkdown icon indicating copy to clipboard operation
htmlarkdown copied to clipboard

Padding table delimiter-row's hyphens with a space

Open EvitanRelta opened this issue 1 year ago • 0 comments

Context

Currently, the hyphens - of the table delimiter-row extends all the way to the column-separators |:

| Default-Left | Centered | Right-Aligned |
|--------------|:--------:|--------------:|
| Cell 1       | Cell 2   | Cell 3        |

Note: Colon-aligned : feature hasn't been implemented yet, but is here for illustration purposes.


and does not pad the hyphens with a space like:

| Default-Left | Centered | Right-Aligned |
| ------------ | :------: | ------------: |
| Cell 1       | Cell 2   | Cell 3        |

This was because tables require:

  • minimum of 3 hyphens
    (although GitHub doesn't require it, and technically accepts 1 hyphen)

  • minimum of length 3 to replace both the leading and trailing hyphen with colons : for center-alignment
    (ie. :-:, the shortest possible center-aligned delimiter),

and I didn't want to deal with the edge case where the column only has a width of 1 character, like:

| a |
| - |
| b |

The improvement

Add 1-space paddings on the edge of the hyphens.

As for the edge case where the column has < 3 characters, we can either:

  • set the minimum width of columns to 3 characters (excluding the 2-space paddings):

    | 1   |      | 12  |      | 123 |      | 1234 |
    | --- |  ->  | --- |  ->  | --- |  ->  | ---- |
    | a   |      | a   |      | a   |      | a    |
    
    Center-aligned:
    | 1   |      | 12  |      | 123 |      | 1234 |
    | :-: |  ->  | :-: |  ->  | :-: |  ->  | :--: |
    | a   |      | a   |      | a   |      | a    |
    
  • extend the hyphens all the way if there's < 3 characters, else pad the hyphens:

    | 1 |        | 12 |       | 123 |      | 1234 |
    |---|   ->   |----|  ->   | --- |  ->  | ---- |
    | a |        | a  |       | a   |      | a    |
    
    Center-aligned:
    | 1 |        | 12 |       | 123 |      | 1234 |
    |:-:|   ->   |:--:|  ->   | :-: |  ->  | :--: |
    | a |        | a  |       | a   |      | a    |
    

The question

Which of the 2 styles in "The improvement" section above is better?

EvitanRelta avatar Dec 20 '22 04:12 EvitanRelta