Alaska is a simple text formatter for web

It automatically formats the text content of a web page to have the right quotes, no-break spaces, em-dashes, and more.

Before

John's new book, 'The Adventure of the Invisible Hound' - a thrilling sequel to 'The Mystery of the Missing Diamond'--is a must-read for all mystery enthusiasts. Currently ranked at no.1 on the bestseller list, 'The Adventure of the Invisible Hound' has seen a %25 increase in sales since its release in june 2023. It's a must-read for all mystery enthusiasts, especially those who appreciate intricate plotlines and unexpected twists.

After

John's new book, 'The Adventure of the Invisible Hound' - a thrilling sequel to 'The Mystery of the Missing Diamond'--is a must-read for all mystery enthusiasts. Currently ranked at no.1 on the bestseller list, 'The Adventure of the Invisible Hound' has seen a 25% increase in sales since its release in june 2023. It's a must-read for all mystery enthusiasts, especially those who appreciate intricate plotlines and unexpected twists.

Try it out yourself

Setup and usage

Include Alaska in the <head> of your page:

<head>
  ...
  <script src="/path/to/alaska.js"></script>
  ...
</head>

Now all nodes with text content and class="alaska" will be formated, including their child nodes:

<p class="alaska">
  This text will be formatted.
  <span>This text will be formatted too.</span>
</p>

If you want to avoid formatting text in certain child nodes, they should include class="alaska-skip":

<p class="alaska">
  This text will be formatted.
  <span class="alaska-skip">And this won't.</span>
</p>

If you plan on manipulating document and want added or modified elements to be formatted, you should include class="alaska-observe":

<div class="alaska-observe">
  ...
  <!--Alaska will format added or modified nodes in here-->
  ...
</div>

Alaska supports english and russian languages. 24 rules are applied to all text, regardless of the language. Quotation marks depend on the language and apostrophe applies only to text in english. By default, the lang attribute of the <html> element is the primary language of the document:

<html lang="en">
  <p>‘Quotes’</p>
  <p>‘Кавычки’</p>
</html>

If your document is a mix of english and russian and you want to have correct formmating in both languages, specify the lang attribute where needed:

<html lang="en">
  <p>‘Quotes’</p>
  <p lang="ru">«Кавычки»</p>
</html>

By default, all rules are applied. It is also possible to apply only specific rules to certain elements by specifying necessary attributes. If you want to turn off or on a certain rule, you have to add the corresponding attribute:

<p class="alaska">
  All rules will be applied to this text
  <span data-place-emdash="false">All rules will be applied to this text, except one -- the em-dash rule.</span>
</p>

Rules

Below is the list of rules. Select necessary and unnecessary rules -- corresponding attributes will be generated automatically:

all rules are applied