Vertically align text that is wrapping a shape
Here's a puzzler. I wasn't thrilled with any of the solutions I came up with, so I thought the hive mind might point out a simple solution I'm missing.
- Everything is text.
- The solution has to work with any amount of text in the right-hand area.
- The left-hand circle has a fixed size and limited range of content (no need to worry about overflow)
- HTML can be structured to fit
8 Replies
It's a much trickier challange than it first appears. Shape-outside isn't the problem. It's the vertical alignment of the text.
Here's an early attempt that didn't quite get the centering.
https://codepen.io/schnoggo/pen/VwRbpzz
ah okay, i see what you mean. have to think about this one. there isn't really an obvious sulotion for this
what shoud the text do if it is larger? wrap above and beneath?
so actually the number is centered to the text?
Flipping the relationship might be the trick. But we want the numbers aligned if multiple cards fit. I'll admit the effect is pretty subtle, but I thought it would be a sophisticated touch. 🧐
When it proved to be tricky, I thought I'd share with the class. 
float and vertical alignment will be a real hassel here. shapeoutside needs float, but float will not work in a grid or flex (to be able to vertical align). Am afraid this can only be done with a lot of hardcoded magic numbers
here is an old stack overflow which has a simular question. but it needs to have a specific set heigth
https://stackoverflow.com/questions/32713601/shape-outside-and-vertically-aligned-text
Stack Overflow
shape-outside and vertically aligned text
How do I align the text inside a block vertically? I cannot do that without braking the element on the left side which has a shape-outside property.
.a {
width: 150px;
height: 300px;
Right. I looked into the calculated padding solution but, that requires knowing the height of the text block. Can be done with JavaScript, but I was curious if anyone could think of an elegant all-CSS solution.
I tried a whole bunch of crazy stuff: overlapping grid boxes, pseudo element shapes, padding, margins.
Right now the only solution seems to be the JavaScript-calculated padding-top. But not a very clean solution. And not something I'm going to do for such a subtle effect.
yea, and even with js, it wont be that easy. setting heights is difficult because you have wrapping text which responds to the placement and available width. it could result in a never ending loop. changing the top offset could move something to the right (because of the circle) and wrap to another line (which changes the height again)