Accessibility: Change Multiple Spaces to Single Space

[lefae]

I've been trying to find a solution for this when people use multiple spaces in their text for aesthetics - besides asking people to not use multiple spaces between every word and/or to tag for "eye strain cw" if they or someone they reblog from does, but people forget all the time, which is not helpful when someone's choice of aesthetic can trigger migraines or cause other issues for other people - but I'm struggling to get things to work properly myself.

I've successfully figured out how to get a userscript to replace the spacing itself. The problem arises when beyond that, there's things with tumblr's coding that exceed my coding knowledge to have any idea how to work around, such as when people use shift+enter to create new line breaks within a paragraph block, the script isn't able to recognise the line break as such, and so everything becomes one large block of text (not ideal for lists and such). That much could be tolerated, probably, though annoying.

WITHOUT SCRIPT RUNNING:

WITH SCRIPT RUNNING:

The biggest issue if getting it to not affect the post editor, as it causes the options menus for adding media and handling format to blink in and out of existence when trying to edit a post. The 'quick and dirty' solution is obviously to simply exclude the drafts page itself from the script, since excluding the urls for the post editor don't seem to work as a workaround.

This is what I currently have worked out, if it helps give a better idea of what I'm talking about.

// ==UserScript==
// @name         Tumblr Multiple Spaces to Single Space [ALPHA]
// @namespace    betweenthemultiverses.tumblr.com
// @version      0.2
// @description  Replaces multiple spaces between words with a single space on Tumblr.com
// @author       Lefae
// @match        https://www.tumblr.com/dashboard
// @match        https://www.tumblr.com/*
// @exclude      https://www.tumblr.com/new/*
// @exclude      https://www.tumblr.com/edit/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tumblr.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Check if the post editor is open
    function isPostEditorOpen() {
        return document.querySelector('.editor.editor-richtext');
    }

    // Function to fix text spaces
    function fixTextSpaces() {
        const allTextNodes = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);

        while (allTextNodes.nextNode()) {
            const textNode = allTextNodes.currentNode;
            textNode.nodeValue = textNode.nodeValue.replace(/\s+/g, ' ');
        }
    }

    // Observer to monitor changes in the page
    const observer = new MutationObserver(function(mutationsList) {
        for (const mutation of mutationsList) {
            if (!isPostEditorOpen()) {
                fixTextSpaces();
            }
        }
    });

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

    // Initial fix on page load
    fixTextSpaces();
})();

I know I'm not the only one would benefit from something like this, as there are plenty of PSA posts floating around regarding the issue with notes of the aesthetic being difficult for people with migraines, vision impairment, attention disorders, dyslexia, etc., and while I'm not picky as to whether it's a feature through XKit or simply as a userscript, I suspect it would be easier for many people if it were available through XKit if it's possible.

Is it feasible for something akin to this to be added as part of the accessibility options?

[martienne17]

I had no idea multiple spaces in a post was an issue! Should I tag this post with eye strain, just in case?

[lefae]

Multiple spaces for indents and such can pose a problem for the visually impaired if they're using screen readers, since not all such software is created equal, and it will sometimes "read" each individual space as a pause, which having heard a post being read that sounded like trying to listen to an audiobook with constant buffering over dialup internet, I imagine it can get frustrating, especially if the person isn't aware that there's text they'll be alerted to. I don't work with screen readers often, though.

It's usually the multiple spaces between each and every word that poses the most issue and results in people asking for things to be tagged with eye strain cw. Here's one of the PSAs I mentioned about such, if you're interested in learning more: https://www.tumblr.com/publicservicememes/641854028072075264

[martienne17]

Duly noted, I will add the tag

[enchanted-sword]

I would believe something like this is definitely a feasible addition. Within the XKit framework, instead of checking all of the text notes in the document, there are utilities that would allow instead having the MutationObserver only return the post body text nodes of posts in the timeline.

[lefae]

That would be awesome if it can become an addition, especially for those who struggle with installing userscripts but activating a new feature in XKit Rewritten is manageable.

[marcustyphoon]

Quick notes for your script:

You can probably just process text inside article elements, or use XKit Rewritten's [tabindex="-1"][data-id] post selector, which would avoid the post editor inherently:

if (textNode.parentElement?.closest('[tabindex="-1"][data-id]')) {
    textNode.nodeValue = textNode.nodeValue.replace(/\s+/g, ' ');
}

This loop is unnecessary if you're processing the whole document on every mutation:

 const observer = new MutationObserver(function(mutationsList) {
-    for (const mutation of mutationsList) {
         if (!isPostEditorOpen()) {
             fixTextSpaces();
         }
-    }
 });

You can replace \s with a regex construct that only includes non-line-break ("horizontal") whitespace to fix the block thing. [ \u00a0] is probably more than good enough since the multiple space generator people use uses non breaking spaces; I came up with [^\S\r\n\u2028\u2029] to be very comprehensive.

Note that this will still fail if a double space falls on an edit boundary, i.e. this <b> is </b> example text, though that's fairly rare. It also will mess up spacing at the beginning of a line which is used as indentation.

[lefae]

I'm having to take a break before testing the coding gives me a migraine just trying to make sure the dash doesn't trigger my already chronic migraines (the irony isn't lost on me here), but I think I managed to get something working as intended with your suggestions, so thank you very much for that! It's probably about as elegant as taking a sledgehammer to the works because I don't know much javascript and so was very much winging it (and looking up dozens of guides in the process, and bothering a friend who knows it better than I do), but so far so good from what I was able to tolerate testing.

As for the intents, I only see such very rarely on my dash, personally, and the primary person who uses it creates new paragraphs each time, so I'm perfectly happy having those stripped from my personal view regardless, since it makes it easier for me to read. I know in the end there's going to be a lot of yymv with it overall, but the same is true for a lot of accessibility things. But from what I'm seeing now, my own dash is safer for me to view at the moment, and for that, you have my utmost gratitude for helping point me in the right direction.