Generating a table with vertical text, like I did with the sad history of the C++ throw(…) exception specifier


In The sad history of the C++ throw(...) exception specifier, I presented some tables with vertical text. Here's how I did it. (I simplified the table a bit to allow me to focus on the part that does the vertical text.)

<TABLE BORDER=1 STYLE="border-collapse: collapse">
<TR>
    <TH COLSPAN=2>Specifier</TH>
    <TH>Standard behavior</TH>
    <TH>Microsoft behavior</TH>
</TR>
<TR>
    <TD ROWSPAN=2>
        <SPAN STYLE="writing-mode: vertical-lr;
                     -ms-writing-mode: tb-rl;
                     transform: rotate(180deg);">Nonthrowing</SPAN></TD>
    <TD><CODE>noexcept</CODE><BR>
        <CODE>noexcept(true)</CODE></TD>
    <TD><CODE>std::terminate</CODE></TD>
    <TD><CODE>std::terminate</CODE></TD>
</TR>
<TR>
    <TD><CODE>throw()</CODE><BR></TD>
    <TD><CODE>std::terminate</CODE></TD>
    <TD><CODE>std::terminate</CODE></TD>
</TR>
<TR>
    <TD ROWSPAN=2>
        <SPAN STYLE="writing-mode: vertical-lr;
                     -ms-writing-mode: tb-rl;
                     transform: rotate(180deg);">Throwing</SPAN></TD>
    <TD><CODE>noexcept(false)</CODE></TD>
    <TD>exception propagates</TD>
    <TD>exception propagates</TD>
</TR>
<TR>
    <TD><CODE>throw(something)</CODE></TD>
    <TD>not supported</TD>
    <TD>not supported</TD>
</TR>
</TABLE>

Here's the result:

Specifier Standard behavior Microsoft behavior
Nonthrowing noexcept
noexcept(true)
std::terminate std::terminate
throw()
std::terminate std::terminate
Throwing noexcept(false) exception propagates exception propagates
throw(something) not supported not supported

The first trick is to use writing-mode: vertical-lr to get the text to run vertically. By itself, the text runs top to bottom, but we want it to run bottom to top, so we spin it around it with the transform: rotate(180deg). The default transform origin is the center of the element, so this works out great.

Update: Also add -ms-writing-mode for Internet Explorer.

The second trick is applying those attributes to an inner SPAN element, rather than on the parent TD. This gets the box calculations right for the table cell.

You can apply colors to the various table cells if you want a colored table.

Here's the same table in wikitable form, because I had need for that too.

{| class="wikitable"
|-
! colspan="2" | Specifier
! Standard behavior
! Microsoft behavior
|-
| rowspan="2" | <span style="writing-mode: vertical-lr; -ms-writing-mode: tb-rl; transform: rotate(180deg)">Nonthrowing</span>
| <code>noexcept</code><br/><code>noexcept(true)</code>
| <code>std::terminate</code>
| <code>std::terminate</code>
|-
| <code>throw()</code>
| <code>std::terminate</code>
| <code>std::terminate</code>
|-
| rowspan="2" | <span style="writing-mode: vertical-lr; -ms-writing-mode: tb-rl; transform: rotate(180deg)">Throwing</span>
| <code>noexcept(false)</code>
| exception propagates
| exception propagates
|-
| <code>throw(something)</code>
| not supported
| not supported
|-
|}

Comments (28)
  1. BOFH says:

    The text is vertical in Edge, Firefox and Chrome, but the text appears horizontal and upside down in Internet Explorer on Windows 10.

      1. laonianren says:

        There’s still something weird happening in firefox. If you copy the table snippet into its own web page the vertical text overlaps the second column. However, when the table is embedded in your web page the first column is wider and it works as expected. Unless you disable javascript, and then it goes wrong again. (Which I normally do, which is why I noticed.) I guess this is a bug in firefox that is currently being worked around by one of the scripts.

    1. The MAZZTer says:

      As a web developer, this does not surprise me. :)

  2. Wiki-markup? Why would you ever need that? I am dying to know.

    1. You’ve never put a table on a wiki?

      1. Oh, I do. But you doing such a thing is why the English language has the word “extraordinary”.

        Markdown would have been understandable though …

        1. You think I’ve never put a table on a wiki? What kind of rock do you think I live under?

          1. Ken in NH says:

            We just assume that your a robot that is unplugged between blog posts, apparently.

          2. I don’t assume you live under a rock. I assume you work for Microsoft and I have been told that you once purchased a copy of every single app in a retail shop for compatibility testing. I’ve also been told that there is such a thing as “Raymond Chen’s school of thought” within Microsoft.

            Now, would you please be so kind as to tell us about your experience with Wikis? For example, do you contribute to any wiki at all? When did you learn Wikimarkup? Are there wikis on Microsoft intranet? And whom did you think is the audience of this piece of wikicode right here?

    2. Voo says:

      Wikis are incredibly useful to document things such as infrastructure, development processes and many other things.

      I’m confused that you’re confused that Raymond would ever have to write an article in that format. Your company really doesn’t have an internal wiki of some kind?

      1. Ours does. We use MediaWiki. I’ve also been a long-time Wikipedia contributor.

        But Microsoft is the creator of SharePoint and is famous for enacting the “Eat your own dog food” principle, meaning that deploying MediaWiki instead of SharePoint has as much chance as deploying Apache HTTP Server instead of IIS. Of course, per this principle, Microsoft employees must also use Edge over Firefox or Chrome. But every human has a threshold…

        So, seeing Raymond Chen writing a wiki table that uses the “wikitable” class is … very interesting.

  3. Roger says:

    Internet Explorer 11.1324.15063.0 renders ‘Throwing’ and ‘NotThrowing’ as horizontal upside-down text, which is eye-catching.

  4. Daniel Lesage says:

    The funny part about this? If, like me, you’re reading the article in Outlook (RSS Feeds), the text in the tables is actually horizontal, so you have no clue what Raymond is talking about :)

    1. pete.d says:

      +1 :)

    2. Eddie Lotter says:

      I had the same experience. I wonder what HTML rendering engine Outlook is using.

      1. Isn’t Outlook using the Microsoft Word rendering engine to display messages these days? At least that appears to be the case in Outlook 2010 which I am using.

  5. Keith Patrick says:

    I have to admit, this is one of the last places I would have expected to see such a cool CSS trick (I usually come here for more esoteric stuff and to relive my days writing assembly code). I’m going to have to add that one to my catalog.

  6. GL says:

    Safari on iOS 12 seems to get the table cell width wrong.

  7. laonianren says:

    Firefox has a weird issue where the vertical text doesn’t contribute to the width of the column. So the first column is very narrow and the vertical text actually appears in the second column, overlapping the start of the second column’s text. I’ve no idea if this is correct.

    If you widen the column by setting a width or throwing in a few &nbsp; before the spans it looks OK.

  8. Isn’t it sad that IE does not render that markup properly?

  9. Anonymous says:

    The trick does not work on IE. Text is horizontal and upside-down.

  10. Alfred Agrell says:

    My Firefox renders that vertical cell with a 7px width, text is fully outside the cell. In IE11, text is upsidedown rather than vertical (I guess writing-mode is newer than IE11). Looks fine on Chrome; don’t have an Edge nearby.

    Browser bugs, fun for everyone…

  11. Ricky says:

    Just FYI, this doesn’t work correctly in Safari 11.1.2. The text is vertical, but it doesn’t seem to occupy any horizontal space, so it overlaps the succeeding cell(s).

    1. Simon Clarkstone says:

      I get that incorrect formatting in Firefox 57.0.1 if I block Javascript from loading from “ajax.aspnetcdn.com” (via uMatrix), but correct formatting if I permit such Javascript. Weird that Javascript from another domain affects the behaviour of inline style attributes in the HTML.

  12. Jovert says:

    That’s funny. For me, the text appears sideways like it should, but superpose at the left side of the “Specifier” column. The column the text is supposed to be in is 6px wide. Until the window is resized. After that, it’s right, until the page is refreshed. FF56/32.

  13. Scott says:

    It’s weird that, despite appearing to be pure CSS, that this doesn’t quite work unless I allow scripts from microsoft.com and aspnetcdn.com. The width of the vertical cell is too small and the vertical text overlaps the beginning of the horizontal text in the Specifier column.

  14. Sijmen says:

    Cool use of these CSS features. But on iOS 12 (iPad) the text is rendered outside of the cells, to the right.

Comments are closed.

Skip to main content