Andrey (azangru) wrote,

That frustration and dismay that come with the realization that modern CSS still cannot perform the following basic task: take an element, put it in an arbitrary place within its parent, and wrap parent's text around it:

CSS has position: absolute for precise positioning of an element relative to one of its parents. But position:absolute removes the element from text flow; so parent's text becomes unaware of it and cannot wrap around it.

CSS has floats. Floats were specifically designed to be wrapped. But if you position a float in the bottom-right corner (using margin-top, I guess; although there is a whole other problem with margin-top), the text won't wrap around its top. So that's useless.

(There is an insane hack described on StackOverflow that uses two floats: one that is visible to the user, and the other on top of the first, with zero width and some non-zero height, to push the first one down to the desired position. But this is so dirty and unsustainable that this can't be an acceptable solution).

CSS has grid. But CSS grid can only do rectangles; it cannot do tetris-like polygons that would be needed to simulate wrapping around an element.

Turns out, there was an old proposal for CSS exclusions, which do exactly what I am looking for; and this CSS behaviour was implemented ages ago in IE10; but no other browser has bothered. The status of CSS exclusions is briefly discussed here.

In the moments like these, one fully appreciates how broken and crippled web frontend still is.

  • (no subject)

    This was a good talk. Interesting to see that SvelteKit is taking the same direction as, by using html forms to submit data without the…

  • (no subject)

    A talk about building large-scale (React) apps. These days, the questions that concern me are: - how can a project be scaled up without…

  • (no subject)

    Watched the second episode of The Problem with Jon Stewart. I thought of Jon as an intellectual comedian. Someone who transcends the limitations of…

  • Post a new comment


    default userpic
    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.