<!DOCTYPE html>
<style>
div.columns {
direction: rtl;
height: 50px;
width: 110px;
margin: 10px 0;
padding: 10px;
border: solid black;
font-family: Ahem;
font-size: 25px;
color: lightblue;
-webkit-columns: 2;
-webkit-column-gap: 10px;
columns: 2;
column-gap: 10px;
column-fill: auto;
display: inline-block;
vertical-align: bottom;
orphans: 1;
widows: 1;
}
div.marker {
position: absolute;
border: solid dodgerblue;
-webkit-box-sizing: border-box;
}
input[type="range"] {
-webkit-appearance: none;
width: 25px;
height: 25px;
background-color: lightblue;
margin: 0;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
}
</style>
<p>
The blue borders should coincide with light blue squares, like this:
<span style="display: inline-block; background-color: lightblue; border: solid dodgerblue; 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 dodgerblue; width: 19px; height: 19px;"></span>.
</p>
<div class="columns" id="t1">
<br>x y z
</div>
<div class="columns">
<br><span id="t2">x y z</span>
</div>
<div class="columns">
<br><div id="t3">x y z</div>
</div>
<div class="columns">
<br><div id="t4"><br>y z</div>
</div>
<div class="columns">
<br><div><br><input id="t5" type="range"></div>
</div>
<div class="columns">
<br><div><br><img id="t6" style="width: 25px; height: 25px; background-color: lightblue;"></div>
</div>
<div class="columns">
<div id="t7" style=" margin-top: 25px; width: 25px; height: 50px; 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;
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);
// Skip the rectangles for the two fragments established by the DIV.
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);
</script>