<html>
    <head>
      <base href="https://bugs.webkit.org/" />
    </head>
    <body><table border="1" cellspacing="0" cellpadding="8">
        <tr>
          <th>Bug ID</th>
          <td><a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - CSS hyphens: auto should not work if lang=&quot;&quot; is not declared"
   href="https://bugs.webkit.org/show_bug.cgi?id=166485">166485</a>
          </td>
        </tr>

        <tr>
          <th>Summary</th>
          <td>CSS hyphens: auto should not work if lang=&quot;&quot; is not declared
          </td>
        </tr>

        <tr>
          <th>Classification</th>
          <td>Unclassified
          </td>
        </tr>

        <tr>
          <th>Product</th>
          <td>WebKit
          </td>
        </tr>

        <tr>
          <th>Version</th>
          <td>Safari Technology Preview
          </td>
        </tr>

        <tr>
          <th>Hardware</th>
          <td>Unspecified
          </td>
        </tr>

        <tr>
          <th>OS</th>
          <td>Unspecified
          </td>
        </tr>

        <tr>
          <th>Status</th>
          <td>NEW
          </td>
        </tr>

        <tr>
          <th>Severity</th>
          <td>Normal
          </td>
        </tr>

        <tr>
          <th>Priority</th>
          <td>P2
          </td>
        </tr>

        <tr>
          <th>Component</th>
          <td>CSS
          </td>
        </tr>

        <tr>
          <th>Assignee</th>
          <td>webkit-unassigned&#64;lists.webkit.org
          </td>
        </tr>

        <tr>
          <th>Reporter</th>
          <td>zcorpan&#64;gmail.com
          </td>
        </tr></table>
      <p>
        <div>
        <pre>Equivalent Chromium bug: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=676270">https://bugs.chromium.org/p/chromium/issues/detail?id=676270</a>

WebKit hyphenates text with 'hyphens: auto' when no language is declared. Firefox does not.

MDN says:

<span class="quote">&gt; Hyphenation rules are language-specific. In HTML, the language is determined by the lang attribute, and browsers will hyphenate only if this attribute is present and if an appropriate hyphenation dictionary is available.</span >

Spec says:

<span class="quote">&gt; Correct automatic hyphenation requires a hyphenation resource appropriate to the language of the text being broken. The UA is therefore only required to automatically hyphenate text for which the content language is known and for which it has an appropriate hyphenation resource.</span >
&gt;
<span class="quote">&gt; Authors should correctly tag their content’s language (e.g. using the HTML lang attribute) in order to obtain correct automatic hyphenation. UAs may refuse to automatically hyphenate untagged content regardless of the hyphens property value.</span >

<a href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-auto">https://drafts.csswg.org/css-text-3/#valdef-hyphens-auto</a>

Now the spec doesn't forbid it, but I think the intent is that UAs should not hyphenate untagged content.

I don't know if WebKit uses the system language when it is not declared, or if it uses language-agnostic rules, or something else (but does not seem to auto-detect English in my simple test). If it should be automatic, then it seems more reliable to apply language detection than using system language. But I think for now we should just disable it and tell Web developers to specify lang=&quot;&quot; correctly.


Test case/demo:
<a href="http://software.hixie.ch/utilities/js/live-dom-viewer/saved/4761">http://software.hixie.ch/utilities/js/live-dom-viewer/saved/4761</a>

&lt;!DOCTYPE html&gt;
&lt;style&gt; div { border:solid; width:150px; -webkit-hyphens:auto; hyphens:auto; } &lt;/style&gt;
No lang
&lt;div&gt;Long words like implementation, initialization, realization, and hyphenation.&lt;/div&gt;
lang=en-US
&lt;div lang=en-US&gt;Long words like implementation, initialization, realization, and hyphenation.&lt;/div&gt;</pre>
        </div>
      </p>
      <hr>
      <span>You are receiving this mail because:</span>
      
      <ul>
          <li>You are the assignee for the bug.</li>
      </ul>
    </body>
</html>