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)

    A beautiful cartoon on the front page of The Week:

  • (no subject)

    This is just as bad as a brief exchange with a belligerent guest on a regular news show: Six minutes! Six minutes, during which Rand Paul is…

  • (no subject)

    The war on repetitions:

  • 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.