Prevent extlink icons from breaking into new lines

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 <svg class="ext">...</svg></a>

to:

<a href class="ext">Link <span class="extlink-nobreak">Text <svg class="ext">...</svg></span></a>

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.

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?