console.table text alignment always centered

[p3k]

Version

v18.17.1

Platform

Linux nucke 6.2.0-33-generic #33~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Thu Sep 7 10:33:52 UTC 2 x86_64 x86_64 x86_64 GNU/Linux

Subsystem

internal/cli_table.js

What steps will reproduce the bug?

> console.table(["x", "xxxxxxxxxx"])

How often does it reproduce? Is there a required condition?

Always.

What is the expected behavior? Why is that the expected behavior?

┌─────────┬──────────────┐
│ (index) │ Values │
├─────────┼──────────────┤
│ 0 │ 'x' │
│ 1 │ 'xxxxxxxxxx' │
└─────────┴──────────────┘

What do you see instead?

┌─────────┬──────────────┐
│ (index) │ Values │
├─────────┼──────────────┤
│ 0 │ 'x' │
│ 1 │ 'xxxxxxxxxx' │
└─────────┴──────────────┘

Additional information

The centered content in the table makes output harder to read and counteracts the idea of using a table to display structured data.

A real-world example:

const response = await fetch("https://api.openopus.org/composer/list/search/straus.json");
const { composers } = await response.json();
console.table(composers[0]);
┌───────────────┬─────────────────────────────────────────────────────────────────┐
│ (index) │ Values │
├───────────────┼─────────────────────────────────────────────────────────────────┤
│ id │ '171' │
│ name │ 'Strauss' │
│ complete_name │ 'Richard Strauss' │
│ birth │ '1864-01-01' │
│ death │ '1949-01-01' │
│ epoch │ 'Late Romantic' │
│ portrait │ 'https://assets.openopus.org/portraits/29972276-1568084951.jpg' │
└───────────────┴─────────────────────────────────────────────────────────────────┘

It is also not clear why the Node.js implementation differs from those in current browsers:

Edge:

Firefox:

[MrJithil]

Seems interesting. As per the MDN docs, the table is left aligned. https://developer.mozilla.org/en-US/docs/Web/API/console/table . So, we need a fix here.

However, had a look into the current implementation, and If we can expose a align prop to console.table , then we could allow to use either center, left or right

Alignment	Preview
center
left (default)
right

Need a discussion and happy to fix/add feature this.

[Uzlopak]

Yeah I am +1 this as we use usually table() to show the results in tinybench. And because it is centered, it looks unreadable.

Also configuring the the alignment makes sense, as usually you want to align text to the left and numbers to the right (see excel).

But aligning is not documented in mdn. Are we allowed to deviate?

@Aslemammad

[MrJithil]

Yeah I am +1 this as we use usually table() to show the results in tinybench. And because it is centered, it looks unreadable.

Also configuring the the alignment makes sense, as usually you want to align text to the left and numbers to the right (see excel).

But aligning is not documented in mdn. Are we allowed to deviate?

@Aslemammad

We should not be deviated from the JS standards.

[Uzlopak]

There is no real standard

https://console.spec.whatwg.org/#table

[aduh95]

We should also think about RTL languages, it's been years since the last time I've opened Excel but I'm pretty sure it aligns text to the left only for LTR text. The upside of using center align is that we don't need to think about it.

console.table([
 'طنجة',
 'تطوان',
 'القصر الكبير',
 'Larache',
 'الفنيدق'
])

[MrJithil]

As per the browser implementations, both RTL and LTR texts are left aligned.

Safari

Chrome

[Uzlopak]

Does node have a bidi implentation? I used years ago bidi implentation by @ashensis in jspdf
https://github.com/parallax/jsPDF/blob/5d09af9135a2fe049c7d3c8b95df280d22e4a6db/src/libs/bidiEngine.js#L2655

Also what happens if you use arabic ligatures? Like لا ?
Do we present them also correct and get the right text width? Or what about short vowels, like the Kasra?

This can open up a big hornet nest of issues...

[MrJithil]

Does node have a bidi implentation? I used years ago bidi implentation by @ashensis in jspdf
https://github.com/parallax/jsPDF/blob/5d09af9135a2fe049c7d3c8b95df280d22e4a6db/src/libs/bidiEngine.js#L2655

Also what happens if you use arabic ligatures? Like لا ?
Do we present them also correct and get the right text width? Or what about short vowels, like the Kasra?

This can open up a big hornet nest of issues...

Is this a question to this PR or a general discussion? Please feel free to start a new one in the discussion tab, or raise a new issue with your questions please. So, reviewers will not be confused.

[Uzlopak]

It is not a question and not a general discussion. It is an answer to @aduh95 .

[aduh95]

As per the browser implementations, both RTL and LTR texts are left aligned.

Did you try when the system lang is set to a RTL language?

[aduh95]

It is not a question and not a general discussion. It is an answer to @aduh95 .

There are a lot of interrogation points in your comment, which I think is why it was interpreted as a question rather than a answer. FWIW I think we simply pass Unicode characters to stdout and let the terminal deal with it (I'm just guessing here, I haven't looked at the code).

[MrJithil]

As per the browser implementations, both RTL and LTR texts are left aligned.

Did you try when the system lang is set to a RTL language?

No. But, I tried now before answering this. So both RTL and LTR its left align.

[aduh95]

For completeness, in DevTools using a RTL locale:

But it doesn't really matter what the browsers are doing, we don't have to copy their behavior because this does not impact interoperability. IMO the browser behavior is "wrong", Node.js behavior is "better", but of course depending on your use-case the browser behavior may or may not make more sense. I'd love to har thoughts about this from folks using RTL languages btw.

[MrJithil]

Make sense. Sure. Let's wait for RTL users.