<div class="container">
<div class="text">
<p class="title">
<span class="wrapper">
Some text Some text Some text Some text Some text Some text
</span>
<span class="hint">
Some small <br> text
</span>
</p>
</div>
<p class="bottom-text">
Some bottom text
</v>
</div>
.title {
font-weight: 700;
font-size: 40px;
margin: 0;
}
.hint {
font-size: 24px;
display: inline-block;
vertical-align: top;
margin-top: 0.5em;
margin-left: 0.4em;
}
* {
font-family: sans-serif;
}
.bottom-text {
font-size: 18px;
margin: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
}
const a = document.querySelector('.title .wrapper');
const b = document.querySelector('.title .hint');
const clamp = (min, max, value) => Math.max(min, Math.min(max, value));
const calculateIntersection = (a, b) => {
const aRect = a.getBoundingClientRect();
const bRect = b.getBoundingClientRect();
const top = clamp(aRect.top, aRect.bottom, bRect.top);
const right = clamp(aRect.left, aRect.right, bRect.right);
const bottom = clamp(aRect.top, aRect.bottom, bRect.bottom);
const left = clamp(aRect.left, aRect.right, bRect.left);
const width = right - left;
const height = bottom - top;
const totalArea = bRect.width * bRect.height;
const intersectionArea = width * height;
const intersectionRatio = intersectionArea / totalArea;
return intersectionRatio;
};
const update = () => {
const intersectionRatio = calculateIntersection(a, b);
const threshold = 0.5;
if (intersectionRatio >= threshold) {
b.style.setProperty('outline', '2px solid tomato');
} else {
b.style.setProperty('outline', '2px dashed tomato');
}
console.log(intersectionRatio);
};
window.addEventListener('DOMContentLoaded', update);
window.addEventListener('resize', update);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.