I made straight lines & cover page labels for my #reMarkable

2023-11-16 update: since release 3.8, which happened yesterday on my tablet, straight lines are now available as a new feature!

I recently acquired a second-hand e-ink tablet. The reMarkable2 comes with very little but specific features which optimize for efficient note-taking mainly, and for some sketching.

For the latter, the only assistance available is a few templates that afford guide lines, and the possibility to work with layers. In both cases the handling tools consist of a couple of erasers and a selection tool which lets you resize, rotate, copy and paste (except for what you typed as text, it only works for what you put on “paper” with the “pen”). No warping, no inversion, no tool to create any common shape or make a straight line.

Yet it knows of straight lines because when you use the highlighter on a PDF or EPUB file, it can “snap to text” and your highlighter strokes are transformed into straight lines.

I don’t know how others manage, when they prefer not to “jailbreak” (for lack of a better term) their tablet, but I don’t care whether I can display a custom image while my tablet is sleeping, but I do care about straight lines and shapes that are scalable. So I drew some and made a PDF of the pages.

How I use them

Note: the illustration pictures are post processed with a filter to give them a slight background that changes the colour (the eggplant colour should in fact be black, the red is in fact much more vivid.)

Horizontal and vertical lines of various thickness and lengths, and one rectangle

I made horizontal lines of varied thickness and length, a few vertical lines too, and a rectangle.

When I need a line, I navigate to this page in my templates folder, use the selection tool to copy it, navigate to my destination page, and tap the pen. Then I drag it where I want, stretch it or shrink it, rotate it if I need. And repeat as often as needed.

Oval black label with hand-written text in white reading: Notes & thoughts

For this cover page label, I used one of the black oval shapes I hand-drew, copied it with the selection tool, navigated to my notebook page, pasted it, and gave it the size I wanted.

Then I added a new layer. I chose the calligraphy pen, thick size, and white ink and wrote. The layer protects the oval if you erase or select and move your words.

Black rectangles of various sizes stacked on top of each other with white hand-writing inside to look like a cover

This is exactly the same instructions as the oval label, but selecting all the black boxes of various sizes and using the medium-sized calligraphy pen nib.

In this particular notebook, I used the same cover page for each of the modules. I duplicated the first one, moved it to the right place, selected the layer where I wrote and made changes.

Large red circle and red outer outline within which is hand-written in white: My evil schemes, and in block black letters underneath: Book 42, year 2023

This is page 14 of the PDF I made. I duplicated the whole page and moved it as cover page of a new notebook. I could have selected the shape, copied it, and pasted it elsewhere, but I wanted the circles at exactly the same place.

How I made the Firefox “reader view” popin NOT overlap text

I ❤️ the Firefox feature called Reader View. I’ve been a fan for many years and I use it often. A lot of the time, I click the “listen” button, and I read while the text is being read to me.

BUT, if you leave the popin (clicking it a second time shelves it back) in order to use the pause/skip/speed buttons and slider while you read along, it blocks some of the text as the text automatically scrolls. See what I mean:

Screenshot of a browser page on desktop in reader view with the 'listen' popin showing pause/skip/speed buttons and slider that blocks some of the text from the page.

Because there’s a lot of empty space on the left side in reader view, I thought it should be possible to get the popup to be drawn over the empty space on the other side rather than overlapping the text.

I initially applied this:

** for the "reader view" popup to NOT overlap the text **/
.dropdown .dropdown-popup {
inset-inline-start: -260px !important;
}

Then, my colleague Bert Bos (who knows a thing or two about CSS because he co-invented it with Håkon Lie) advised me to use the below, for the toolbar to stay at the left margin, and as long as that margin is wider than the popup, it will not overlap the text.


/* Put the toolbar in the reader view as far left as possible. */
#toolbar.toolbar-container .toolbar.reader-toolbar {
margin-inline-start: 1px !important;
}

I’m much happier now; this is how it looks:

Screenshot a browser page on desktop in reader view with the 'listen' popin showing pause/skip/speed buttons and slider at the left of the page, thus no longer blocking any of the text from the page.

Add a user stylesheet

  • In the Firefox address bar, type 'about:profiles' and click the button “Show in Finder” (or similar if not on Mac OS) next to “Local Directory”
  • Open the “chrome” directory (or create it if it does not exist)
  • Edit the file 'userContent.css' (or create it if it does not exist)
  • Paste the custom snippet and save the file:
    /** Put the toolbar in the reader view as far left as possible. **/
    .dropdown .dropdown-popup {
    inset-inline-start: -260px !important;
    }
  • In the Firefox address bar, type 'about:config' and set 'toolkit.legacyUserProfileCustomizations.stylesheets' to true
  • Open the menu Tools > Browser Tools > Web Developer Tools
  • Click the three-dot menu, and choose “Settings”. Under “Inspector”, check the “Show Browser Styles” checkbox
  • Restart Firefox
  • Enjoy!

Vote it up as an idea in Mozilla Connect

I put it on the Mozilla Idea Exchange and if you think this change should be the default, please vote it up!