How to use transform to align legend in HTML? - html

Question

I have created a discrete legend using HTML, but I am struggling with trying to get the legend title to align correctly, irrespective of the length of the text within the title.
Here is an example of what it looks like in my app for a short title
... whereas this is what it is like for a longer title
Below is an attempt at a minimal working example
/* Split the screen in half */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Control the left side */
.left {
left: 0;
}
/* Control the right side */
.right {
right: 0;
background-color: #999;
}
.box{
background-color: black;
height: 100%;
width: 100%;
}
.my-legend .legend-title {
text-align: center;
margin-bottom: 5px;
font-weight: bold;
font-size: 30px;
color: red;
}
.my-legend .legend-scale ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
float: left;
list-style: none;
}
.my-legend .legend-scale ul li {
text-align: right;
list-style: none;
margin-left: 0;
line-height: 18px;
margin-bottom: 2px;
color: white;
font-size: 20px;
padding-bottom: 40px;
}
.my-legend ul.legend-labels li span {
display: block;
float: right;
height: 45px;
width: 20px;
margin-right: 0px;
margin-left: 5px;
border: 1px solid #999;
}
<div class="row" id="content">
<!-- Image Panel -->
<div class="split left" style="position: relative; height: 800px">
<!-- This is a dynamically generated panel ... but just black here as example -->
<div id="imagePanel" class="box"></div>
<!-- Legend entries -->
<div class='my-legend'
style="position:absolute;
right: 10%; top: 50%;
transform-box: fill-box;
transform: translate(0%,-50%);">
<div class='legend-scale'>
<ul class='legend-labels'>
<li> <b>0</b> <span style="background: rgb(128,64,0)"> </span> </li>
<li> <b>1</b> <span style="background: rgb(251,255,128)"></span> </li>
<li> <b>2</b> <span style="background: rgb(55,128,0)"> </span> </li>
<li> <b>3</b> <span style="background: rgb(128,255,140)"></span> </li>
<li> <b>4</b> <span style="background: rgb(0,128,81)"> </span> </li>
<li> <b>5</b> <span style="background: rgb(128,234,255)"></span> </li>
<li> <b>6</b> <span style="background: rgb(0,38,128)"> </span> </li>
<li> <b>7</b> <span style="background: rgb(157,128,255)"></span> </li>
<li> <b>8</b> <span style="background: rgb(98,0,128)"> </span> </li>
<li> <b>9</b> <span style="background: rgb(255,128,217)"></span> </li>
</ul>
</div>
</div>
<!-- Legend Title -->
<div class='my-legend'
style="position:absolute;
right: 0; top: 50%;
transform-box: fill-box;
transform: translate(0%,-50%);
transform: rotate(-90deg)">
<div class='legend-title' >True Label</div>
</div>
</div>
<!-- Controls -->
<div class="split right" id="controlsPanel" >
Some Other Panel will go here
</div>
</div>

Answer 1

writing-mode should sidestep the width/height headache caused by rotating, but I can't find a way to avoid having to rotate by 180 to flip it the way you want.
Edit: Replaced absolute/relative positioning with grid, positioned legend text without overlay.
/* Split the screen in half */
body {
margin: 0;
}
.row {
display: grid;
grid-template-columns: 50% 50%;
}
.left {
display: grid;
grid-template-columns: 4fr min-content 1fr;
background-color: black;
}
.right {
background-color: #999;
}
.legend-title {
max-height: 40ch;
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: center;
font-weight: bold;
font-size: 2rem;
color: red;
}
.my-legend .legend-scale ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
float: left;
list-style: none;
}
.my-legend .legend-scale ul li {
text-align: right;
list-style: none;
margin-left: 0;
line-height: 18px;
margin-bottom: 2px;
color: white;
font-size: 20px;
padding-bottom: 40px;
}
.my-legend ul.legend-labels li span {
display: block;
float: right;
height: 45px;
width: 20px;
margin-right: 0px;
margin-left: 5px;
border: 1px solid #999;
}
<div class="row" id="content">
<!-- Image Panel -->
<div class="split left">
<!-- This is a dynamically generated panel ... but just black here as example -->
<div id="imagePanel" class="box"></div>
<!-- Legend entries -->
<div class='my-legend'>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><b>0</b> <span style="background: rgb(128,64,0)"></span></li>
<li><b>1</b> <span style="background: rgb(251,255,128)"></span></li>
<li><b>2</b> <span style="background: rgb(55,128,0)"></span></li>
<li><b>3</b> <span style="background: rgb(128,255,140)"></span></li>
<li><b>4</b> <span style="background: rgb(0,128,81)"></span></li>
<li><b>5</b> <span style="background: rgb(128,234,255)"></span></li>
<li><b>6</b> <span style="background: rgb(0,38,128)"></span></li>
<li><b>7</b> <span style="background: rgb(157,128,255)"></span></li>
<li><b>8</b> <span style="background: rgb(98,0,128)"></span></li>
<li><b>9</b> <span style="background: rgb(255,128,217)"></span> </li>
</ul>
</div>
</div>
<!-- Legend Title -->
<div class='legend-title'>True Label test test test test test test test test test test test test test test test test test test test</div>
</div>
<!-- Controls -->
<div id="controlsPanel" class="split right">
Some Other Panel will go here
</div>
</div>