Handwritten Journal

Handwritten Journal en

Installations 28 Likes 14

It's recommended you understand basic HTML to use this.

This is a somewhat simple plugin to allow you to create hand-written letter style of notes, journals, etc. It contains 6 fonts and a letter background. This is just achieved by giving you pre-baked classes you can use.

It's modular-ish, so it makes it a bit of a pain to apply multiple things but you can use a signature style without fonts, fonts without the letter, the background without anything else. Etc.

Using the letter styling for all other sub-styles is highly recommended as it has a collection of minor fixes including forcing fonts on titles.

Each font's size has been adjusted to be legible by default. It works on light theme and is mostly compatible with darker themes.

Included Classes:

letter - a container class to use for everything else, makes sure fonts are consistent for headers, links, etc
lback - Parchment background. This will force fonts to be black, but you can override them with the wysiwyg editor
hand1 through hand6 - Six handwritten fonts sourced from the google api
sig - Increases font size x2 for a signature  

Known issues

  • If this plugin isn't the first loaded sometimes fonts won't import
  • Dark theme headers are illegible with the lback 
  • It's horrible trying to edit on Dark Mode because the styling doesn't apply in the wysiwyg editor.
  • Signature's are 2x the size of that font's default. If the font is bigger than the body font it can seem huge.

HOW TO USE:

If you're unsure how to use classes here are some steps.

  1. Write out the content
  2. Go into the HTML view
  3. At the top add a div and assign the 'letter' class. In the same class area you can pick your font, and if you want a parchment background (e.g. class="letter lback hand2")
  4. Close your div.
  5. IF YOU ARE USING SUMMERNOTE: swap back to the visual editor and make any change. Summernote has a glitch where it doesn't save HTML changes until the visual editor is modified.

Optional: If you are adding different fonts within the letter, you can create a span and give it the hand1-hand6 class you want for that area. You can use the sig class to double its size, as well.


Special thanks to Salvatos and Guardian for providing help with some formatting issues

Latest version 1.3

Released 3 years ago

Added userscript plugin