[Tip] Turn on hyphenation in preview

The Foghorn preview generates justified text and turns on hyphenation. This is should be working according to @agiletortoise from Drafts 23
However, the template does not set the lang attribute in the preview which presumably makes the hyphenation not very useful except for documents in English.
One can easily make hyphenation available in all languages like this:

  • copy the Foghorn template (using “Export” from the action’s edit dialog) into Drafts’ template folder under a new name
  • In this new template, change the <html> element to <html lang="xx"> where xx is your default language (en for English, fr for French, de for German etc.)
  • define a new action with “HTML Preview” as its only step and import this tempate into it.

Now hyphenation should work without any further ado for the default language. That might be sufficient if you only write in one language.
However, it gives weird results if you preview a document in another language. Following a suggestion of @sylumer, in this case:

  • in your template, change <html lang="xx"> to <html lang="[[lang]]">
  • add a tag to the document in the form lang-yy-YY where yy-YY are the language and country codes (the latter is not strictly necessary, so lang-yy is fine, too). E.g., en-GB für british and en-US for american English
  • Define a new action with a script as its first step:
let lang = "xx";
let tags = draft.tags;
let found = tags.filter(t => t.includes("lang-"))
if (found && found.length > 0) {
  lang = found[0].substr(-2);
draft.setTemplateTag("lang", lang);
  • add the “HTML Preview” step after this one using the modified template

If you have inline code segments in your documents (i.e. included in single backqoutes) you might want to turn off hyphenation for them like so

  -webkit-hyphens: off;
  -moz-hyphens: off;
  hyphens: off;

This segment belongs in the CSS part of your template:

code {

before the closing brace.

1 Like