When blogging recipes, how can I support both readers who want the narrative/journey and ones who want the printer-friendly recipe?“Lacking meat”, “Content-free”, and poor defense-development. Please critique my workHow large should photos on my blog be?
Can an x86 CPU running in real mode be considered to be basically an 8086 CPU?
How do you conduct xenoanthropology after first contact?
How is the claim "I am in New York only if I am in America" the same as "If I am in New York, then I am in America?
How can I fix this gap between bookcases I made?
Are tax years 2016 & 2017 back taxes deductible for tax year 2018?
What defenses are there against being summoned by the Gate spell?
How much RAM could one put in a typical 80386 setup?
What do you call a Matrix-like slowdown and camera movement effect?
Why is this code 6.5x slower with optimizations enabled?
Why is the design of haulage companies so “special”?
How did the USSR manage to innovate in an environment characterized by government censorship and high bureaucracy?
Is it possible to do 50 km distance without any previous training?
How is this relation reflexive?
When blogging recipes, how can I support both readers who want the narrative/journey and ones who want the printer-friendly recipe?
Is there really no realistic way for a skeleton monster to move around without magic?
Accidentally leaked the solution to an assignment, what to do now? (I'm the prof)
Is there a minimum number of transactions in a block?
Possibly bubble sort algorithm
The magic money tree problem
Why doesn't Newton's third law mean a person bounces back to where they started when they hit the ground?
Download, install and reboot computer at night if needed
Why are only specific transaction types accepted into the mempool?
How to add power-LED to my small amplifier?
DOS, create pipe for stdin/stdout of command.com(or 4dos.com) in C or Batch?
When blogging recipes, how can I support both readers who want the narrative/journey and ones who want the printer-friendly recipe?
“Lacking meat”, “Content-free”, and poor defense-development. Please critique my workHow large should photos on my blog be?
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
add a comment |
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
2
I also blog recipes and want this feature! What a great question.
– Cyn
6 hours ago
Man, I know HTML but I've never been able to get CSS. I wonder if there is a plug in for this...there must be. I use Wordpress.
– Cyn
5 hours 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♦
1 hour ago
add a comment |
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
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
non-fiction tools blog food-writing
edited 6 hours ago
Monica Cellio
asked 7 hours ago
Monica Cellio♦Monica Cellio
16.9k23689
16.9k23689
2
I also blog recipes and want this feature! What a great question.
– Cyn
6 hours ago
Man, I know HTML but I've never been able to get CSS. I wonder if there is a plug in for this...there must be. I use Wordpress.
– Cyn
5 hours 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♦
1 hour ago
add a comment |
2
I also blog recipes and want this feature! What a great question.
– Cyn
6 hours ago
Man, I know HTML but I've never been able to get CSS. I wonder if there is a plug in for this...there must be. I use Wordpress.
– Cyn
5 hours 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♦
1 hour ago
2
2
I also blog recipes and want this feature! What a great question.
– Cyn
6 hours ago
I also blog recipes and want this feature! What a great question.
– Cyn
6 hours ago
Man, I know HTML but I've never been able to get CSS. I wonder if there is a plug in for this...there must be. I use Wordpress.
– Cyn
5 hours ago
Man, I know HTML but I've never been able to get CSS. I wonder if there is a plug in for this...there must be. I use Wordpress.
– Cyn
5 hours 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♦
1 hour 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♦
1 hour ago
add a comment |
3 Answers
3
active
oldest
votes
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 img
s 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.
Does this get rid of things like the background, header, footer, and sidebars? Or does it just get rid of images?
– Cyn
5 hours ago
add a comment |
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.
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♦
6 hours ago
add a comment |
You could keep the recipe in its own source file. recipeXYZ.html
for example. You then dynamically add that source to both your blog post as well as your simplified print page. My jQuery is a bit rusty but something from this SO question should work well.
$("#recipeDiv").load("recipeXYZ.html");
Now you can print from your original page, with its images, 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.
The print page can even be generated dynamically.
<span id="printPreview">print preview</span>
$("#printPreview").click(function()
var w = window.open(); // you can change the dimenstions of the window here.
w.document.open().write("recipeXYZ.hml");
// you probably want to create the actual print button here.
);
add a comment |
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 img
s 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.
Does this get rid of things like the background, header, footer, and sidebars? Or does it just get rid of images?
– Cyn
5 hours ago
add a comment |
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 img
s 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.
Does this get rid of things like the background, header, footer, and sidebars? Or does it just get rid of images?
– Cyn
5 hours ago
add a comment |
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 img
s 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.
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 img
s 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.
edited 6 hours ago
answered 6 hours ago
a CVn♦a CVn
2,73231733
2,73231733
Does this get rid of things like the background, header, footer, and sidebars? Or does it just get rid of images?
– Cyn
5 hours ago
add a comment |
Does this get rid of things like the background, header, footer, and sidebars? Or does it just get rid of images?
– Cyn
5 hours ago
Does this get rid of things like the background, header, footer, and sidebars? Or does it just get rid of images?
– Cyn
5 hours ago
Does this get rid of things like the background, header, footer, and sidebars? Or does it just get rid of images?
– Cyn
5 hours ago
add a comment |
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.
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♦
6 hours ago
add a comment |
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.
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♦
6 hours ago
add a comment |
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.
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.
edited 6 hours ago
bruglesco
2,471742
2,471742
answered 6 hours 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♦
6 hours ago
add a comment |
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♦
6 hours 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♦
6 hours 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♦
6 hours ago
add a comment |
You could keep the recipe in its own source file. recipeXYZ.html
for example. You then dynamically add that source to both your blog post as well as your simplified print page. My jQuery is a bit rusty but something from this SO question should work well.
$("#recipeDiv").load("recipeXYZ.html");
Now you can print from your original page, with its images, 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.
The print page can even be generated dynamically.
<span id="printPreview">print preview</span>
$("#printPreview").click(function()
var w = window.open(); // you can change the dimenstions of the window here.
w.document.open().write("recipeXYZ.hml");
// you probably want to create the actual print button here.
);
add a comment |
You could keep the recipe in its own source file. recipeXYZ.html
for example. You then dynamically add that source to both your blog post as well as your simplified print page. My jQuery is a bit rusty but something from this SO question should work well.
$("#recipeDiv").load("recipeXYZ.html");
Now you can print from your original page, with its images, 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.
The print page can even be generated dynamically.
<span id="printPreview">print preview</span>
$("#printPreview").click(function()
var w = window.open(); // you can change the dimenstions of the window here.
w.document.open().write("recipeXYZ.hml");
// you probably want to create the actual print button here.
);
add a comment |
You could keep the recipe in its own source file. recipeXYZ.html
for example. You then dynamically add that source to both your blog post as well as your simplified print page. My jQuery is a bit rusty but something from this SO question should work well.
$("#recipeDiv").load("recipeXYZ.html");
Now you can print from your original page, with its images, 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.
The print page can even be generated dynamically.
<span id="printPreview">print preview</span>
$("#printPreview").click(function()
var w = window.open(); // you can change the dimenstions of the window here.
w.document.open().write("recipeXYZ.hml");
// you probably want to create the actual print button here.
);
You could keep the recipe in its own source file. recipeXYZ.html
for example. You then dynamically add that source to both your blog post as well as your simplified print page. My jQuery is a bit rusty but something from this SO question should work well.
$("#recipeDiv").load("recipeXYZ.html");
Now you can print from your original page, with its images, 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.
The print page can even be generated dynamically.
<span id="printPreview">print preview</span>
$("#printPreview").click(function()
var w = window.open(); // you can change the dimenstions of the window here.
w.document.open().write("recipeXYZ.hml");
// you probably want to create the actual print button here.
);
edited 54 mins ago
answered 1 hour ago
bruglescobruglesco
2,471742
2,471742
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
2
I also blog recipes and want this feature! What a great question.
– Cyn
6 hours ago
Man, I know HTML but I've never been able to get CSS. I wonder if there is a plug in for this...there must be. I use Wordpress.
– Cyn
5 hours 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♦
1 hour ago