255 lines
8.1 KiB
HTML
255 lines
8.1 KiB
HTML
<head>
|
|
<style>
|
|
div.columns {
|
|
display:inline-block;
|
|
-webkit-logical-height: 90px;
|
|
-webkit-logical-width: 100px;
|
|
-webkit-margin-before: 10px;
|
|
-webkit-margin-after: 10px;
|
|
padding: 5px;
|
|
border: solid black;
|
|
font-family: ahem;
|
|
font-size: 25px;
|
|
color: lightblue;
|
|
-webkit-columns: 2;
|
|
-webkit-column-gap: 5px;
|
|
-webkit-column-fill: auto;
|
|
columns: 2;
|
|
column-gap: 5px;
|
|
column-fill: auto;
|
|
}
|
|
|
|
div.marker {
|
|
position: absolute;
|
|
border: solid rgba(0, 0, 255, 0.5);
|
|
-webkit-box-sizing: border-box;
|
|
}
|
|
|
|
input[type="range"] {
|
|
-webkit-appearance: none;
|
|
width: 25px;
|
|
height: 25px;
|
|
background-color: lightblue;
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.vertical { -webkit-writing-mode: vertical-lr; }
|
|
.vertical.flipped { -webkit-writing-mode: vertical-rl; }
|
|
|
|
div.span { -webkit-column-span: all; -webkit-logical-height:30px; background-color:silver; }
|
|
|
|
div.above { background-color: navy; -webkit-logical-height:10px; }
|
|
|
|
</style>
|
|
</head>
|
|
<p>
|
|
The blue borders should coincide with light blue squares, like this:
|
|
<span style="display: inline-block; background-color: lightblue; border: solid rgba(0, 0, 255, 0.5); width: 19px; height: 19px;"></span>.
|
|
There should be none of this:
|
|
<span style="display: inline-block; background-color: lightblue; width: 25px; height: 25px;"></span>
|
|
or this:
|
|
<span style="display: inline-block; border: solid rgba(0, 0, 255, 0.5); width: 19px; height: 19px;"></span>.
|
|
</p>
|
|
<div class="columns" id="t1"><div class="above"></div><div class="span"></div>
|
|
<br>x y z
|
|
</div>
|
|
|
|
<div class="columns"><div class="above"></div><div class="span"></div>
|
|
<br><span id="t2">x y z</span>
|
|
</div>
|
|
|
|
<div class="columns"><div class="above"></div><div class="span"></div>
|
|
<br><div id="t3">x y z</div>
|
|
</div>
|
|
|
|
<div class="columns"><div class="above"></div><div class="span"></div>
|
|
<br><div id="t4"><br>y z</div>
|
|
</div>
|
|
|
|
<div class="columns"><div class="above"></div><div class="span"></div>
|
|
<br><div><br><input id="t5" type="range"></div>
|
|
</div>
|
|
|
|
<div class="columns"><div class="above"></div><div class="span"></div>
|
|
<br><div><br><img id="t6" style="width: 25px; height: 25px; background-color: lightblue;"></div>
|
|
</div>
|
|
<div class="columns"><div class="above"></div><div class="span"></div>
|
|
<div id="t7" style=" margin-top: 40px; width: 25px; height: 25px; background-color: lightblue;"></div>
|
|
</div>
|
|
|
|
<div class="columns vertical" id="t8"><div class="above"></div><div class="span"></div>
|
|
<br>x y z
|
|
</div>
|
|
|
|
<div class="columns vertical"><div class="above"></div><div class="span"></div>
|
|
<br><span id="t9">x y z</span>
|
|
</div>
|
|
|
|
<div class="columns vertical"><div class="above"></div><div class="span"></div>
|
|
<br><div id="t10">x y z</div>
|
|
</div>
|
|
|
|
<div class="columns vertical"><div class="above"></div><div class="span"></div>
|
|
<br><div id="t11"><br>y z</div>
|
|
</div>
|
|
|
|
<div class="columns vertical"><div class="above"></div><div class="span"></div>
|
|
<br><div><br><input id="t12" type="range"></div>
|
|
</div>
|
|
|
|
<div class="columns vertical"><div class="above"></div><div class="span"></div>
|
|
<br><div><br><img id="t13" style="width: 25px; height: 25px; background-color: lightblue;"></div>
|
|
</div>
|
|
<div class="columns vertical"><div class="above"></div><div class="span"></div>
|
|
<div id="t14" style=" -webkit-margin-before: 40px; width: 25px; height: 25px; background-color: lightblue;"></div>
|
|
</div>
|
|
|
|
|
|
<div class="columns vertical flipped" id="t15"><div class="above"></div><div class="span"></div>
|
|
<br>x y z
|
|
</div>
|
|
|
|
<div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
|
|
<br><span id="t16">x y z</span>
|
|
</div>
|
|
|
|
<div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
|
|
<br><div id="t17">x y z</div>
|
|
</div>
|
|
|
|
<div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
|
|
<br><div id="t18"><br>y z</div>
|
|
</div>
|
|
|
|
<div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
|
|
<br><div><br><input id="t19" type="range"></div>
|
|
</div>
|
|
|
|
<div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
|
|
<br><div><br><img id="t20" style="width: 25px; height: 25px; background-color: lightblue;"></div>
|
|
</div>
|
|
<div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
|
|
<div id="t21" style="-webkit-margin-before: 40px; width: 25px; height: 25px; background-color: lightblue;"></div>
|
|
</div>
|
|
|
|
<script>
|
|
function placeMarker(clientRect)
|
|
{
|
|
var marker = document.body.appendChild(document.createElement("div"));
|
|
marker.className = "marker";
|
|
marker.style.left = clientRect.left + "px";
|
|
marker.style.top = clientRect.top + "px";
|
|
marker.style.width = clientRect.width + "px";
|
|
marker.style.height = clientRect.height + "px";
|
|
}
|
|
|
|
function placeMarkersForRange(range, startOffset)
|
|
{
|
|
if (startOffset === undefined)
|
|
startOffset = 0;
|
|
|
|
var clientRects = range.getClientRects();
|
|
for (var i = startOffset; i < clientRects.length; ++i)
|
|
placeMarker(clientRects[i]);
|
|
}
|
|
|
|
var range = document.createRange();
|
|
|
|
var textNode = document.getElementById("t1").firstChild.nextSibling.nextSibling.nextSibling.nextSibling;
|
|
range.setStart(textNode, 0);
|
|
range.setEnd(textNode, 5);
|
|
placeMarkersForRange(range);
|
|
|
|
textNode = document.getElementById("t2").firstChild;
|
|
range.setStart(textNode, 0);
|
|
range.setEnd(textNode, 5);
|
|
placeMarkersForRange(range);
|
|
|
|
textNode = document.getElementById("t3").firstChild;
|
|
range.setStart(textNode, 0);
|
|
range.setEnd(textNode, 5);
|
|
placeMarkersForRange(range);
|
|
|
|
var block = document.getElementById("t4");
|
|
range.selectNode(block);
|
|
placeMarkersForRange(range, 2);
|
|
|
|
var slider = document.getElementById("t5");
|
|
range.selectNode(slider);
|
|
placeMarkersForRange(range);
|
|
|
|
var image = document.getElementById("t6");
|
|
range.selectNode(image);
|
|
placeMarkersForRange(range);
|
|
|
|
var div = document.getElementById("t7");
|
|
range.selectNode(div);
|
|
placeMarkersForRange(div);
|
|
|
|
var textNode = document.getElementById("t8").firstChild.nextSibling.nextSibling.nextSibling.nextSibling;
|
|
range.setStart(textNode, 0);
|
|
range.setEnd(textNode, 5);
|
|
placeMarkersForRange(range);
|
|
|
|
textNode = document.getElementById("t9").firstChild;
|
|
range.setStart(textNode, 0);
|
|
range.setEnd(textNode, 5);
|
|
placeMarkersForRange(range);
|
|
|
|
textNode = document.getElementById("t10").firstChild;
|
|
range.setStart(textNode, 0);
|
|
range.setEnd(textNode, 5);
|
|
placeMarkersForRange(range);
|
|
|
|
var block = document.getElementById("t11");
|
|
range.selectNode(block);
|
|
placeMarkersForRange(range, 2);
|
|
|
|
var slider = document.getElementById("t12");
|
|
range.selectNode(slider);
|
|
placeMarkersForRange(range);
|
|
|
|
var image = document.getElementById("t13");
|
|
range.selectNode(image);
|
|
placeMarkersForRange(range);
|
|
|
|
var div = document.getElementById("t14");
|
|
range.selectNode(div);
|
|
placeMarkersForRange(div);
|
|
|
|
var textNode = document.getElementById("t15").firstChild.nextSibling.nextSibling.nextSibling.nextSibling;
|
|
range.setStart(textNode, 0);
|
|
range.setEnd(textNode, 5);
|
|
placeMarkersForRange(range);
|
|
|
|
textNode = document.getElementById("t16").firstChild;
|
|
range.setStart(textNode, 0);
|
|
range.setEnd(textNode, 5);
|
|
placeMarkersForRange(range);
|
|
|
|
textNode = document.getElementById("t17").firstChild;
|
|
range.setStart(textNode, 0);
|
|
range.setEnd(textNode, 5);
|
|
placeMarkersForRange(range);
|
|
|
|
var block = document.getElementById("t18");
|
|
range.selectNode(block);
|
|
placeMarkersForRange(range, 2);
|
|
|
|
var slider = document.getElementById("t19");
|
|
range.selectNode(slider);
|
|
placeMarkersForRange(range);
|
|
|
|
var image = document.getElementById("t20");
|
|
range.selectNode(image);
|
|
placeMarkersForRange(range);
|
|
|
|
var div = document.getElementById("t21");
|
|
range.selectNode(div);
|
|
placeMarkersForRange(div);
|
|
|
|
</script>
|