Examples

Initialize with query selector

<p class="container">
    Lorem ipsum...
</p>
<p class="container">
    Lorem ipsum...
</p>
var tsb = new TypesetBot('body .container');
Edit example on CodePen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut lectus nec tellus venenatis feugiat sed a sem. Nullam rutrum lacus sed enim vehicula, vel suscipit ex gravida.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut lectus nec tellus venenatis feugiat sed a sem. Nullam rutrum lacus sed enim vehicula, vel suscipit ex gravida.

Initialize with Node or NodeList

<p id="container1">
    Lorem ipsum...
</p>
<p class="container">
    Lorem ipsum...
</p>
<p class="container">
    Lorem ipsum...
</p>
var singleNode = document.getElementById(
    'container1'
);
var multipleNodes = document.querySelectorAll(
    '.container'
);

var tsb1 = new TypesetBot(singleNode);
var tsb2 = new TypesetBot(multipleNodes);
Edit example on CodePen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut lectus nec tellus venenatis feugiat sed a sem. Nullam rutrum lacus sed enim vehicula, vel suscipit ex gravida.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut lectus nec tellus venenatis feugiat sed a sem. Nullam rutrum lacus sed enim vehicula, vel suscipit ex gravida.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut lectus nec tellus venenatis feugiat sed a sem. Nullam rutrum lacus sed enim vehicula, vel suscipit ex gravida.

Hyphenation language

By default US english language will be used to hyphenate text. This can be changed by include a hyphenation pattern and initialize with language, full list can be found here.

<!-- Hyphenation pattern - english -->
<script src="https://unpkg.com/@fluid-project/hyphenation-patterns@0.2.2-dev.20181115T211247Z.d313a52/dist/browser/en-us.js"></script>
<!-- Hyphenation pattern - danish -->
<script src="https://unpkg.com/@fluid-project/hyphenation-patterns@0.2.2-dev.20181115T211247Z.d313a52/dist/browser/da.js"></script>

<p class="container-en">
    Lorem ipsum...
</p>
<p class="container-da">
    Lorem ipsum...
</p>
var tsb1 = new TypesetBot(
'.container-en',
{ 'hyphenLanguage': 'en-us' }
);
var tsb2 = new TypesetBot(
'.container-da',
{ 'hyphenLanguage': 'da' }
);
Edit example on CodePen

We first started investigating visual regression testing in 2012, starting with Wraith and subsequently forking it to use Selenium webdriver rather than PhantomJS. We’ve also tried Backstop and PhantomCSS, but neither stuck in our workflow. A major stumbling block was deciding when a frontend engineer should run the tests. Ad-hoc during feature development? Before submitting a pull request for a feature? On the develop branch once a feature is merged? Nightly? Maybe a QA automation engineer should be running these instead, as part of a test suite?

Vi begyndte først at undersøge visuel regressionstest i 2012, startede med Wraith og derefter gafle den til at bruge Selenium-webdriver i stedet for PhantomJS. Vi har også prøvet Backstop og PhantomCSS, men ingen af dem sidder fast i vores arbejdsgang. En vigtig stødesten besluttede, hvornår en frontendingeniør skulle køre testene. Ad-hoc under funktionsudvikling? Før du indsender en pull-anmodning om en funktion? På udviklingsgrenen, når en funktion er slået sammen? Overnatning? Måske burde en QA-automatiseringsingeniør køre disse i stedet for som en del af en testsuite?

Text alignment

Justified text is generally discouraged on the web. This is due to the quality of justified text being really poor. With TypesetBot this is not the case, because of smart line algorithm and intelligent word hyphenation.

<p class="container-justified">
    Lorem ipsum...
</p>
<p class="container-ragged">
    Lorem ipsum...
</p>
var tsb1 = new TypesetBot(
'.container-justified',
{ 'alignment': 'justify' }
);
var tsb2 = new TypesetBot(
'.container-ragged',
{ 'alignment': 'left' }
);
Edit example on CodePen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut lectus nec tellus venenatis feugiat sed a sem. Nullam rutrum lacus sed enim vehicula, vel suscipit ex gravida. Duis interdum est non augue bibendum ornare. Nunc accumsan egestas quam. Sed mollis quis urna ac laoreet. Mauris consequat congue nibh ut varius. Quisque ultrices felis et diam mollis convallis. Vivamus convallis felis vitae augue faucibus, vel porttitor diam viverra. Vivamus dictum vulputate aliquet. Ut neque arcu, venenatis eget ullamcorper id, pulvinar sit amet nunc. Morbi cursus euismod lorem rutrum lacinia.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut lectus nec tellus venenatis feugiat sed a sem. Nullam rutrum lacus sed enim vehicula, vel suscipit ex gravida. Duis interdum est non augue bibendum ornare. Nunc accumsan egestas quam. Sed mollis quis urna ac laoreet. Mauris consequat congue nibh ut varius. Quisque ultrices felis et diam mollis convallis. Vivamus convallis felis vitae augue faucibus, vel porttitor diam viverra. Vivamus dictum vulputate aliquet. Ut neque arcu, venenatis eget ullamcorper id, pulvinar sit amet nunc. Morbi cursus euismod lorem rutrum lacinia.