[css-text-3] replaced elements and atomic inlines with non default line-break

css-text-3/Overview.bs

@@ -2364,10 +2364,59 @@ Line Breaking Details</h3>
       </wpt>
 
     <li>For Web-compatibility
+      by default,
       there is a [=soft wrap opportunity=]
       before and after each replaced element or other [=atomic inline=],
       even when adjacent to a character that would normally suppress them,
       such as U+00A0 NO-BREAK SPACE.
+      However, if the computed value of 'line-break'
+      on a replaced element or other [=atomic inline=]
+      is any value other than the initial ''line-break/auto'',
+      the line breaking behavior of this element
+      is instead equivalent to an ideographic character
+      (Unicode linebreaking class ID [[UAX14]]).
+
+      <div class=example>
+        When images are used inline in places where text is normally used,
+        it is generally preferable to have line breaking rules treat them as they would treat text.
+        The default line breaking for images,
+        necessary for compatibility with existing content,
+        is therefore somewhat unfortunate.
+        It can however easily be overridden.
+
+        For instance, when using images as emoticons,
+        having them be treated the same as Unicode emoji is desirable.
+        By default, the following sentence would normally allow
+        a line break to occur between the image and the exclamation mark.
+
+        <xmp highlight=html>
+        <p>Let's have some <img src=pizza.png alt=pizza class=emoticon>!
+        </xmp>
+
+        This line break would not have been allowed
+        if the Unicode 'SLICE OF PIZZA' (U+1F355)
+        had been used instead of the image
+        (or if the word "pizza" had been spelled out).
+        The same behavior using an image can be achieved with this CSS declaration:
+
+        <pre highlight=css>
+        .emoticon { line-break: normal; }
+        </pre>
+
+        Many other uses of [=inline-level=] images benefit from this approach,
+        and for [=block-level=] images, it makes no difference.
+        Except for existing content that relies on the default behavior,
+        this means the following rule is both
+        useful and generally safe to use in most web sites:
+
+        <pre highlight=css>
+        img { line-break: normal; }
+        </pre>
+
+        However, since the 'line-break' property has effects on text as well,
+        it is not recommended to attempt to achieve the same effect
+        by setting it on the root element and letting it inherit.
+      </div>
 
       <wpt>
       line-breaking/line-breaking-atomic-001.html
@@ -2388,6 +2437,12 @@ Line Breaking Details</h3>
       line-breaking/line-breaking-atomic-nowrap-001.html
       </wpt>
 
+      Note: Once an [=atomic inline=] is treated as an ideographic charcter
+      due to a non ''line-break/auto'' value of 'line-break',
+      properties such as 'word-break'
+      that change how line breaking works with respect ideographic characters
+      also affect the [=atomic inline=].
+
     <li>For <a>soft wrap opportunities</a> created by characters that disappear at the line break (e.g. U+0020 SPACE),
       properties on the box directly containing that character control the line breaking at that opportunity.
       For <a>soft wrap opportunities</a> defined by the boundary between two characters,