2

I'm trying to turn the headers in a MediaWiki table from horizontal to vertical. This way there should be more room for the table data.

I found this MediaWiki template that can turn text in arbitrary direction

https://en.wikipedia.org/wiki/Template:Transform-rotate

This basically works but it does not solve the problem: Within tables it seams that in web-browsers FIRST all cells are layouted and THEN the text is rotated. This way all table header cells will cover the same amount of space after rotation is performed, which does not solve my problem. I require the opposite approach: FIRST rotate the text and THEN layout the table.

How can this achieved by CSS? How can the text be made vertical in table headers this way saving horizontal space?

Regis May
  • 3,070
  • 2
  • 30
  • 51
  • https://stackoverflow.com/questions/6997631/how-to-display-vertical-text-in-table-headers-with-auto-height-without-text-ov/ duplicate or not ? – G-Cyrillus Oct 18 '17 at 15:31
  • @G-Cyr Sure looks like it...you wanna dupehammer it or me? – Paulie_D Oct 18 '17 at 17:32
  • @Paulie_D ?? can you make this in simple words for me, not too sure i understand what you are trying to say ? My english is average you know ... – G-Cyrillus Oct 18 '17 at 17:39
  • I have a Gold Badge in CSS which means I have a Super Close Vote. Meaning I can close this has a duplicate by myself ( I thought you might too) we call it a "dupehammer". Don't worry.. – Paulie_D Oct 18 '17 at 17:41
  • 1
    OP...I hope the linked duplicate is what you are looking for but if there are special MediaWiki rules that will not allow the various solutions listed, please comment and I will re-open. – Paulie_D Oct 18 '17 at 17:43
  • @Paulie_D okay, not too sure if it is, i was expecting some response from the OP if it could fit its question. the wiki template thing is in the way somehow :) – G-Cyrillus Oct 18 '17 at 17:43
  • This is not a duplicate as I address MediaWiki in particular. Therefor we're bound to the syntax MediaWiki (and the Semantic Media Wiki extension) generates. Nevertheless thank you very much for the URL: It provided information particular useful to be able to solve the task at hand. If you reopen the question I'll answer it myself. – Regis May Oct 18 '17 at 18:26
  • re-opened. You may answer and solve yourself your issue. regards – G-Cyrillus Oct 18 '17 at 19:50

1 Answers1

3

Thanks to StackOverflow I was able to learn that there is no easy solution, maybe even no solution at all with CSS2. But it is possible with CSS3.

In order to display text vertically in MediaWiki tables you need to do the following:

  • Wrap the text section to display vertically in a span tag
  • Use the following CSS settings:
    • writing-mode: sideways-lr; - this will enable vertical bottom to top writing style
    • white-space: nowrap; - this will prevent text to wrap; this way you get clean vertical lines
    • min-width: 20px; - this way you will ensure the vertical lines will not get too small

This even works in Semantic Media Wiki queries. You might want to use this for headers of a result table. Example:

{{#ask: [[DevReg:+]] [[DeviceType::Switch]]
|?DeviceManufacturer={{VerticalText|Manufacturer}}
|?DeviceModel={{VerticalText|Model}}
|?DevicePortsGBit={{VerticalText|Ethernet ports}}
|format=table
}}

The template VerticalText should be defined like this:

<includeonly><span style="writing-mode: sideways-lr; white-space: nowrap; min-width: 20px;">{{{1}}}</span></includeonly>
Regis May
  • 3,070
  • 2
  • 30
  • 51
  • I believe that `writing-mode: sideways-lr;` is only supported by firefox at this time . https://developer.mozilla.org/fr/docs/Web/CSS/writing-mode (writing-mode was introduced with IE5 or less with a different syntax btw. it was also a way to trigger the nightmarish "haslayout" ) – G-Cyrillus Oct 18 '17 at 21:24
  • Thank you for that information. Anyway I'd assume that such a vertical text solution should be considered as extremely new. But as time goes by CSS3 support will grow, so I think using this clean approach should be the best way to go even if not yet every browser will support it yet. In case of all cases you might want try to try replacing `sideways-lr` with `vertical-lr` which might be supported already by your browser. But then the text runs vertical from top to bottom which looks a bit weired. Have in mind that with this template approach you're free to change the direction any time later. – Regis May Oct 18 '17 at 21:49
  • maybe i linked to a wrong potential duplicate .. see that demo and the workaround for sideways-lr https://codepen.io/gc-nomade/pen/EKQKBe it includes older browsers too :) – G-Cyrillus Oct 18 '17 at 21:59
  • Oh! That's great! – Regis May Oct 19 '17 at 13:48
  • A super simple solution is also to combine `writing-mode: vertical-lr` which is supported in most browsers with `transform: rotate(180deg)` – user2483352 Aug 21 '21 at 07:05