Foreword (Whalen): Long URL in citation

[Erin-Cecele]

[Erin-Cecele]

FYI there are other instances of long citations in the pop-ups.

[Erin-Cecele]

I can use this <wbr> solution: thegetty/bronze-guidelines#162

[Erin-Cecele]

@geealbers before I make changes with the above fix, I want to check and see if there is a less time-consuming/manual way to approach this.

[geealbers]

I've fixed this and am closing the issue, but wanted to document the solution here.

Rather than manually inserting <wbr> tags into links as we've done before, I took some time and figured out how to write a markdown rendering rule that will automatically insert zero-width spaces in the appropriate spots and it looks to be working well (9151f89). Zero-width spaces have the added advantage of also working properly in PrinceXML.

 /**
   * Insert zero-width space with punctuation for better line breaks in URLs
   * per Chicago Manual of Style
   */
  markdownLibrary.renderer.rules.link_open = (tokens, idx, options, env, self) => {
    const linkTextIndex = idx + 1
    const breakAfter = /([[\/]{2}|:])/g // double-slash and colon
    const breakBefore = /([(?<!\/)\/(?!\/)|~|\.|,|_|?|#|%|=|+|&|-])/g // single-slash and others
    const breakCharacter = '​' // zero-width space  

    const linkText = tokens[linkTextIndex].content
        .replace(breakAfter, '$1' + breakCharacter)
        .replace(breakBefore, breakCharacter + '$1')
    
    tokens[linkTextIndex].content = linkText

    return defaultRender(tokens, idx, options, env, self)
  }

One potentially significant issue with either method (manually adding <wbr> tags or auto-adding zero-width spaces) is that if a user/reader uses their cursor to highlight and copy the resulting URL from the online site or the PDF, and then pastes it into a browser, the URL won't resolve because of those hidden characters in it. In my testing, the browser mostly treated the URL as a search term instead and often (but not always) showed the correct page as the first result. But those times the search doesn't pull up the right page, it could be very frustrating for a reader as they'll have no visible clue as to why the URL isn't working since it will look normal.

To address the copying issue, I add another small script (aedb04c) that uses the Clipboard API to strip out the zero-width spaces from the text that's being copied

/**
 * @description 
 * When a reader copies a URL, this removes the break character that was inserted 
 * as a markdown rendering rule in _plugins/markdown/index.js for better URL line breaks
 * https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event
 */
function copyURL() {
  const links = document.querySelectorAll("a");
  const breakCharacter = '​' // zero-width space
  for (let i = 0; i < links.length; i++) {
    links[i].addEventListener("copy", event => {
      const selection = document.getSelection();
      event.clipboardData.setData("text/plain", selection.toString().replaceAll(breakCharacter, ''));
      event.preventDefault();
    })
  }
}