Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

When blogging recipes, how can I support both readers who want the narrative/journey and ones who want the printer-friendly recipe?

+1
−0

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)?

History
Why does this post require attention from curators or moderators?
You might want to add some details to your flag.
Why should this post be closed?

0 comment threads

6 answers

You are accessing this answer with a direct link, so it's being shown above all other answers regardless of its score. You can return to the normal view.

+1
−0

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.
});
History
Why does this post require attention from curators or moderators?
You might want to add some details to your flag.

This post was sourced from https://writers.stackexchange.com/a/44460. It is licensed under CC BY-SA 3.0.

0 comment threads

+1
−0

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."

History
Why does this post require attention from curators or moderators?
You might want to add some details to your flag.

This post was sourced from https://writers.stackexchange.com/a/44495. It is licensed under CC BY-SA 3.0.

0 comment threads

+1
−0

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.

History
Why does this post require attention from curators or moderators?
You might want to add some details to your flag.

This post was sourced from https://writers.stackexchange.com/a/44500. It is licensed under CC BY-SA 3.0.

0 comment threads

+1
−0

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.
History
Why does this post require attention from curators or moderators?
You might want to add some details to your flag.

This post was sourced from https://writers.stackexchange.com/a/44470. It is licensed under CC BY-SA 3.0.

0 comment threads

+1
−0

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.

History
Why does this post require attention from curators or moderators?
You might want to add some details to your flag.

This post was sourced from https://writers.stackexchange.com/a/44451. It is licensed under CC BY-SA 3.0.

0 comment threads

+1
−0

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.

History
Why does this post require attention from curators or moderators?
You might want to add some details to your flag.

0 comment threads

Sign up to answer this question »