Works only whit two fingers.

[mossxxxx]

1. Hi, the extension works, but in order to do so i need to "pinch" the screen with two fingers. If i "tap" to zoom it doesn't wrap/unwrap text.

[Picazsoo]

Hi, you are right that the script has this problem. It also has an issue with loading new text elements (e.g. on reddit) - those are not affected by the zoom level change and are thus unwrapped.

If you use violentMonkey, you can try the following script. It fixes both of the issues.

I am now super happy with Android Fennec (F-Droid Firefox fork). It behaves very close to Opera.

// ==UserScript==
// @name         Text reflow on zoom for mobile (text wrap) - Infinite Scroll Fix
// @description  Fits all text to the screen width after a pinch or double-tap zoom gesture (fixes layout jumps on dynamic content)
// @version      1.0.8
// @author       Picazsoo
// @license      MIT
// @homepageURL  https://github.com/emvaized/text-reflow-on-zoom-mobile/
// @namespace    text_reflow_on_pinch_zoom
// @match        *://*/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    const xpathSelector = `
    //p |
    //a[normalize-space(text())] |
    //h1 |
    //h2 |
    //h3 |
    //h4 |
    //h5 |
    //h6 |
    //li |
    //pre |
    //div[b or em or i] |
    //div[normalize-space(text())] |
    //div[span[normalize-space(text())]]`;

    let isCssInjected = false;
    let isPinching = false;
    let zoomTarget, targetDyOffsetRatio;
    let resizeDebounceTimer;
    let mutationDebounceTimer;
    
    // Track viewport width to ignore height-only changes (keyboard)
    let lastViewportWidth = window.visualViewport ? window.visualViewport.width : window.innerWidth;

    // Track all text elements queried by the selector
    const allTextElements = new Set();

    /**
     * Reflows text to fit screen.
     * @param {boolean} shouldRestoreScroll - If true, scrolls back to the zoom target. False for passive updates (infinite scroll).
     */
    function reflowText(shouldRestoreScroll = false) {
        if (!isCssInjected) {
            const styleContent = `.text-reflow-userscript { word-wrap: break-word !important; overflow-wrap:break-word !important; max-width:var(--text-reflow-max-width) !important; }
            .text-reflow-scroll-padding {scroll-margin-left: 1vw !important;}`;
            const styleElement = document.createElement('style');
            styleElement.textContent = styleContent;
            document.head.appendChild(styleElement);
            isCssInjected = true;
        }

        // Calculate new width based on the visual viewport (zoomed area)
        const maxAllowedWidth = Math.round(window.visualViewport.width * 0.96);
        document.documentElement.style.setProperty('--text-reflow-max-width', `${maxAllowedWidth}px`);

        // Update our width tracker
        lastViewportWidth = window.visualViewport.width;

        // Select elements likely to contain text
        const xpathResult = document.evaluate(xpathSelector, document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

        // Refresh text element set
        allTextElements.clear();

        for (let i = 0, n = xpathResult.snapshotLength, el; i < n; i++) {
            el = xpathResult.snapshotItem(i);
            if (!el.offsetParent) continue;
            if (!el.textContent.trim()) continue;

            // Process only top-level text elements
            let isTopLevel = true;
            let parent = el.parentElement;
            while (parent) {
                if (elementIsTextElement(parent)) {
                    isTopLevel = false;
                    break;
                }
                parent = parent.parentElement;
            }

            if (isTopLevel) {
                el.classList.add('text-reflow-userscript');
                allTextElements.add(el);
            }
         }

        /// Scroll initial target element into view (ONLY if this is a zoom-triggered reflow)
        if (shouldRestoreScroll && zoomTarget && targetDyOffsetRatio) {
            try {
                // Scroll to element vertically, according to new page layout
                const targetOffset = targetDyOffsetRatio * window.innerHeight;
                const rect = zoomTarget.getBoundingClientRect();
                const targetTop = rect.top + window.pageYOffset;
                const scrollToPosition = targetTop - targetOffset;

                window.scrollTo({
                    top: scrollToPosition,
                    behavior: 'instant'
                });

                // Scroll element into view horizontally if it's text
                if (zoomTarget.nodeName !== 'IMG' && zoomTarget.nodeName !== 'VIDEO' && zoomTarget.nodeName !== 'IFRAME'){
                    zoomTarget.classList.add('text-reflow-scroll-padding');
                    zoomTarget.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
                    zoomTarget.classList.remove('text-reflow-scroll-padding');
                }
            } catch (e) {
                // Fail silently if target is detached from DOM
            }
            
            // We only clear the target if we actually used it.
            zoomTarget = null;
            targetDyOffsetRatio = null;
        }
    }

    function elementIsTextElement(element) {
        return allTextElements.has(element);
    }

    // --- Interaction Handlers ---

    function handleTouchStart(event) {
        if (!event.touches) return;

        // Logic for tracking the target element
        let midpointX, midpointY;

        if (event.touches.length >= 2) {
            isPinching = true;
            const touch1 = event.touches[0];
            const touch2 = event.touches[1];
            midpointX = (touch1.clientX + touch2.clientX) / 2;
            midpointY = (touch1.clientY + touch2.clientY) / 2;
        } else {
            midpointX = event.touches[0].clientX;
            midpointY = event.touches[0].clientY;
        }

        let possibleZoomTarget;
        const elementsFromPoint = document.elementsFromPoint(midpointX, midpointY);

        for (let i = 0, n = elementsFromPoint.length, element; i < n; i++) {
            element = elementsFromPoint[i];
            if (elementIsTextElement(element)) {
                possibleZoomTarget = element;
                break;
            }
        }

        if (!possibleZoomTarget) possibleZoomTarget = elementsFromPoint[0];

        if (possibleZoomTarget) {
            zoomTarget = possibleZoomTarget;
            const targetRect = zoomTarget.getBoundingClientRect();
            targetDyOffsetRatio = targetRect.top / window.innerHeight;
        }
    }

    function handleTouchEnd(event) {
        if (isPinching && (event.touches && event.touches.length === 0)) {
            isPinching = false;
            // TRIGGER REFLOW: Restore scroll because user just finished a zoom
            reflowText(true);
        }
    }

    function handleViewportResize() {
        if (isPinching) return;
        
        const currentWidth = window.visualViewport.width;
        if (Math.abs(currentWidth - lastViewportWidth) < 1) {
            return;
        }

        clearTimeout(resizeDebounceTimer);
        resizeDebounceTimer = setTimeout(() => {
            // TRIGGER REFLOW: Restore scroll because viewport size changed (zoom)
            reflowText(true);
        }, 400); 
    }

    // --- Dynamic Content Handling ---
    function initObserver() {
        if (!document.body) return;

        const observer = new MutationObserver((mutations) => {
            if (isPinching) return;

            let hasAddedNodes = false;
            for (const mutation of mutations) {
                if (mutation.addedNodes.length > 0) {
                    hasAddedNodes = true;
                    break;
                }
            }

            if (hasAddedNodes) {
                clearTimeout(mutationDebounceTimer);
                mutationDebounceTimer = setTimeout(() => {
                    // TRIGGER REFLOW: Do NOT restore scroll (passive update)
                    reflowText(false);
                }, 500);
            }
        });

        observer.observe(document.body, { childList: true, subtree: true });
    }

    // --- Listeners ---
    window.addEventListener('touchstart', handleTouchStart, { passive: true });
    window.addEventListener('touchend', handleTouchEnd);
    
    if (window.visualViewport) {
        window.visualViewport.addEventListener('resize', handleViewportResize);
    }

    if (document.body) {
        initObserver();
    } else {
        window.addEventListener('DOMContentLoaded', initObserver);
    }

})();

@emvaized - take a look if you think that integrating this would make sense. It works great for me via ViolentMonkey on Fennec.

[Picazsoo]

Even better version IMO that also allows three-finger long-press (1s) to toggle the text reflow globally across all tabs off/on and fixes issues with some text not wrapping.

I use it in violent monkey in Fennec.

// ==UserScript==
// @name         Text reflow on zoom for mobile (text wrap) - Sync Fix
// @description  Fits all text to the screen width after a pinch or double-tap zoom gesture (Global 3-finger toggle)пальцами)
// @version      1.0.20
// @author       picazsoo
// @license      MIT
// @homepageURL  https://github.com/emvaized/text-reflow-on-zoom-mobile/
// @namespace    text_reflow_on_pinch_zoom
// @match        *://*/*
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_addValueChangeListener
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    const ENABLED_CLASS = 'userscript-mobile-text-reflow-enabled';

    // v1.0.12 Selector
    const xpathSelector = `
    //p |
    //a[normalize-space(text())] |
    //h1 | //h2 | //h3 | //h4 | //h5 | //h6 |
    //li |
    //pre |
    //div[b or em or i] |
    //div[text()[normalize-space()]] |
    //div[span[text()[normalize-space()]]]`;

    let isReflowEnabled = GM_getValue('reflowEnabled', true);
    
    let isCssInjected = false;
    let isPinching = false;
    
    let zoomTarget, targetDyOffsetRatio;
    let resizeDebounceTimer;
    let mutationDebounceTimer;
    
    let longPressTimer;
    const LONG_PRESS_DURATION = 800; 
    const MOVE_THRESHOLD = 15;
    let startTouches = [];
    
    let lastViewportWidth = window.visualViewport ? window.visualViewport.width : window.innerWidth;

    const allTextElements = new Set();
    let notificationEl = null;

    // Apply initial state
    updateHtmlClass();

    // 1. Listen for background changes (if browser allows)
    if (typeof GM_addValueChangeListener !== 'undefined') {
        GM_addValueChangeListener('reflowEnabled', (name, oldVal, newVal, remote) => {
            if (isReflowEnabled !== newVal) {
                isReflowEnabled = newVal;
                updateHtmlClass();
                if (isReflowEnabled) reflowText(false); 
            }
        });
    }

    // 2. FORCE SYNC on tab switch (Fixes frozen background tabs)
    document.addEventListener("visibilitychange", () => {
        if (document.visibilityState === 'visible') {
            const globalState = GM_getValue('reflowEnabled', true);
            if (isReflowEnabled !== globalState) {
                isReflowEnabled = globalState;
                updateHtmlClass();
                if (isReflowEnabled) reflowText(false);
            }
        }
    });

    function updateHtmlClass() {
        if (isReflowEnabled) {
            document.documentElement.classList.add(ENABLED_CLASS);
        } else {
            document.documentElement.classList.remove(ENABLED_CLASS);
            document.documentElement.style.setProperty('--text-reflow-max-width', 'unset');
        }
    }

    function showNotification(text) {
        if (!notificationEl) {
            notificationEl = document.createElement('div');
            Object.assign(notificationEl.style, {
                position: 'fixed',
                top: '50%',
                left: '50%',
                backgroundColor: 'rgba(0, 0, 0, 0.9)',
                color: 'white',
                padding: '16px 24px',
                borderRadius: '12px',
                zIndex: '2147483647',
                fontFamily: 'sans-serif',
                fontSize: '18px',
                fontWeight: 'bold',
                pointerEvents: 'none',
                opacity: '0',
                transition: 'opacity 0.2s ease',
                textAlign: 'center',
                boxShadow: '0 4px 15px rgba(0,0,0,0.5)',
                userSelect: 'none' 
            });
            document.body.appendChild(notificationEl);
        }

        const scale = window.visualViewport ? (1 / window.visualViewport.scale) : 1;
        notificationEl.style.transform = `translate(-50%, -50%) scale(${scale})`;
        
        notificationEl.textContent = text;
        notificationEl.style.opacity = '1';

        setTimeout(() => {
            notificationEl.style.opacity = '0';
        }, 2000);
    }

    function reflowText(shouldRestoreScroll = false) {
        if (!isReflowEnabled) return;

        if (!isCssInjected) {
            const styleContent = `html.${ENABLED_CLASS} .text-reflow-userscript { word-wrap: break-word !important; overflow-wrap:break-word !important; max-width:var(--text-reflow-max-width) !important; }
            .text-reflow-scroll-padding {scroll-margin-left: 1vw !important;}`;
            const styleElement = document.createElement('style');
            styleElement.textContent = styleContent;
            document.head.appendChild(styleElement);
            isCssInjected = true;
        }

        const maxAllowedWidth = Math.round(window.visualViewport.width * 0.96);
        document.documentElement.style.setProperty('--text-reflow-max-width', `${maxAllowedWidth}px`);

        lastViewportWidth = window.visualViewport.width;

        const xpathResult = document.evaluate(xpathSelector, document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

        allTextElements.clear();

        for (let i = 0, n = xpathResult.snapshotLength, el; i < n; i++) {
            el = xpathResult.snapshotItem(i);
            if (!el.offsetParent) continue;
            if (!el.textContent.trim()) continue;

            let isTopLevel = true;
            let parent = el.parentElement;
            while (parent) {
                if (elementIsTextElement(parent)) {
                    isTopLevel = false;
                    break;
                }
                parent = parent.parentElement;
            }

            if (isTopLevel) {
                el.classList.add('text-reflow-userscript');
                allTextElements.add(el);
            }
         }

        if (shouldRestoreScroll && zoomTarget && targetDyOffsetRatio) {
            try {
                const targetOffset = targetDyOffsetRatio * window.innerHeight;
                const rect = zoomTarget.getBoundingClientRect();
                const targetTop = rect.top + window.pageYOffset;
                const scrollToPosition = targetTop - targetOffset;

                window.scrollTo({
                    top: scrollToPosition,
                    behavior: 'instant'
                });

                if (zoomTarget.nodeName !== 'IMG' && zoomTarget.nodeName !== 'VIDEO' && zoomTarget.nodeName !== 'IFRAME'){
                    zoomTarget.classList.add('text-reflow-scroll-padding');
                    zoomTarget.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
                    zoomTarget.classList.remove('text-reflow-scroll-padding');
                }
            } catch (e) {
                // Fail silently
            }
            zoomTarget = null;
            targetDyOffsetRatio = null;
        }
    }

    function elementIsTextElement(element) {
        return allTextElements.has(element);
    }

    // --- Interaction Handlers ---

    function handleTouchStart(event) {
        if (!event.touches) return;

        // Toggle Gesture (3 Fingers)
        if (event.touches.length === 3) {
            startTouches = [
                {x: event.touches[0].clientX, y: event.touches[0].clientY},
                {x: event.touches[1].clientX, y: event.touches[1].clientY},
                {x: event.touches[2].clientX, y: event.touches[2].clientY}
            ];

            clearTimeout(longPressTimer);
            longPressTimer = setTimeout(() => {
                isReflowEnabled = !isReflowEnabled;
                GM_setValue('reflowEnabled', isReflowEnabled);
                updateHtmlClass();
                showNotification(isReflowEnabled ? "Reflow: ON" : "Reflow: OFF");
                if (isReflowEnabled) reflowText(true);
                longPressTimer = null;
            }, LONG_PRESS_DURATION);
            return; 
        }

        let midpointX, midpointY;

        if (event.touches.length >= 2) {
            isPinching = true;
            const touch1 = event.touches[0];
            const touch2 = event.touches[1];
            midpointX = (touch1.clientX + touch2.clientX) / 2;
            midpointY = (touch1.clientY + touch2.clientY) / 2;
        } else {
            midpointX = event.touches[0].clientX;
            midpointY = event.touches[0].clientY;
        }

        if (isReflowEnabled) {
            let possibleZoomTarget;
            const elementsFromPoint = document.elementsFromPoint(midpointX, midpointY);

            for (let i = 0, n = elementsFromPoint.length, element; i < n; i++) {
                element = elementsFromPoint[i];
                if (elementIsTextElement(element)) {
                    possibleZoomTarget = element;
                    break;
                }
            }

            if (!possibleZoomTarget) possibleZoomTarget = elementsFromPoint[0];

            if (possibleZoomTarget) {
                zoomTarget = possibleZoomTarget;
                const targetRect = zoomTarget.getBoundingClientRect();
                targetDyOffsetRatio = targetRect.top / window.innerHeight;
            }
        }
    }

    function handleTouchMove(event) {
        if (longPressTimer && event.touches.length === 3 && startTouches.length === 3) {
            for (let i = 0; i < 3; i++) {
                const dx = event.touches[i].clientX - startTouches[i].x;
                const dy = event.touches[i].clientY - startTouches[i].y;
                if (Math.abs(dx) > MOVE_THRESHOLD || Math.abs(dy) > MOVE_THRESHOLD) {
                    clearTimeout(longPressTimer);
                    longPressTimer = null;
                    return;
                }
            }
            return;
        }
        
        if (longPressTimer && event.touches.length !== 3) {
             clearTimeout(longPressTimer);
             longPressTimer = null;
        }
    }

    function handleTouchEnd(event) {
        if (longPressTimer) {
             clearTimeout(longPressTimer);
             longPressTimer = null;
        }

        if (isPinching && (event.touches && event.touches.length === 0)) {
            isPinching = false;
            if (isReflowEnabled) reflowText(true);
        }
    }

    function handleViewportResize() {
        if (isPinching || !isReflowEnabled) return;
        
        const currentWidth = window.visualViewport.width;
        if (Math.abs(currentWidth - lastViewportWidth) < 1) {
            return;
        }

        clearTimeout(resizeDebounceTimer);
        resizeDebounceTimer = setTimeout(() => {
            reflowText(true);
        }, 400); 
    }

    function initObserver() {
        if (!document.body) return;

        const observer = new MutationObserver((mutations) => {
            if (isPinching || !isReflowEnabled) return;

            let hasAddedNodes = false;
            for (const mutation of mutations) {
                if (mutation.addedNodes.length > 0) {
                    hasAddedNodes = true;
                    break;
                }
            }

            if (hasAddedNodes) {
                clearTimeout(mutationDebounceTimer);
                mutationDebounceTimer = setTimeout(() => {
                    reflowText(false);
                }, 500);
            }
        });

        observer.observe(document.body, { childList: true, subtree: true });
    }

    window.addEventListener('touchstart', handleTouchStart, { passive: true });
    window.addEventListener('touchmove', handleTouchMove, { passive: true });
    window.addEventListener('touchend', handleTouchEnd);
    
    if (window.visualViewport) {
        window.visualViewport.addEventListener('resize', handleViewportResize);
    }

    if (document.body) {
        initObserver();
    } else {
        window.addEventListener('DOMContentLoaded', initObserver);
    }

})();

[emvaized]

@Picazsoo
Thank you for your contribution to the discussion. The topic you raised is not related to the original issue reported in this ticket, so I'll open a new issue ticket for it.

[emvaized]

@mossxxxx
Thanks for your idea!

I don't see much value in adding support for simple double tap gesture, because of how it usually works in mobile browsers — when you double tap a text, it gets fitted to a screen width, with no text going off the screen.

What could be good, however, is adding a support for double tap + vertical swipe gesture, which provides precise control over zoom. However, given that most users probably haven't even heard about this feauture, I'm not sure how many will actually benefit from it.

[mossxxxx]

Hi, double tap+swipe should be great.
The lack of this option is the main reason i don't switch to firefox on mobile.
In Opera i can easily navigate sites in desktop mode using only one hand.

[Picazsoo]

I have double tap and swipe working. It is IMO crucial for one handed use. I would say my zooming is about 50/50 split between pinch to zoom and double tap-and-swipe