Line numbers in margin-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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 >
<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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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>