Numbers become <a href="tel:">links even if <meta name="format-detection" content="telephone=no"> is set on iOS

[k-s-h-r]

By setting <meta name="format-detection" content="telephone=no">, numbers such as phone numbers become text on iOS.

However, the "telephone=no" setting does not work for text in <budoux>, and numbers such as phone numbers become <a href="tel:">.

Is this an iOS issue or a budoux issue?

Sample: https://codepen.io/rhsk/full/RwEVLBa

<h2>normal</h2>
<p>090-1234-5678</p>
<p>テキストテキストテキストテキストテキスト 090-1234-5678 テキストテキストテキストテキスト</p>

<h2>budoux</h2>
<p><budoux-ja>090-1234-5678</budoux-ja></p>
<p><budoux-ja>テキストテキストテキストテキストテキスト 090-1234-5678 テキストテキストテキストテキスト</budoux-ja></p>

[tushuhei]

Thanks for your report. I believe that's because <budoux-ja> outputs the translated HTML to its Shadow DOM, which is isolated from the global document. If that's the case, it will be fixed by applying the change to use Light DOM instead Shadow DOM for BudouX Web Components, which is now tracked at #280

[k-s-h-r]

Thank you.

I understand about the style as it's a specification of ShadowDOM.

Regarding <a href=“tel:”>, there's a high possibility that <meta name="format-detection" content="telephone=no”> does not work within DOMParser.

Sample: https://codepen.io/rhsk/full/YzdQdNY

[k-s-h-r]

The DOMParser issue was already reported to WebKit Bugzilla. https://bugs.webkit.org/show_bug.cgi?id=232856

https://github.com/google/budoux/blob/0a0a8ce8791d6f99b328d9640eefe4a5f6d1f972/javascript/src/dom.ts#L30C18-L30C18

[tushuhei]

Thanks for investigating the issue. Yes, it seems like the root causation. I will keep this issue open for future reference and to track their advances in fixing the issue. In the meantime, you may want to consider rendering the BudouX results on the server side.