Language in preview with Foghorn

Issues
,
1

The Foghorn template theoretically enables hyphenation. However, there are two misspellings that prevent it from working in Safari and possibly Firefox: Instead of

-webkit-hypen: auto;
-moz-hypen: auto;

it should be

-webkit-hyphen: auto;
-moz-hyphen: auto;

Changing that makes the preview a lot more visually pleasing. However, to make hyphenation reliable, one must also provide a lang attribute in the HTML element. Which is currently not possible in Drafts, as far as I can tell: There doesn’t seem to be a possibility to set the document language. Or is there?

2

Thanks, I’ll make those modifications in the built-in template. You can make as many custom templates for the preview as you want and store them in iCloud Drive/Drafts/Library/Templates if you want to make modifications and other customizations. Details in the User Guide.

3

Thanks, I did already this and read the documentation :wink:
However, there’s still the issue with the lang Attribute: hyphenation can only work correctly if it is set.

4

Templates are full HTML documents, you should be able to add those attributes to the <html> tag in the template if you desire in your custom versions.

5

I did that, and it’s probably good enough for most use cases.

However, this procedure means that one needs one template per language (and it makes setting hyphens to “auto” in the foghorn template kind of pointless for other languages than English). To make hyphenation work in a generic way, i.e. with the predefined template(s), the lang attribute must be set(table) in the html element in a programmatic way, like with a [[language]] placeholder. Which in turn means that one must be able to specify the document’s language somewhere.

6

As a UK user, I would approach this by setting up my preview action to default to UK English, and also to check for a language tag of the format (for example) lang-xx-xx to check for an alternate language on a draft.

If a tag is found, it drops the initial lang- and populates a custom drafts template tag, say [[lang]] which is then used in the HTML tag. If no lang tag is found the en-GB entry would be the default and would be used instead.

7

You could embed a language selection form in the HTML, and have javascript trigger changing the lang attribute based on the popup select as well, if you just want to do it dynamically in the preview window.

8

Thanks again. That works nicely and is a sufficiently flexible solution, I think. I tried it with a default language set to “de” and a file tagged with lang-en. The action executed before the HTML preview then set then lang template tag to en which propagated to the template’s <html lang="[[lang]]">.
Cools

1 Like