How would I get it so my HTML has two columns like this?
I intend for the page to present as an A4 sized PDF style document and want the text in the columns to go down until it hits the page's margin and then split and overflow into the next column like columns do in a Word document for example.
I tried getting columns to work like this, but they spread the letters in a very obtuse and annoying manner not at all similar to this.
Example:
My HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div class="col-2">
<div><p class="p1">Your form of spellcasting is wholly unique. You can cast occult spells using the Cast a Spell activity. As an actualizer, when you cast spells, you access the nexus of information held within your mind and force your personal vision of reality to overlap with the real world.</p></div>
</div>
</body>
My current CSS file is:
/* Columns */
div.col-2{
-webkit-column-count: 2;
-webkit-column-gap: 700px;
-moz-column-count: 2;
-moz-column-gap: 700px;
column-count:2;
column-gap:700px;
}
/* Font */
.p1{
font-family: "Times New Roman", Times, serif;
text-align: justify;
}
.p2{
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
}
/* Making the page look like an A4 paper */
body{
height:842px;
width:595px;
margin-left: auto;
margin-right: auto;
}
How would I get it so my HTML has two columns like this?
I intend for the page to present as an A4 sized PDF style document and want the text in the columns to go down until it hits the page's margin and then split and overflow into the next column like columns do in a Word document for example.
I tried getting columns to work like this, but they spread the letters in a very obtuse and annoying manner not at all similar to this.
Example:
My HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div class="col-2">
<div><p class="p1">Your form of spellcasting is wholly unique. You can cast occult spells using the Cast a Spell activity. As an actualizer, when you cast spells, you access the nexus of information held within your mind and force your personal vision of reality to overlap with the real world.</p></div>
</div>
</body>
My current CSS file is:
/* Columns */
div.col-2{
-webkit-column-count: 2;
-webkit-column-gap: 700px;
-moz-column-count: 2;
-moz-column-gap: 700px;
column-count:2;
column-gap:700px;
}
/* Font */
.p1{
font-family: "Times New Roman", Times, serif;
text-align: justify;
}
.p2{
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
}
/* Making the page look like an A4 paper */
body{
height:842px;
width:595px;
margin-left: auto;
margin-right: auto;
}
1 Answer
Reset to default 0When aiming for a HTML 2 PDF output you need to understand the PDF writers use of units.
Since the majority of web users will be using chromium based browsers, the units are decided by the SKIA save/print as printing driver.
Skia will for a metric page iniate as 803 pixels wide and scale content according to that into 1132 px high which cannot be changed for an A4 page.
width="803" height="1132"
Currently the CSS is using 700px for a gap between the columns thus with such a large gap the text can at most be 50px wide each side. however due to other setting it will push to the right.
If you want to enforce a true "metric" scale page it is wise to use the print media settings in the style as:
@media print { @page { margin: 0; size: 210mm 297mm ; } body { margin: 0; } }
However that may not be good for mixed media contents, hence best to work in HTML px
<style>
@media print {
@page {
margin: 0;
size: 794px 1122px;
}
body {
margin-left: 50px;
margin-right: 50px;
}
}
/* Columns */
div.col-2{
column-count:2;
column-gap:25px;
}
/* Font */
......................
This ensures desired scales and spacing:
At 25px the gap in the PDF will be about 18.5 points (It should be exactly 18.75 pts, but characters have guarding widths at the side.)
column-gap:700px;for a start or reduce it something likecolumn-gap:10px;– Paulie_D Commented Mar 3 at 10:29columns : 2:--> developer.mozilla./en-US/docs/Web/CSS/columns – Mister Jojo Commented Mar 4 at 18:49