Skip to content

Conversation

@shubham030
Copy link

@shubham030 shubham030 commented Dec 18, 2025

Summary

Adds vertical centering for binary operators and relations relative to numbers, improving visual alignment of math expressions.

Changes

New Features

  • `centerOperators` flag in `MathOptions` (default: `false`) - when enabled, vertically centers operators (+, -, ×, ÷) and relations (=, <, >, ≤, ≥) at the math axis
  • `forceVariableBaseline` flag for context-aware variable alignment:
    • Variables adjacent to numbers (like `3x`) stay at baseline
    • Standalone variables (like `x` in `3 + 5 = x`) get centered

Files Modified

  • `lib/src/ast/options.dart` - Added new flags to MathOptions
  • `lib/src/ast/syntax_tree.dart` - Context detection for variable-number adjacency
  • `lib/src/render/layout/reset_dimension.dart` - Added verticalOffset parameter
  • `lib/src/render/symbols/make_symbol.dart` - Alignment calculation logic
  • `lib/src/render/utils/alignment_utils.dart` - New utility for offset calculations
  • `lib/src/ast/nodes/symbol.dart` - Updated shouldRebuildWidget

Visual Effect

Before (default): Operators sit at baseline
After (opt-in): Operators vertically centered relative to numbers

Usage

```dart
// Default behavior (no centering, backward compatible)
Math.tex(r'3 + 9 = 12')

// Opt-in to centering
Math.tex(
r'3 + 9 = 12',
options: MathOptions(centerOperators: true),
)
```

Backward Compatibility

This change is fully backward compatible. The default behavior is unchanged - users must explicitly opt-in to operator centering.

@CLAassistant
Copy link

CLAassistant commented Dec 18, 2025

CLA assistant check
All committers have signed the CLA.

- Add centerOperators flag to MathOptions (default: true) to vertically
  center binary operators (+, -, ×, ÷) and relations (=, <, >, ≤, ≥)
  relative to numbers at the math axis

- Add forceVariableBaseline flag for context-aware variable alignment:
  - Variables adjacent to numbers (like '3x') stay at baseline
  - Standalone variables (like 'x' in '3 + 5 = x') get centered

- Add alignment_utils.dart with KaTeX font metric calculations for
  determining vertical offsets based on character heights/depths

- Add verticalOffset parameter to ResetDimension widget to enable
  shifting characters vertically while maintaining baseline reporting

- Update shouldRebuildWidget in SymbolNode to respond to alignment
  option changes

This improves visual alignment of math expressions, making operators
appear centered with numbers rather than sitting at the baseline.

Amp-Thread-ID: https://ampcode.com/threads/T-019b2f3b-eff3-74bb-bd05-6cddd682d980
Co-authored-by: Amp <amp@ampcode.com>
@shubham030 shubham030 force-pushed the feature/operator-alignment branch from fff56f2 to 9cb4222 Compare December 18, 2025 02:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants