[feat][TextAlignment] Adds text_alignment parameter to markdown elements #13036

sfc-gh-lwilby · 2025-11-18T00:20:36Z

Describe your changes

Adds a new parameter text_alignment to st.markdown and st.caption.

Note: text is aligned via text_alignment, tables and lists within the markdown will always be left-aligned.

Try separating these into separate markdown blocks and using the flex alignment if you want to also align markdown tables and lists.

For example:

GitHub Issue Link (if applicable)

Closes #4109

Testing Plan

Unit Tests (JS and/or Python) ✅
E2E Tests ✅

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

snyk-io · 2025-11-18T00:20:43Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

sfc-gh-lwilby · 2025-11-18T00:20:48Z

[feat][TextAlignment] Adds text_alignment parameter to markdown elements #13036 👈 (View in Graphite)
[refactor][TextAlignment] Adds get_caption helper for tests and updates st_markdown_test to new pattern #13035
[feat][TextAlignment] add text alignment for heading elements. #13034
[refactor][TextAlignment] Adds get_heading helper for tests and updates st_header_test to use this helper replacing index access. #13033
[feat][TextAlignment] Adds text alignment parameter to st.text #13032
[feat][TextAlignment] frontend styling support for text alignment. #13031
[feature][TextAlignment] proto changes, utils and support in delta_generator for text alignment. #13030
develop

This stack of pull requests is managed by Graphite. Learn more about stacking.

github-actions · 2025-11-18T00:20:50Z

✅ PR preview is ready!

Name	Link
📦 Wheel file	https://core-previews.s3-us-west-2.amazonaws.com/pr-13036/streamlit-1.51.0-py3-none-any.whl
📦 `@streamlit/component-v2-lib`	Download from artifacts
🕹️ Preview app	pr-13036.streamlit.app (☁️ Deploy here if not accessible)

github-actions · 2025-11-18T06:09:05Z

📉 Frontend coverage change detected

The frontend unit test (vitest) coverage has decreased by 0.0000%

Current PR: 87.5900% (51141 lines, 6346 missed)
Latest develop: 87.5900% (51082 lines, 6337 missed)

✅ Coverage change is within normal range.

📊 View detailed coverage comparison

sfc-gh-lwilby · 2025-11-25T01:23:26Z

...t/__snapshots__/linux/custom_dark_sidebar_theme_test/custom_dark_sidebar_theme[chromium].png

I see in these snapshots that the help tooltip is now inline with the hello world text in the sidebar. This is expected with the changes to move this tooltip inline and looks better to me.

sfc-gh-lwilby · 2025-11-25T01:25:36Z

...right/__snapshots__/linux/st_caption_test/st_caption-sidebar_caption[dark_theme-firefox].png

Lot's of these snapshot updates are due to changes in how the margins collapse/don't collapse due to adding width: 100% on the inner container to allow for the text alignment to work.

sfc-gh-lwilby · 2025-11-25T01:26:17Z

...laywright/__snapshots__/linux/st_caption_test/st_caption-with_tooltip[dark_theme-webkit].png

Tooltip colouring is changed because it is now inline with the caption. Jess/Johannes prefer the new version.

Copilot

Pull request overview

This PR adds a text_alignment parameter to st.markdown and st.caption elements, enabling horizontal text alignment with options for "left", "center", "right", and "justify". The implementation includes comprehensive Python unit tests, E2E tests, and frontend changes to support the new alignment feature. Note that while text is aligned, tables and lists within markdown remain left-aligned by design.

Key Changes

Added text_alignment parameter to both st.markdown and st.caption with validation
Updated frontend rendering logic to handle help icons inline using a new :help[] directive
Modified styling to ensure lists and tables remain left-aligned while text respects alignment
Added comprehensive test coverage for all alignment types

Reviewed changes

Copilot reviewed 8 out of 210 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
`lib/streamlit/elements/markdown.py`	Added `text_alignment` parameter to `markdown()` and `caption()` functions with documentation
`lib/tests/streamlit/elements/markdown_test.py`	Added parameterized unit tests for text alignment validation
`frontend/lib/src/components/elements/Markdown/Markdown.tsx`	Refactored help icon rendering to use inline directive approach
`frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx`	Added `CustomHelpIcon` component and `:help[]` directive handler
`frontend/lib/src/components/shared/StreamlitMarkdown/styled-components.ts`	Added CSS rules to force left-align for lists/tables while allowing text alignment
`frontend/lib/src/components/shared/TooltipIcon/styled-components.ts`	Fixed LaTeX help icon width calculation for better alignment
`e2e_playwright/st_markdown.py`	Added comprehensive test cases for all alignment types with help tooltips
`e2e_playwright/st_markdown_test.py`	Added E2E test functions for text alignment verification
`e2e_playwright/__snapshots__/*/.png`	Updated snapshot images (binary files)

frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx

e2e_playwright/__snapshots__/linux/st_divider_test/st_divider[light_theme-chromium].png

...wright/__snapshots__/linux/st_markdown_test/st_caption-width_stretch[dark_theme-firefox].png

lukasmasuch · 2025-11-26T11:39:07Z

frontend/lib/src/components/shared/StreamlitMarkdown/styled-components.ts

        table: {
-          // Add some space below the markdown tables
-          marginBottom: theme.spacing.lg,
-          // Prevent double borders


nit: I think having this comment above borderCollapse might still be good to have

lukasmasuch · 2025-11-26T11:42:12Z

frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx

      const nodeName = String(node.name)

+      // Handle help icon directive (:help[tooltip content])
+      if (nodeName === "help") {


question: in theory, this is also something a user could place in the markdown for adding these help tooltips to any position in the markdown?

Yes, that's right. If someone discovers this they could use it to add help tooltips in other positions. I don't think we should document this as officially supported, but it seems OK if someone uses it.

I just realized I should put this in a separate function as well.

I actually think this might be a nice aspect to document and officially support :) but lets wait for some opinions (cc @jrieke , @sfc-gh-dmatthews). Can be a follow-up for 1.53.

Oh very cool, yes fine to document and officially support this!

OK, I should make a PR with some tests before we document it @sfc-gh-dmatthews I will tag the PR with the feature label so you know it can be documented.

lukasmasuch · 2025-11-26T11:44:21Z

...right/__snapshots__/linux/st_markdown_test/st_markdown-width_stretch[light_theme-webkit].png

question: Is this bottom padding in those snapshots just triggered by a different DOM element being used for screenshot? Or is there actually more padding.

I guess this is the same as explained in the comments above? So no visible spacing changes on the actual app pages?

Yeah, I looked through these and the differences reflect the bottom margins and similar which are cancelled by a negative margin on a parent and these were previously collapsed on this div and now are not. The markdown app is looking normal and the page snapshots are included because of the help tooltip change. If we were seeing changes in padding/margins they would also show up in the diffs for those pages.

lukasmasuch

LGTM 👍 a couple of comments

sfc-gh-lwilby mentioned this pull request Nov 18, 2025

[refactor][TextAlignment] Adds get_caption helper for tests and updates st_markdown_test to new pattern #13035

Merged

sfc-gh-lwilby added security-assessment-completed Security assessment has been completed for PR change:feature PR contains new feature or enhancement implementation impact:users PR changes affect end users labels Nov 18, 2025

sfc-gh-lwilby force-pushed the 11-17-text-alignment-markdown-elements branch from 80ad6f9 to 32d103b Compare November 18, 2025 04:20

sfc-gh-lwilby force-pushed the 11-17-text-alignment-st-markdown-test-refactor-get-caption-helper branch from 0676383 to 06a7ab5 Compare November 18, 2025 04:20

sfc-gh-lwilby force-pushed the 11-17-text-alignment-markdown-elements branch from 32d103b to 4a924a7 Compare November 18, 2025 04:28

sfc-gh-lwilby force-pushed the 11-17-text-alignment-st-markdown-test-refactor-get-caption-helper branch from 06a7ab5 to 48076e4 Compare November 18, 2025 04:28

sfc-gh-lwilby changed the base branch from 11-17-text-alignment-st-markdown-test-refactor-get-caption-helper to graphite-base/13036 November 18, 2025 05:27

sfc-gh-lwilby changed the title ~~text-alignment-markdown-elements~~ [feat][TextAlignment] Adds text_alignment parameter to markdown elements Nov 18, 2025

sfc-gh-lwilby force-pushed the graphite-base/13036 branch from 48076e4 to 990df6b Compare November 18, 2025 05:56

sfc-gh-lwilby force-pushed the 11-17-text-alignment-markdown-elements branch from 4a924a7 to 8f3d689 Compare November 18, 2025 05:56

sfc-gh-lwilby changed the base branch from graphite-base/13036 to 11-17-text-alignment-st-markdown-test-refactor-get-caption-helper November 18, 2025 05:56

sfc-gh-lwilby force-pushed the 11-17-text-alignment-st-markdown-test-refactor-get-caption-helper branch from 990df6b to 23623d2 Compare November 18, 2025 15:40

sfc-gh-lwilby force-pushed the 11-17-text-alignment-markdown-elements branch from 8f3d689 to 11ff345 Compare November 18, 2025 15:41

sfc-gh-lwilby force-pushed the 11-17-text-alignment-st-markdown-test-refactor-get-caption-helper branch from 23623d2 to 263f50d Compare November 18, 2025 15:57

sfc-gh-lwilby force-pushed the 11-17-text-alignment-markdown-elements branch from 11ff345 to 60290c2 Compare November 18, 2025 15:58

sfc-gh-lwilby force-pushed the 11-17-text-alignment-st-markdown-test-refactor-get-caption-helper branch from 263f50d to 30ee399 Compare November 19, 2025 03:58

sfc-gh-lwilby force-pushed the 11-17-text-alignment-markdown-elements branch from 60290c2 to 18b6951 Compare November 19, 2025 03:58

sfc-gh-lwilby force-pushed the 11-17-text-alignment-st-markdown-test-refactor-get-caption-helper branch from 30ee399 to 3f12c77 Compare November 19, 2025 04:24

sfc-gh-lwilby force-pushed the 11-17-text-alignment-markdown-elements branch from 18b6951 to 27886e4 Compare November 19, 2025 04:24

sfc-gh-lwilby force-pushed the 11-17-text-alignment-markdown-elements branch 7 times, most recently from 42a9d74 to 30c8a54 Compare November 25, 2025 00:41

sfc-gh-lwilby commented Nov 25, 2025

View reviewed changes

sfc-gh-lwilby force-pushed the 11-17-text-alignment-markdown-elements branch from ada9c9d to 54a05f4 Compare November 25, 2025 11:55

sfc-gh-lwilby marked this pull request as ready for review November 25, 2025 13:32

Copilot AI review requested due to automatic review settings November 25, 2025 13:32

Copilot started reviewing on behalf of sfc-gh-lwilby November 25, 2025 13:33 View session

Copilot finished reviewing on behalf of sfc-gh-lwilby November 25, 2025 13:34

Copilot AI reviewed Nov 25, 2025

View reviewed changes

sfc-gh-bnisco reviewed Nov 25, 2025

View reviewed changes

lukasmasuch reviewed Nov 26, 2025

View reviewed changes

lukasmasuch approved these changes Nov 26, 2025

View reviewed changes

sfc-gh-lwilby force-pushed the 11-17-text-alignment-markdown-elements branch 4 times, most recently from 1f555f0 to 15a36b6 Compare November 26, 2025 18:54

text-alignment-markdown-elements

6fc8a70

sfc-gh-lwilby force-pushed the 11-17-text-alignment-markdown-elements branch from 15a36b6 to 6fc8a70 Compare November 26, 2025 18:57

sfc-gh-lwilby merged commit 37dfee7 into develop Nov 26, 2025
43 checks passed

sfc-gh-lwilby deleted the 11-17-text-alignment-markdown-elements branch November 26, 2025 19:18

lukasmasuch mentioned this pull request Dec 15, 2025

Tooltip shows text outside of the box when there are new lines in the help text #13339

Closed

4 tasks

[feat][TextAlignment] Adds text_alignment parameter to markdown elements #13036

[feat][TextAlignment] Adds text_alignment parameter to markdown elements #13036

Uh oh!

Conversation

sfc-gh-lwilby commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe your changes

GitHub Issue Link (if applicable)

Testing Plan

Uh oh!

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

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

sfc-gh-lwilby commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

✅ PR preview is ready!

Uh oh!

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

Uh oh!

📉 Frontend coverage change detected

Uh oh!

sfc-gh-lwilby Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

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!

lukasmasuch left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

sfc-gh-lwilby commented Nov 18, 2025 •

edited

Loading

snyk-io bot commented Nov 18, 2025 •

edited

Loading

sfc-gh-lwilby commented Nov 18, 2025 •

edited

Loading

github-actions bot commented Nov 18, 2025 •

edited

Loading

github-actions bot commented Nov 18, 2025 •

edited

Loading

sfc-gh-lwilby Nov 25, 2025 •

edited

Loading