| <!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; |
| } |
| |
| 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> |
| |
| <p> |
| Except here, where the blue border should be around the bigger slice of the blue square, on the left. |
| </p> |
| |
| <div class="columns"> |
| <div id="t7" style=" margin-top: 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; |
| 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, 1); |
| |
| 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> |
