• Resolved Bri

    (@tinnyfusion)


    Hello, Firstly I would like to say thank you for such a great plugin!

    Now on to an issue that I have discovered. When a visitor tries to print an article that contains code (displayed via your plugin) it does not print all the code but instead only renders what can be seen on-site.

    Is there a way to have it include all the code for the print only version?

    To duplicate this issue, visit my site, scroll to the bottom and where the share icons are you can click on the Print button or simply select Print from your browser. Now look at the code section in the print preview.

    Hope there is a solution to this other than being told to display all the code in the article as this would make for a massively unreadable article causing the reader to have to scroll past every bit of code before continuing on.

    The page I need help with: [log in to see the link]

Viewing 15 replies - 16 through 30 (of 37 total)
  • Plugin Author Kevin Batdorf

    (@kbat82)

    If you’d like the code to add some text before, you can try this:

    @media print {
        .wp-block-kevinbatdorf-code-block-pro:not(#x)::before {
            content: "Note: This code may be improperly formatted when printing";
            display: block;
        }
    }
    Thread Starter Bri

    (@tinnyfusion)

    Ahh right, for presentation maybe but code is different and needs to retain it’s formatting…

    I also see the difference with the wrapping… Could it have anything to do with my @media print CSS do you think? This is what I have:

    /* Clean up output when printing */
    @media print {
        * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; -ms-filter: none !important; filter:none !important; }
        a, a:visited { text-decoration: underline; }
        a[href]:after { content: " (" attr(href) ")"; }
        abbr[title]:after { content: " (" attr(title) ")"; }
        .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
        pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
        thead { display: table-header-group; } /* h5bp.com/t */
        tr, img { page-break-inside: avoid; }
        img { max-width: 100% !important; }
        @page { margin: 0.5cm; counter-increment: page; content: "Page " counter(page); size: A4 landscape; /* Adjust for larger screens */ }
        p, h2, h3 { orphans: 3; widows: 3; }
        h2, h3 { page-break-after: avoid; }
        .site-logo, .side-header, .main-navigation, .secondary-navigation, .widget-area, .footer-widgets, .sidebar, .social-share, .social-share-links, .entry-meta, .comment-respond, .reply, .edit-link { display: none; } /* Remove unneeded elements */
        .wp-block-kevinbatdorf-code-block-pro:not(#x) pre code { white-space: pre-wrap !important; } // Added for Code Block Pro Plugin
        .wp-block-kevinbatdorf-code-block-pro:not(#x) .line { min-width: 0 !important; } // Added for Code Block Pro Plugin
    }
    Thread Starter Bri

    (@tinnyfusion)

    I have temporarily removed all custom @media print CSS from my site. See for yourself that the wrapping issue is still there. This is how everyone will see a generic site I guess.

    Plugin Author Kevin Batdorf

    (@kbat82)

    Hard to say, but maybe remove it for a minute to test it out?

    Plugin Author Kevin Batdorf

    (@kbat82)

    I don’t see the one’s I gave you there anymore though. Coudl you remove yours but include the pre-wrap one?

    Thread Starter Bri

    (@tinnyfusion)

    Done. Let me know when you have finished and I’ll add my CSS back.

    Plugin Author Kevin Batdorf

    (@kbat82)

    It seemed to work when adding the following.

    .wp-block-kevinbatdorf-code-block-pro:not(#x) pre code .line {
        white-space: pre-wrap !important;
        min-width: 0 !important;
    }
    Thread Starter Bri

    (@tinnyfusion)

    That seems to be wrapping lines as needed allowing the full lines to be seen and read clearly. Nice job!

    See below for latest results:

    Suggestion, are you able to do anything about the width so that it fills from the left to right margin? I obviously understand it depends what the site creator has these margins set to in their CSS but it would be nice if it spanned to fill.

    The above is showing at the same width as it is on the website regardless of said page margins imposed with media print.

    Plugin Author Kevin Batdorf

    (@kbat82)

    Awesome! I think the only way would be as you mentioned to expand the container width. I’m not sure there’s a CSS way to break out.

    Thread Starter Bri

    (@tinnyfusion)

    I can confirm, that when removing my sites side bar so that the post content spanned the full width, it printed at that width too.

    Now the only thing missing is a border around the code when printed so it’s easier to see where the lines wrap. Or better still, just a 1px line down the right hand side of the wrapper.

    What is the class name of the element I need to apply this to please?

    I’m not near my PC at the min and finding out stuff like this on an iPhone will destroy my sanity 😂

    Also, just wondering if this little change will be included in an update to the core plugin?

    Cheers

    Plugin Author Kevin Batdorf

    (@kbat82)

    I think .wp-block-kevinbatdorf-code-block-pro:not(#x) pre would work, you might need to use !important on the border though too.

    Thread Starter Bri

    (@tinnyfusion)

    Very tiny issue noticed. Say a word gets wrapped due to reaching the right hand side border. Well it is split as opposed to being moved wrapping fully.

    EG: Using the word function as an example. This would show ‘funct’ on the right, then ‘ion’ on the left as it wraps.

    Anyway to make it so that if a full word is wrapping to move the entire word?

    I hope that makes sense.

    Plugin Author Kevin Batdorf

    (@kbat82)

    I don’t have time to debug it but maybe overflow wrap? Try overriding it and setting break-word (on the same class)

    https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

    Thread Starter Bri

    (@tinnyfusion)

    Nice one. Will the new CSS be incorporated in to your plugin or will it be a manual thing for website owners to add themselves moving forward?

    I’ll take a look at adding the word wrap later and incorporate it in to my CSS.

    Plugin Author Kevin Batdorf

    (@kbat82)

    I’ll probably add some of it, but it won’t affect what you added. I don’t think I’ll add the border but the wrapping I’ll add

Viewing 15 replies - 16 through 30 (of 37 total)
  • You must be logged in to reply to this topic.