0

Here's (what I think is) the correct way to layout a (reflowable) html document. The width is capped relative to the font width, and the margin is auto calculated to be symmetric so that the content is centred.

This gives a pleasant reading experience on both ultra-wide and mobile.

body { 
  max-width: 30em;
  margin: 0 auto;
  padding: 2em;
}
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus nisl, sollicitudin ac lorem sit amet, vehicula pretium leo. Curabitur convallis tristique ipsum vel consequat. Maecenas sit amet sem ipsum. Aliquam quis accumsan ante. </p>
<p>Maecenas at mauris euismod, placerat justo vel, ultrices diam. Sed mollis sollicitudin risus vel pharetra. Integer bibendum iaculis magna, ac sagittis mauris elementum non. Vestibulum non aliquam mi. Donec sit amet dui bibendum, consectetur lacus quis, interdum sem. </p>
<p>Integer vitae massa lectus. Nulla placerat, augue at pellentesque viverra, velit odio dapibus felis, at feugiat arcu magna vel mauris. Aliquam sed luctus urna. Morbi magna orci, dignissim ut purus non, mattis vulputate tortor. </p>
</body>

However, now I want to add line numbers in the margin/padding while keeping the content centred. And am unsure how to do so.

On way to do this is have each paragraph be a grid with the number in the first column and the text in the second column.

Is this the best way to do this? If so how do get the same behaviour as before? How to we ensure that the content (in the second column) is centred?

Maybe we need javascript to calculate the margins widths in % units. But if be have to use js then maybe we don't need the the line numbers and content in the same html container. Maybe I should just give up and inline the line numbers.

div {
  display:grid;
  column-gap: 2em
}
.line-number {
  grid-column-start:1
}
p {
  grid-column-start:2
}
<body>
<div>
<p class='line-number'>1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus nisl, sollicitudin ac lorem sit amet, vehicula pretium leo. Curabitur convallis tristique ipsum vel consequat. Maecenas sit amet sem ipsum. Aliquam quis accumsan ante. </p>
</div>
<div>
<p class='line-number'>2</p>
<p>Maecenas at mauris euismod, placerat justo vel, ultrices diam. Sed mollis sollicitudin risus vel pharetra. Integer bibendum iaculis magna, ac sagittis mauris elementum non. Vestibulum non aliquam mi. Donec sit amet dui bibendum, consectetur lacus quis, interdum sem. </p>
</div>
<div>
<p class='line-number'>3</p>
<p>Integer vitae massa lectus. Nulla placerat, augue at pellentesque viverra, velit odio dapibus felis, at feugiat arcu magna vel mauris. Aliquam sed luctus urna. Morbi magna orci, dignissim ut purus non, mattis vulputate tortor. </p>
</div>
</body>
Tom Huntington
  • 2,260
  • 10
  • 20

5 Answers5

1

If you use grid, you may make it 2 columns without gap and the first one of 0 width, or span the text throught both columns. You may then offset the numbers out of the grid.

here is a few possible ways:

  • 2 columns:

body {
  max-width: 30em;
  margin: 0 auto;
  padding: 2em;
}

div {
  display: grid;
  grid-template-columns: 0 1fr;
}

.line-number {
  grid-column-start: 1;
  margin-inline-start: -2em;
}

p {
  grid-column-start: 2
}

/* does stand in the middle ? */
body,
p:not([class]) {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.2) 50%, #0000 50%);
}
<body>
  <div>
    <p class='line-number'>1</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus nisl, sollicitudin ac lorem sit amet, vehicula pretium leo. Curabitur convallis tristique ipsum vel consequat. Maecenas sit amet sem ipsum. Aliquam quis accumsan ante. </p>
  </div>
  <div>
    <p class='line-number'>2</p>
    <p>Maecenas at mauris euismod, placerat justo vel, ultrices diam. Sed mollis sollicitudin risus vel pharetra. Integer bibendum iaculis magna, ac sagittis mauris elementum non. Vestibulum non aliquam mi. Donec sit amet dui bibendum, consectetur lacus
      quis, interdum sem. </p>
  </div>
  <div>
    <p class='line-number'>3</p>
    <p>Integer vitae massa lectus. Nulla placerat, augue at pellentesque viverra, velit odio dapibus felis, at feugiat arcu magna vel mauris. Aliquam sed luctus urna. Morbi magna orci, dignissim ut purus non, mattis vulputate tortor. </p>
  </div>
</body>
  • a single column :

div {
  max-width: 30em;
  margin: 2em auto;
  padding: 0 2em;
  display: grid;
}

.line-number {
  margin-inline-start: -2em; /* offset */
  position:absolute;         /* off the flow */
}

p {
  margin:0
}

/* does it stand in the middle ? */
body,
div,
p:not([class]) {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.2) 50%, #0000 50%);
}
<body>
  <div>
    <p class='line-number'>1</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus nisl, sollicitudin ac lorem sit amet, vehicula pretium leo. Curabitur convallis tristique ipsum vel consequat. Maecenas sit amet sem ipsum. Aliquam quis accumsan ante. </p>
  </div>
  <div>
    <p class='line-number'>2</p>
    <p>Maecenas at mauris euismod, placerat justo vel, ultrices diam. Sed mollis sollicitudin risus vel pharetra. Integer bibendum iaculis magna, ac sagittis mauris elementum non. Vestibulum non aliquam mi. Donec sit amet dui bibendum, consectetur lacus
      quis, interdum sem. </p>
  </div>
  <div>
    <p class='line-number'>3</p>
    <p>Integer vitae massa lectus. Nulla placerat, augue at pellentesque viverra, velit odio dapibus felis, at feugiat arcu magna vel mauris. Aliquam sed luctus urna. Morbi magna orci, dignissim ut purus non, mattis vulputate tortor. </p>
  </div>
</body>

No grid, but an absolute pseud

body {
  max-width: 30em;
  margin: 0 auto;
  padding: 2em;
  counter-reset: ps;
}

p:before {
  counter-increment: ps;
  content: counter(ps);
  position: absolute;
  margin-inline-start: -2em;
}


/* does it stand in the middle ? */

body,
p {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.2) 50%, #0000 50%);
}
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus nisl, sollicitudin ac lorem sit amet, vehicula pretium leo. Curabitur convallis tristique ipsum vel consequat. Maecenas sit amet sem ipsum. Aliquam quis accumsan ante. </p>
  <p>Maecenas at mauris euismod, placerat justo vel, ultrices diam. Sed mollis sollicitudin risus vel pharetra. Integer bibendum iaculis magna, ac sagittis mauris elementum non. Vestibulum non aliquam mi. Donec sit amet dui bibendum, consectetur lacus quis,
    interdum sem. </p>
  <p>Integer vitae massa lectus. Nulla placerat, augue at pellentesque viverra, velit odio dapibus felis, at feugiat arcu magna vel mauris. Aliquam sed luctus urna. Morbi magna orci, dignissim ut purus non, mattis vulputate tortor. </p>
</body>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • 1
    @TomHuntington, take a look at the pseudo element and counter, this should be plenty enough to do the job (third snippet) . grid is indeed very interesting and powerfull, but not needed here ;) – G-Cyrillus Nov 27 '22 at 22:49
  • 1
    Only saw this after posting mine. I'll leave mine up for now as it seems _slightly_ different, but the general pattern of pseudo element and absolute position seems somewhat the same. Nice example of the two column layout as well. – OliverRadini Nov 27 '22 at 22:53
  • 1
    @OliverRadini I need to define the content "margins" in html, so I'll accept this one. But keep your's up – Tom Huntington Nov 27 '22 at 23:02
  • @TomHuntington yeah makes sense, looks like a good solution for sure – OliverRadini Nov 27 '22 at 23:04
1

I quite like that this would do the numbering automatically. I can't say this solves your problem 100% because I can't say I yet fully understand the issue. I think this may do it, but I'll go back and read what you're looking for again.

.wrapper {
  counter-reset: my-awesome-counter;
  max-width: 30em;
  margin: 0 auto;
  padding: 2em;
}
p {
  counter-increment: my-awesome-counter;
  position: relative;
}
p:before {
   content: counter(my-awesome-counter);
   position: absolute;
   left: -15px;
}
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus nisl, sollicitudin ac lorem sit amet, vehicula pretium leo. Curabitur convallis tristique ipsum vel consequat. Maecenas sit amet sem ipsum. Aliquam quis accumsan ante. </p>
<p>Maecenas at mauris euismod, placerat justo vel, ultrices diam. Sed mollis sollicitudin risus vel pharetra. Integer bibendum iaculis magna, ac sagittis mauris elementum non. Vestibulum non aliquam mi. Donec sit amet dui bibendum, consectetur lacus quis, interdum sem. </p>
<p>Integer vitae massa lectus. Nulla placerat, augue at pellentesque viverra, velit odio dapibus felis, at feugiat arcu magna vel mauris. Aliquam sed luctus urna. Morbi magna orci, dignissim ut purus non, mattis vulputate tortor. </p>
</div>
OliverRadini
  • 6,238
  • 1
  • 21
  • 46
  • 1
    Thanks this looks like a solution too. Not sure which is better `margin-inline-start: -2em;` vs `left: -15px;` – Tom Huntington Nov 27 '22 at 22:57
  • @TomHuntington Going to have a look at the difference myself now, can't say I've had much call to use it up until this point so will be interesting to learn more – OliverRadini Nov 27 '22 at 23:05
  • 2
    @TomHuntington `margin-inline-start` will turn to be either `margin-left` or `margin-right` depending on the language/dir/direction (`rtl`vs `ltr` ) of your page. then em *(or rem)* will follow the font-size set . the rule becomes then more generic and easier to reuse or update. it is more about details than worse or better. – G-Cyrillus Nov 29 '22 at 20:20
0

If you assign a width to the columns through column template, the p will automatically expand and fill the grids second cell. Then add a padding to your liking. You can then justify the text as you like.

div {
  display:grid;
  grid-template-columns: 20px 1fr;
  column-gap: 10px;
}

p {
padding-right:30px;
}
<body>
<div>
<p class='line-number'>1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus nisl, sollicitudin ac lorem sit amet, vehicula pretium leo. Curabitur convallis tristique ipsum vel consequat. Maecenas sit amet sem ipsum. Aliquam quis accumsan ante. </p>
</div>
<div>
<p class='line-number'>2</p>
<p>Maecenas at mauris euismod, placerat justo vel, ultrices diam. Sed mollis sollicitudin risus vel pharetra. Integer bibendum iaculis magna, ac sagittis mauris elementum non. Vestibulum non aliquam mi. Donec sit amet dui bibendum, consectetur lacus quis, interdum sem. </p>
</div>
<div>
<p class='line-number'>3</p>
<p>Integer vitae massa lectus. Nulla placerat, augue at pellentesque viverra, velit odio dapibus felis, at feugiat arcu magna vel mauris. Aliquam sed luctus urna. Morbi magna orci, dignissim ut purus non, mattis vulputate tortor. </p>
</div>
</body>
Skin_phil
  • 596
  • 5
  • 18
-1

You can use the html elements <ol> and <li> for it (I found this solution here):

ol {
  counter-reset: item;
  padding-left: 0;
}
li {
  width:10em;
  text-align:left;
  display: block;
  margin-bottom: .5em;
  margin-left:  auto;
  margin-right: auto;
}
li::before {
  text-align:right;
  display: inline-block;
  content: counter(item);
  padding-right:0.5em;
  counter-increment: item;
  width: 2em;
  margin-left: -2.5em;
}
<ol>
  <li>One<br>the first sentence.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus nisl, sollicitudin ac lorem sit amet, vehicula pretium leo. Curabitur convallis tristique ipsum vel consequat. Maecenas sit amet sem ipsum. Aliquam quis accumsan ante.</li>
  <li>Maecenas at mauris euismod, placerat justo vel, ultrices diam. Sed mollis sollicitudin risus vel pharetra. Integer bibendum iaculis magna, ac sagittis mauris elementum non. Vestibulum non aliquam mi. Donec sit amet dui bibendum, consectetur lacus quis, interdum sem.</li>
  <li>Integer vitae massa lectus. Nulla placerat, augue at pellentesque viverra, velit odio dapibus felis, at feugiat arcu magna vel mauris. Aliquam sed luctus urna. Morbi magna orci, dignissim ut purus non, mattis vulputate tortor.</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine<br>Items</li>
  <li>Ten<br>Items</li>
</ol>
Carsten Massmann
  • 26,510
  • 2
  • 22
  • 43
-1

You can try like below:

div {
  display:grid;
  grid-template-columns: 3ch auto 3ch; /* 3ch is a kind of max width for your numbers */
  justify-content: center;
  column-gap: 2em
}
p {
  max-width: 30em;
}
<body>
<div>
<p class='line-number'>1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus nisl, sollicitudin ac lorem sit amet, vehicula pretium leo. Curabitur convallis tristique ipsum vel consequat. Maecenas sit amet sem ipsum. Aliquam quis accumsan ante. </p>
</div>
<div>
<p class='line-number'>2</p>
<p>Maecenas at mauris euismod, placerat justo vel, ultrices diam. Sed mollis sollicitudin risus vel pharetra. Integer bibendum iaculis magna, ac sagittis mauris elementum non. Vestibulum non aliquam mi. Donec sit amet dui bibendum, consectetur lacus quis, interdum sem. </p>
</div>
<div>
<p class='line-number'>3</p>
<p>Integer vitae massa lectus. Nulla placerat, augue at pellentesque viverra, velit odio dapibus felis, at feugiat arcu magna vel mauris. Aliquam sed luctus urna. Morbi magna orci, dignissim ut purus non, mattis vulputate tortor. </p>
</div>
</body>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415