How do I make text wrap around an image?

General
1

E.g. similar to this: https://github.com/docmost/docmost/pull/1132 I figured that should be possible with a space style, but I’m not sure how. Any insight would be greatly appreciated!

2

Welcome! Because the images are wrapped in divs with the class sb-inline-content, you could add a space-style block with something like:

.sb-inline-content {
  float: left;
  max-width: 40%;
  padding: 2rem;
}

That will float all your images (and probably other media types) left, though. Stealing from a comment on stack overflow, you could write your images with alt-text that can be targeted with css:

![image-right](image-file.jpg)
or
![image-left](image-file.jpg)

and have css to select the containing div if it has an image with that alt text:

.sb-inline-content:has(img[alt="image-left"]) {
  float: left;
  max-width: 40%;
  padding: 2rem;
}
.sb-inline-content:has(img[alt="image-right"]) {
  float: right;
  max-width: 40%;
  padding: 2rem;
}

(I just randomly chose 40% max width and 2rem padding, btw). With that you can selectively float an image left or right:

Screenshot 2025-05-06 at 08.55.20
Screenshot 2025-05-06 at 08.55.201608×1552 225 KB

3 Likes
3

A word of warning to anyone using the hack above:

Messing with the flow of the document like that messes up keyboard navigation (vim and regular), click navigation, and probably some other stuff. I think this is due to how the images are set up as CodeMirror widgets. The HTML elements on the page appear to have the correct sizes and locations. It is acting like the original location of the image and text on the page are used for navigation somehow.

I would recommend applying those changes if a page isn’t edited often.

1 Like
4

Thank you for this, I’ll give it a go. It’s very unfortunate, that this solution does not work well with editing. Is it worth opening an issue for the feautre request, if currently there is not clean way of doing this?

PS. Yeah, I just tried that, it works, but is not very workable due to the limitation ;( Thank you for your help!

5

I will open an issue on the GitHub and continue tinkering with it. I think I have tracked down what is causing the problem, but I haven’t tried to patch it so I might be wrong.

6

Many thanks! The issue is https://github.com/silverbulletmd/silverbullet/issues/1378.