Hmmm… Yeah, it appears to be browser dependent. (I knew I should have checked that!)
Worse, it also appears to be dependent on whether there are an even or odd number of characters.
OK, here’s a fix which should work on all of the most common browsers (tested in Chrome, Firefox, Opera (old and new), Internet Explorer 11, Edge, PaleMoon, Vivaldi, Brave, CCleaner, and Tor). First, put this in your Stylesheet section:
.seats {
font-family: monospace;
font-size: 16px;
white-space: pre;
letter-spacing: 4px;
background-image: linear-gradient(to right, white 0%, white 25%, transparent 25%, transparent 50%, white 50%);
background-size: 12.8px 1px;
background-repeat: repeat-x;
background-position: bottom;
}
.seatsFirefox {
background-size: 13.6px 1px;
}
.seatsIE {
background-size: 13.63px 1px;
}
.seatsPaleMoon {
background-size: 13px 1px;
}
.seatsOdd {
background-image: linear-gradient(to right, white 0%, white 75%, transparent 75%);
}
Then, put this in your JavaScript section:
var isChrome = !!window.chrome;
var isFirefox = (typeof InstallTrigger !== "undefined");
var isIE = /*@cc_on!@*/false || !!document.documentMode;
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.includes(" OPR/");
var isPaleMoon = isFirefox && navigator.userAgent.includes(' PaleMoon/');
if ((isPaleMoon || isOpera) && (!isChrome)) {
setup.seatstyle = "seats seatsPaleMoon";
} else if (isFirefox) {
setup.seatstyle = "seats seatsFirefox";
} else if (isIE) {
setup.seatstyle = "seats seatsIE";
} else {
setup.seatstyle = "seats";
}
setup.seatstyleOdd = setup.seatstyle + " seatsOdd";
And then in your passages you’d do this:
<<set $seats = "Et harum quidem rerum facilis est et expedita distinctio">>
<span @class="setup.seatstyle">$seats</span> /* Even # of characters */
<<set $seats = "Et harum quidem rerum facilis est et expedita distinctio.">>
<span @class="setup.seatstyleOdd">$seats</span> /* Odd # of characters */
To make that a bit easier, create a widget passage with “widget” and “nobr” tags, and put this in it:
<<widget "underline">>
<<set _tempStr = $args[0].toString()>>
<<if _tempStr.length % 2>>
<span @class="setup.seatstyleOdd">_tempStr</span>
<<else>>
<span @class="setup.seatstyle">_tempStr</span>
<</if>>
<</widget>>
Now your passage code would just be this:
<<set $seats = "Et harum quidem rerum facilis est et expedita distinctio">>
<<underline $seats>>
<<set $seats = "Et harum quidem rerum facilis est et expedita distinctio.">>
<<underline $seats>>
That should make it automatically use the correct styling, based on number of characters and which browser is being used, with the Chrome styling being the default.
Enjoy! 