Print out the full domain name in relative links shown via print stylesheets

• css print URL after link a tag but only if href
• drupal make all URLs full paths
• CSS get domain
• CSS print domain with path a tag href link
• css target href based on url begins with
• Substring matching attribute selectors wildcard

There is no wildcard matching in attribute selectors, so i can’t do a[href^="/*"] to only target links that have a non-root link (the slash and at least one more character).

This is a nice rundown of what is available from attribute selectors: https://css-tricks.com/attribute-selectors/

But if i can print the full URL for links, i don’t mind much if it applies for every link.

Brittany Smith gives the best answer to this question of appending the full URL of relative links for print versions of a page.

Where it gets tricky is that i want this CSS to work for multiple sites, not to have a hard-coded URL in it for the relative links to get printed with full URLs.

• firefox prevent huge blank space when printing css
• print css allow page breaks in section
• CSS pretend wrapper div doesn’t exist print style
• print css grouped together in div causes unwanted page break

…. really nothing has changed since this article which repeatedly references Netscape Navigator: https://alistapart.com/article/goingtoprint/

* {

    background-color: white !important;
    color: black !important;

}

After much reading, it turns out that the problem Firefox has printing everything on separate pages is not simply because it is wrapped in a div but because some of the divs were flexbox rather than regular block display, so here’s my hacky fix:

/* and this desperate attempt to not print the content
   on a page all by itself on Firefox, and other tweaks */
.container:not(.is-hidden-print), .columns:not(.is-hidden-print)
  display: block !important

So that prevents the annoying matter of Firefox preventing breaks where we want to allow page breaks, but what about where we want to prevent breaks, and have the breaks happen around chunks of content? Turns out our clearfix class happened to map pretty well to that:

  .clearfix
    page-break-inside: avoid

I believe Mozilla says that the new terminolog is just break-inside but i’m not feeling too charitably toward them after spending a few hours here getting Firefox to not do silly things with flexbox when printing, so i’m not even going to go back to look that up.

OK now i’m just getting fancy. Here’s putting a logo we were using for different opportunity types next to the title of the opportunity, in print as well as regular, despite us undoing the flex stuff that columns usually use.

https://www.w3schools.com/cssref/sel_gen_sibling.asp

  .column.is-narrow
    display: inline-block

  .column.is-narrow ~ .column
    display: inline-block

Remember all these examples are in Sass, to convert to regular CSS or SCSS just put the { and } and ; where you’d expect!

See the whole stylesheet: https://gitlab.com/find-it-program-locator/newtowne/blob/8.x-1.x/src/global/_print.sass