Prevent extlink icons from breaking into new lines

@sasanikolic patch failed to apply, needs reroll

@sasanikolic lets wait for the test result

+++ b/extlink.js
@@ -244,11 +244,19 @@
+          var link_class = class_name === drupalSettings.data.extlink.mailtoClass ? drupalSettings.data.extlink.mailtoClass : class_name;

This line confuses me as both cases seem to end up in the same assignment?
Mind below a different thing "extFaMailtoClasses" is used.

Also, the "mailtoLabel" is completely skipped.

Can we somehow streamline the spaghetti of cases to build these 2*2+ variations?

FWIW, we had this problem where icon would line break when using an HTML header (H1, H2, H3, etc...). The patch did not work in our case probably because the TWIG template and JS code was very poorly structure but I came up with a simple fix.

Rather than do this in your template code:

<a href="https://www.drupal.org"><h3>Go to Drupal website</h3></a>

... just do this...

<h3><a href="https://www.drupal.org">Go to Drupal website</a></h3>

It might not meet some coding standards but it worked for me.

FWIW, we had this problem where icon would line break when using an HTML header (H1, H2, H3, etc...). The patch did not work in our case probably because the TWIG template and JS code was very poorly structure and would require a complete redesign. Instead I came up with a simple fix.

Rather than do this in your HTML

<a href="https://www.drupal.org"><h3>Go to Drupal website</h3></a>

... just do this...

<h3><a href="https://www.drupal.org">Go to Drupal website</a></h3>

This might not meet HTML coding standards but it works

Here's another approach altogether.

If the module is set to append, it looks for the last text node in the link, wraps it in a span, and inserts the image or FA class into the span rather than the parent link. The span's class prevents wrapping.

From: <a href class="ext">Link Text ⤴️</a>
To: <a href class="ext">Link <span class="extlink-nobreak">Text ⤴️</span></a>

In my testing this works fine for the various nestings of <a><h2>, as well as more complex links with images.

If you are testing locally, note that it falls back to default behavior when Twig debugging injects an HTML comment at the end of a link around a media item.

Quick update based on original issue description and old comments from @sasanikolic.

Internally we figured out that the main problem we have is with FA CSS default rule

.fa {
  display: inline-block;
}

This rule will break icon to the next line as a single word if there is not enough room. In our base custom theme we will just add CSS override for this like

.span.extlink .fa {
  display: inline;
}

and this simple fix is enough to improve icon line wrapping behaviour - now if there is not enough space the icon will wrap together with last word which looks much better.

Granted you will get a different text underline behavior now with icon inline display (text decoration underline will have a small break), but this is not possible to fix with current CSS and hopefully CSS 4 version will bring in the future new rules for controlling underline behavior better. Until then if you do not like disconnected underline you can switch to border-bottom or pseudo after element CSS approach.
Also i think it will look better with disconnected underline, then without any underline on icon part which we currently have with inline-block rule.

We need to test this a bit more in custom projects, but it seems it is working great for now. Based on this I would recommend we drop very complex JS change approach for fixing this in previous patch and then just close this issue or maybe consider adding some similar rule in extlink CSS.

Using font-awesome icons is an optional feature - we're using SVGs

> Using font-awesome icons is an optional feature - we're using SVGs

The original issue and patches from @sasanikolic targeted Font Awesome case and not SVG inline images.

Not sure about the approach in comment 11 didn't checked/tested that one.

Quickly checked locally using of SVG images instead of FA icons. For me there were two problems for mailto icon:

1. Provided SVG image form mailto had buggy default viewBox definition of `viewBox="0 10 70 20"`. Even without looking into browser this aspect ratio of 70 to 10 just sounds very wrong. Changing that to something like `viewBox="0 0 60 60"` is giving much better result.

This SVG definition is acutally coming also from JS extlink.js file:

if (class_name === drupalSettings.data.extlink.mailtoClass) {
          $link[icon_placement]('<svg focusable="false" class="' + class_name + '" role="img" aria-label="' + drupalSettings.data.extlink.mailtoLabel + '" xmlns="http://www.w3.org/2000/svg" viewBox="0 10 70 20"><metadata><sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"><sliceSourceBounds y="-8160" x="-8165" width="16389" height="16384" bottomLeftOrigin="true"/><optimizationSettings><targetSettings targetSettingsID="0" fileFormat="PNG24Format"><PNG24Format transparency="true" filtered="false" interlaced="false" noMatteColor="false" matteColor="#FFFFFF"/></targetSettings></optimizationSettings></sfw></metadata><title>' + drupalSettings.data.extlink.mailtoLabel + '</title><path d="M56 14H8c-1.1 0-2 0.9-2 2v32c0 1.1 0.9 2 2 2h48c1.1 0 2-0.9 2-2V16C58 14.9 57.1 14 56 14zM50.5 18L32 33.4 13.5 18H50.5zM10 46V20.3l20.7 17.3C31.1 37.8 31.5 38 32 38s0.9-0.2 1.3-0.5L54 20.3V46H10z"/></svg>');
}

Beside wrong viewBox definition there is a lot of weird stuff going on in this SVG and this should be optimized much better like probably removing metadata tag and everything inside of it. Same goes for ext SVG image definition - it needs cleanup and check of viewBox definition.

2. Then I just needed to add next CSS rule to make stuff look OK:

svg.mailto {
  height: 1em;
}

Depending what look you want you would probably want to add some spacing between text and svg icon horizontally, but that also depends on your design. Anyway this looks good enough and more importantly wrapping works in the same way as for FA case with display inline.

Based on this I still think this should be fixed just with simple CSS changes and not with adding more JS code and complexity in that layer.

I think the SVG icons need the JS approach in #11.

But if display:inline did work for FontAwesome, the extra JS could be set to only fire when the module config is set to SVG.

I just found out that there is `text-wrap: balance` CSS option which works great in improving text wrapping of element, including any icon it has.

It is still not supported in Safari but it is in TP for desktop version. Check more on https://caniuse.com/css-text-wrap-balance.

Curious instead of a js solution if prepend/append can be done with just css and if after/before gets a wrapper around the link and icon?

I'm not 100% sure, but a purely CSS solution would require having the FA font available for using it in a font-family CSS property and using Unicode characters in the content CSS attribute of the ::after and ::before pseudo-elements.

Regarding your question about the "wrapper around the link and icon": if I understand correctly, you are asking whether a wrapper is being used or not, correct? I have conducted some tests and found that it is not. The icon is simply placed before the <a> element.

In any case, I've tested the solution in #11 and it works well for me, even though I have tricky CSS in my anchor, with a span inside that has a display: block. So I've added it to the MR.

Will include with next release of 2.0.x

While I can understand the logic behind this, I have to point out that it can break existing themes... Having no way of turning that new behavior off is an issue.

Echoing #27's concern here.
The intentions of this change are fine for "normal links" that contain multiple words.

But maybe no thought was put into 'mailto:' links, where there is typically no natural word breaks in the link's text.
For example: firstname.lastname@longdomainnamehere.com

Our sites had CSS that forced email-address links to wrap if necessary. Extlink's new "extlink-nobreak" markup and CSS overrides that now, and in narrow spaces - like sidebars or cards in a grid-layout - we get a broken layout (horizon overflow, scrollbars) or text that gets cutoff (in cases where the parent container has `overflow: hidden`).

The CSS we were using to ensure long email address links did not break horizontal flow.
a[href^="mailto"] { overflow-wrap: break-word; }

---

Our temporary workaround is to completely disable Extlink's processing of 'mailto:' links in the module's options.

Would recommend a new ticket to address future enhancements of the feature.