skip to Main Content

I am. building a long HTML page and I want a horizontal line to show where each A4 (29.7cm) page would break so I can fit my content within this. How can I set the background to show this line every 29.7cm and then build content over it please?

At the moment I am just using print preview and margins to manually move pages up and down the page, but this is very much a case of trial and error.

Here’s a HTML example. I would expect a line between the 2 pages, after 29.7cm (the height of A4) but it’s not showing?

body {
  text-align: left;
  background: rgb(204, 204, 204);
  width: 21cm;
  font-family: Arial, Helvetica, sans-serif;
}

.flex-container {
  display: flex;
  flex-direction: column;
  margin: 0 50% 0 50%;
  background-color: white;
  height: 29.7cm;
  width: 21cm;
  text-align: left;
}

h2,
p {
  padding: 2cm 1cm 2cm 1cm;
  ;
}

body::after {
  content: "";
  display: block;
  height: 29.7cm;
  background-image: url("/assets/line.png");
  background-repeat: repeat-x;
  background-position: top left;
}
<div class="flex-container">
  <h2>Page 1</h2>
  <p style="order: 1;">
    TXT test file Purpose: Provide example of this file type Document file type: TXT Version: 1.0 Remark:
    <br><br> Example content: The names "John Doe" for males, "Jane Doe" or "Jane Roe" for females, or "Jonnie Doe" and "Janie Doe" for children, or just "Doe" non-gender-specifically are used as placeholder names for a party whose true identity is unknown
    or must be withheld in a legal action, case, or discussion. The names are also used to refer to acorpse or hospital patient whose identity is unknown. This practice is widely used in the United States and Canada, but is rarely used in other English-speaking
    countries including the United Kingdom itself, from where the use of "John Doe" in a legal context originates. The names Joe Bloggs or John Smith are used in the UK instead, as well as in Australia and New Zealand.
    <br><br> John Doe is sometimes used to refer to a typical male in other contexts as well, in a similar manner to John Q. Public, known in Great Britain as Joe Public, John Smith or Joe Bloggs. For example, the first name listed on a form is often
    John Doe, along with a fictional address or other fictional information to provide an example of how to fill in the form. The name is also used frequently in popular culture, for example in the Frank Capra film Meet John Doe. John Doe was also the
    name of a 2002 American television series.
    <br><br> Similarly, a child or baby whose identity is unknown may be referred to as Baby Doe. A notorious murder case in Kansas City, Missouri, referred to the baby victim as Precious Doe. Other unidentified female murder victims are Cali Doe and
    Princess Doe. Additional persons may be called James Doe, Judy Doe, etc. However, to avoid possible confusion, if two anonymous or unknown parties are cited in a specific case or action, the surnames Doe and Roe may be used simultaneously; for example,
    "John Doe v. Jane Roe". If several anonymous parties are referenced, they may simply be labelled John Doe #1, John Doe #2, etc. (the U.S. Operation Delego cited 21 (numbered) "John Doe"s) or labelled with other variants of Doe / Roe / Poe / etc. Other
    early alternatives such as John Stiles and Richard Miles are now rarely used, and Mary Major has been used in some American federal cases.
    <br><br><br><br> File created by https://www.online-convert.com More example files: https://www.online-convert.com/file-type Text of Example content: Wikipedia (https://en.wikipedia.org/wiki/John_Doe) License: Attribution-ShareAlike 4.0 (https://creativecommons.org/licenses/by-sa/4.0/)
    Feel free to use and share the file according to the license above.
  </p>
</div>
<div class="flex-container">
  <h2>Page 2</h2>
  <p style="order: 1;">
    TXT test file Purpose: Provide example of this file type Document file type: TXT Version: 1.0 Remark:
    <br><br> Example content: The names "John Doe" for males, "Jane Doe" or "Jane Roe" for females, or "Jonnie Doe" and "Janie Doe" for children, or just "Doe" non-gender-specifically are used as placeholder names for a party whose true identity is unknown
    or must be withheld in a legal action, case, or discussion. The names are also used to refer to acorpse or hospital patient whose identity is unknown. This practice is widely used in the United States and Canada, but is rarely used in other English-speaking
    countries including the United Kingdom itself, from where the use of "John Doe" in a legal context originates. The names Joe Bloggs or John Smith are used in the UK instead, as well as in Australia and New Zealand.
    <br><br> John Doe is sometimes used to refer to a typical male in other contexts as well, in a similar manner to John Q. Public, known in Great Britain as Joe Public, John Smith or Joe Bloggs. For example, the first name listed on a form is often
    John Doe, along with a fictional address or other fictional information to provide an example of how to fill in the form. The name is also used frequently in popular culture, for example in the Frank Capra film Meet John Doe. John Doe was also the
    name of a 2002 American television series.
    <br><br> Similarly, a child or baby whose identity is unknown may be referred to as Baby Doe. A notorious murder case in Kansas City, Missouri, referred to the baby victim as Precious Doe. Other unidentified female murder victims are Cali Doe and
    Princess Doe. Additional persons may be called James Doe, Judy Doe, etc. However, to avoid possible confusion, if two anonymous or unknown parties are cited in a specific case or action, the surnames Doe and Roe may be used simultaneously; for example,
    "John Doe v. Jane Roe". If several anonymous parties are referenced, they may simply be labelled John Doe #1, John Doe #2, etc. (the U.S. Operation Delego cited 21 (numbered) "John Doe"s) or labelled with other variants of Doe / Roe / Poe / etc. Other
    early alternatives such as John Stiles and Richard Miles are now rarely used, and Mary Major has been used in some American federal cases.
    <br><br><br><br> File created by https://www.online-convert.com More example files: https://www.online-convert.com/file-type Text of Example content: Wikipedia (https://en.wikipedia.org/wiki/John_Doe) License: Attribution-ShareAlike 4.0 (https://creativecommons.org/licenses/by-sa/4.0/)
    Feel free to use and share the file according to the license above.
  </p>
</div>

2

Answers


  1. You can achieve this by using CSS. You can create a pseudo-element on the body tag and set its height to 29.7cm. Then, you can set a background image to this pseudo-element that is a horizontal line. Here’s an example:

    body::after {
      content: "";
      display: block;
      height: 29.7cm;
      background-image: url("path/to/horizontal/line/image.png");
      background-repeat: repeat-x;
      background-position: top left;
    }
    
    Login or Signup to reply.
  2. You have some things in your css that are a little contradictory.
    If you want the page (flex-container) to be an A4 page, you don’t need to add that to the body as well.

    Here is some CSS that will place a black line after each page.
    In it, I have added your ::after code to the flex-container instead of the body, with some minor modifications.

    You can also check out this fiddle, where you can experiment some more on your own: https://jsfiddle.net/uvnkz5f0/

    body {
      text-align: left;
      background: rgb(204, 204, 204);
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .flex-container {
      display: flex;
      flex-direction: column;
      margin: 0 auto 0 auto;
      background-color: white;
      height: 29.7cm;
      width: 21cm;
      text-align: left;
      position: relative;
    }
    
    .flex-container::after {
      content: " ";
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0;
      background: black;
      height: 1px;
    }
    
    h2,
    p {
      padding: 2cm 1cm 2cm 1cm;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search