When blogging recipes, how can I support both readers who want the narrative/journey and ones who want the...












30















Increasingly often, if you Google for a recipe your search results will be full of long, image-rich blog posts that, somewhere in there, have the actual recipe you were looking for. Many of these have a "printer-friendly version" link to make that easier; I can get the stuff I need in my kitchen on paper easily, but the author doesn't have to cut back on the part that is interesting when cooking is not imminent. Here's an example of the basic idea -- if you click on the "print" link it starts your browser print dialogue with a subset of the page's content. But that site made a separate page for the print version, and I want to post the recipe once not twice.



As somebody who sometimes posts about cooking, including recipes, on my blog, I'd like to be able to offer that printer-friendly version, too -- but I don't want to have to create the content twice. Is there some script or HTML magic that can help me? I write my blog posts in markdown and can include HTML tags. How do I modify my source to mark a portion of the post as content for a "print" link (and generate the link)?










share|improve this question




















  • 5





    I also blog recipes and want this feature! What a great question.

    – Cyn
    2 days ago






  • 3





    @bruglesco single-sourcing two versions would be ok if necessary, but sometimes I edit after posting so having it just there once, with the print view generated on demand, would be ideal.

    – Monica Cellio
    2 days ago








  • 3





    @user2397282 first, as someone else said, our scope includes publishing (and we have whole tags about blogging, publishing, software tools, and more). Second, the question is about publishing; the answers happen to be about CSS/jQuery; my question would be shot down on SO. Third, sites have overlapping scope; SO doesn't send all its database questions to DBA and its emacs questions to Emacs, we don't send our questions about publishing on Amazon to EBooks, and Workplace doesn't send its questions about difficult coworkers to Interpersonal Skills. If you have concerns, please raise on meta.

    – Monica Cellio
    yesterday






  • 3





    I agree this is an on topic question about publishing. Posts about details of blogs unrelated to Writing are off topic but this one is about the presentation of written material in interaction with the reader. I am voting "Leave Open."

    – Cyn
    yesterday






  • 6





    Here's a tip: Everyone just wants the printer-friendly recipe.

    – only_pro
    yesterday
















30















Increasingly often, if you Google for a recipe your search results will be full of long, image-rich blog posts that, somewhere in there, have the actual recipe you were looking for. Many of these have a "printer-friendly version" link to make that easier; I can get the stuff I need in my kitchen on paper easily, but the author doesn't have to cut back on the part that is interesting when cooking is not imminent. Here's an example of the basic idea -- if you click on the "print" link it starts your browser print dialogue with a subset of the page's content. But that site made a separate page for the print version, and I want to post the recipe once not twice.



As somebody who sometimes posts about cooking, including recipes, on my blog, I'd like to be able to offer that printer-friendly version, too -- but I don't want to have to create the content twice. Is there some script or HTML magic that can help me? I write my blog posts in markdown and can include HTML tags. How do I modify my source to mark a portion of the post as content for a "print" link (and generate the link)?










share|improve this question




















  • 5





    I also blog recipes and want this feature! What a great question.

    – Cyn
    2 days ago






  • 3





    @bruglesco single-sourcing two versions would be ok if necessary, but sometimes I edit after posting so having it just there once, with the print view generated on demand, would be ideal.

    – Monica Cellio
    2 days ago








  • 3





    @user2397282 first, as someone else said, our scope includes publishing (and we have whole tags about blogging, publishing, software tools, and more). Second, the question is about publishing; the answers happen to be about CSS/jQuery; my question would be shot down on SO. Third, sites have overlapping scope; SO doesn't send all its database questions to DBA and its emacs questions to Emacs, we don't send our questions about publishing on Amazon to EBooks, and Workplace doesn't send its questions about difficult coworkers to Interpersonal Skills. If you have concerns, please raise on meta.

    – Monica Cellio
    yesterday






  • 3





    I agree this is an on topic question about publishing. Posts about details of blogs unrelated to Writing are off topic but this one is about the presentation of written material in interaction with the reader. I am voting "Leave Open."

    – Cyn
    yesterday






  • 6





    Here's a tip: Everyone just wants the printer-friendly recipe.

    – only_pro
    yesterday














30












30








30


6






Increasingly often, if you Google for a recipe your search results will be full of long, image-rich blog posts that, somewhere in there, have the actual recipe you were looking for. Many of these have a "printer-friendly version" link to make that easier; I can get the stuff I need in my kitchen on paper easily, but the author doesn't have to cut back on the part that is interesting when cooking is not imminent. Here's an example of the basic idea -- if you click on the "print" link it starts your browser print dialogue with a subset of the page's content. But that site made a separate page for the print version, and I want to post the recipe once not twice.



As somebody who sometimes posts about cooking, including recipes, on my blog, I'd like to be able to offer that printer-friendly version, too -- but I don't want to have to create the content twice. Is there some script or HTML magic that can help me? I write my blog posts in markdown and can include HTML tags. How do I modify my source to mark a portion of the post as content for a "print" link (and generate the link)?










share|improve this question
















Increasingly often, if you Google for a recipe your search results will be full of long, image-rich blog posts that, somewhere in there, have the actual recipe you were looking for. Many of these have a "printer-friendly version" link to make that easier; I can get the stuff I need in my kitchen on paper easily, but the author doesn't have to cut back on the part that is interesting when cooking is not imminent. Here's an example of the basic idea -- if you click on the "print" link it starts your browser print dialogue with a subset of the page's content. But that site made a separate page for the print version, and I want to post the recipe once not twice.



As somebody who sometimes posts about cooking, including recipes, on my blog, I'd like to be able to offer that printer-friendly version, too -- but I don't want to have to create the content twice. Is there some script or HTML magic that can help me? I write my blog posts in markdown and can include HTML tags. How do I modify my source to mark a portion of the post as content for a "print" link (and generate the link)?







non-fiction tools blog food-writing






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited 2 days ago







Monica Cellio

















asked 2 days ago









Monica CellioMonica Cellio

17k23891




17k23891








  • 5





    I also blog recipes and want this feature! What a great question.

    – Cyn
    2 days ago






  • 3





    @bruglesco single-sourcing two versions would be ok if necessary, but sometimes I edit after posting so having it just there once, with the print view generated on demand, would be ideal.

    – Monica Cellio
    2 days ago








  • 3





    @user2397282 first, as someone else said, our scope includes publishing (and we have whole tags about blogging, publishing, software tools, and more). Second, the question is about publishing; the answers happen to be about CSS/jQuery; my question would be shot down on SO. Third, sites have overlapping scope; SO doesn't send all its database questions to DBA and its emacs questions to Emacs, we don't send our questions about publishing on Amazon to EBooks, and Workplace doesn't send its questions about difficult coworkers to Interpersonal Skills. If you have concerns, please raise on meta.

    – Monica Cellio
    yesterday






  • 3





    I agree this is an on topic question about publishing. Posts about details of blogs unrelated to Writing are off topic but this one is about the presentation of written material in interaction with the reader. I am voting "Leave Open."

    – Cyn
    yesterday






  • 6





    Here's a tip: Everyone just wants the printer-friendly recipe.

    – only_pro
    yesterday














  • 5





    I also blog recipes and want this feature! What a great question.

    – Cyn
    2 days ago






  • 3





    @bruglesco single-sourcing two versions would be ok if necessary, but sometimes I edit after posting so having it just there once, with the print view generated on demand, would be ideal.

    – Monica Cellio
    2 days ago








  • 3





    @user2397282 first, as someone else said, our scope includes publishing (and we have whole tags about blogging, publishing, software tools, and more). Second, the question is about publishing; the answers happen to be about CSS/jQuery; my question would be shot down on SO. Third, sites have overlapping scope; SO doesn't send all its database questions to DBA and its emacs questions to Emacs, we don't send our questions about publishing on Amazon to EBooks, and Workplace doesn't send its questions about difficult coworkers to Interpersonal Skills. If you have concerns, please raise on meta.

    – Monica Cellio
    yesterday






  • 3





    I agree this is an on topic question about publishing. Posts about details of blogs unrelated to Writing are off topic but this one is about the presentation of written material in interaction with the reader. I am voting "Leave Open."

    – Cyn
    yesterday






  • 6





    Here's a tip: Everyone just wants the printer-friendly recipe.

    – only_pro
    yesterday








5




5





I also blog recipes and want this feature! What a great question.

– Cyn
2 days ago





I also blog recipes and want this feature! What a great question.

– Cyn
2 days ago




3




3





@bruglesco single-sourcing two versions would be ok if necessary, but sometimes I edit after posting so having it just there once, with the print view generated on demand, would be ideal.

– Monica Cellio
2 days ago







@bruglesco single-sourcing two versions would be ok if necessary, but sometimes I edit after posting so having it just there once, with the print view generated on demand, would be ideal.

– Monica Cellio
2 days ago






3




3





@user2397282 first, as someone else said, our scope includes publishing (and we have whole tags about blogging, publishing, software tools, and more). Second, the question is about publishing; the answers happen to be about CSS/jQuery; my question would be shot down on SO. Third, sites have overlapping scope; SO doesn't send all its database questions to DBA and its emacs questions to Emacs, we don't send our questions about publishing on Amazon to EBooks, and Workplace doesn't send its questions about difficult coworkers to Interpersonal Skills. If you have concerns, please raise on meta.

– Monica Cellio
yesterday





@user2397282 first, as someone else said, our scope includes publishing (and we have whole tags about blogging, publishing, software tools, and more). Second, the question is about publishing; the answers happen to be about CSS/jQuery; my question would be shot down on SO. Third, sites have overlapping scope; SO doesn't send all its database questions to DBA and its emacs questions to Emacs, we don't send our questions about publishing on Amazon to EBooks, and Workplace doesn't send its questions about difficult coworkers to Interpersonal Skills. If you have concerns, please raise on meta.

– Monica Cellio
yesterday




3




3





I agree this is an on topic question about publishing. Posts about details of blogs unrelated to Writing are off topic but this one is about the presentation of written material in interaction with the reader. I am voting "Leave Open."

– Cyn
yesterday





I agree this is an on topic question about publishing. Posts about details of blogs unrelated to Writing are off topic but this one is about the presentation of written material in interaction with the reader. I am voting "Leave Open."

– Cyn
yesterday




6




6





Here's a tip: Everyone just wants the printer-friendly recipe.

– only_pro
yesterday





Here's a tip: Everyone just wants the printer-friendly recipe.

– only_pro
yesterday










7 Answers
7






active

oldest

votes


















20














CSS supports media queries since Level 2, Revision 1. That's from way back in 2011, so any modern web browser should support it.



If you're able to specify custom CSS, and apply custom CSS classes to your content, then you can define a CSS class such that the pictures and other ancilliary content is shown on screen, but only the actual recipe is printed on paper.



This way, you don't need to have a separate "printer friendly" page, because you're using CSS to define what "printer friendly" means for your particular content. Of course, it assumes that you have control over the CSS in the first place! The person visiting your web site just prints via their browser's normal "print" function.



Specifically, as discussed on MDN, you can either target print media, or a specific characteristic of a media (a feature). For the former, you'd add something like



@media print {
img.food-photo { display: none; }
body { color: black; }
}


to hide food-photo class imgs and set the text color to black when the rendering media is identified as print.



For the latter, you can target non-color-capable media (whether screen, print, or otherwise) by writing something like



@media not color /* untested, but looks like it should work */ {
body { color: black; }
}


to set the text color to black where color is not supported.



These can be combined to form even more complex rules, and of course the normal CSS inheritance rules apply as well, so you can override only those attributes that need to be different between, say, print and non-print.



You might also be interested in CSS feature queries, which look to be similar but geared toward even more specific feature support; for example, one example shows how to apply specific CSS depending on whether display: flex is supported. This looks more useful for when you want to know that the user agent (browser) supports a feature, than for targetting specific media types or capabilities.



I came across a Stack Overflow question at What does @media screen and (max-width: 1024px) mean in CSS? which has some more complex examples that you may find enlightening.



I think that the biggest downside to using CSS for this is that it leaves the visitor with no easy way to print the whole page including the "narrative/journey" if that's what they want to do. There are tricks that one can use, but those by their very nature are rather technical.






share|improve this answer





















  • 10





    How can a reader discover that the page will print well? I'd cut and paste the relevant content into an editor and try to print from there, and only see if the print is tolerable if cut-and-paste is broken somehow.

    – Jeffrey Bosboom
    yesterday






  • 2





    @JeffreyBosboom If the user presses print preview, they will see a rendering first. This dialog can also be opened with a link, IIRC.

    – Graipher
    yesterday






  • 10





    I'd be very surprised if the page printed differently as it is shown on screen. The general expectation is that the "print" function will print the page as it is, and definitely not after stripping away certain parts (besides ads). Or consider what would happen if someone actually wanted to print the whole story with all the fluff and how would they achieve that.

    – zovits
    yesterday






  • 3





    @undefined At the start! The whole point of the exercise is so that people don't have to trawl through huge amounts of fluff to get to the information you need, and you're putting the information they need after all that fluff.

    – David Richerby
    yesterday






  • 4





    @Polygnome the point is that the user will not go to the print dialog/preview if the page looks like something that is not worthy of printing because it is too cluttered.

    – lucidbrot
    yesterday



















11














TL;DR: Put the important stuff atop.



This isn't the technical solution you were looking for, but it's another way to give both types of readers what they want.



Readers who want the full story will read your blog post regardless of where you place the actual recipe. So why not place it right atop, maybe prefaced with a "TL;DR" (too long; didn't read)? Busy readers who just came for the recipe will immediately find what they are looking for and read no further. They can also print your recipe by only selecting the first page.






share|improve this answer










New contributor




henning is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
















  • 2





    This also avoids any technical issues like disabled javascript, broken css, additional effort of learning how to do it etc. Btw, I love that your answer starts with a TL;DR

    – lucidbrot
    yesterday






  • 1





    Clean, simple, and cross-platform. Another advantage is that when the reader's search engine finds a page that doesn't match what you're looking for (perhaps because an essential keyword is mentioned in the blogpost bit or the footer) they can spot that from the recipe.

    – Chris H
    15 hours ago



















5














You can put your content into a <div id="recipeXYZ"> nested normally within your blog post. Then you can load the content to a print page dynamically. Now you can print from your original page, with its images and story, or from your print page, which is more printer friendly. You can also modify your recipe from one central location and have it update both pages as they both always receive their content from the same source.



To generate the print page just add the button:



<span id="printPreview">printer friendly version (requires javascript)</span>

$("#printPreview").click(function(){
var w = window.open(); // you can change the dimenstions of the window here.
w.document.open().write("#recipeXYZ");
// you probably want to create the actual print button here.
});





share|improve this answer





















  • 12





    If you go this route, please for the love of all things holy make sure it works with non-Javascript-enabled browsers. With all the carp that gets fed as Javascript these days, quite a number of users run their browsers with varying Javascript disabling extensions, including the ilk of NoScript and uMatrix. Graceful degredation can make a site using this technique at least usable to those users as well. (Obviously, disabling Javascript trades off some functionality, and anyone who does it likely realizes that -- but the main content should at least display without Javascript.)

    – a CVn
    yesterday



















3














WordPress Answer



If you're using WordPress, I've got really good news for you. The example that you provided is using a WordPress plugin: https://wordpress.org/plugins/easyrecipe/




Adding a recipe and getting the Recipe View microdata correct is not
only time consuming but it’s also pretty geeky and most cooks prefer
to cook and share, not code webpages.



Enter EasyRecipe.




Non-Wordpress Answer



If you are not using Wordpress I would give you 3 suggestions




  1. If I was blogging recipes, what I would do is that I would create a separate pdf of the easy view and just link to it. While that doesn't synchronize, that's what I would do.


  2. If you really want an html page instead of a pdf, You can create a separate blog. And the "Image and wordy" blog can reference the "easy" recipe blog.


  3. Finally, if neither of those work because you REALLY want the data synced, I would use the other answers already given to use the @media print styling.






share|improve this answer































    2














    You use @media rules in your CSS style sheets to define which html tags you want to print and which are only visible on screen. E.g.



    @media print {
    .stuff-you-don't-want-to-print {
    display: none;
    }
    }


    To print the current browser window, you print it with JavaScript, e.g.



    <a href="javascript:window.print()">Print</a>




    The page you link to actually provides a separate web page to print. You can see that the URL of the page you print is different than the URL of the blog post. And if you look at the source code the pages are different. So in fact your "example" is an example of what you don't want, when you say that "[you] don't want to have to create the content twice". That page has created the content twice.



    If you don't want to create the content twice, use media queries.






    share|improve this answer





















    • 1





      About the example -- yeah, I meant that that's the effect I want, but not that implementation. I"ll clarify. As for your meta question, software questions about publishing are fine here; we even have a whole tag, plus several others (like scrivener and dita).

      – Monica Cellio
      2 days ago





















    2














    disclaimer: I'm not, in anyway, associated with the printfriendly company.



    I found the printfriendly plugin pretty useful and easy to implement. It is a small script you can add to your website and it displays a print (and an optional pdf/mail) button.



    https://www.printfriendly.com/about




    quote form their website:

    PrintFriendly cleans and formats web pages for perfect print experience. PrintFriendly removes ads, navigation and web page junk, so you save paper and ink when you print. It's free and easy to use. Perfect to use at home, the office, or whenever you need to print a web page.






    I created a (quick and dirty, sorry for that) test page where I included this script:



    Here we see the test page with the included printfriendly button:


    printfriendly button included



    Here is the page setup dialog which appears after one clicked the print button. You are able to delete various parts of the page you want to print:


    printfriendly page setup



    This is the output pdf generated by the script:


    printfriendly pdf result



    Of course, everybody should check if this works on his website and if all data protection stuff is okay for his needs.



    For me, the advantage of this solution is that you don't need to manage two versions of the content or mess around with more or less difficult CSS.



    A potential downside could be GDPR related issues in the free version. There is also a payed version which claims to be GDPR compliant.






    share|improve this answer








    New contributor




    undefined is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.




























      1














      In a lot of ways, quests on online games like RuneScape are very much like recipes. I think you could take a page out of their book. Compare the following two pages:



      https://oldschool.runescape.wiki/w/Dragon_Slayer
      https://oldschool.runescape.wiki/w/Dragon_Slayer/Quick_guide



      At the top of each is a snippet that explains that there is a quick guide, or if you're on the quick guide and want the fuller description, that that exists as well. I think this paradigm would work very well for the recipes.



      enter image description here



      One potential issue here is that you have to essentially maintain two separate articles. But one of them, by definition, is pretty slimmed down, so it shouldn't be too much of an issue. I know this is something you specifically said you didn't want, but I wanted to throw it out there as a form of "When this problem came up, here's a solution for it in the wild that seems to actually work well."






      share|improve this answer
























        Your Answer








        StackExchange.ready(function() {
        var channelOptions = {
        tags: "".split(" "),
        id: "166"
        };
        initTagRenderer("".split(" "), "".split(" "), channelOptions);

        StackExchange.using("externalEditor", function() {
        // Have to fire editor after snippets, if snippets enabled
        if (StackExchange.settings.snippets.snippetsEnabled) {
        StackExchange.using("snippets", function() {
        createEditor();
        });
        }
        else {
        createEditor();
        }
        });

        function createEditor() {
        StackExchange.prepareEditor({
        heartbeatType: 'answer',
        autoActivateHeartbeat: false,
        convertImagesToLinks: false,
        noModals: true,
        showLowRepImageUploadWarning: true,
        reputationToPostImages: null,
        bindNavPrevention: true,
        postfix: "",
        imageUploader: {
        brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
        contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
        allowUrls: true
        },
        noCode: true, onDemand: true,
        discardSelector: ".discard-answer"
        ,immediatelyShowMarkdownHelp:true
        });


        }
        });














        draft saved

        draft discarded


















        StackExchange.ready(
        function () {
        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fwriting.stackexchange.com%2fquestions%2f44450%2fwhen-blogging-recipes-how-can-i-support-both-readers-who-want-the-narrative-jou%23new-answer', 'question_page');
        }
        );

        Post as a guest















        Required, but never shown

























        7 Answers
        7






        active

        oldest

        votes








        7 Answers
        7






        active

        oldest

        votes









        active

        oldest

        votes






        active

        oldest

        votes









        20














        CSS supports media queries since Level 2, Revision 1. That's from way back in 2011, so any modern web browser should support it.



        If you're able to specify custom CSS, and apply custom CSS classes to your content, then you can define a CSS class such that the pictures and other ancilliary content is shown on screen, but only the actual recipe is printed on paper.



        This way, you don't need to have a separate "printer friendly" page, because you're using CSS to define what "printer friendly" means for your particular content. Of course, it assumes that you have control over the CSS in the first place! The person visiting your web site just prints via their browser's normal "print" function.



        Specifically, as discussed on MDN, you can either target print media, or a specific characteristic of a media (a feature). For the former, you'd add something like



        @media print {
        img.food-photo { display: none; }
        body { color: black; }
        }


        to hide food-photo class imgs and set the text color to black when the rendering media is identified as print.



        For the latter, you can target non-color-capable media (whether screen, print, or otherwise) by writing something like



        @media not color /* untested, but looks like it should work */ {
        body { color: black; }
        }


        to set the text color to black where color is not supported.



        These can be combined to form even more complex rules, and of course the normal CSS inheritance rules apply as well, so you can override only those attributes that need to be different between, say, print and non-print.



        You might also be interested in CSS feature queries, which look to be similar but geared toward even more specific feature support; for example, one example shows how to apply specific CSS depending on whether display: flex is supported. This looks more useful for when you want to know that the user agent (browser) supports a feature, than for targetting specific media types or capabilities.



        I came across a Stack Overflow question at What does @media screen and (max-width: 1024px) mean in CSS? which has some more complex examples that you may find enlightening.



        I think that the biggest downside to using CSS for this is that it leaves the visitor with no easy way to print the whole page including the "narrative/journey" if that's what they want to do. There are tricks that one can use, but those by their very nature are rather technical.






        share|improve this answer





















        • 10





          How can a reader discover that the page will print well? I'd cut and paste the relevant content into an editor and try to print from there, and only see if the print is tolerable if cut-and-paste is broken somehow.

          – Jeffrey Bosboom
          yesterday






        • 2





          @JeffreyBosboom If the user presses print preview, they will see a rendering first. This dialog can also be opened with a link, IIRC.

          – Graipher
          yesterday






        • 10





          I'd be very surprised if the page printed differently as it is shown on screen. The general expectation is that the "print" function will print the page as it is, and definitely not after stripping away certain parts (besides ads). Or consider what would happen if someone actually wanted to print the whole story with all the fluff and how would they achieve that.

          – zovits
          yesterday






        • 3





          @undefined At the start! The whole point of the exercise is so that people don't have to trawl through huge amounts of fluff to get to the information you need, and you're putting the information they need after all that fluff.

          – David Richerby
          yesterday






        • 4





          @Polygnome the point is that the user will not go to the print dialog/preview if the page looks like something that is not worthy of printing because it is too cluttered.

          – lucidbrot
          yesterday
















        20














        CSS supports media queries since Level 2, Revision 1. That's from way back in 2011, so any modern web browser should support it.



        If you're able to specify custom CSS, and apply custom CSS classes to your content, then you can define a CSS class such that the pictures and other ancilliary content is shown on screen, but only the actual recipe is printed on paper.



        This way, you don't need to have a separate "printer friendly" page, because you're using CSS to define what "printer friendly" means for your particular content. Of course, it assumes that you have control over the CSS in the first place! The person visiting your web site just prints via their browser's normal "print" function.



        Specifically, as discussed on MDN, you can either target print media, or a specific characteristic of a media (a feature). For the former, you'd add something like



        @media print {
        img.food-photo { display: none; }
        body { color: black; }
        }


        to hide food-photo class imgs and set the text color to black when the rendering media is identified as print.



        For the latter, you can target non-color-capable media (whether screen, print, or otherwise) by writing something like



        @media not color /* untested, but looks like it should work */ {
        body { color: black; }
        }


        to set the text color to black where color is not supported.



        These can be combined to form even more complex rules, and of course the normal CSS inheritance rules apply as well, so you can override only those attributes that need to be different between, say, print and non-print.



        You might also be interested in CSS feature queries, which look to be similar but geared toward even more specific feature support; for example, one example shows how to apply specific CSS depending on whether display: flex is supported. This looks more useful for when you want to know that the user agent (browser) supports a feature, than for targetting specific media types or capabilities.



        I came across a Stack Overflow question at What does @media screen and (max-width: 1024px) mean in CSS? which has some more complex examples that you may find enlightening.



        I think that the biggest downside to using CSS for this is that it leaves the visitor with no easy way to print the whole page including the "narrative/journey" if that's what they want to do. There are tricks that one can use, but those by their very nature are rather technical.






        share|improve this answer





















        • 10





          How can a reader discover that the page will print well? I'd cut and paste the relevant content into an editor and try to print from there, and only see if the print is tolerable if cut-and-paste is broken somehow.

          – Jeffrey Bosboom
          yesterday






        • 2





          @JeffreyBosboom If the user presses print preview, they will see a rendering first. This dialog can also be opened with a link, IIRC.

          – Graipher
          yesterday






        • 10





          I'd be very surprised if the page printed differently as it is shown on screen. The general expectation is that the "print" function will print the page as it is, and definitely not after stripping away certain parts (besides ads). Or consider what would happen if someone actually wanted to print the whole story with all the fluff and how would they achieve that.

          – zovits
          yesterday






        • 3





          @undefined At the start! The whole point of the exercise is so that people don't have to trawl through huge amounts of fluff to get to the information you need, and you're putting the information they need after all that fluff.

          – David Richerby
          yesterday






        • 4





          @Polygnome the point is that the user will not go to the print dialog/preview if the page looks like something that is not worthy of printing because it is too cluttered.

          – lucidbrot
          yesterday














        20












        20








        20







        CSS supports media queries since Level 2, Revision 1. That's from way back in 2011, so any modern web browser should support it.



        If you're able to specify custom CSS, and apply custom CSS classes to your content, then you can define a CSS class such that the pictures and other ancilliary content is shown on screen, but only the actual recipe is printed on paper.



        This way, you don't need to have a separate "printer friendly" page, because you're using CSS to define what "printer friendly" means for your particular content. Of course, it assumes that you have control over the CSS in the first place! The person visiting your web site just prints via their browser's normal "print" function.



        Specifically, as discussed on MDN, you can either target print media, or a specific characteristic of a media (a feature). For the former, you'd add something like



        @media print {
        img.food-photo { display: none; }
        body { color: black; }
        }


        to hide food-photo class imgs and set the text color to black when the rendering media is identified as print.



        For the latter, you can target non-color-capable media (whether screen, print, or otherwise) by writing something like



        @media not color /* untested, but looks like it should work */ {
        body { color: black; }
        }


        to set the text color to black where color is not supported.



        These can be combined to form even more complex rules, and of course the normal CSS inheritance rules apply as well, so you can override only those attributes that need to be different between, say, print and non-print.



        You might also be interested in CSS feature queries, which look to be similar but geared toward even more specific feature support; for example, one example shows how to apply specific CSS depending on whether display: flex is supported. This looks more useful for when you want to know that the user agent (browser) supports a feature, than for targetting specific media types or capabilities.



        I came across a Stack Overflow question at What does @media screen and (max-width: 1024px) mean in CSS? which has some more complex examples that you may find enlightening.



        I think that the biggest downside to using CSS for this is that it leaves the visitor with no easy way to print the whole page including the "narrative/journey" if that's what they want to do. There are tricks that one can use, but those by their very nature are rather technical.






        share|improve this answer















        CSS supports media queries since Level 2, Revision 1. That's from way back in 2011, so any modern web browser should support it.



        If you're able to specify custom CSS, and apply custom CSS classes to your content, then you can define a CSS class such that the pictures and other ancilliary content is shown on screen, but only the actual recipe is printed on paper.



        This way, you don't need to have a separate "printer friendly" page, because you're using CSS to define what "printer friendly" means for your particular content. Of course, it assumes that you have control over the CSS in the first place! The person visiting your web site just prints via their browser's normal "print" function.



        Specifically, as discussed on MDN, you can either target print media, or a specific characteristic of a media (a feature). For the former, you'd add something like



        @media print {
        img.food-photo { display: none; }
        body { color: black; }
        }


        to hide food-photo class imgs and set the text color to black when the rendering media is identified as print.



        For the latter, you can target non-color-capable media (whether screen, print, or otherwise) by writing something like



        @media not color /* untested, but looks like it should work */ {
        body { color: black; }
        }


        to set the text color to black where color is not supported.



        These can be combined to form even more complex rules, and of course the normal CSS inheritance rules apply as well, so you can override only those attributes that need to be different between, say, print and non-print.



        You might also be interested in CSS feature queries, which look to be similar but geared toward even more specific feature support; for example, one example shows how to apply specific CSS depending on whether display: flex is supported. This looks more useful for when you want to know that the user agent (browser) supports a feature, than for targetting specific media types or capabilities.



        I came across a Stack Overflow question at What does @media screen and (max-width: 1024px) mean in CSS? which has some more complex examples that you may find enlightening.



        I think that the biggest downside to using CSS for this is that it leaves the visitor with no easy way to print the whole page including the "narrative/journey" if that's what they want to do. There are tricks that one can use, but those by their very nature are rather technical.







        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited 2 days ago

























        answered 2 days ago









        a CVna CVn

        2,88231734




        2,88231734








        • 10





          How can a reader discover that the page will print well? I'd cut and paste the relevant content into an editor and try to print from there, and only see if the print is tolerable if cut-and-paste is broken somehow.

          – Jeffrey Bosboom
          yesterday






        • 2





          @JeffreyBosboom If the user presses print preview, they will see a rendering first. This dialog can also be opened with a link, IIRC.

          – Graipher
          yesterday






        • 10





          I'd be very surprised if the page printed differently as it is shown on screen. The general expectation is that the "print" function will print the page as it is, and definitely not after stripping away certain parts (besides ads). Or consider what would happen if someone actually wanted to print the whole story with all the fluff and how would they achieve that.

          – zovits
          yesterday






        • 3





          @undefined At the start! The whole point of the exercise is so that people don't have to trawl through huge amounts of fluff to get to the information you need, and you're putting the information they need after all that fluff.

          – David Richerby
          yesterday






        • 4





          @Polygnome the point is that the user will not go to the print dialog/preview if the page looks like something that is not worthy of printing because it is too cluttered.

          – lucidbrot
          yesterday














        • 10





          How can a reader discover that the page will print well? I'd cut and paste the relevant content into an editor and try to print from there, and only see if the print is tolerable if cut-and-paste is broken somehow.

          – Jeffrey Bosboom
          yesterday






        • 2





          @JeffreyBosboom If the user presses print preview, they will see a rendering first. This dialog can also be opened with a link, IIRC.

          – Graipher
          yesterday






        • 10





          I'd be very surprised if the page printed differently as it is shown on screen. The general expectation is that the "print" function will print the page as it is, and definitely not after stripping away certain parts (besides ads). Or consider what would happen if someone actually wanted to print the whole story with all the fluff and how would they achieve that.

          – zovits
          yesterday






        • 3





          @undefined At the start! The whole point of the exercise is so that people don't have to trawl through huge amounts of fluff to get to the information you need, and you're putting the information they need after all that fluff.

          – David Richerby
          yesterday






        • 4





          @Polygnome the point is that the user will not go to the print dialog/preview if the page looks like something that is not worthy of printing because it is too cluttered.

          – lucidbrot
          yesterday








        10




        10





        How can a reader discover that the page will print well? I'd cut and paste the relevant content into an editor and try to print from there, and only see if the print is tolerable if cut-and-paste is broken somehow.

        – Jeffrey Bosboom
        yesterday





        How can a reader discover that the page will print well? I'd cut and paste the relevant content into an editor and try to print from there, and only see if the print is tolerable if cut-and-paste is broken somehow.

        – Jeffrey Bosboom
        yesterday




        2




        2





        @JeffreyBosboom If the user presses print preview, they will see a rendering first. This dialog can also be opened with a link, IIRC.

        – Graipher
        yesterday





        @JeffreyBosboom If the user presses print preview, they will see a rendering first. This dialog can also be opened with a link, IIRC.

        – Graipher
        yesterday




        10




        10





        I'd be very surprised if the page printed differently as it is shown on screen. The general expectation is that the "print" function will print the page as it is, and definitely not after stripping away certain parts (besides ads). Or consider what would happen if someone actually wanted to print the whole story with all the fluff and how would they achieve that.

        – zovits
        yesterday





        I'd be very surprised if the page printed differently as it is shown on screen. The general expectation is that the "print" function will print the page as it is, and definitely not after stripping away certain parts (besides ads). Or consider what would happen if someone actually wanted to print the whole story with all the fluff and how would they achieve that.

        – zovits
        yesterday




        3




        3





        @undefined At the start! The whole point of the exercise is so that people don't have to trawl through huge amounts of fluff to get to the information you need, and you're putting the information they need after all that fluff.

        – David Richerby
        yesterday





        @undefined At the start! The whole point of the exercise is so that people don't have to trawl through huge amounts of fluff to get to the information you need, and you're putting the information they need after all that fluff.

        – David Richerby
        yesterday




        4




        4





        @Polygnome the point is that the user will not go to the print dialog/preview if the page looks like something that is not worthy of printing because it is too cluttered.

        – lucidbrot
        yesterday





        @Polygnome the point is that the user will not go to the print dialog/preview if the page looks like something that is not worthy of printing because it is too cluttered.

        – lucidbrot
        yesterday











        11














        TL;DR: Put the important stuff atop.



        This isn't the technical solution you were looking for, but it's another way to give both types of readers what they want.



        Readers who want the full story will read your blog post regardless of where you place the actual recipe. So why not place it right atop, maybe prefaced with a "TL;DR" (too long; didn't read)? Busy readers who just came for the recipe will immediately find what they are looking for and read no further. They can also print your recipe by only selecting the first page.






        share|improve this answer










        New contributor




        henning is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.
















        • 2





          This also avoids any technical issues like disabled javascript, broken css, additional effort of learning how to do it etc. Btw, I love that your answer starts with a TL;DR

          – lucidbrot
          yesterday






        • 1





          Clean, simple, and cross-platform. Another advantage is that when the reader's search engine finds a page that doesn't match what you're looking for (perhaps because an essential keyword is mentioned in the blogpost bit or the footer) they can spot that from the recipe.

          – Chris H
          15 hours ago
















        11














        TL;DR: Put the important stuff atop.



        This isn't the technical solution you were looking for, but it's another way to give both types of readers what they want.



        Readers who want the full story will read your blog post regardless of where you place the actual recipe. So why not place it right atop, maybe prefaced with a "TL;DR" (too long; didn't read)? Busy readers who just came for the recipe will immediately find what they are looking for and read no further. They can also print your recipe by only selecting the first page.






        share|improve this answer










        New contributor




        henning is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.
















        • 2





          This also avoids any technical issues like disabled javascript, broken css, additional effort of learning how to do it etc. Btw, I love that your answer starts with a TL;DR

          – lucidbrot
          yesterday






        • 1





          Clean, simple, and cross-platform. Another advantage is that when the reader's search engine finds a page that doesn't match what you're looking for (perhaps because an essential keyword is mentioned in the blogpost bit or the footer) they can spot that from the recipe.

          – Chris H
          15 hours ago














        11












        11








        11







        TL;DR: Put the important stuff atop.



        This isn't the technical solution you were looking for, but it's another way to give both types of readers what they want.



        Readers who want the full story will read your blog post regardless of where you place the actual recipe. So why not place it right atop, maybe prefaced with a "TL;DR" (too long; didn't read)? Busy readers who just came for the recipe will immediately find what they are looking for and read no further. They can also print your recipe by only selecting the first page.






        share|improve this answer










        New contributor




        henning is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.










        TL;DR: Put the important stuff atop.



        This isn't the technical solution you were looking for, but it's another way to give both types of readers what they want.



        Readers who want the full story will read your blog post regardless of where you place the actual recipe. So why not place it right atop, maybe prefaced with a "TL;DR" (too long; didn't read)? Busy readers who just came for the recipe will immediately find what they are looking for and read no further. They can also print your recipe by only selecting the first page.







        share|improve this answer










        New contributor




        henning is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.









        share|improve this answer



        share|improve this answer








        edited yesterday





















        New contributor




        henning is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.









        answered yesterday









        henninghenning

        21115




        21115




        New contributor




        henning is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.





        New contributor





        henning is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.






        henning is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
        Check out our Code of Conduct.








        • 2





          This also avoids any technical issues like disabled javascript, broken css, additional effort of learning how to do it etc. Btw, I love that your answer starts with a TL;DR

          – lucidbrot
          yesterday






        • 1





          Clean, simple, and cross-platform. Another advantage is that when the reader's search engine finds a page that doesn't match what you're looking for (perhaps because an essential keyword is mentioned in the blogpost bit or the footer) they can spot that from the recipe.

          – Chris H
          15 hours ago














        • 2





          This also avoids any technical issues like disabled javascript, broken css, additional effort of learning how to do it etc. Btw, I love that your answer starts with a TL;DR

          – lucidbrot
          yesterday






        • 1





          Clean, simple, and cross-platform. Another advantage is that when the reader's search engine finds a page that doesn't match what you're looking for (perhaps because an essential keyword is mentioned in the blogpost bit or the footer) they can spot that from the recipe.

          – Chris H
          15 hours ago








        2




        2





        This also avoids any technical issues like disabled javascript, broken css, additional effort of learning how to do it etc. Btw, I love that your answer starts with a TL;DR

        – lucidbrot
        yesterday





        This also avoids any technical issues like disabled javascript, broken css, additional effort of learning how to do it etc. Btw, I love that your answer starts with a TL;DR

        – lucidbrot
        yesterday




        1




        1





        Clean, simple, and cross-platform. Another advantage is that when the reader's search engine finds a page that doesn't match what you're looking for (perhaps because an essential keyword is mentioned in the blogpost bit or the footer) they can spot that from the recipe.

        – Chris H
        15 hours ago





        Clean, simple, and cross-platform. Another advantage is that when the reader's search engine finds a page that doesn't match what you're looking for (perhaps because an essential keyword is mentioned in the blogpost bit or the footer) they can spot that from the recipe.

        – Chris H
        15 hours ago











        5














        You can put your content into a <div id="recipeXYZ"> nested normally within your blog post. Then you can load the content to a print page dynamically. Now you can print from your original page, with its images and story, or from your print page, which is more printer friendly. You can also modify your recipe from one central location and have it update both pages as they both always receive their content from the same source.



        To generate the print page just add the button:



        <span id="printPreview">printer friendly version (requires javascript)</span>

        $("#printPreview").click(function(){
        var w = window.open(); // you can change the dimenstions of the window here.
        w.document.open().write("#recipeXYZ");
        // you probably want to create the actual print button here.
        });





        share|improve this answer





















        • 12





          If you go this route, please for the love of all things holy make sure it works with non-Javascript-enabled browsers. With all the carp that gets fed as Javascript these days, quite a number of users run their browsers with varying Javascript disabling extensions, including the ilk of NoScript and uMatrix. Graceful degredation can make a site using this technique at least usable to those users as well. (Obviously, disabling Javascript trades off some functionality, and anyone who does it likely realizes that -- but the main content should at least display without Javascript.)

          – a CVn
          yesterday
















        5














        You can put your content into a <div id="recipeXYZ"> nested normally within your blog post. Then you can load the content to a print page dynamically. Now you can print from your original page, with its images and story, or from your print page, which is more printer friendly. You can also modify your recipe from one central location and have it update both pages as they both always receive their content from the same source.



        To generate the print page just add the button:



        <span id="printPreview">printer friendly version (requires javascript)</span>

        $("#printPreview").click(function(){
        var w = window.open(); // you can change the dimenstions of the window here.
        w.document.open().write("#recipeXYZ");
        // you probably want to create the actual print button here.
        });





        share|improve this answer





















        • 12





          If you go this route, please for the love of all things holy make sure it works with non-Javascript-enabled browsers. With all the carp that gets fed as Javascript these days, quite a number of users run their browsers with varying Javascript disabling extensions, including the ilk of NoScript and uMatrix. Graceful degredation can make a site using this technique at least usable to those users as well. (Obviously, disabling Javascript trades off some functionality, and anyone who does it likely realizes that -- but the main content should at least display without Javascript.)

          – a CVn
          yesterday














        5












        5








        5







        You can put your content into a <div id="recipeXYZ"> nested normally within your blog post. Then you can load the content to a print page dynamically. Now you can print from your original page, with its images and story, or from your print page, which is more printer friendly. You can also modify your recipe from one central location and have it update both pages as they both always receive their content from the same source.



        To generate the print page just add the button:



        <span id="printPreview">printer friendly version (requires javascript)</span>

        $("#printPreview").click(function(){
        var w = window.open(); // you can change the dimenstions of the window here.
        w.document.open().write("#recipeXYZ");
        // you probably want to create the actual print button here.
        });





        share|improve this answer















        You can put your content into a <div id="recipeXYZ"> nested normally within your blog post. Then you can load the content to a print page dynamically. Now you can print from your original page, with its images and story, or from your print page, which is more printer friendly. You can also modify your recipe from one central location and have it update both pages as they both always receive their content from the same source.



        To generate the print page just add the button:



        <span id="printPreview">printer friendly version (requires javascript)</span>

        $("#printPreview").click(function(){
        var w = window.open(); // you can change the dimenstions of the window here.
        w.document.open().write("#recipeXYZ");
        // you probably want to create the actual print button here.
        });






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited 22 hours ago

























        answered yesterday









        bruglescobruglesco

        2,526742




        2,526742








        • 12





          If you go this route, please for the love of all things holy make sure it works with non-Javascript-enabled browsers. With all the carp that gets fed as Javascript these days, quite a number of users run their browsers with varying Javascript disabling extensions, including the ilk of NoScript and uMatrix. Graceful degredation can make a site using this technique at least usable to those users as well. (Obviously, disabling Javascript trades off some functionality, and anyone who does it likely realizes that -- but the main content should at least display without Javascript.)

          – a CVn
          yesterday














        • 12





          If you go this route, please for the love of all things holy make sure it works with non-Javascript-enabled browsers. With all the carp that gets fed as Javascript these days, quite a number of users run their browsers with varying Javascript disabling extensions, including the ilk of NoScript and uMatrix. Graceful degredation can make a site using this technique at least usable to those users as well. (Obviously, disabling Javascript trades off some functionality, and anyone who does it likely realizes that -- but the main content should at least display without Javascript.)

          – a CVn
          yesterday








        12




        12





        If you go this route, please for the love of all things holy make sure it works with non-Javascript-enabled browsers. With all the carp that gets fed as Javascript these days, quite a number of users run their browsers with varying Javascript disabling extensions, including the ilk of NoScript and uMatrix. Graceful degredation can make a site using this technique at least usable to those users as well. (Obviously, disabling Javascript trades off some functionality, and anyone who does it likely realizes that -- but the main content should at least display without Javascript.)

        – a CVn
        yesterday





        If you go this route, please for the love of all things holy make sure it works with non-Javascript-enabled browsers. With all the carp that gets fed as Javascript these days, quite a number of users run their browsers with varying Javascript disabling extensions, including the ilk of NoScript and uMatrix. Graceful degredation can make a site using this technique at least usable to those users as well. (Obviously, disabling Javascript trades off some functionality, and anyone who does it likely realizes that -- but the main content should at least display without Javascript.)

        – a CVn
        yesterday











        3














        WordPress Answer



        If you're using WordPress, I've got really good news for you. The example that you provided is using a WordPress plugin: https://wordpress.org/plugins/easyrecipe/




        Adding a recipe and getting the Recipe View microdata correct is not
        only time consuming but it’s also pretty geeky and most cooks prefer
        to cook and share, not code webpages.



        Enter EasyRecipe.




        Non-Wordpress Answer



        If you are not using Wordpress I would give you 3 suggestions




        1. If I was blogging recipes, what I would do is that I would create a separate pdf of the easy view and just link to it. While that doesn't synchronize, that's what I would do.


        2. If you really want an html page instead of a pdf, You can create a separate blog. And the "Image and wordy" blog can reference the "easy" recipe blog.


        3. Finally, if neither of those work because you REALLY want the data synced, I would use the other answers already given to use the @media print styling.






        share|improve this answer




























          3














          WordPress Answer



          If you're using WordPress, I've got really good news for you. The example that you provided is using a WordPress plugin: https://wordpress.org/plugins/easyrecipe/




          Adding a recipe and getting the Recipe View microdata correct is not
          only time consuming but it’s also pretty geeky and most cooks prefer
          to cook and share, not code webpages.



          Enter EasyRecipe.




          Non-Wordpress Answer



          If you are not using Wordpress I would give you 3 suggestions




          1. If I was blogging recipes, what I would do is that I would create a separate pdf of the easy view and just link to it. While that doesn't synchronize, that's what I would do.


          2. If you really want an html page instead of a pdf, You can create a separate blog. And the "Image and wordy" blog can reference the "easy" recipe blog.


          3. Finally, if neither of those work because you REALLY want the data synced, I would use the other answers already given to use the @media print styling.






          share|improve this answer


























            3












            3








            3







            WordPress Answer



            If you're using WordPress, I've got really good news for you. The example that you provided is using a WordPress plugin: https://wordpress.org/plugins/easyrecipe/




            Adding a recipe and getting the Recipe View microdata correct is not
            only time consuming but it’s also pretty geeky and most cooks prefer
            to cook and share, not code webpages.



            Enter EasyRecipe.




            Non-Wordpress Answer



            If you are not using Wordpress I would give you 3 suggestions




            1. If I was blogging recipes, what I would do is that I would create a separate pdf of the easy view and just link to it. While that doesn't synchronize, that's what I would do.


            2. If you really want an html page instead of a pdf, You can create a separate blog. And the "Image and wordy" blog can reference the "easy" recipe blog.


            3. Finally, if neither of those work because you REALLY want the data synced, I would use the other answers already given to use the @media print styling.






            share|improve this answer













            WordPress Answer



            If you're using WordPress, I've got really good news for you. The example that you provided is using a WordPress plugin: https://wordpress.org/plugins/easyrecipe/




            Adding a recipe and getting the Recipe View microdata correct is not
            only time consuming but it’s also pretty geeky and most cooks prefer
            to cook and share, not code webpages.



            Enter EasyRecipe.




            Non-Wordpress Answer



            If you are not using Wordpress I would give you 3 suggestions




            1. If I was blogging recipes, what I would do is that I would create a separate pdf of the easy view and just link to it. While that doesn't synchronize, that's what I would do.


            2. If you really want an html page instead of a pdf, You can create a separate blog. And the "Image and wordy" blog can reference the "easy" recipe blog.


            3. Finally, if neither of those work because you REALLY want the data synced, I would use the other answers already given to use the @media print styling.







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered yesterday









            DustinDustin

            1713




            1713























                2














                You use @media rules in your CSS style sheets to define which html tags you want to print and which are only visible on screen. E.g.



                @media print {
                .stuff-you-don't-want-to-print {
                display: none;
                }
                }


                To print the current browser window, you print it with JavaScript, e.g.



                <a href="javascript:window.print()">Print</a>




                The page you link to actually provides a separate web page to print. You can see that the URL of the page you print is different than the URL of the blog post. And if you look at the source code the pages are different. So in fact your "example" is an example of what you don't want, when you say that "[you] don't want to have to create the content twice". That page has created the content twice.



                If you don't want to create the content twice, use media queries.






                share|improve this answer





















                • 1





                  About the example -- yeah, I meant that that's the effect I want, but not that implementation. I"ll clarify. As for your meta question, software questions about publishing are fine here; we even have a whole tag, plus several others (like scrivener and dita).

                  – Monica Cellio
                  2 days ago


















                2














                You use @media rules in your CSS style sheets to define which html tags you want to print and which are only visible on screen. E.g.



                @media print {
                .stuff-you-don't-want-to-print {
                display: none;
                }
                }


                To print the current browser window, you print it with JavaScript, e.g.



                <a href="javascript:window.print()">Print</a>




                The page you link to actually provides a separate web page to print. You can see that the URL of the page you print is different than the URL of the blog post. And if you look at the source code the pages are different. So in fact your "example" is an example of what you don't want, when you say that "[you] don't want to have to create the content twice". That page has created the content twice.



                If you don't want to create the content twice, use media queries.






                share|improve this answer





















                • 1





                  About the example -- yeah, I meant that that's the effect I want, but not that implementation. I"ll clarify. As for your meta question, software questions about publishing are fine here; we even have a whole tag, plus several others (like scrivener and dita).

                  – Monica Cellio
                  2 days ago
















                2












                2








                2







                You use @media rules in your CSS style sheets to define which html tags you want to print and which are only visible on screen. E.g.



                @media print {
                .stuff-you-don't-want-to-print {
                display: none;
                }
                }


                To print the current browser window, you print it with JavaScript, e.g.



                <a href="javascript:window.print()">Print</a>




                The page you link to actually provides a separate web page to print. You can see that the URL of the page you print is different than the URL of the blog post. And if you look at the source code the pages are different. So in fact your "example" is an example of what you don't want, when you say that "[you] don't want to have to create the content twice". That page has created the content twice.



                If you don't want to create the content twice, use media queries.






                share|improve this answer















                You use @media rules in your CSS style sheets to define which html tags you want to print and which are only visible on screen. E.g.



                @media print {
                .stuff-you-don't-want-to-print {
                display: none;
                }
                }


                To print the current browser window, you print it with JavaScript, e.g.



                <a href="javascript:window.print()">Print</a>




                The page you link to actually provides a separate web page to print. You can see that the URL of the page you print is different than the URL of the blog post. And if you look at the source code the pages are different. So in fact your "example" is an example of what you don't want, when you say that "[you] don't want to have to create the content twice". That page has created the content twice.



                If you don't want to create the content twice, use media queries.







                share|improve this answer














                share|improve this answer



                share|improve this answer








                edited 2 days ago









                bruglesco

                2,526742




                2,526742










                answered 2 days ago







                user37740















                • 1





                  About the example -- yeah, I meant that that's the effect I want, but not that implementation. I"ll clarify. As for your meta question, software questions about publishing are fine here; we even have a whole tag, plus several others (like scrivener and dita).

                  – Monica Cellio
                  2 days ago
















                • 1





                  About the example -- yeah, I meant that that's the effect I want, but not that implementation. I"ll clarify. As for your meta question, software questions about publishing are fine here; we even have a whole tag, plus several others (like scrivener and dita).

                  – Monica Cellio
                  2 days ago










                1




                1





                About the example -- yeah, I meant that that's the effect I want, but not that implementation. I"ll clarify. As for your meta question, software questions about publishing are fine here; we even have a whole tag, plus several others (like scrivener and dita).

                – Monica Cellio
                2 days ago







                About the example -- yeah, I meant that that's the effect I want, but not that implementation. I"ll clarify. As for your meta question, software questions about publishing are fine here; we even have a whole tag, plus several others (like scrivener and dita).

                – Monica Cellio
                2 days ago













                2














                disclaimer: I'm not, in anyway, associated with the printfriendly company.



                I found the printfriendly plugin pretty useful and easy to implement. It is a small script you can add to your website and it displays a print (and an optional pdf/mail) button.



                https://www.printfriendly.com/about




                quote form their website:

                PrintFriendly cleans and formats web pages for perfect print experience. PrintFriendly removes ads, navigation and web page junk, so you save paper and ink when you print. It's free and easy to use. Perfect to use at home, the office, or whenever you need to print a web page.






                I created a (quick and dirty, sorry for that) test page where I included this script:



                Here we see the test page with the included printfriendly button:


                printfriendly button included



                Here is the page setup dialog which appears after one clicked the print button. You are able to delete various parts of the page you want to print:


                printfriendly page setup



                This is the output pdf generated by the script:


                printfriendly pdf result



                Of course, everybody should check if this works on his website and if all data protection stuff is okay for his needs.



                For me, the advantage of this solution is that you don't need to manage two versions of the content or mess around with more or less difficult CSS.



                A potential downside could be GDPR related issues in the free version. There is also a payed version which claims to be GDPR compliant.






                share|improve this answer








                New contributor




                undefined is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.

























                  2














                  disclaimer: I'm not, in anyway, associated with the printfriendly company.



                  I found the printfriendly plugin pretty useful and easy to implement. It is a small script you can add to your website and it displays a print (and an optional pdf/mail) button.



                  https://www.printfriendly.com/about




                  quote form their website:

                  PrintFriendly cleans and formats web pages for perfect print experience. PrintFriendly removes ads, navigation and web page junk, so you save paper and ink when you print. It's free and easy to use. Perfect to use at home, the office, or whenever you need to print a web page.






                  I created a (quick and dirty, sorry for that) test page where I included this script:



                  Here we see the test page with the included printfriendly button:


                  printfriendly button included



                  Here is the page setup dialog which appears after one clicked the print button. You are able to delete various parts of the page you want to print:


                  printfriendly page setup



                  This is the output pdf generated by the script:


                  printfriendly pdf result



                  Of course, everybody should check if this works on his website and if all data protection stuff is okay for his needs.



                  For me, the advantage of this solution is that you don't need to manage two versions of the content or mess around with more or less difficult CSS.



                  A potential downside could be GDPR related issues in the free version. There is also a payed version which claims to be GDPR compliant.






                  share|improve this answer








                  New contributor




                  undefined is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                  Check out our Code of Conduct.























                    2












                    2








                    2







                    disclaimer: I'm not, in anyway, associated with the printfriendly company.



                    I found the printfriendly plugin pretty useful and easy to implement. It is a small script you can add to your website and it displays a print (and an optional pdf/mail) button.



                    https://www.printfriendly.com/about




                    quote form their website:

                    PrintFriendly cleans and formats web pages for perfect print experience. PrintFriendly removes ads, navigation and web page junk, so you save paper and ink when you print. It's free and easy to use. Perfect to use at home, the office, or whenever you need to print a web page.






                    I created a (quick and dirty, sorry for that) test page where I included this script:



                    Here we see the test page with the included printfriendly button:


                    printfriendly button included



                    Here is the page setup dialog which appears after one clicked the print button. You are able to delete various parts of the page you want to print:


                    printfriendly page setup



                    This is the output pdf generated by the script:


                    printfriendly pdf result



                    Of course, everybody should check if this works on his website and if all data protection stuff is okay for his needs.



                    For me, the advantage of this solution is that you don't need to manage two versions of the content or mess around with more or less difficult CSS.



                    A potential downside could be GDPR related issues in the free version. There is also a payed version which claims to be GDPR compliant.






                    share|improve this answer








                    New contributor




                    undefined is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                    Check out our Code of Conduct.










                    disclaimer: I'm not, in anyway, associated with the printfriendly company.



                    I found the printfriendly plugin pretty useful and easy to implement. It is a small script you can add to your website and it displays a print (and an optional pdf/mail) button.



                    https://www.printfriendly.com/about




                    quote form their website:

                    PrintFriendly cleans and formats web pages for perfect print experience. PrintFriendly removes ads, navigation and web page junk, so you save paper and ink when you print. It's free and easy to use. Perfect to use at home, the office, or whenever you need to print a web page.






                    I created a (quick and dirty, sorry for that) test page where I included this script:



                    Here we see the test page with the included printfriendly button:


                    printfriendly button included



                    Here is the page setup dialog which appears after one clicked the print button. You are able to delete various parts of the page you want to print:


                    printfriendly page setup



                    This is the output pdf generated by the script:


                    printfriendly pdf result



                    Of course, everybody should check if this works on his website and if all data protection stuff is okay for his needs.



                    For me, the advantage of this solution is that you don't need to manage two versions of the content or mess around with more or less difficult CSS.



                    A potential downside could be GDPR related issues in the free version. There is also a payed version which claims to be GDPR compliant.







                    share|improve this answer








                    New contributor




                    undefined is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                    Check out our Code of Conduct.









                    share|improve this answer



                    share|improve this answer






                    New contributor




                    undefined is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                    Check out our Code of Conduct.









                    answered 17 hours ago









                    undefinedundefined

                    1212




                    1212




                    New contributor




                    undefined is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                    Check out our Code of Conduct.





                    New contributor





                    undefined is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                    Check out our Code of Conduct.






                    undefined is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                    Check out our Code of Conduct.























                        1














                        In a lot of ways, quests on online games like RuneScape are very much like recipes. I think you could take a page out of their book. Compare the following two pages:



                        https://oldschool.runescape.wiki/w/Dragon_Slayer
                        https://oldschool.runescape.wiki/w/Dragon_Slayer/Quick_guide



                        At the top of each is a snippet that explains that there is a quick guide, or if you're on the quick guide and want the fuller description, that that exists as well. I think this paradigm would work very well for the recipes.



                        enter image description here



                        One potential issue here is that you have to essentially maintain two separate articles. But one of them, by definition, is pretty slimmed down, so it shouldn't be too much of an issue. I know this is something you specifically said you didn't want, but I wanted to throw it out there as a form of "When this problem came up, here's a solution for it in the wild that seems to actually work well."






                        share|improve this answer




























                          1














                          In a lot of ways, quests on online games like RuneScape are very much like recipes. I think you could take a page out of their book. Compare the following two pages:



                          https://oldschool.runescape.wiki/w/Dragon_Slayer
                          https://oldschool.runescape.wiki/w/Dragon_Slayer/Quick_guide



                          At the top of each is a snippet that explains that there is a quick guide, or if you're on the quick guide and want the fuller description, that that exists as well. I think this paradigm would work very well for the recipes.



                          enter image description here



                          One potential issue here is that you have to essentially maintain two separate articles. But one of them, by definition, is pretty slimmed down, so it shouldn't be too much of an issue. I know this is something you specifically said you didn't want, but I wanted to throw it out there as a form of "When this problem came up, here's a solution for it in the wild that seems to actually work well."






                          share|improve this answer


























                            1












                            1








                            1







                            In a lot of ways, quests on online games like RuneScape are very much like recipes. I think you could take a page out of their book. Compare the following two pages:



                            https://oldschool.runescape.wiki/w/Dragon_Slayer
                            https://oldschool.runescape.wiki/w/Dragon_Slayer/Quick_guide



                            At the top of each is a snippet that explains that there is a quick guide, or if you're on the quick guide and want the fuller description, that that exists as well. I think this paradigm would work very well for the recipes.



                            enter image description here



                            One potential issue here is that you have to essentially maintain two separate articles. But one of them, by definition, is pretty slimmed down, so it shouldn't be too much of an issue. I know this is something you specifically said you didn't want, but I wanted to throw it out there as a form of "When this problem came up, here's a solution for it in the wild that seems to actually work well."






                            share|improve this answer













                            In a lot of ways, quests on online games like RuneScape are very much like recipes. I think you could take a page out of their book. Compare the following two pages:



                            https://oldschool.runescape.wiki/w/Dragon_Slayer
                            https://oldschool.runescape.wiki/w/Dragon_Slayer/Quick_guide



                            At the top of each is a snippet that explains that there is a quick guide, or if you're on the quick guide and want the fuller description, that that exists as well. I think this paradigm would work very well for the recipes.



                            enter image description here



                            One potential issue here is that you have to essentially maintain two separate articles. But one of them, by definition, is pretty slimmed down, so it shouldn't be too much of an issue. I know this is something you specifically said you didn't want, but I wanted to throw it out there as a form of "When this problem came up, here's a solution for it in the wild that seems to actually work well."







                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered 21 hours ago









                            corsiKacorsiKa

                            35115




                            35115






























                                draft saved

                                draft discarded




















































                                Thanks for contributing an answer to Writing Stack Exchange!


                                • Please be sure to answer the question. Provide details and share your research!

                                But avoid



                                • Asking for help, clarification, or responding to other answers.

                                • Making statements based on opinion; back them up with references or personal experience.


                                To learn more, see our tips on writing great answers.




                                draft saved


                                draft discarded














                                StackExchange.ready(
                                function () {
                                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fwriting.stackexchange.com%2fquestions%2f44450%2fwhen-blogging-recipes-how-can-i-support-both-readers-who-want-the-narrative-jou%23new-answer', 'question_page');
                                }
                                );

                                Post as a guest















                                Required, but never shown





















































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown

































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown







                                Popular posts from this blog

                                Knooppunt Holsloot

                                Altaar (religie)

                                Gregoriusmis