Fix inline images #710

choldgraf · 2025-11-24T21:48:45Z

Fixes Images that are given in-line still have line-breaks #709
Adds an extra build step to the dev docs
Fixes a bug where centered images (the default) would remove their bottom margin, fixes not enough space after an image #94

New inline images (we didn't have an example before so I added one):

changeset-bot · 2025-11-24T21:48:49Z

🦋 Changeset detected

Latest commit: 4e70519

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 15 packages

Name	Type
myst-to-react	Patch
@myst-theme/styles	Patch
@myst-theme/providers	Patch
@myst-theme/frontmatter	Patch
@myst-theme/diagrams	Patch
@myst-theme/jupyter	Patch
@myst-theme/site	Patch
@myst-theme/common	Patch
@myst-theme/icons	Patch
@myst-theme/search	Patch
@myst-theme/search-minisearch	Patch
@myst-theme/landing-pages	Patch
@myst-theme/book	Patch
@myst-theme/article	Patch
myst-demo	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify · 2025-11-24T21:48:50Z

✅ Deploy Preview for myst-theme ready!

Name	Link
🔨 Latest commit	`4e70519`
🔍 Latest deploy log	https://app.netlify.com/projects/myst-theme/deploys/6926209709a4f80008e9e9ac
😎 Deploy Preview	https://deploy-preview-710--myst-theme.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

stefanv · 2025-11-24T21:54:04Z

The PR captions says "Centers figure captions under the figure", but I don't see that in the screenshot. Presumably, captions are meant to remain left-aligned?

choldgraf · 2025-11-24T21:55:22Z

I'm working on the screenshot! needed netlify to finish building

choldgraf · 2025-11-24T21:58:07Z

@stefanv ok check the PR body again

stefanv · 2025-11-24T21:55:45Z

docs/developer/local.md

+```
+
+This is a requirement of the way our static site is generated.
+It expects to find a built theme locally, and the `myst start --headless` command below will error if it isn't done at least once.


If you build the theme, then it should not be necessary to run a separate content/theme server.

Also, can we pull this out into another PR, please?

Yes, but myst start --headless will not find the theme that is coded in myst.yml and will barf at you.

I can make this another PR. IMO that is unnecessary toil for a very small docs improvement but I'll do so now.

stefanv · 2025-11-24T21:57:34Z

styles/figures.css

  font-size: 1.4rem;
 }
+/* Center captions for standard figures to match centered images */
+figure:not(.fig-quote) figcaption {


Just to make sure I understand: is this CSS rule sufficient to capture all cases?

OK I figured out a more targeted rule to just capture the figure directive case, because I realized that we're using <figure> in a few other ways as well (like pull quotes)

stefanv · 2025-11-24T21:59:16Z

styles/typography.css

+  .prose dd img {
    margin: 0;
    display: inline-block;
+    vertical-align: text-bottom;


Do we want text-bottom or baseline?

https://www.w3schools.com/cssref/tryit.php?filename=trycss_vertical-align

hmmm maybe I should just remove this and not be opinionated about it until we see what behavior people expect?

I've removed all the CSS rules possible!

stefanv · 2025-11-24T21:59:39Z

styles/typography.css

    display: inline-block;
+    vertical-align: text-bottom;
+    max-height: 1.2em;
+    width: auto;


stefanv · 2025-11-24T22:00:00Z

package.json

    "compile": "turbo run compile",
    "build": "turbo run build",
-    "dev": "turbo run dev --parallel --filter='./packages/*'",
+    "dev": "turbo run dev --parallel --filter='./packages/*' --filter=@myst-theme/styles",


Do you mind making a separate PR for unrelated changes?

It turns out this wasn't necessary after all! I, an idiot, was running my theme server in the wrong folder because I'm using worktrees

stefanv · 2025-11-24T22:01:34Z

Central captioning looks better, indeed so 👍

choldgraf · 2025-11-24T22:33:20Z

OK I figured out some improvements:

We now have a more targeted rule for the figure centering stuff.
We left-justify the text, but center it with width: fit-content so it should now center under the image, BUT also be left-justified.

stefanv · 2025-11-24T22:38:53Z

docs/myst.yml

      children:
      - pattern: 'reference/!(index)*.md'
-    - file: developer/index.md
+    - title: Developer documentation


Unintended change?

There is no developer/index.md so I saw an error! Do you want me to make another PR for this one too?

Oh, darnit... I have the index.md lying around.

I will make PR.

styles/figures.css

docs/myst.yml

akhmerov · 2025-11-25T00:06:43Z

I believe this PR fixes #94 as well

agoose77 · 2025-11-25T10:17:33Z

Thanks for the work @choldgraf and @stefanv!

I think we need to be a bit cautious on the basis that caption centering is a fairly big visual change, so it would be nice to discuss it a little.

When I saw changes to caption centering, I did some digging into the existing MyST behaviour — because I prefer the behaviour to JB1. Here's an example of what I think feels like a regression vs HEAD:

vs

I think my preference is:

Left aligned text (text-align: left)
Left justified text (margin-left: 0)

My preference sits in contrast to the defaults with subfigures in LaTeX, so I'm happy to acknowledge that I might be the odd one out. If that's the case, can we do something to improve the primary caption's visual precedence?

Maybe it just needs to be slightly bigger (or, subcaptions to be slightly smaller) e.g.

choldgraf · 2025-11-25T16:19:28Z

If the captions are going to require discussion then I will move them into a different PR. IMO, the current behavior is a bug but if @agoose77 thinks it's a feature we can discuss.

Here's the PR around figure captions:

Improve caption alignment for figures #715

For design decisions, I'd like us to have a design reference we can point to in order to make these decisions, so that it doesn't come down to individual team member preference. What is the design inspiration for the MyST Theme?

If there is a clear path forward given to me in that one, I can put some cycles into trying to achieve it. But just being honest here: I don't have a ton of time to do back-and-forths with conflicting and subjective design opinions, so if we don't have a clear direction I'll probably just leave the behavior as-is and drop that PR (any body else is welcome to pick it up and put it over the finish line though)

stefanv · 2025-11-25T20:08:21Z

Given that @choldgraf pulled out the figure caption changes that require further discussion, this one should be good to go.

choldgraf added 2 commits November 24, 2025 12:41

Document inline images and build instructions

c92a34b

FIX: Inline images now work

ae80cd2

Merge branch 'main' into fix-inline-images

94f8399

choldgraf changed the title ~~Document inline images and build instructions~~ Fix inline images and caption centering and add build instructions Nov 24, 2025

Fix inline images and centered figure captions

2cfd5b4

stefanv reviewed Nov 24, 2025

View reviewed changes

choldgraf added 2 commits November 24, 2025 14:30

Fix dev index link

82778b0

Address comments

436559f

choldgraf changed the title ~~Fix inline images and caption centering and add build instructions~~ Fix inline images and figure caption centering and add build instructions Nov 24, 2025

Remove local build fix doc because stefan wants me to ;-)

aaaf135

choldgraf changed the title ~~Fix inline images and figure caption centering and add build instructions~~ Fix inline images and figure caption centering Nov 24, 2025

Merge branch 'main' into fix-inline-images

b5cea00

stefanv reviewed Nov 24, 2025

View reviewed changes

choldgraf commented Nov 24, 2025

View reviewed changes

styles/figures.css Show resolved Hide resolved

Apply suggestion from @choldgraf

70ce612

choldgraf commented Nov 24, 2025

View reviewed changes

docs/myst.yml Outdated Show resolved Hide resolved

choldgraf added 4 commits November 24, 2025 14:53

Apply suggestion from @choldgraf

59e168e

Merge branch 'main' into fix-inline-images

be7b1a5

Fix centered image margin bug

d6d2cea

Vertical align inline images to text-bottom

925eea4

Remove figures changes

15296ee

choldgraf changed the title ~~Fix inline images and figure caption centering~~ Fix inline images Nov 25, 2025

stefanv approved these changes Nov 25, 2025

View reviewed changes

chore: fix changeset

4e70519

agoose77 merged commit bd19488 into jupyter-book:main Nov 25, 2025
2 of 3 checks passed

This was referenced Nov 26, 2025

🎆 Support inline property on image nodes #248

Closed

🎆 Add inline property to images in paragraphs jupyter-book/mystmd#641

Closed

Images that are inline with text jupyter-book/mystmd#583

Closed

Fix inline images #710

Fix inline images #710

Conversation

choldgraf commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

netlify bot commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for myst-theme ready!

Uh oh!

stefanv commented Nov 24, 2025

Uh oh!

choldgraf commented Nov 24, 2025

Uh oh!

choldgraf commented Nov 24, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

stefanv commented Nov 24, 2025

Uh oh!

choldgraf commented Nov 24, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

akhmerov commented Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

agoose77 commented Nov 25, 2025

Uh oh!

choldgraf commented Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

stefanv commented Nov 25, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

choldgraf commented Nov 24, 2025 •

edited

Loading

changeset-bot bot commented Nov 24, 2025 •

edited

Loading

netlify bot commented Nov 24, 2025 •

edited

Loading

akhmerov commented Nov 25, 2025 •

edited

Loading

choldgraf commented Nov 25, 2025 •

edited

Loading