{"id":99865,"date":"2018-10-01T07:00:00","date_gmt":"2018-10-01T21:00:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/oldnewthing\/?p=99865"},"modified":"2019-05-21T19:43:39","modified_gmt":"2019-05-22T02:43:39","slug":"20181001-00","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/oldnewthing\/20181001-00\/?p=99865","title":{"rendered":"Generating a table with vertical text, like I did with the sad history of the C++ throw(…)<\/CODE> exception specifier"},"content":{"rendered":"

In The sad history of the C++ throw(...)<\/code> exception specifier<\/a>, 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.)<\/p>\n

<TABLE BORDER=1 STYLE=\"border-collapse: collapse\">\r\n<TR>\r\n    <TH COLSPAN=2>Specifier<\/TH>\r\n    <TH>Standard behavior<\/TH>\r\n    <TH>Microsoft behavior<\/TH>\r\n<\/TR>\r\n<TR>\r\n    <TD ROWSPAN=2>\r\n        <SPAN STYLE=\"writing-mode: vertical-lr;\r\n                     -ms-writing-mode: tb-rl;\r\n                     transform: rotate(180deg);\">Nonthrowing<\/SPAN><\/span><\/TD>\r\n    <TD><CODE>noexcept<\/CODE><BR>\r\n        <CODE>noexcept(true)<\/CODE><\/TD>\r\n    <TD><CODE>std::terminate<\/CODE><\/TD>\r\n    <TD><CODE>std::terminate<\/CODE><\/TD>\r\n<\/TR>\r\n<TR>\r\n    <TD><CODE>throw()<\/CODE><BR><\/TD>\r\n    <TD><CODE>std::terminate<\/CODE><\/TD>\r\n    <TD><CODE>std::terminate<\/CODE><\/TD>\r\n<\/TR>\r\n<TR>\r\n    <TD ROWSPAN=2>\r\n        <SPAN STYLE=\"writing-mode: vertical-lr;\r\n                     -ms-writing-mode: tb-rl;\r\n                     transform: rotate(180deg);\">Throwing<\/SPAN><\/span><\/TD>\r\n    <TD><CODE>noexcept(false)<\/CODE><\/TD>\r\n    <TD>exception propagates<\/TD>\r\n    <TD>exception propagates<\/TD>\r\n<\/TR>\r\n<TR>\r\n    <TD><CODE>throw(something)<\/CODE><\/TD>\r\n    <TD>not supported<\/TD>\r\n    <TD>not supported<\/TD>\r\n<\/TR>\r\n<\/TABLE>\r\n<\/pre>\n
Here’s the result:<\/p>\n
<\/p>\n\n\n\n\n\n\n\n
Specifier<\/th>\nStandard behavior<\/th>\nMicrosoft behavior<\/th>\n<\/tr>\n
Nonthrowing<\/span><\/td>\nnoexcept<\/code>
\nnoexcept(true)<\/code><\/td>\n		std::<\/code>terminate<\/code><\/td>\nstd::<\/code>terminate<\/code><\/td>\n<\/tr>\n
throw()<\/code><\/td>\nstd::<\/code>terminate<\/code><\/td>\nstd::<\/code>terminate<\/code><\/td>\n<\/tr>\n
Throwing<\/span><\/td>\nnoexcept(false)<\/code><\/td>\nexception propagates<\/td>\nexception propagates<\/td>\n<\/tr>\n
throw(something)<\/code><\/td>\nnot supported<\/td>\nnot supported<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
The first trick is to use writing-mode: vertical-lr<\/code> 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)<\/code>. The default transform origin is the center of the element, so this works out great.<\/p>\n
Update<\/b>: Also add -ms-writing-mode<\/code> for Internet Explorer.<\/p>\n
The second trick is applying those attributes to an inner SPAN<\/code> element, rather than on the parent TD<\/code>. This gets the box calculations right for the table cell.<\/p>\n
You can apply colors to the various table cells if you want a colored table.<\/p>\n
Here’s the same table in wikitable form, because I had need for that too.<\/p>\n
{| class=\"wikitable\"\r\n|-\r\n! colspan=\"2\" | Specifier\r\n! Standard behavior\r\n! Microsoft behavior\r\n|-\r\n| rowspan=\"2\" | <span style=\"writing-mode: vertical-lr; -ms-writing-mode: tb-rl; transform: rotate(180deg)\">Nonthrowing<\/span>\r\n| <code>noexcept<\/code><br\/><code>noexcept(true)<\/code>\r\n| <code>std::terminate<\/code>\r\n| <code>std::terminate<\/code>\r\n|-\r\n| <code>throw()<\/code>\r\n| <code>std::terminate<\/code>\r\n| <code>std::terminate<\/code>\r\n|-\r\n| rowspan=\"2\" | <span style=\"writing-mode: vertical-lr; -ms-writing-mode: tb-rl; transform: rotate(180deg)\">Throwing<\/span>\r\n| <code>noexcept(false)<\/code>\r\n| exception propagates\r\n| exception propagates\r\n|-\r\n| <code>throw(something)<\/code>\r\n| not supported\r\n| not supported\r\n|-\r\n|}<\/pre>\n","protected":false},"excerpt":{"rendered":"
Here’s how I did it.<\/p>\n","protected":false},"author":1069,"featured_media":111744,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[26],"class_list":["post-99865","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oldnewthing","tag-other"],"acf":[],"blog_post_summary":"
Here’s how I did it.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/99865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/users\/1069"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/comments?post=99865"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/99865\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media\/111744"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media?parent=99865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/categories?post=99865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/tags?post=99865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}