Making an HTML Zine
I've wanted to turn some of the content on the site into a zine for a while now, but I didn't know where to start. I've never dealt with zines before. Instead of doing something rational like just making a zine in a graphic design software, I decided to make an HTML/CSS template that would allow me to easily take content from my site and turn it into a one. To see it in action, see the Zine page. That's basically what I did for my social media graphics - they're just copied HTML and CSS from across my site into a standardized 1:1 format.
I used a zine guide by Templates and Tutorials that came up with a quick search. It's just your standard 8 page zine that uses one side of a paper to fold into a booklet. My template itself should theoretically work with any size paper, although your content could get messed up or cut off. Most if not all existing HTML/CSS zine templates I found online assumed you were working with one paper size or another.
It works by using @media print, which allows you to set custom CSS rules for if the page is being printed.
That means you can have your zine appear only when the page is printed and show other content when the page is being viewed normally.
To use the template, all you need to do is add your content to the pages, add your page content that you want people to see when they enter the page on a browser, and customize the CSS.
The original work on this page is marked CC0 1.0 Universal
<!doctype html>
<html lang="en">
<head>
<!--Your page's header-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*Give the class .page-content to any elements on your page that shouldn't appear on the zine*/
/*#page-1 is the front cover, #page-8 is the back cover*/
/*Add any extra CSS where needed and customize the existing CSS to your liking*/
/*Optionally move the CSS to it's own .css file*/
@media not print{
div.zine{
display:none;
visibility:hidden
}
}
@media print{
html, body{
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden
}
.page-content{
display:none!important
}
@page{
size:landscape;
margin:0
}
.zine{
display:grid;
visibility:visible;
grid-template-columns:repeat(4, 1fr);
grid-template-rows:repeat(2, 1fr);
width:100%;
height:100%;
overflow:hidden;
page-break-before:avoid;
page-break-after:avoid;
break-before:avoid;
break-after:avoid;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:0;
padding:0;
/*Add any CSS here!*/
background-color:#fff;
color:#000!important
}
.zine div{
overflow:hidden;
page-break-inside:avoid;
break-inside:avoid;
margin:0;
padding:0;
/*border:1px solid #000;*/ /*uncomment this out for easier testing*/
/*Add any CSS here!*/
display:flex;
flex-direction:column;
position:relative;
padding-top:5%!important;
padding-bottom:5%!important;
padding-left:8%!important;
padding-right:8%!important
}
#page-7,#page-6,#page-5,#page-4{rotate:180deg} /*comment this out for easier testing*/
#page-7{grid-area:1/1/2/2}
#page-6{grid-area:1/2/2/3}
#page-5{grid-area:1/3/2/4}
#page-4{grid-area:1/4/2/5}
#page-8{grid-area:2/1/3/2}
#page-1{grid-area:2/2/3/3}
#page-2{grid-area:2/3/3/4}
#page-3{grid-area:2/4/3/5}
/*Add any CSS here!*/
/*It will only apply to the printed zine, it won't apply to the standard page.*/
/*You can also add CSS to any of the individual page <div> elements so the rules only apply to that page.*/
}
</style>
</head>
<body>
<!--Replace the body with your page's content, just give the class .page-content to any elements on your page that shouldn't appear on the zine-->
<div id="your-outer-container" class="page-content">
<!--Whatever content you want to show on your page when viewed normally, including things like menus and buttons-->
</div>
<div class="zine" aria-hidden="true">
<div id="page-1">
<!--Page 1/Front Cover's Content-->
</div>
<div id="page-2">
<!--Page 2's Content-->
</div>
<div id="page-3">
<!--Page 3's Content-->
</div>
<div id="page-4">
<!--Page 4's Content-->
</div>
<div id="page-5">
<!--Page 5's Content-->
</div>
<div id="page-6">
<!--Page 6's Content-->
</div>
<div id="page-7">
<!--Page 7's Content-->
</div>
<div id="page-8">
<!--Page 8/Back Cover's Content-->
</div>
</div>
<!--Anything else you'd have on your page, like <script> tags-->>
</body>
</html>