Repository navigation
Fit a box to the picture inside it in HTML - #47
Merged
Merged
Conversation
The figure's <img> sat on the text baseline, leaving a descender-high band under it, and .ms-box padded only its sides, so the picture touched the top border. Align the picture to the top of its line, give a bordered box's lone-line picture the box padding above and below, and carry Frame.Padding into the HTML as --ms-pad. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PQJ7GSkYEQFfHqmQDwxbg9
|
Note Currently processing new changes in this PR. This may take a few minutes, please wait... ⚙️ Run configuration
📒 Files selected for processing (4)
✨ Finishing Touches📝 Generate docstrings
Comment |
Grave preferred the picture filling the box over even padding. A box whose body is a lone picture on its own line is marked ms-box-picture: no padding, and no wider than the picture. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PQJ7GSkYEQFfHqmQDwxbg9
HarryCordewener
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Requested by Grave · project thread
Before: in the browser,
box(figure(...))drew the picture touching the box's top border, with a band about a descender high under it and 1ch of padding on the left and right. Measured in Chromium for a double box: left 16.8px, top 0px, bottom 14.6px. A small picture also left the rest of the box's width empty.After: the box fits the picture: 0px on every side, and the box is no wider than the picture (a large picture still shrinks to the layout's width).
How:
.ms-figure-imagegetsvertical-align: top, so no line room is kept under it anywhere. The emitter marks a box whose body is a lone, unfloatedFigureit will show as an imagems-box-picture, which has no padding,width: fit-contentand a block image. A box with text, a floated figure, or a refused picture (art fallback) keeps its padding. The box padding is nowvar(--ms-pad, 1ch), and aFramewhosePaddingis not 1 writes--ms-padon its fieldset, sopadreaches the HTML (it was always 1ch). SharpMUSH'sshell.csscopiesLayoutCss.Fixed, so the bump there carries the changed rules.🤖 Generated with Claude Code
https://claude.ai/code/session_01PQJ7GSkYEQFfHqmQDwxbg9