It took a significant amount of time, but I finally achieved the following:
window.onload = () => {
const fimg = document.querySelector('#first img')
const fimgWidth = fimg.getBoundingClientRect().width
const simg = document.querySelector('#second img')
const simgWidth = simg.getBoundingClientRect().width
fimg.style.left = `${fimgWidth/2}px`
simg.style.right = `${simgWidth/2}px`
}div {
display: flex;
}
p {
flex: none;
width: 50%;
}
img {
shape-outside: url("https://openclipart.org/download/318603/hand-written-circle-04.svg");
position: relative;
}
#first img {
float: right;
}
#second img {
float: left;
}<div>
<p id="first">
<img src="https://openclipart.org/download/318603/hand-written-circle-04.svg">
<span>Sed ut perspiciatis... [content truncated for brevity]</span>
</p>
<p id="second">
<img src="https://openclipart.org/download/318603/hand-written-circle-04.svg">
<span>Sed ut perspiciatis... [content truncated for brevity]</span>
</p>
</div>The design concept is clear: positioning two paragraphs horizontally with an image in between, ensuring smooth text wrapping around the image.
Although the current solution works as intended, doubts linger regarding its optimal approach:
- Is obtaining the image width through Javascript indicative of overlooking simpler CSS methods?
- Given my aim to use random images from a pool, avoiding hardcoded widths seems essential
- Involving two stacked copies of the image raises concerns. Could single-image placement options be explored further?
- Potential alignment discrepancies due to computational nuances and sub-pixel issues might arise. Is there a more precise alternative to prevent such misalignments?
What alternatives exist for a more streamlined implementation?