[rjwse@aol.com]

Does anyone know of a construction suitable for responsively sized text which is not pegged to the whole screen? VW relates to the entire screen, not the column. I am looking for a method, perhaps with javascript which will resize a paragraph of bordered multi-line text progressively and as the number of columns change. I tried SVG but it requires an external link and is slow to load in an epub.

<style> ol{ border:black solid 1px; background-color:khaki; border-radius:10px; padding:.5em;} img{border-radius:10px;}
.container {position: relative; text-align: left; color: ;}
.bot{bottom:-.5em}
.top{top:-.5em}
.lft{left:-.5em}
.rgt{right:-.5em}
.mid{top:50%; transform:translate(0%, -50%)}
.ctr{left:50%;transform:translate(-50%, 0%)}  
.mid+.ctr{transform:translate(-50%, -1em);}
div div {background-color:khaki; border-radius: 10px; padding:.5em; font-size:.5em; position: absolute;} </style>
<ol><div class="container">  <img src="1.jpg" style="width:100%;"> </img>
  <div class="top lft">top lft</div>
  <div class="top ctr">top ctr</div>
  <div class="top rgt">top rgt<br/>hello!<br/>how are you?</div>
  <div class="mid lft">mid lft</div>
  <div class=" mid ctr">mid ctr</div>
  <div class="mid rgt">mid rgt</div>
  <div class="bot lft">bot lft</div>
  <div class="bot  ctr">bot ctr</div>
  <div class="bot rgt">bot rgt</div> </div></ol>

Best regards, Pop