Utilize text-wrap: balance when supported

[adamschwartz]

Now that text-wrap: balance is supported in Chrome (as of 114), it might make sense to reconfigure this library as more of a fallback.

This is the current initialization:

text-balancer/text-balancer.js

Lines 3 to 7 in 8e1a46e

	// pass in a string of selectors to be balanced.
	// if you didnt specify any, thats ok! We'll just
	// balance anything with the balance-text class
	var textBalancer = function (selectors) {

Perhaps instead we could change that to something like the following:

var textBalancer

if (CSS.supports('text-wrap: balance')) {
   textBalancer = function(selectors) {
     // Either noop, or perhaps console.log something about deferring to the native CSS
   }
   
} else {
  textBalancer = function (selectors) {
     // Actually initialize the library...
  }
}

Where text-wrap: balance is supported, this would speed up runtime initialization as the library would never need to be initialized. But more importantly there would likely be great rendering performance benefits to a native balancing algorithm than one implemented in the way this library works. With an implementation like this, of course authors would need to know they additionally need to place text-wrap: balance in their CSS code for the selectors they pass in. Alternatively, instead of a noop, the library could apply this CSS to the selectors for them, but to me this seems unnecessary when longterm the solution will (likely, hopefully) be to use CSS and remove the library entirely.

Curious to hear others’ thoughts!

(Also @mbeswetherick, happy to take a stab at a PR if you support the idea!)