<!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;
}
#htb:focus {
outline: 0px solid transparent;
}
#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'>
var atm=false;
function donc(evt) {
if (!atm) {
atm=true;
setTimeout(atmfalse, 1000);
}
}
function prehtbtop() {
varwas='';
if (!atm) {
atm=true;
var athiscont=prompt('Enter URL for content above', '');
setTimeout(atmfalse, 1000);
if (athiscont) {
if (athiscont.indexOf('//') == 0) {
was=athiscont;
athiscont='http:' + was;
} else if (athiscont.toLowerCase().indexOf('www.') == 0) {
was=athiscont;
athiscont='http://' + was;
} else if (athiscont.indexOf('../') == 0) {
was=athiscont;
athiscont='http://www.rjmprogramming.com.au/HTMLCSS/' + was;
} else if (athiscont.indexOf('./') == 0) {
was=athiscont;
athiscont='http://www.rjmprogramming.com.au/HTMLCSS/' + (was + ' ').substring(2).trim();
} else if (athiscont.indexOf('.') != -1 && athiscont.toLowerCase().indexOf('http') != 0) {
was=athiscont;
athiscont='http://www.rjmprogramming.com.au/HTMLCSS/' + was;
}
var isok=athiscont.match(/^(http|https):\/\/www\.[a-zA-Z]+\.[a-zA-Z]+|www\.[a-zA-Z]+\.[a-zA-Z]+|[a-zA-Z]+\.[a-z]+$/);
if (isok) {
htbtop(athiscont);
}
}
}
}
function htbtop(urlis) {
if (urlis != '') {
var sofarih=document.getElementById('htb').innerHTML;
var prefix='<iframe src="' + urlis + '" style="width:100%;height:90vh;"></iframe><br>';
document.getElementById('htb').innerHTML=prefix + sofarih;
}
}
function atmfalse() {
atm=false;
}
function addtome(athis) {
if (!atm) {
atm=true;
var athiscont=prompt('Change content as required', athis.innerHTML.replace(/\ \;/g, ' '));
if (athiscont) {
athis.innerHTML=athiscont.replace(/\ /g, ' ');
}
}
setTimeout(atmfalse, 1000);
}
function justify(osel) {
var oselval=osel.value.split(' ')[eval(-1 + osel.value.split(' ').length)];
if (osel.id.indexOf('st') != -1) { // top
document.getElementById('htb').style.width='100%';
document.getElementById('htb').style.textAlign=oselval;
} else { // bottom
document.getElementById('htb').style.width='100%';
document.getElementById('htb').style.textAlign=oselval;
}
}
function changecontent(odiv) {
if (!atm) {
atm=true;
var athiscont=prompt('Change div content as required', odiv.innerHTML);
if (athiscont) {
odiv.innerHTML=athiscont;
}
}
setTimeout(atmfalse, 1000);
}
</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 onclick=donc(event); onfocus=donc(event); contenteditable=true id=htb class=htb style='width:100%;text-align:left;outline: 0px solid transparent;caret-color: transparent;'>Some <select id=stl onchange=justify(this)><option value='top left'>top left</option><option value='top center'>top center</option><option value='top right'>top right</option></select> 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.htm?called=y'></iframe></div>");
} else {
document.write("<div title='A click here can change the content here.' onclick=changecontent(this); id='wrapi' style='border:0px solid brown;'><div onclick=donc(event); onfocus=donc(event); contenteditable=true id=htb class=htb style='outline: 0px solid transparent;caret-color: transparent;width:100%;text-align:right;vertical-align:baseline;'>Some <select id=sbr onchange=justify(this);><option value='bottom right'>bottom right</option><option value='bottom center'>bottom center</option><option value='bottom left'>bottom left</option></select> 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<span style='cursor:pointer;' onclick='prehtbtop();' title='Optionally enter URL for an iframe content means, abocve.'>.</span></div></div>");
}
</script>
</body>
</html>