Skip to content

Feature Request: Fix Excess Spacing in Code Output Sections #325

@mmcky

Description

@mmcky

Feature Request: Fix Excess Spacing in Code Output Sections

Summary

Fix excessive vertical spacing in code output sections (stdout/cell outputs). Currently, there is too much spacing between lines in output blocks, which affects readability and creates formatting inconsistencies.

Current Behavior

Code cell outputs and print statement results show excessive vertical spacing between lines. For example, when displaying sequential output like:

Image

The spacing between these lines is larger than expected, creating an unnecessarily tall output section that makes it harder to scan and read the results.

Proposed Solution

Reduce the line-height and/or margin/padding in output sections to create more compact, readable output that better matches standard terminal or REPL output formatting.

Implementation Details

Files to Investigate

  • /src/quantecon_book_theme/assets/styles/_code.scss - Code and output styling
  • /src/quantecon_book_theme/assets/styles/index.scss - General output formatting
  • Any styles targeting .output, .cell_output, or similar notebook output classes

Potential CSS Changes

// Reduce line-height in output sections
.output, .cell_output, div.output_area {
  line-height: 1.4;  // or 1.5 instead of potentially higher values
  
  pre {
    line-height: 1.4;
    margin: 0.5em 0;  // Reduce vertical margins
  }
  
  // Remove excess padding/margins
  p {
    margin: 0.25em 0;  // Tighter paragraph spacing in output
  }
}

// Ensure consistent spacing for stdout/text output
.output_text, .output_stdout {
  line-height: 1.4;
}

Testing Needed

  • Test with various types of output:
    • Sequential print statements
    • Long numerical output
    • Mixed text and numeric output
    • Error messages and warnings
    • DataFrame/table output
  • Ensure changes don't negatively impact readability
  • Verify spacing is consistent across different output types

Related Issues

This spacing issue may also be causing or contributing to formatting weirdness mentioned in Issue #324, where code output displays with inconsistent formatting.

Benefits

  • Improved output readability
  • More efficient use of vertical space
  • Better visual consistency with standard terminal output
  • Easier to scan large amounts of output data

Build Process

After making changes to SCSS files:

npm run build  # Compile assets (~2.5-3 seconds)
tox -e docs-update  # Test with documentation

Priority

Medium priority - Affects user experience when reading code outputs

References

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions