4

I see a broken format of tables passed to <pre> tags, when the table has some Unicode decoration. Look:

postgres=# select * from pg_namespace ;
┌───────┬────────────────────┬──────────┬─────────────────────────────────────┐
│  oid  │      nspname       │ nspowner │               nspacl                │
╞═══════╪════════════════════╪══════════╪═════════════════════════════════════╡
│    99 │ pg_toast           │       10 │ ∅                                   │
│ 12314 │ pg_temp_1          │       10 │ ∅                                   │
│ 12315 │ pg_toast_temp_1    │       10 │ ∅                                   │
│    11 │ pg_catalog         │       10 │ {postgres=UC/postgres,=U/postgres}  │
│  2200 │ public             │       10 │ {postgres=UC/postgres,=UC/postgres} │
│ 13376 │ information_schema │       10 │ {postgres=UC/postgres,=U/postgres}  │
└───────┴────────────────────┴──────────┴─────────────────────────────────────┘
(6 rows)

+-------+--------------------+----------+-------------------------------------+
|  oid  |      nspname       | nspowner |               nspacl                |
+-------+--------------------+----------+-------------------------------------+
|    99 | pg_toast           |       10 | ∅                                   |
| 12314 | pg_temp_1          |       10 | ∅                                   |
| 12315 | pg_toast_temp_1    |       10 | ∅                                   |
|    11 | pg_catalog         |       10 | {postgres=UC/postgres,=U/postgres}  |
|  2200 | public             |       10 | {postgres=UC/postgres,=UC/postgres} |
| 13376 | information_schema |       10 | {postgres=UC/postgres,=U/postgres}  |
+-------+--------------------+----------+-------------------------------------+
(6 rows)

In the first case, the Unicode decoration is more wide, and the format of the table is broken.

13
  • 2
    I'm not seeing an issues on my end (macOS with Firefox, Chrome, or Safari). Commented Nov 9, 2019 at 6:02
  • 6
    It is a font issue. I repro with Consolas. Not with Lucida Console or Courier New. Alexander on macOS is almost certainly using Menlo.
    – Cody Gray Mod
    Commented Nov 9, 2019 at 6:23
  • Font issue, reproduced in android. Commented Nov 9, 2019 at 8:40
  • FWIW I'm not seeing any problems in Safari, on iPad. The two tables' borders aren't identical, but the tables themselves look fine. Commented Nov 9, 2019 at 9:47
  • Those Unicode characters do not have a fixed width. That's a known issue with those characters, not with Stack Overflow.
    – Martijn Pieters Mod
    Commented Nov 9, 2019 at 13:28
  • 1
    E.g. the Wikipedia article on box drawing characters examples section is mis-alinged too, depending on what fonts you have available.
    – Martijn Pieters Mod
    Commented Nov 9, 2019 at 13:33
  • 4
    And from the closely related block elements page: The glyphs in Block Elements each share the same character width in most supported fonts, allowing them to be used graphically in row and column arrangements. However, the block doesn't contain a space character of its own and ASCII space may or may not render at the same width as Block Elements glyphs. This fatal flaw tends to discourage their use, as rendering across platforms and browsers is rarely consistent. A common workaround for this is using light shade instead of a space.
    – Martijn Pieters Mod
    Commented Nov 9, 2019 at 13:35
  • It should be fixed, because on another article root.cz/clanky/postgresql-11-procedury-jako-v-oracle the tables are displayed correctly. Commented Nov 9, 2019 at 13:42
  • @MartijnPieters - I cannot to imagine to use light shade instead a space for tables. Commented Nov 9, 2019 at 13:44
  • @PavelStehule: I was more trying to illustrate that this problem is widespread.
    – Martijn Pieters Mod
    Commented Nov 9, 2019 at 13:47
  • @PavelStehule: while that page may render correctly on your setup it won't render correctly on all browser and OS combinations, or even on a majority.
    – Martijn Pieters Mod
    Commented Nov 9, 2019 at 13:48
  • @AlexanderO'Mara: I can easily reproduce this on macOS with Firefox and Chrome and Safari, because I have Consolas installed.
    – Martijn Pieters Mod
    Commented Nov 9, 2019 at 13:50
  • 1
    Not seeing an issue with Firefox on x86_64 Linux (Gentoo).
    – S.S. Anne
    Commented Nov 9, 2019 at 18:47

1 Answer 1

9

This is not an issue Stack Overflow can fix. Those specific Unicode characters do not have a fixed width consistent with other codepoints, consistently, across all fonts.

Yes, this is true even though a fixed-width (monospaced) font is selected. That's because Unicode contains codepoints that are explicitly marked as having a different width from other codepoints (the East-Asian width table), which includes a whole range of ambiguous width codepoints, and font designers are free to pick widths for everything else.

This is also an issue for block elements, for which Wikipedia explicitly mentions font issues:

The glyphs in Block Elements each share the same character width in most supported fonts, allowing them to be used graphically in row and column arrangements. However, the block doesn't contain a space character of its own and ASCII space may or may not render at the same width as Block Elements glyphs. This fatal flaw tends to discourage their use, as rendering across platforms and browsers is rarely consistent. A common workaround for this is using light shade instead of a space.

You could try to override your local font settings with a custom stylesheet or your browser settings and using a font that would render the characters at a fixed width, but you can't rely on everyone having such a font.

I see the issue too because I've got the Consolas font installed on my Mac; this is not a font that is installed by default, you have to explicitly download and install it on Macs. If I disable that font then Menlo is used, and that font does use the same widths for line drawing codepoints and ASCII. However, Consolas will render other kinds of monospace characters better than Menlo could, on Windows systems, and there is a trade-off to be made in selecting the list of fonts for code blocks for a site like Stack Overflow, which has such a wide range of different texts to deal with.

3
  • 3
    Stack Overflow could fix it by providing their own font for code blocks. Commented Nov 9, 2019 at 19:46
  • 4
    @MartinTournoij you are assuming these are no downsides to using a web font. A webfont easily adds half a second of loading time and affects rendering performance. Stack Overflow has so much traffic that having to serve a web font adds significant CDN traffic; you can’t limit the included character sets either as code blocks easily use all of the Unicode range. So I don’t expect Stack Overflow to start using web fonts just to have these characters align.
    – Martijn Pieters Mod
    Commented Nov 9, 2019 at 20:18
  • 1
    Should a webfont be used is a separate matter; I was only responding to "this is not an issue Stack Overflow can fix". Commented Nov 10, 2019 at 2:14

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .