Unbalanced text flashes to balanced text #48

ghost · 2015-01-10T18:32:55Z

I see the unbalanced text 'flash' to the balance text in a jarring way (takes like a split second). Would it be a good idea to modify the script, so that text is hidden first (or made transparent) and shows again after is has been balanced to avoid this jarring experience?

redmunds · 2015-01-11T18:15:06Z

@bc173 Thanks for trying out the balance-text plugin and providing feedback.

I'll have to think about that suggestion. I'd like to make that optional in case it causes problems for certain cases. Plugin currently automatically processes any element with balance-text class, so I could use an additional class to make it optional.

The workaround for now is to use a different class (e.g. .balance-text-no-flash) and execute the plugin when page is ready:

    $('.balance-text-no-flash').balanceText();

If you get that working, please send me a link to a sample page and I'll look at merging that into this plugin. Or you could submit a pull request. Thanks.

redmunds · 2015-01-11T20:45:04Z

@bc173 I forgot to ask: are you using a web font? If so, then take a look at issue #45 .

tannerhodges · 2015-07-28T14:49:37Z

@bc173 You could also load global / layout scripts in the <head> of your document and call $('.balance-text-no-flash').balanceText(); manually at the end of your <body>. Making the script render-blocking makes avoiding the flash possible.

Pro: No flash of unbalanced text.
Con: Little bit longer wait for page to render.

When I have more time, I'd like to make a non-jQuery fork of balance-text to help avoid the hit from loading jQuery. In the meantime, though, this solution should work.

Another alternative would be to add your own class to hide unbalanced text and remove / override it in a callback once balanceText() fires.

coheredigital · 2018-04-06T17:26:44Z

Couldn't you just add a callback? Either a dev could hook into the callback to add an extra class that would make the text visible after the processing completes, or you could add an additional class automatically, such as "balance-text-done".

daveyjones · 2018-10-06T22:50:41Z

I got here by searching issues for the keyword "callback". It seems like a callback would be ideal, allowing you to reveal the element after text is set.

redmunds · 2018-10-09T22:10:01Z

Thanks everyone for your interest in this project!

@tannerhodges In case you didn't see the announcement, BalanceText v3 no longer depends on jQuery.

@spruijtdesign @daveyjones To add more detail to the response by @tannerhodges above:
The balanceText() module automatically balances any element with "balance-text" class, but that's just a convenience -- that's not the only way it works.

The module can be called directly for advanced functionality. See How it works section for more details. For example, you can assign a custom class to your elements such as "my-balance-text" which hides your elements by default using visibility:hidden. When it's appropriate to balance the text, do something like this:

var elements = document.getElementsByClassName("my-balance-text");
for (var i = 0; i < elements.length; i ++) {
    elements[i].style.visibility = "visible";
}

balanceText(elements, {watch: true});

Hope this helps,
Randy

coheredigital · 2018-12-07T18:21:58Z

@redmunds The solution you are suggesting doesn't work with elements added to the DOM after balancedText has been initialized. Not automatically at least.

So if I add an "invisible" class to all my "balance-text" items and remove it on document ready I can generally avoid the flicker of unbalanced text, though this is still a poor solution since it doesn't guarantee that the balancing has finished before the class is removed. The addition of callback support would solve both these problem and better support separation of concerns. As is stand I'll need to hard code a call to balancedText into code that is dynamically adding elements to the page, or I just accept the flicker. A callback seems like the best solution for this type of tool.

redmunds · 2019-01-02T23:30:44Z

@spruijtdesign

The solution you are suggesting doesn't work with elements added to the DOM after balancedText has been initialized. Not automatically at least.

Correct. If you call balanceTextAndWatch() and pass a string selector (e.g. '.my-balance-text') that matches elements that will be added in the future, then you just need to call updateWatched() after adding elements.

The addition of callback support would solve both these problems

All balanceText code is synchronous, so I'm not sure when you want a callback to be called. Do whatever further processing as soon as call to balanceText() returns. It just depends on when you call balanceText() (see technique suggested above which waits until page is loaded).

If you have a simple solution in mind then pull requests are welcome.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unbalanced text flashes to balanced text #48

Unbalanced text flashes to balanced text #48

ghost commented Jan 10, 2015

redmunds commented Jan 11, 2015

redmunds commented Jan 11, 2015

tannerhodges commented Jul 28, 2015

coheredigital commented Apr 6, 2018 •

edited

Loading

daveyjones commented Oct 6, 2018

redmunds commented Oct 9, 2018

coheredigital commented Dec 7, 2018

redmunds commented Jan 2, 2019 •

edited

Loading

Unbalanced text flashes to balanced text #48

Unbalanced text flashes to balanced text #48

Comments

ghost commented Jan 10, 2015

redmunds commented Jan 11, 2015

redmunds commented Jan 11, 2015

tannerhodges commented Jul 28, 2015

coheredigital commented Apr 6, 2018 • edited Loading

daveyjones commented Oct 6, 2018

redmunds commented Oct 9, 2018

coheredigital commented Dec 7, 2018

redmunds commented Jan 2, 2019 • edited Loading

coheredigital commented Apr 6, 2018 •

edited

Loading

redmunds commented Jan 2, 2019 •

edited

Loading