How to Center Text Horizontally and Vertically in Cojunction with 'Writing-Mode: Sideways-Lr'

How to center text horizontally and vertically in cojunction with 'writing-mode: sideways-lr'?

Consider an extra span where you apply the property and better use writing-mode: vertical-rl;transform: scale(-1); to have better support (your code works only on Firefox actually)

div {  width: 200px;  height: 100px;  text-align: center;  vertical-align: middle;  border: solid;  display: table-cell;}
.side span {  /* writing-mode: sideways-lr; */  writing-mode: vertical-rl;  transform: scale(-1);}

<div>My text</div><br><div class="side"><span>My text</span></div>

How to write vertical text from bottom to top without using transform rotate?

I combined writing-mode and rotation:

    .rotated {        writing-mode: tb-rl;        transform: rotate(-180deg);    }

<div class="rotated">Text from bottom with working width/height</div>

HTML/CSS : How to write a text vertically, keeping the characters horizontally

You may use the writing-mode CSS property in conjunction with the text-orientation CSS property.

div {
  writing-mode: vertical-lr;
  text-orientation: upright;
}

To quote, writing-mode property..

[..]specifies the block flow direction, which is the direction in
which block-level containers are stacked, and the direction in which
inline-level content flows within a block container. Content flows
vertically from top to bottom, horizontally from right to left. The
next vertical line is positioned to the left of the previous line.

In effect, this defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

text-orientation property defines the orientation of the text characters in a line. This property only has an effect in vertical mode.

Example:

p:first-of-type {  writing-mode: vertical-lr;}p:last-of-type {  writing-mode: vertical-lr;  text-orientation: upright;}

<h4>With writing mode "vertical-lr"</h4><p>Start</p><hr><h4>With writing mode "vertical-lr" and text-orientation "upright"</h4><p>Start</p>

Keeping the table heading row height large enough for the rotated text

Change Some CSS

body {
    font-family: Calibri;
    font-size: 10pt;
}

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}
table th{
    overflow: hidden; /* Added This*/
}
table th, td {
    border: 1px #d3d3d3 solid;
    padding:2px;
}

table tbody tr:hover td {
    color: #000;
    background: #efefef;
}

.rowHeadings {
    background-color: gray;
}

.cellVerticalHeading p { /*Change Here*/
    /*text-align:center;*/
    white-space:nowrap;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    
}

.cellVerticalHeading p {/*Change Here*/
    display:inline-block;
    line-height: 5.2;
}

.cellVerticalHeading p:before{/*Change Here*/
    content:'';
    width:0;
    padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
    display:inline-block;
}

.cellAssignment{
    text-align:center;
    vertical-align:middle;
}

@media print {
   thead {
       display: table-header-group;
   }

   /*table tbody tr td:before,
   table tbody tr td:after {
        content : "" ;
        height : 4px ;
        display : block ;
    }*/
}

https://jsfiddle.net/lalji1051/pvwg6ur0/2/

Vertical alignment of rotated text in a table cell

use transform-origin

#galley th.vertical-label{      
    -webkit-transform: rotate(270deg) translateX(100%) translateY(33%);
    -moz-transform: rotate(270deg) translateX(100%) translateY(33%);
    -o-transform: rotate(270deg) translateX(100%) translateY(33%);
     -webkit-transform-origin: 100% 100%;
     -moz-transform-origin: 100% 100%;
     -o-transform-origin: 100% 100%;
    writing-mode: lr-tb;
}

DEMO

---

Related Topics