How to Achieve Consistent Auto-Scrolling Between ASCIIMath Input and LaTeX Rendered Output?

Question

I'm building a calculator web application where users type ASCIIMath expressions, which are then rendered into LaTeX using ASCIIMathML. One challenge I'm facing is ensuring that when users type or move the cursor in the input field, the scroll position aligns correctly with the corresponding position in the rendered LaTeX output.

The main issue is that the relationship between the length of the ASCIIMath input and the width of the rendered LaTeX is non-linear and unpredictable. For example:

• A short ASCIIMath string can expand significantly when rendered as LaTeX.
• Cursor positions in the ASCIIMath input don't directly map to positions in the rendered LaTeX.

Currently, my implementation uses simple arithmetic to estimate the cursor position in the LaTeX render, but this is inconsistent because:

1. The rendered output width doesn't directly relate to the input length.
2. Small inputs and long outputs make this approach unreliable.

Here is my current code snippet for handling scrolling:

const cursorPosition = keyinputs.selectionStart;
const isTypingAtEnd = cursorPosition === input.length;
const simplebarContentWrapper = document.querySelector('.simplebar-content-wrapper'); // latex is stored in here

if (isTypingAtEnd) {
    simplebarContentWrapper.scrollLeft = simplebarContentWrapper.scrollWidth;
    showScrollbarTemporarily();
} else {
    const currentScrollPosition = simplebarContentWrapper.scrollLeft;
    const contentWidth = simplebarContentWrapper.scrollWidth;
    const displayWidth = simplebarContentWrapper.clientWidth;    
    if (contentWidth > displayWidth) {
        const threshold = displayWidth * 0.05;
        const estimatedCursorPosition = (cursorPosition / input.length) * contentWidth;
        const cursorViewPosition = estimatedCursorPosition - currentScrollPosition;
        if (cursorViewPosition < threshold) {
            const targetScrollPosition = Math.max(0, estimatedCursorPosition - threshold);
            simplebarContentWrapper.scrollTo({
                left: targetScrollPosition,
                behavior: 'auto'
            });
        } else if (cursorViewPosition > displayWidth - threshold) {
            const targetScrollPosition = Math.min(contentWidth - displayWidth, estimatedCursorPosition + threshold);
            simplebarContentWrapper.scrollTo({
                left: targetScrollPosition,
                behavior: 'auto'
            });
        }
    }
}     

This works in some cases, but it doesn't guarantee accuracy when:

• The user types in the middle of the input.
• The rendered LaTeX is significantly longer or shorter than the ASCIIMath input.

I want to improve this algorithm to ensure scrolling always aligns the input cursor with the correct position in the rendered LaTeX. I've thought about tokenizing the ASCIIMath input or precomputing mappings between input positions and LaTeX positions, but I'm unsure how to implement these efficiently.

---

My Questions (Mainly looking for advice not necessarily direct fixes to my code):

1. How can I accurately map ASCIIMath input positions to LaTeX output positions without tokenizing the input?
2. If tokenizing is necessary, what's the best way to track cursor positions in both the input and rendered output?
3. Are there better techniques or libraries for handling this type of auto-scrolling in real-time or just matching behavior between input and output in general?