JSFiddle - React, Tailwind, and code Playground

by MrPolywhirl

HTML

<div id="output" />

CSS

.col {
    float: left;
}
.v_text_wrapper {
    width: 100px;
    height: 150px;
    background: #AAA;
    border: solid #222 1px;
}
.v_text {
    color: #444;
    font-family: monospace;
    font-weight: bold;
    font-size: 2.5em;
    padding: 0;
    margin: 0;
}

JavaScript

var output = $('#output');

for (var i = 3; i <= 7; i++) {
    var wrapper = $('<div />').addClass('v_text_wrapper col');
    
    var text = '';
    for (var j = 0; j < i; j++) { text += i; }
    
    createVerticalText(output, wrapper, text);
}

function createVerticalText(parent, element, text) {
    var v_text = $('<div />').addClass('v_text').appendTo(element);
    v_text.text(text);
    element.appendTo(parent);
    
    var textWidth = measureTextWidth(v_text);
    var wrapperHeight = getSize(element, 'height');
    var subOffset = ((wrapperHeight - textWidth) / 2);
    var magicOffset = -10;
    var yOffset = (-1 * wrapperHeight / 2 + magicOffset) + subOffset;
    
    var translation = 'rotate(-90deg) translateX('+yOffset+'px)';
    v_text.css({
        '-webkit-transform': translation,
        '-moz-transform':translation,
        '-ms-transform': translation,
        '-o-transform': translation,
        'transform': translation
    });
}

function getSize(ele, prop) {
    return parseInt(ele.css(prop).replace('px', ''));
}

function measureTextWidth(ele) {
    var text = ele.text();
    var textLength = text.length;
    var fontSize = getSize(ele, 'font-size');
    
    return fontSize * textLength * 0.6;
}