Add print utility classes

[kmohrf]

Overview of the problem

This is about the Bulma CSS framework I'm using Bulma version [0.4.1] I am sure this issue is not a duplicate?

Description

It would be nice to

• have response helpers for the print media in order to hide/show elements
• be able to determine the sizing of elements with the .is-([0-9]+)-print classes

It might also be reasonable to hide some elements in print styles like buttons and navs by default but that may be to invasive, unintuitive and in my experience a few .is-hidden-print classes are easily added.

I’m not familiar with sass, but in case you like the idea of having print utility classes i might be able to put together a pull request.

[markvesterskov]

Agreed, this is a great idea, that seems manageable to implement.

[kylane]

Did this go anywhere? Would be nice to be able to control the display of my bulma layout for print!

[noraj]

I found some good ideas here: https://uxdesign.cc/i-totally-forgot-about-print-style-sheets-f1e6604cfd6. I'll try this for my website using bulma.

[o8e]

👍

I'm all in for .is-hidden-print at the very least. I've initiated something in #2329.

[davidcook-ms]

@media print { .is-hidden-print { display: none !important; } } I have this in my project. Let me know if it's bad form. I'm relatively new to CSS.

[glenndevenish]

column is-[x]-print would be nice, along with mobile, tablet, desktop etc

[linasim89]

hi, would love to try this feature. but the commit seems to have conflict?

[Muhnad]

Hey @jgthms, @kmohrf, @o8e

I think we need to adding support for print by:

• Adding global print style that handles all print stuff like page dimensions @page, displaying content CSS fragmentaion, and so on...
• Adding utility classes to hide/show elements based on media type in this case(@media print).
• Hide decorative things like background-image.
• Unify the background-color and color of the print page.
• Showing the external links URL beside the content by using this CSS hack:

a[href^="http"]:not([href*="mywebsite.com"]):after {
  content: " ("attr(href)")";
}

that's all in my mind right now. I could update the list later.

[mlncn]

Here is what we're using, based on https://github.com/jgthms/bulma/pull/2329:

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

[suterma]

By now I have created this small NPM package: https://www.npmjs.com/package/bulma-print to use as a stand-in until printing support gets into Bulma proper. Suggestions, Comments and contributions are welcome!

[neuronflow]

I am working on creating a research report. When I want to save the report as a pdf the navigation ribbon overlays the content. How can I avoid this?

My current ribbons:

 <!-- top ribbon -->
  <nav id="navitop" class="navbar is-fixed-top">
    <div id="topc" class="columns">
      <div class="column is-12">
        <!-- disclaimer -->
        <h1 class="title disclaimer is-4">
          RESEARCH ONLY - <u>NOT</u> FOR CLINICAL USE
        </h1>
        <!-- disclaimer -->
      </div>
    </div>
  </nav>

  <!-- bottom ribbon -->
  <nav id="navibottom" class="navbar is-fixed-bottom">
    <div id="botc" class="columns is-gapless is-vcentered">
      <div class="column is-4">
        {{ meta.readable_id }}
      </div>
      <div class="column is-4">
        <!-- disclaimer -->
        <h1 class="title disclaimer is-6">
          RESEARCH ONLY <br /><u>NOT</u> FOR CLINICAL USE
        </h1>
        <!-- disclaimer -->
      </div>
      <div class="column is-4">
        {{ meta.timestamp }}
      </div>
    </div>
  </nav>

[suterma]

Hi @neuronflow this is a valid question, however, this is not a Q&A here. I suggest you ask your question at Stackoverflow. They have a tag for bulma there an lots of experienced users. That said, I suggest you look into to the is-fixed-bottom and is-fixed-top and change the fixing and/or the height for printing specifically. See the above mentioned NPM package and links as an idea.

[neuronflow]

Thanks, posted on SO: https://stackoverflow.com/questions/77110189/stop-bulma-ribbons-from-overlaying-content-when-printing

Sorry, I was under the impression that this is a bug and that the ribbons do not behave as intended, hence I reported here.