How to format a barcode EAN13 string with CSS and add wider space between specific char/digits? Want to add wider space after char 1 and char 7

https://boxshot.com/barcode/tutorials/ean-13-calculator/ean-13-barcode-check-digit.svg

Right now I use this function to format the string

function format_barcode_ean13(v){
    return `<div style="display:inline-flex; gap:4px">
    <div>${v.substring(0, 1)}</div>
    <div>${v.substring(1, 7)}</div>
    <div>${v.substring(7, 13)}</div>
</div>`;
}

But when using the above function you can't double click on the string to select the entire string. Only the group (flex item) is selected.

I need to be able to apply the wider space between chars and still be able to double click and then select everything

CodePudding user response：

You can set letter-spacing for individual characters and produce wider gaps before them:

<p>12<span style="letter-spacing: 2em;">3</span>45<span style="letter-spacing: 2em;">6</span>789</p>

This way it will remain a "single word" for double click selection.

Alternatively it is possible to use empty inline-blocks, but they break whole-word selection in Firefox:

<p>123<span style="display: inline-block; width: 2em"></span>456<span style="display: inline-block; width: 2em"></span>789</p>

CodePudding user response：

You can add a non-breaking space ( ) between specific characters to create wider spacing without affecting the ability to select the entire string. Here's an example of how you can format the string using this method:

function format_barcode_ean13(v){
return `<div style="display:inline-block;">
${v.substring(0, 1)}&nbsp;
${v.substring(1, 7)}&nbsp;
${v.substring(7, 13)}</div>`;}