Tables and font metrics

[Michel Fortin]

Le 15 mars 2005, à 14:17, Bowerbird at aol.com a écrit :

> John said:
>
>> You can't make a nice-looking table in plain text
>> using proportional typefaces.
>
> but you _can_ make one that looks nice to a user who
> views it in the same font, or one with similar metrics.

Right. This hits the nail on the head: a user editing his website will 
most probably edit it using the same font the next time he changes the 
text. And someone writing a comment won't even have a chance to edit it 
or look at the Markdown source again.

* * *

A note about tabs.

John said there is not way to align columns correctly using tabs since 
in a pure text document you don't have control over the tab stops. This 
is true, but only when using tabs as column separators.

If I use the tab character as a special space character that allows me 
to fill up empty cell space, I can make perfectly aligned columns in a 
table while using a proportional font. The key here is to always stick 
with the same font and the same tab stops, which will not be a problem 
in many contexts.

For example, copy-paste this the sample below into TextEdit on Mac OS 
X. Using the default Helvetica font, it looks pretty good. (Be sure to 
keep tabs intact.)

	|  Column 1	|  Column 2	|
	|  -----------------	|  -----------------	|
	|  Cell 1		|  Cell 2		|

Of course if you publish text like this (with tabs), most people will 
see your table as a bunch of garbage. But again, for private editing 
inside a controlled environment where the same font and the same tab 
stops are used, this can be great. Once it goes to HTML, no one will 
see it.

* * *

A way to view Markdown-formatted text is by looking at the text itself, 
which "should be publishable as is" according to the Markdown syntax 
document.

But this does not means every Markdown document must always be 
"publishable as is." There is many ways to make Markdown text ugly 
while still being transformed to perfectly nice HTML. It's often called 
being "lazy". Here is an example for lists:

> To make lists look nice, you can wrap items with hanging indents:
>
> 	*   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
> 	    Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
> 	    viverra nec, fringilla in, laoreet vitae, risus.
> 	*   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
> 	    Suspendisse id sem consectetuer libero luctus adipiscing.
>
> But if you want to be lazy, you don’t have to:
>
> 	*   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
> 	Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
> 	viverra nec, fringilla in, laoreet vitae, risus.
> 	*   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
> 	Suspendisse id sem consectetuer libero luctus adipiscing.

The same could be said for tables:

> To make tables look nice, you can align columns using the same 
> character count for each column:
>
> 	| Column 1   | Column 2   |
> 	| ---------- | ---------- |
> 	| Cell 1     | Cell 2     |
>
> But if you want to be lazy, you don’t have to:
>
> 	| Column 1 | Column 2 |
> 	| --- | --- |
> 	| Cell 1 | Cell 2 |
>
> If you use a correct character count, you may omit the pipe column 
> separator, in which case Markdown will use the number of character 
> between headers to separate columns. Like this:
>
> 	| Column 1    Column 2   |
> 	| ----------  ---------- |
> 	| Cell 1      Cell 2     |
>
> or this:
>
> 	| Column 1    Column 2
> 	| ----------  ----------
> 	| Cell 1      Cell 2

So, to summarize, if you want to write a "nice" Markdown table 
(viewable in Markdown format by anyone) edit your text in the same font 
you expect people to view it, or a font with very similar metrics.

If you use a proportional font and don't want to count characters 
manually, use the pipe as the column separator.

If you want to be lazy or just don't want to change the spacing for 
every cell in the table when one cell's content gets bigger than 
expected, use the pipe column separator too.


Michel Fortin
michel.fortin at michelf.com
http://www.michelf.com/