Skip to content

Conversation

@mmcky
Copy link
Contributor

@mmcky mmcky commented Nov 20, 2025

Summary

Fixes #325 - Removes excess whitespace between consecutive streaming output lines from Jupyter code cells.

Problem

When Jupyter cells produce streaming output (e.g., multiple print statements), MyST-NB renders each output as a separate .output.stream element with margin-top: 1em, creating excessive vertical spacing between lines.

Solution

Added CSS rule to remove top margin from consecutive streaming output elements:

// Fix excess spacing in streaming output (Issue #325)
.cell_output .output.stream + .output.stream {
  margin-top: 0;
}

This uses the adjacent sibling selector (+) to target only streaming outputs that immediately follow another streaming output, preserving normal spacing for other output types.

Changes

  • src/quantecon_book_theme/assets/styles/index.scss: Added CSS fix for streaming output spacing
  • tests/sites/base/section1/ntbk_streaming.ipynb: Created test notebook with streaming output examples
  • tests/sites/base/section1/index.md: Added test notebook to toctree
  • tests/test_build.py: Added test_streaming_output_spacing() function
  • tests/test_build/test_build_book.html: Updated regression test baseline

Testing

  • ✅ All 12 tests pass on Python 3.12 and 3.13
  • ✅ New test verifies streaming output structure builds correctly
  • ✅ Regression tests updated and passing

Build Commands Used

npm run build           # Compile SCSS assets
tox                     # Run full test suite

- Add CSS rule to remove top margin from consecutive stream outputs
- Fixes issue #325 where multiple print statements in loops created
  excessive spacing between output lines
- Rule only applies to consecutive .output.stream elements to maintain
  spacing when appropriate while eliminating gaps in streaming output
- Add ntbk_streaming.ipynb test notebook with multiple print statements
- Add test_streaming_output_spacing test case to verify structure
- Include streaming notebook in test site toctree
- Tests verify fix for issue #325
@codecov
Copy link

codecov bot commented Nov 20, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (main@67f6658). Learn more about missing BASE report.

Additional details and impacted files
@@           Coverage Diff           @@
##             main     #330   +/-   ##
=======================================
  Coverage        ?   20.89%           
=======================================
  Files           ?        2           
  Lines           ?      292           
  Branches        ?        0           
=======================================
  Hits            ?       61           
  Misses          ?      231           
  Partials        ?        0           
Flag Coverage Δ
pytests 20.89% <ø> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@mmcky
Copy link
Contributor Author

mmcky commented Nov 20, 2025

Screenshot 2025-11-21 at 9 23 41 am

@github-actions github-actions bot temporarily deployed to commit November 20, 2025 22:25 Inactive
mmcky pushed a commit to QuantEcon/lecture-python.myst that referenced this pull request Nov 20, 2025
Install quantecon-book-theme from the fix-streaming-output-whitespace branch
to test the CSS fix for excessive whitespace between consecutive streaming
output lines in Jupyter code cells.

Related: QuantEcon/quantecon-book-theme#330
@github-actions github-actions bot temporarily deployed to commit November 20, 2025 22:40 Inactive
@github-actions github-actions bot temporarily deployed to commit November 21, 2025 00:08 Inactive
@github-actions github-actions bot temporarily deployed to commit November 21, 2025 00:57 Inactive
- Updated ntbk_streaming.ipynb to have multiple separate stream outputs per cell
  (3 outputs in first cell, 5 in second) to match real-world streaming behavior
- Enhanced test to verify we have multiple consecutive stream outputs as siblings
- This properly tests the CSS fix that removes spacing between adjacent .output.stream elements
@github-actions github-actions bot temporarily deployed to commit November 21, 2025 02:05 Inactive
The .highlight pre elements had 0.25rem margins that were creating
spacing between consecutive stream outputs. Added nested pre rule
to remove these margins along with the .highlight margins.
@github-actions github-actions bot temporarily deployed to commit November 21, 2025 02:40 Inactive
The _syntax.scss file uses 'margin: 0.25rem' (shorthand) on .highlight pre, which was overriding our longhand margin-top and margin-bottom declarations. Changed to use shorthand 'margin: 0 !important' to properly override.
The closing brace for the streaming output fix was immediately followed by the .section selector without separation, creating invalid SCSS syntax.
@github-actions github-actions bot temporarily deployed to commit November 21, 2025 03:15 Inactive
Added padding-top and padding-bottom removal to ensure no spacing between consecutive stream outputs.
Added instruction to always run pre-commit on all files before committing to GitHub to ensure code quality checks pass in CI.
@github-actions github-actions bot temporarily deployed to commit November 21, 2025 03:43 Inactive
@github-actions github-actions bot temporarily deployed to commit November 21, 2025 04:08 Inactive
@github-actions github-actions bot temporarily deployed to commit November 21, 2025 05:01 Inactive
@github-actions github-actions bot temporarily deployed to commit November 21, 2025 05:09 Inactive
@github-actions github-actions bot temporarily deployed to commit November 21, 2025 05:20 Inactive
@github-actions github-actions bot temporarily deployed to commit November 21, 2025 05:34 Inactive
…-height: 1 and overflow: visible"

This reverts commit d33b51a.
…ve streaming outputs

This is a cleaner solution that addresses the root cause:
- Merges consecutive output.stream containers into single blocks
- Eliminates need for complex CSS overrides
- More maintainable and robust
- Achieves natural terminal-style output without side effects
@github-actions github-actions bot temporarily deployed to commit November 21, 2025 06:01 Inactive
The post-transform approach was overly complex and did not work correctly with MyST-NB rendering pipeline. The simple CSS solution using the adjacent sibling selector is sufficient and well-tested.

- Removed MergeStreamOutputs post-transform
- Restored CSS rule to remove margin-top between consecutive streams
- Updated test to verify HTML structure supports CSS fix
- All tests passing
@github-actions github-actions bot temporarily deployed to commit November 21, 2025 06:18 Inactive
Removes margin-top between consecutive outputs and eliminates internal spacing from highlight and pre elements
@github-actions github-actions bot temporarily deployed to commit November 21, 2025 06:26 Inactive
@mmcky
Copy link
Contributor Author

mmcky commented Nov 21, 2025

@jstac this is where we are up to. Still too much whitespace but at least it is now consistent (hitting a css barrier that I need to think through)

Screenshot 2025-11-21 at 5 42 41 pm

Tried both SphinxPostTransform and SphinxTransform approaches but they don't work with MyST-NB rendering pipeline. The comprehensive CSS solution is proven to work and is simpler to maintain.
@github-actions github-actions bot temporarily deployed to commit November 21, 2025 07:25 Inactive
@mmcky
Copy link
Contributor Author

mmcky commented Nov 21, 2025

This approach QuantEcon/lecture-python.myst#725 is better than fixing in the them.

@mmcky mmcky closed this Nov 21, 2025
@mmcky mmcky deleted the fix-streaming-output-whitespace branch November 21, 2025 07:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature Request: Fix Excess Spacing in Code Output Sections

2 participants