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
No description
8 Replies
lonmakes
lonmakes10mo ago
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
MarkBoots
MarkBoots10mo ago
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?
lonmakes
lonmakes10mo ago
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. laugh
MarkBoots
MarkBoots10mo ago
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
MarkBoots
MarkBoots10mo ago
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;
lonmakes
lonmakes10mo ago
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.
MarkBoots
MarkBoots10mo ago
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)
Want results from more Discord servers?
Add your server