0

On my bicycle club website, I have set the following webpage, which serves as an anchor for a bike tour we organise. As it is, printing the page prints a different view of the screen page: it prints the cue-sheet participants will use, using the normal style sheet. This page exists already and is on line.

The page file name is "rallye_de_la_malmaison.html". The link to it is:

<https://www.abeille-cyclotourisme.fr/organisations/rallye_de_la_malmaison.html>

Not using a server-side language like PHP, but using javascript if needed, I want to also be able to use this page to print a flyer format A5 (two fliers would be printed from a single A4 page) describing this bike event. I have succeeded to prepare this flyer from my original page simply using an additional stylesheet ("styles_plaquette_rm.css").

On the current website, I have added a link called "Pub (A5)". On the example I have succeeded to prepare, clicking the link "Pub A5" opens a copy of the "rallye_de_la_malmaison.html" page, renamed as "rallye_de_la_malmaison_pub.html" and modified to the effect of containing a link to the additional stylesheet "styles_plaquette_rm.css".

This is a cheat, of course. I cheated because I do not know how to do what I want to do.

I would like my link to be scripted in such a way as to permit that, if I click the "Pub (A5)" link, it would point to the original page ref ("rallye_de_la_malmaison.html") instead of pointing to a modified version of the same page but, at a result of this scripted link, with, added in the subject page, the needed link to the additional stylesheet (<link rel="stylesheet" type="text/css" href="../styles_plaquette_rm.css">)

I have looked at the precedent <Applying different Cascade Style Sheets to the same html page>. Unfortunately, it did not conclude on using javascript and therefore does not help, except it seems I have the same question, and it seems a solution may be possible.

Is my question clear enough ? Is this feasible not using PHP ? How ?

Michelangelo
  • 1
  • 1
  • With css you can use `@media` https://stackoverflow.com/questions/17984683/detect-printers-page-size-in-css-or-javascript – pfg Mar 14 '18 at 15:32

1 Answers1

0

You could implement this without additional logic using symlinks. Giving your file is:

webversion/rallye.html

Create a symbolic link to the file in webversion/:

printversion/rallye.html ->  webversion/rallye.html

Then create a file printversion/additional-styles.css which include your additional styles for the print version.

Then modify rallye.html to reference additional-styles.css:

<link rel="stylesheet" type="text/css" href="additional-styles.css">

You should also create an empty file webversion/additional-styles.css. This way, only the print version gets appended with the additional styles.

Laurent P
  • 36
  • 2
  • Thanks @Laurent P. I want to avoid using two html data files because this 2018 work will be used (and updated) every year. Also, yes, the website files are located on a linux server. So, I assume links are an option. Assuming I will learn how to create them, I still do not see how I can have the printversion/rallye.html pointing to a file referencing additional-styles.css while the webversion/rallye.html would be or point to the same file, but *not referencing the additional_styles.css, all of that having a single html data file at time of updates. – Michelangelo Mar 14 '18 at 17:52
  • Both files reference a file called additional-styles.css which resides in the same directory as the html file. But as the html files are in two different directories, you can supply two different css files (one of which can be empty) – Laurent P Mar 15 '18 at 08:49
  • Try if using a @media query suffices for you (see comment by pfg) – Laurent P Mar 15 '18 at 10:03