Code to add line numbers to text in TiddlyWiki

Tips & Tricks
#1

I find myself copying a lot of material from books to TiddlyWiki, which have either line numbers or verse numbers. I made a small piece of markup and CSS to add line numbers to the copied texts. This is handy for literature and scripture.

An example of what I want to reproduce. Notice the line numbers on the right.

Capture.PNG
Capture.PNG1064×757 194 KB

Here is the tiddler. Notice there are line numbers on every line. I left the line numbers to the left because it’s simpler that way, and I still get the intended result (numbered lines.)

Capture2

Here is the code:

<h2 style="text-align:center;font-variant-caps: all-small-caps;">Eurōpa Antīqua</h2>
<ol class="linenum">
<li>&nbsp;&nbsp;&nbsp;&nbsp;Discipulī, pictūram spectāte (//Pupils, look at the illus-//</li>
<li>//tration//). Pictūra (//The illustration//) est tabula (//a map//).</li>
<li>Tabula est parva. Tabula est Eurōpa antīqua.</li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;Ubi est Britannia? Ubi est Gallia? Ubi est Hispānia?</li>
<li>Ubi est Germānia? Ubi est Graecia? Ubi est Italia?</li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;Britannia est īnsula. Britannia est magna. Britannia</li>
<li>est īnsula magna. Sicilia est īnsula. Sicilia non est īnsula</li>
<li>parva. Germānia non est īnsula. Gallia non est īnsula.</li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;Hispānia est paenīnsula. Graecia es paenīnsula. His-</li>
<li>pānia est magna, sed Graecia est parva. Italia paenīnsula</li>
</ol>

Here is the stylesheet:

/* Adapted from: https://www.lockedownseo.com/ordered-list-ol-different-color-for-numbers/ */

ol.linenum {
  counter-reset: linenumber;
  list-style-type: none;
}

ol.linenum li {
  counter-increment: linenumber;
  position: relative;
}

/* Output the numbers using the counter() function, but use a custom color, and position the numbers how we want */
ol.linenum li:before {
  content: counter(linenumber, decimal) "";
  left: -42px;
  position: absolute;
  text-align: right;
  font-size: 70%;
  width: 26px;
  opacity: 0.7;
}

.lectnum:before {
  content: counter(lectnumber, upper-roman) "";
  left: -64px;
  position: absolute;
  text-align: right;
  font-size: 70%;
  width: 26px;
  opacity: 0.7;
}

I hope this is fairly self-explanatory. As you can see, I made each line of text into an ordered list item, and modified the appearance of the number at the beginning of the line in the style sheet.

If anyone has advice on improving this, please let me know. I’m especially interested in figuring out how to display the line numbers by fives, but it’s not too important since I have something that works “good enough.”

I will try my best to answer questions, but please bear in mind that I barely have the knowledge to make the thing in the first place, so please keep your expectations reasonable low.

3 Likes
#2

This looks cool! I’m not well-versed in complex css like counter (today is my first time hearing about it!) but I tried to work out how to use wikitext to split a text into lines of x words each.

<style>
.par div {margin: 0px 20px;}
.par div:first-child {text-indent: 10px}
</style>

<$list filter="[{lipsum}splitregexp[\n+]]" variable="line">
<div class="par">
<$vars line-count={{{[<line>splitregexp[\s+]count[]divide[15]floor[]]}}}>
<$list filter="[range[0],<line-count>]" variable="cnt">
<div class="text">
<$vars bf={{{[<cnt>multiply[15]]}}} >
<$text text={{{[<line>splitregexp[\s+]butfirst<bf>first[15]join[ ]]}}} />
</$vars>
</div>
</$list>
</$vars>
</div>
</$list>

This uses css to apply indenting to the first line of each paragraph. I don’t know how to apply css trickery to the individual lines to add a counter, because the lines are wrapped by a div container with class “par”, i.e., they’re not siblings but cousins. I need the par container to know which line to indent.

Here’s the file for drag-and-drop (and my test tid):

Hide your sidebar or decrease the number 15 to see the hardcoded linebreaks.

text-into-lines.json (2.1 KB)

1 Like