I want the margin to be be an irregular shape that is fixed so that as I scroll up and down, the spacing of the words will automatically readjust to fit around the shape.
to start I tried making a square using this styling in CSS to make it wrap and stay fixed:
float: left;
shape-outside: square;
position: absolute;
however it seems it cannot float to wrap the text and have the position stay fixed to stop it scrolling out of view, at the same time.
without "position: absolute;" text wraps but shape and text scroll out of viewing range together. Apply it and the text no longer wraps and is behind square, which stays in its position.
if this had worked I would have just created a stack of different sized boxes that were filled transparent to create an irregular left hand margin.
I'm not sure any of this is even possible but if it is, I'm sure there's a much more effective way to do it... any solutions?