<!doctype html>
<html>
<head>
<title>Text to Screen Corners and Up and Down - RJM Programming - August, 2019 ... thanks to https://www.w3schools.com/cssref/css3_pr_writing-mode.asp and https://stackoverflow.com/questions/41143210/css-element-height-minus-height-of-a-element-with-changing-height and https://stackoverflow.com/questions/17123327/align-text-to-the-bottom-of-a-div</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
/* Thanks to https://www.w3schools.com/cssref/css3_pr_writing-mode.asp and https://stackoverflow.com/questions/41143210/css-element-height-minus-height-of-a-element-with-changing-height and https://stackoverflow.com/questions/17123327/align-text-to-the-bottom-of-a-div */

html, body, #wrapper {
height: 99%;
overflow: hidden;
}

#wrapper {
display: flex;
flex-direction: column;
}

#frame-fill {
flex-grow: 1;
}

#wrapi {
height: 99%;
width: 100%;
display: flex;
background: URL('./hmeetsv.jpg');
background-repeat: no-repeat;
background-size: 50% 50%;
background-color: #ffffff;
}

#wrapi div {
align-self: flex-end;
}

#wrapi p {
align-self: flex-end;
}

#wrapi span {
align-self: flex-end;
}

div.htb {
writing-mode: horizontal-tb;
}

div.vrl {
writing-mode: vertical-rl;
}

div.vlr {
writing-mode: vertical-lr;
}

p.htb {
writing-mode: horizontal-tb;
}

p.vrl {
writing-mode: vertical-rl;
}

p.vlr {
writing-mode: vertical-lr;
}

span.htb {
writing-mode: horizontal-tb;
}

span.vrl {
writing-mode: vertical-rl;
}

span.vlr {
writing-mode: vertical-lr;
}

a.htb {
writing-mode: horizontal-tb;
}

a.vrl {
writing-mode: vertical-rl;
}

a.vlr {
writing-mode: vertical-lr;
}
</style>

<script type='text/javascript'>
function addtome(athis) {
var athiscont=prompt('Change content as required', athis.innerHTML.replace(/\ \;/g, ' '));
if (athiscont) {
athis.innerHTML=athiscont.replace(/\ /g, ' ');
}
}
</script>
</head>
<body style='background-color: #f0f0f0;'>

<script type='text/javascript'>
if (document.URL.indexOf('called=') == -1) {
document.write("<div id='wrapper' style='border:0px solid red;'><div class=htb style='width:100%;'>Some top left text with an editable <a title='Click me to change this vertical text' style='display:inline;cursor:pointer;text-decoration:none;' onclick='addtome(this);' class=vlr>✏️</a> writing-mode.</div><iframe frameborder=0 id='frame-fill' src='./hmeetsv.html?called=y'></iframe></div>");
} else {
document.write("<div id='wrapi' style='border:0px solid brown;'><div class=htb style='width:100%;text-align:right;vertical-align:baseline;'>Some bottom right text with an editable <a title='Click me to change this vertical text' style='display:inline;cursor:pointer;text-decoration:none;' onclick='addtome(this);' class=vlr>✏️</a> writing-mode.</div></div>");
}
</script>
</body>
</html>