Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- 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">
    We first started investigating visual regression test-
ing in 2012, starting with Wraith and subsequent-
ly forking it to use Selenium webdriver rather than 
PhantomJS. We’ve also tried Backstop and Phan-
tomCSS, but neither stuck in our workflow. A major 
stumbling block was deciding when a frontend en-
gineer 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
</p>
<p class="container-da">
    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 skulle en QA-automatiseringsingeniør køre disse i stedet for som en del af en testsuite?
</p>
              
            
!

CSS

              
                tsb-line{display:block}.typesetbot-justify{text-align:justify}.typesetbot-justify tsb-line:after{content:"";display:inline-block;width:100%}.typesetbot-justify tsb-line:last-of-type:after{display:none}.typesetbot-right tsb-line{text-align:right}.typesetbot-left tsb-line{text-align:left}.typesetbot-center tsb-line{text-align:center}


p {
  max-width: 500px;
}
              
            
!

JS

              
                function Queue(){var n=[],t=0;this.getLength=function(){return n.length-t},this.isEmpty=function(){return 0==n.length},this.enqueue=function(t){n.push(t)},this.dequeue=function(){if(0!=n.length){var e=n[t];return 2*++t>=n.length&&(n=n.slice(t),t=0),e}},this.peek=function(){return 0<n.length?n[t]:void 0}}
"use strict";function _possibleConstructorReturn(t,e){return!e||"object"!==_typeof(e)&&"function"!=typeof e?_assertThisInitialized(t):e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function _getPrototypeOf(t){return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return(_setPrototypeOf=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function _slicedToArray(t,e){return _arrayWithHoles(t)||_iterableToArrayLimit(t,e)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function _iterableToArrayLimit(t,e){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t)){var n=[],s=!0,i=!1,r=void 0;try{for(var o,h=t[Symbol.iterator]();!(s=(o=h.next()).done)&&(n.push(o.value),!e||n.length!==e);s=!0);}catch(t){i=!0,r=t}finally{try{s||null==h.return||h.return()}finally{if(i)throw r}}return n}}function _arrayWithHoles(t){if(Array.isArray(t))return t}function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var TypesetBot=function t(e,n){_classCallCheck(this,t),this.indexToNodes={},this.indexToTokens={},this.indexToTypesetInstance={},this.hyphenStore={},this.typeset=function(){(arguments.length>0&&void 0!==arguments[0]&&arguments[0]||this.isWatching)&&(this.logger.resetTime(),this.logger.start("Typeset"),this.typesetNodes(this.query.nodes),this.logger.end("Typeset"),this.logger.diff("Typeset"),this.logger.diff("-- Preprocess"),this.logger.diff("---- Clone working node"),this.logger.diff("---- Tokenize text"),this.logger.diff("---- Get render size of words"),this.logger.diff("------ Build HTML"),this.logger.diff("------ Update DOM"),this.logger.diff("------ Query DOM"),this.logger.diff("------ Get Properties"),this.logger.diff("---- Getting element properties"),this.logger.diff("---- Hyphen calc"),this.logger.diff("---- Hyphen render"),this.logger.diff("---- other"),this.logger.diff("-- Dynamic programming"),this.logger.diff("-- Finding solution"),this.logger.diff("-- Apply breakpoints"))},this.rerun=function(){this.typeset(!0)},this.requery=function(){this.query.requery(),this.typeset(!0)},this.watch=function(){this.isWatching=!0},this.unwatch=function(){this.isWatching=!1},this.terminate=function(){if(this.isTypesetting)this.logger.warn("Cannot typeset paragraph before calculations are done.");else{this.isTypesetting=!0;var t=!0,e=!1,n=void 0;try{for(var s,i=this.query.nodes[Symbol.iterator]();!(t=(s=i.next()).done);t=!0){var r=s.value,o=this.util.getTypesetInstance(r);o.reset(r),o=null}}catch(t){e=!0,n=t}finally{try{t||null==i.return||i.return()}finally{if(e)throw n}}this.isTypesetting=!1,this.unwatch(),delete this.indexToNodes,delete this.indexToNodes,delete this.indexToTokens,delete this.indexToTypesetInstance,delete this.hyphenStore,delete this.logger,delete this.settings,delete this.query,delete this.typesetter,delete this.util}},this.addEventListeners=function(){var t=this;document.body.addEventListener("typesetbot-viewport--reize",function(){t.typeset()},!1)},this.typesetNodes=function(t){if(this.isTypesetting)this.logger.warn("Cannot typeset paragraph before calculations are done.");else{this.isTypesetting=!0;var e=!0,n=!1,s=void 0;try{for(var i,r=t[Symbol.iterator]();!(e=(i=r.next()).done);e=!0){var o=i.value;this.util.getTypesetInstance(o).typeset(o)}}catch(t){n=!0,s=t}finally{try{e||null==r.return||r.return()}finally{if(n)throw s}}this.isTypesetting=!1}},this.util=new TypesetBotUtils(this),this.settings=new TypesetBotSettings(this,n),this.logger=new TypesetBotLog(this),this.uuid=TypesetBotUtils.createUUID(),this.query=new TypesetBotElementQuery(this,e),this.typesetter=new TypesetBotTypeset(this),this.addEventListeners(),this.isWatching=!0,this.typeset()},TypesetBotLog=function t(e){_classCallCheck(this,t),this.debug=!1,this.log=function(t){this.debug&&(console.log("TypesetBot: %s",t),"object"===_typeof(t)&&console.log(t))},this.warn=function(t){this.debug&&(console.warn("TypesetBot: %s",t),"object"===_typeof(t)&&console.warn(t))},this.error=function(t){console.error("TypesetBot: %s",t),"object"===_typeof(t)&&console.error(t)},this.start=function(t){this.debug&&(t in this._performanceMap||(this._performanceMap[t]=new TypesetBotPerformanceEntry),this._performanceMap[t].start.push(performance.now()))},this.end=function(t){this.debug&&(t in this._performanceMap||(this._performanceMap[t]=new TypesetBotPerformanceEntry),this._performanceMap[t].end.push(performance.now()))},this.diff=function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];if(this.debug){var n=0,s=0,i=this._performanceMap[t];if(null!=i){for(var r=0;r<i.start.length;r++)n+=i.start[r],s+=i.end[r];var o=t+" "+(s-n).toFixed(2)+"ms --- (calls: "+i.start.length+")";return e&&this.log(o),o}}},this.resetTime=function(){this._performanceMap={}},this._tsb=e,this._performanceMap={},this.debug=this._tsb.settings.debug},TypesetBotPerformanceEntry=function t(){_classCallCheck(this,t),this.start=[],this.end=[]},TypesetBotElementQuery=function t(e,n){_classCallCheck(this,t),this.nodes=[],this._queryString=null,this._index=0,this._nodeMap={},this._nodesTemp=[],this.handleQuery=function(t){if(null!=t)if("string"!=typeof t){if("object"===_typeof(t)){if(NodeList.prototype.isPrototypeOf(t)){var e=!0,n=!1,s=void 0;try{for(var i,r=t[Symbol.iterator]();!(e=(i=r.next()).done);e=!0){var o=i.value;this._nodesTemp.push(o)}}catch(t){n=!0,s=t}finally{try{e||null==r.return||r.return()}finally{if(n)throw s}}return}if(Node.prototype.isPrototypeOf(t))return void this._nodesTemp.push(t)}this._tsb.logger.warn("Unknown type of query used.")}else{this._queryString=t;var h=document.querySelectorAll(this._queryString);if(null==h)return;var a=!0,l=!1,u=void 0;try{for(var d,p=h[Symbol.iterator]();!(a=(d=p.next()).done);a=!0){var y=d.value;this._nodesTemp.push(y)}}catch(t){l=!0,u=t}finally{try{a||null==p.return||p.return()}finally{if(l)throw u}}}},this.requery=function(){if(null!=this._queryString){this._nodesTemp=[];var t=document.querySelectorAll(this._queryString);if(null!=t){var e=!0,n=!1,s=void 0;try{for(var i,r=t[Symbol.iterator]();!(e=(i=r.next()).done);e=!0){var o=i.value;this._nodesTemp.push(o)}}catch(t){n=!0,s=t}finally{try{e||null==r.return||r.return()}finally{if(n)throw s}}this.indexNodes(this._nodesTemp)}}else this._tsb.logger.warn("Can not requery since query string was not used.")},this.indexNodes=function(t){var e=!0,n=!1,s=void 0;try{for(var i,r=t[Symbol.iterator]();!(e=(i=r.next()).done);e=!0){var o=i.value;this.indexNode(o)}}catch(t){n=!0,s=t}finally{try{e||null==r.return||r.return()}finally{if(n)throw s}}},this.indexNode=function(t){null==t.getAttribute("data-tsb-uuid")&&null==this._tsb.util.getElementIndex(t)&&(this._tsb.util.setElementIndex(t,this._index),t.setAttribute("data-tsb-uuid",this._tsb.uuid),this.nodes.push(t),this._nodeMap[this._index]=t,this._index+=1)},this._tsb=e,this.handleQuery(n),this.indexNodes(this._nodesTemp)},TypesetBotSettings=function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;_classCallCheck(this,t),this.debug=!0,this.alignment="justify",this.hyphenPenalty=50,this.hyphenPenaltyRagged=500,this.flagPenalty=3e3,this.fitnessClassDemerit=3e3,this.demeritOffset=1,this.absoluteMaxRatio=5,this.maxRatio=2,this.minRatio=-1,this.hyphenLanguage="en-us",this.hyphenLeftMin=2,this.hyphenRightMin=2,this.fitnessClasses=[-1,-.5,.5,1,1/0],this.spaceUnit="em",this.spaceWidth=1/3,this.spaceStretchability=1/6,this.spaceShrinkability=1/9,this.unsupportedTags=["BR","IMG"],this._mergeSettings=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;if(null!=t)for(var e=0,n=Object.entries(t);e<n.length;e++){var s=_slicedToArray(n[e],2),i=s[0],r=s[1];void 0===this[i]&&this._tsb.logger.warn('Unknown settings key "'+i+'"'),this[i]=r}},this._tsb=e,this._customSettings=n,this._mergeSettings(n)},TypesetBotUtils=function t(e){_classCallCheck(this,t),this.getElementIndex=function(t){if(null==t.getAttribute("data-tsb-indexed"))return null;var e=t.getAttribute("data-tsb-indexed"),n=parseInt(e);return isNaN(n)||n.toString()!==e?(this._tsb.logger.error('Element has attribute "data-tsb-indexed", but could not parse it.'),this._tsb.logger.error(t),null):n},this.setElementIndex=function(t,e){t.setAttribute("data-tsb-indexed",""+e)},this.getElementNodes=function(t){var e=this.getElementIndex(t);return isNaN(e)&&this._tsb.logger.error("Could not find nodes to element."),this._tsb.indexToNodes[e]},this.getElementTokens=function(t){var e=this.getElementIndex(t);return isNaN(e)?(this._tsb.logger.error("Could not find nodes to element."),null):this._tsb.indexToTokens[e]},this.getTypesetInstance=function(t){var e=this.getElementIndex(t);if(null==e)return null;if(null==this._tsb.indexToTypesetInstance[e]){var n=new TypesetBotTypeset(this._tsb);this._tsb.indexToTypesetInstance[e]=n}return this._tsb.indexToTypesetInstance[e]},this._tsb=e};function typesetbotCheckResize(){typesetbotWindowGet("viewport--lastWidth")!==window.innerWidth&&(document.body.classList.add("typesetbot-viewport"),typesetbotWindowSet("viewport--rtime",(new Date).getTime()),!1===typesetbotWindowGet("viewport--timeout")&&(typesetbotWindowSet("viewport--timeout",!0),setTimeout(function(){typesetbotEndResize()},typesetbotWindowGet("viewport--delta"))),typesetbotWindowSet("viewport--lastWidth",window.innerWidth))}function typesetbotEndResize(){if((new Date).getTime()-typesetbotWindowGet("viewport--rtime")<typesetbotWindowGet("viewport--delta"))setTimeout(typesetbotEndResize,typesetbotWindowGet("viewport--delta"));else{typesetbotWindowSet("viewport--timeout",!1),document.body.classList.remove("typeset-viewport");var t=new Event("typesetbot-viewport--reize");document.body.dispatchEvent(t)}}function typesetbotWindowGet(t){return null==window.typesetbot&&(window.typesetbot={}),window.typesetbot[t]}function typesetbotWindowSet(t,e){null==window.typesetbot&&(window.typesetbot={}),window.typesetbot[t]=e}TypesetBotUtils.createUUID=function(){var t=(new Date).getTime();return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(e){var n=(t+16*Math.random())%16|0;return t=Math.floor(t/16),("x"==e?n:3&n|8).toString(16)})},TypesetBotUtils.isVisible=function(t){var e=t;return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)},TypesetBotUtils.getArrayIndexes=function(t){for(var e=[],n=0;n<t.length-1;n++)e.push(t[n].length);return e},typesetbotWindowSet("ready",!1),typesetbotWindowSet("onload",!1),typesetbotWindowSet("ready",!0),window.onload=function(){typesetbotWindowSet("onload",!0)},typesetbotWindowSet("viewport--lastWidth",window.innerWidth),typesetbotWindowSet("viewport--delta",200),typesetbotWindowSet("viewport--rtime",null),typesetbotWindowSet("viewport--timeout",!1),window.onresize=typesetbotCheckResize;var TypesetBotMath=function t(e){_classCallCheck(this,t),this.getRatio=function(t,e,n,s,i){return e<t?(t-e)/((n-1)*i):(t-e)/((n-1)*s)},this.getBadness=function(t){return null==t||t<this.settings.minRatio?1/0:100*Math.pow(Math.abs(t),3)+.5},this.getDemeritFromBadness=function(t,e,n){var s=n?this.settings.flagPenalty:0;return e>=0?Math.pow(this.settings.demeritOffset+t+e,2)+s:e===-1/0?Math.pow(this.settings.demeritOffset+t,2)+s:Math.pow(this.settings.demeritOffset+t,2)-Math.pow(e,2)+s},this.getDemerit=function(t,e,n,s){var i=this.getBadness(t),r=0;n&&("justify"===this.settings.alignment?r+=this.settings.hyphenPenalty:r+=this.settings.hyphenPenaltyRagged);var o=this.getDemeritFromBadness(i,r,e);return s&&(o+=this.settings.fitnessClassDemerit),o},this.getFitnessClass=function(t){var e=!0,n=!1,s=void 0;try{for(var i,r=this.settings.fitnessClasses[Symbol.iterator]();!(e=(i=r.next()).done);e=!0){var o=i.value;if(t<o)return o}}catch(t){n=!0,s=t}finally{try{e||null==r.return||r.return()}finally{if(n)throw s}}return this.settings.fitnessClasses[this.settings.fitnessClasses.length-1]},this.isValidRatio=function(t,e){return this.ratioIsLessThanMax(t,e)&&this.ratioIsHigherThanMin(t)},this.ratioIsLessThanMax=function(t,e){return t<=this.settings.maxRatio+e},this.ratioIsHigherThanMin=function(t){return t>=this.settings.minRatio},this._tsb=e,this.settings=e.settings},TypesetBotTokenizer=function t(e,n){_classCallCheck(this,t),this.tokenize=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=[];if(null==e&&(e=t),!("childNodes"in e))return[];if(!TypesetBotUtils.isVisible(e))return[];var s=!0,i=!1,r=void 0;try{for(var o,h=e.childNodes[Symbol.iterator]();!(s=(o=h.next()).done);s=!0){var a=o.value;switch(a.nodeType){case 1:n=n.concat(this.tokenizeElement(t,a));break;case 3:n=n.concat(this.tokenizeText(t,a));break;case 2:case 8:case 9:case 10:this._tsb.logger.log("Tokenizer ignores node type: "+a.nodeType),this._tsb.logger.warn(a);default:this._tsb.logger.warn("Tokenizer found unknown node type: "+a.nodeType),this._tsb.logger.warn(a)}}}catch(t){i=!0,r=t}finally{try{s||null==h.return||h.return()}finally{if(i)throw r}}return n},this.tokenizeElement=function(t,e){var n=[];if(!TypesetBotUtils.isVisible(e))return[];e.nodeName in this._tsb.settings.unsupportedTags&&(this._tsb.logger.warn("Tokenizer found unsupported node type, typesetting might not work as intended."),this._tsb.logger.warn(e));var s=this.appendToNodeMap(t,e);return n.push(new TypesetBotTag(s,e.nodeName,!1)),(n=n.concat(this.tokenize(t,e))).push(new TypesetBotTag(s,e.nodeName,!0)),n},this.tokenizeText=function(t,e){var n=[];if(3!==e.nodeType)return this._tsb.logger.warn("TokenizeText was called with wrong type: "+e.nodeType),this._tsb.logger.warn(e),[];var s=this.appendToNodeMap(t,e),i=e,r=this.replaceInvalidCharacters(i.nodeValue),o=r.split(" ");" "===r[0]&&n.push(new TypesetBotSpace(s));var h=!0,a=!1,l=void 0;try{for(var u,d=o[Symbol.iterator]();!(h=(u=d.next()).done);h=!0){var p=u.value;""!==p&&(n.push(new TypesetBotWord(s,p)),n.push(new TypesetBotSpace(s)))}}catch(t){a=!0,l=t}finally{try{h||null==d.return||d.return()}finally{if(a)throw l}}return" "!==i.nodeValue[i.nodeValue.length-1]&&n.pop(),n},this.appendToNodeMap=function(t,e){if(null==this._tsb.util.getElementIndex(t))return this._tsb.logger.error("Root node is not indexed"),this._tsb.logger.error(t),null;var n=this._tsb.util.getElementIndex(t);return n in this._tsb.indexToNodes||(this._tsb.indexToNodes[n]=[]),this._tsb.indexToNodes[n].push(e),this._tsb.indexToNodes[n].length-1},this.replaceInvalidCharacters=function(t){return t.replace(/(?:\r\n|\r|\n)/g," ")},this._tsb=e,this.typesetter=n},TypesetBotToken=function t(e,n){_classCallCheck(this,t),this.nodeIndex=e,this.type=n};TypesetBotToken.types={WORD:1,SPACE:2,TAG:3};var TypesetBotWord=function(t){function e(t,n){var s;return _classCallCheck(this,e),(s=_possibleConstructorReturn(this,_getPrototypeOf(e).call(this,t,TypesetBotToken.types.WORD))).hasHyphen=!1,s.initHyphen=function(){this.hasHyphen=!0,this.hyphenIndexPositions=[],this.hyphenIndexWidths=[],this.hyphenRemainWidth=0,this.dashWidth=0},s.text=n,s}return _inherits(e,TypesetBotToken),e}(),TypesetBotSpace=function(t){function e(t){return _classCallCheck(this,e),_possibleConstructorReturn(this,_getPrototypeOf(e).call(this,t,TypesetBotToken.types.SPACE))}return _inherits(e,TypesetBotToken),e}(),TypesetBotTag=function(t){function e(t,n,s){var i;return _classCallCheck(this,e),(i=_possibleConstructorReturn(this,_getPrototypeOf(e).call(this,t,TypesetBotToken.types.TAG))).tag=n,i.isEndTag=s,i}return _inherits(e,TypesetBotToken),e}(),TypesetBotTypeset=function t(e){_classCallCheck(this,t),this.typeset=function(t){null!=this.backupInnerHtml&&(t.innerHTML=this.backupInnerHtml),this.preprocessElement(t);var e=this.getFinalLineBreaks(t),n=this.lowestDemerit(e);null!=n?this.render.applyLineBreaks(t,n):this._tsb.logger.warn("No viable solution found during typesetting. Element is skipped.")},this.reset=function(t){null!=this.backupInnerHtml&&(t.innerHTML=this.backupInnerHtml),delete this.backupInnerHtml,this.render.reset(t)},this.getElementProperties=function(t){this._tsb.logger.start("---- Getting element properties"),null==this.backupInnerHtml&&(this.backupInnerHtml=t.innerHTML),this.render.setMinimumWordSpacing(t),this.elemWidth=this.render.getNodeWidth(t),this.elemFontSize=this.render.getDefaultFontSize(t),this.spaceWidth=this.elemFontSize*this.settings.spaceWidth,this.spaceShrink=this.elemFontSize*this.settings.spaceShrinkability,this.spaceStretch=this.elemFontSize*this.settings.spaceStretchability,this._tsb.logger.end("---- Getting element properties")},this.setWordHyphens=function(t){for(var e=0,n=!1;!n;){var s=this.hyphen.nextWord(t,e);null!=s?(e=s.tokenIndex,this.hyphen.calcWordHyphens(t,s)):n=!0}},this.preprocessElement=function(t){this._tsb.logger.start("-- Preprocess"),this.getElementProperties(t),this._tsb.logger.start("---- Tokenize text"),this.tokens=this.tokenizer.tokenize(t),this._tsb.logger.end("---- Tokenize text"),this._tsb.logger.start("---- other"),this.appendToTokenMap(t,this.tokens),this._tsb.logger.end("---- other"),this._tsb.logger.start("---- Get render size of words"),this.render.getWordProperties(t),this._tsb.logger.end("---- Get render size of words"),this._tsb.logger.start("---- Hyphen calc"),this.setWordHyphens(t),this._tsb.logger.end("---- Hyphen calc"),this._tsb.logger.start("---- Hyphen render"),this.render.getHyphenProperties(t,this.tokens),this._tsb.logger.end("---- Hyphen render"),this._tsb.logger.end("-- Preprocess")},this.lowestDemerit=function(t){this._tsb.logger.start("-- Finding solution");var e=null,n=!0,s=!1,i=void 0;try{for(var r,o=t[Symbol.iterator]();!(n=(r=o.next()).done);n=!0){var h=r.value;null!=e?e.demerit>h.demerit&&(e=h):e=h}}catch(t){s=!0,i=t}finally{try{n||null==o.return||o.return()}finally{if(s)throw i}}return this._tsb.logger.end("-- Finding solution"),e},this.getFinalLineBreaks=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;this._tsb.logger.start("-- Dynamic programming"),this.activeBreakpoints=new Queue,this.shortestPath={},this.finalBreakpoints=[],this.activeBreakpoints.enqueue(new TypesetBotLinebreak(null,0,null,0,!1,null,0,0));for(var n=!1;!n;){var s=this.activeBreakpoints.dequeue();if(null!=s){if(this.isShortestPath(s))for(var i=this.initLineProperties(s),r=!1;!r;){var o=i.curWidth,h=this.hyphen.nextWord(t,i.tokenIndex,i.firstWordHyphenIndex);if(i.firstWordHyphenIndex=null,null!=h){i.tokenIndex=h.tokenIndex,i.curWidth+=h.width,i.lineHeight=h.height,i.wordCount++;var a=this.math.getRatio(this.elemWidth,i.curWidth,i.wordCount,this.spaceShrink,this.spaceStretch);if(this.math.ratioIsLessThanMax(a,e)){var l=!0,u=!1,d=void 0;try{for(var p,y=h.indexes[Symbol.iterator]();!(l=(p=y.next()).done);l=!0){var g=p.value,c=this.tokens[g];if(c.hasHyphen)for(var f=0;f<c.hyphenIndexWidths.length;f++){o+=c.hyphenIndexWidths[f];var b=this.math.getRatio(this.elemWidth,o+c.dashWidth,i.wordCount,this.spaceShrink,this.spaceStretch);if(this.math.isValidRatio(b,e)){var m=this.getBreakpoint(s,i,b,h.lastWordTokenIndex,f,!0);this.updateShortestPath(m)}}}}catch(t){u=!0,d=t}finally{try{l||null==y.return||y.return()}finally{if(u)throw d}}if(!this.math.ratioIsHigherThanMin(a)){r=!0;continue}var T=this.getBreakpoint(s,i,a,i.tokenIndex);this.updateShortestPath(T)}i.curWidth+=this.spaceWidth}else this.pushFinalBreakpoint(s,i),r=!0}}else n=!0}return this._tsb.logger.end("-- Dynamic programming"),0===this.finalBreakpoints.length&&e<=4?this.getFinalLineBreaks(t,e+1):this.finalBreakpoints},this.pushFinalBreakpoint=function(t,e){this.finalBreakpoints.push(new TypesetBotLinebreak(t,null,null,t.demerit,!1,null,t.lineNumber+1,e.lineHeight))},this.getBreakpoint=function(t,e,n,s){var i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:null,r=arguments.length>5&&void 0!==arguments[5]&&arguments[5],o=this.math.getFitnessClass(n),h=t.flag&&r,a=null!=i,l=null!=t.fitnessClass&&Math.abs(t.fitnessClass-o)>1,u=this.math.getDemerit(n,h,a,l);return new TypesetBotLinebreak(t,s,i,t.demerit+u,r,o,t.lineNumber+1,e.lineHeight)},this.isShortestPath=function(t){var e=null==t.hyphenIndex?-1:t.hyphenIndex;return null!=this.shortestPath[t.lineNumber]&&null!=this.shortestPath[t.lineNumber][t.tokenIndex]&&null!=this.shortestPath[t.lineNumber][t.tokenIndex][e]&&this.shortestPath[t.lineNumber][t.tokenIndex][e]>t.demerit&&this._tsb.logger.error("Dynamic: Found shortest path with higher demerit than current breakpoint"),null==this.shortestPath[t.lineNumber]||null==this.shortestPath[t.lineNumber][t.tokenIndex]||null==this.shortestPath[t.lineNumber][t.tokenIndex][e]||this.shortestPath[t.lineNumber][t.tokenIndex][e]===t.demerit},this.updateShortestPath=function(t){var e=null==t.hyphenIndex?-1:t.hyphenIndex;return null==this.shortestPath[t.lineNumber]&&(this.shortestPath[t.lineNumber]={}),null==this.shortestPath[t.lineNumber][t.tokenIndex]&&(this.shortestPath[t.lineNumber][t.tokenIndex]={}),(null==this.shortestPath[t.lineNumber][t.tokenIndex][e]||this.shortestPath[t.lineNumber][t.tokenIndex][e]>t.demerit)&&(this.shortestPath[t.lineNumber][t.tokenIndex][e]=t.demerit,this.activeBreakpoints.enqueue(t),!0)},this.appendToTokenMap=function(t,e){if(null==this._tsb.util.getElementIndex(t))return this._tsb.logger.error("Root node is not indexed"),void this._tsb.logger.error(t);var n=this._tsb.util.getElementIndex(t);this._tsb.indexToTokens[n]=e},this.initLineProperties=function(t){return new TypesetBotLineProperties(t,t.tokenIndex,t.hyphenIndex,t.lineNumber,0,0,0)},this._tsb=e,this.render=new TypesetBotRender(e),this.tokenizer=new TypesetBotTokenizer(e,this),this.hyphen=new TypesetBotHyphen(e),this.math=new TypesetBotMath(e),this.settings=e.settings},TypesetBotLinebreak=function t(e,n,s,i,r,o,h,a){_classCallCheck(this,t),this.origin=e,this.tokenIndex=n,this.hyphenIndex=s,this.demerit=i,this.flag=r,this.fitnessClass=o,this.lineNumber=h,this.maxLineHeight=a},TypesetBotLineProperties=function t(e,n,s,i,r,o,h){_classCallCheck(this,t),this.origin=e,this.tokenIndex=n,this.firstWordHyphenIndex=s,this.lineNumber=i,this.wordCount=r,this.curWidth=o,this.lineHeight=h},TypesetBotRender=function t(e){_classCallCheck(this,t),this.reset=function(t){t.removeAttribute("data-tsb-indexed"),t.removeAttribute("data-tsb-uuid"),t.removeAttribute("data-tsb-word-spacing"),t.classList.remove("typesetbot-justify","typesetbot-left","typesetbot-right","typesetbot-center"),t.style.wordSpacing=""},this.getSpaceWidth=function(t){var e=document.createElement("SPAN"),n=document.createTextNode("1"),s=document.createTextNode("1"),i=document.createTextNode(" "),r=document.createElement("SPAN");r.appendChild(i),e.appendChild(n),e.appendChild(r),e.appendChild(s),t.appendChild(e);var o=r.getBoundingClientRect(),h=o.right-o.left;return e.remove(),h},this.setMinimumWordSpacing=function(t){if(!t.getAttribute("data-tsb-word-spacing")){var e=this._tsb.settings.spaceWidth-this._tsb.settings.spaceShrinkability,n=this.getSpaceWidth(t);t.setAttribute("data-tsb-word-spacing","true"),t.style.wordSpacing="calc((1em * "+e+") - "+n+"px)"}},this.getWordProperties=function(t){var e=this._tsb.util.getElementTokens(t),n=t.innerHTML,s={},i="",r=0;this._tsb.logger.start("------ Build HTML");var o=!0,h=!1,a=void 0;try{for(var l,u=e[Symbol.iterator]();!(o=(l=u.next()).done);o=!0){var d=l.value;switch(d.type){case TypesetBotToken.types.WORD:var p=d;s[r]=d,r+=1,i+='<span class="typeset-word-node">'+p.text+"</span>";break;case TypesetBotToken.types.TAG:var y=d;i+=this.htmlGenerator.createTagHtml(t,y);break;case TypesetBotToken.types.SPACE:i+=" ";break;default:this._tsb.logger.error("Unknown token type found: "+d.type)}}}catch(t){h=!0,a=t}finally{try{o||null==u.return||u.return()}finally{if(h)throw a}}this._tsb.logger.end("------ Build HTML"),this._tsb.logger.start("------ Update DOM"),t.innerHTML=i,this._tsb.logger.end("------ Update DOM"),this._tsb.logger.start("------ Query DOM");var g=t.querySelectorAll(".typeset-word-node");this._tsb.logger.end("------ Query DOM"),this._tsb.logger.start("------ Get Properties");var c=0,f=!0,b=!1,m=void 0;try{for(var T,v=g[Symbol.iterator]();!(f=(T=v.next()).done);f=!0){var w=T.value,_=s[c];_.width=w.getBoundingClientRect().width,_.height=w.getBoundingClientRect().height,c+=1}}catch(t){b=!0,m=t}finally{try{f||null==v.return||v.return()}finally{if(b)throw m}}this._tsb.logger.end("------ Get Properties"),this._tsb.logger.start("------ Update DOM"),t.innerHTML=n,this._tsb.logger.end("------ Update DOM")},this.getDefaultFontSize=function(t){var e=window.getComputedStyle(t).fontSize;return Number(e.replace("px",""))},this.getNodeWidth=function(t){return t.getBoundingClientRect().width},this.getHyphenProperties=function(t){var e=this._tsb.util.getElementTokens(t),n=t.innerHTML,s="",i=[],r=!0,o=!1,h=void 0;try{for(var a,l=e[Symbol.iterator]();!(r=(a=l.next()).done);r=!0){var u=a.value;switch(u.type){case TypesetBotToken.types.WORD:var d=u,p=0;if(!d.hasHyphen)continue;var y=!0,g=!1,c=void 0;try{for(var f,b=d.hyphenIndexPositions[Symbol.iterator]();!(y=(f=b.next()).done);y=!0){var m=f.value,T=d.text.substring(p,m+1);p=m+1,s+='<span class="typeset-hyphen-check">'+T+"</span>",i.push({token:u,type:"hyphen"})}}catch(t){g=!0,c=t}finally{try{y||null==b.return||b.return()}finally{if(g)throw c}}if(d.text.length!==p)s+='<span class="typeset-hyphen-check">'+d.text.substr(p)+"</span>",i.push({token:u,type:"remain"});s+='<span class="typeset-hyphen-check">-</span>',i.push({token:u,type:"dash"});break;case TypesetBotToken.types.TAG:var v=u;s+=this.htmlGenerator.createTagHtml(t,v);break;case TypesetBotToken.types.SPACE:s+=" ";break;default:this._tsb.logger.error("Unknown token type found: "+u.type)}}}catch(t){o=!0,h=t}finally{try{r||null==l.return||l.return()}finally{if(o)throw h}}t.innerHTML=s;var w=t.querySelectorAll(".typeset-hyphen-check"),_=0,x=!0,k=!1,S=void 0;try{for(var B,W=w[Symbol.iterator]();!(x=(B=W.next()).done);x=!0){var C=B.value,I=i[_++],H=I.token,P=C.getBoundingClientRect().width;switch(I.type){case"hyphen":H.hyphenIndexWidths.push(P);break;case"remain":H.hyphenRemainWidth=P;case"dash":H.dashWidth=P;break;default:this._tsb.logger.error("Unknown request object type found: "+I.type)}}}catch(t){k=!0,S=t}finally{try{x||null==W.return||W.return()}finally{if(k)throw S}}t.innerHTML=n},this.applyLineBreaks=function(t,e){this._tsb.logger.start("-- Apply breakpoints");for(var n=[],s=e,i=!1;!i;)null!=s?(n.push(s),s=s.origin):i=!0;n.pop(),n.reverse();for(var r="",o=0,h=null,a=[],l=0,u=n;l<u.length;l++){var d=u[l],p="";p+=this.prependTagTokensOnLine(t,a),p+=this.getHtmlFromTokensRange(t,o,h,d.tokenIndex,d.hyphenIndex,a),p+=this.appendTagTokensOnLine(t,a),o=d.tokenIndex,h=d.hyphenIndex,r+='<tsb-line line="'+d.lineNumber+'" style="height:'+d.maxLineHeight+'px">'+p+"</tsb-line>"}t.innerHTML=r,this.setJustificationClass(t),this._tsb.logger.end("-- Apply breakpoints")},this.setJustificationClass=function(t){switch(this._tsb.settings.alignment){case"justify":t.classList.add("typesetbot-justify");break;case"left":t.classList.add("typesetbot-left");break;case"right":t.classList.add("typesetbot-right");break;case"center":t.classList.add("typesetbot-center");break;default:this._tsb.logger.notice("Unknown alignment type: "+this._tsb.settings.alignment)}},this.prependTagTokensOnLine=function(t,e){return this.getTagTokensOnLine(t,e,!1)},this.appendTagTokensOnLine=function(t,e){return this.getTagTokensOnLine(t,e,!0)},this.getTagTokensOnLine=function(t,e,n){var s="",i=!0,r=!1,o=void 0;try{for(var h,a=e[Symbol.iterator]();!(i=(h=a.next()).done);i=!0){var l=h.value;s+=this.htmlGenerator.createTagHtml(t,l,n)}}catch(t){r=!0,o=t}finally{try{i||null==a.return||a.return()}finally{if(r)throw o}}return s},this.getHtmlFromTokensRange=function(t,e,n,s,i,r){var o=this._tsb.util.getElementTokens(t),h="";null==s&&(s=o.length-1);for(var a=!0,l=e;l<s;l++){var u=o[l];switch(u.type){case TypesetBotToken.types.WORD:var d=u;if(a&&null!=n){var p=d.hyphenIndexPositions[n];h+=d.text.substr(p+1),a=!1;continue}h+=d.text;break;case TypesetBotToken.types.TAG:var y=u;y.isEndTag?r.pop():r.push(y),h+=this.htmlGenerator.createTagHtml(t,y);break;case TypesetBotToken.types.SPACE:h+=" ";break;default:this._tsb.logger.error("Unknown token type found: "+u.type)}}if(null!=i){var g=o[s],c=g.hyphenIndexPositions[i];h+=g.text.substr(0,c+1)+"-"}return h},this._tsb=e,this.htmlGenerator=new TypesetBotHtml(e)},TypesetBotHtml=function t(e){_classCallCheck(this,t),this.createTagHtml=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],s=this._tsb.util.getElementNodes(t)[e.nodeIndex];if(e.isEndTag||n)return"</"+s.tagName.toLowerCase()+">";var i="",r=!0,o=!1,h=void 0;try{for(var a,l=s.attributes[Symbol.iterator]();!(r=(a=l.next()).done);r=!0){var u=a.value;i+=u.name+'="'+u.value+'" '}}catch(t){o=!0,h=t}finally{try{r||null==l.return||l.return()}finally{if(o)throw h}}return"<"+s.tagName.toLowerCase()+" "+i+">"},this._tsb=e},TypesetBotHyphen=function t(e){_classCallCheck(this,t),this.hyphenate=function(t){var e=this.getWordOffset(t);return this.getWordParts(t,e)},this.getCachedHyphenation=function(t){return this._tsb.settings.hyphenLanguage in this._tsb.hyphenStore||(this._tsb.hyphenStore[this._tsb.settings.hyphenLanguage]={}),t in this._tsb.hyphenStore[this._tsb.settings.hyphenLanguage]?this._tsb.hyphenStore[this._tsb.settings.hyphenLanguage][t]:null},this.addCachedHyphenation=function(t,e){this._tsb.settings.hyphenLanguage in this._tsb.hyphenStore||(this._tsb.hyphenStore[this._tsb.settings.hyphenLanguage]={}),this._tsb.hyphenStore[this._tsb.settings.hyphenLanguage][t]=e},this.getWordParts=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(null==e&&(e=new TypesetBotWordOffset(0,0)),null==this._tsb.settings.hyphenLanguage||""===this._tsb.settings.hyphenLanguage.trim())return[t];var n=this._tsb.settings.hyphenLeftMin+e.left,s=this._tsb.settings.hyphenRightMin+e.right;if(t.length<n+s)return[t];var i=this.getCachedHyphenation(t);if(null!=i)return i;if(null==window.Hypher||null==window.Hypher.languages)return console.warn("Hyphenation library not found"),[t];if(null==window.Hypher.languages[this._tsb.settings.hyphenLanguage]){var r=new window.Hypher(module.exports);"string"==typeof module.exports.id&&(module.exports.id=[module.exports.id]);for(var o=0;o<module.exports.id.length;o+=1)window.Hypher.languages[module.exports.id[o]]=r;return null!=window.Hypher.languages[this._tsb.settings.hyphenLanguage]?this.getWordParts(t):(console.warn("Hyphenation language '%s' not found",this._tsb.settings.hyphenLanguage),[t])}window.Hypher.languages[this._tsb.settings.hyphenLanguage].leftMin=n,window.Hypher.languages[this._tsb.settings.hyphenLanguage].rightMin=s;var h=window.Hypher.languages[this._tsb.settings.hyphenLanguage].hyphenate(t);return this.addCachedHyphenation(t,h),h},this.getWordOffset=function(t){var e=0,n=0,s=t.match(/^[\W]*/);s&&(e=s[0].length);var i=t.match(/[\W]*$/);return i&&(n=i[0].length),new TypesetBotWordOffset(e,n)},this.nextWord=function(t,e){for(var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,s="",i=[],r=0,o=0,h=null,a=this._tsb.util.getElementTokens(t),l=!1;!l;){var u=a[e];if(null!=u){switch(u.type){case TypesetBotToken.types.WORD:var d=u;if(h=e,null==n)s+=d.text,null!=d.width&&(r+=d.width);else{var p=d.hyphenIndexPositions[n];s+=d.text.substr(p+1),r+=this.getEndWidth(d.hyphenIndexWidths,n,d.hyphenRemainWidth),n=null}i.push(e),null!=d.height&&o<d.height&&(o=d.height);break;case TypesetBotToken.types.TAG:break;case TypesetBotToken.types.SPACE:""!==s&&(l=!0);break;default:this._tsb.logger.error("Unknown token type found: "+u.type)}e++}else l=!0}return""===s?null:new TypesetBotWordData(s,i,e,r,o,h)},this.getEndWidth=function(t,e,n){for(var s=0,i=e+1;i<t.length;i++)s+=t[i];return s+n},this.calcWordHyphens=function(t,e){var n=this.hyphenate(e.str);if(!(n.length<=1)){var s=this._tsb.util.getElementTokens(t),i=!0,r=!1,o=void 0;try{for(var h,a=e.indexes[Symbol.iterator]();!(i=(h=a.next()).done);i=!0){s[h.value].initHyphen()}}catch(t){r=!0,o=t}finally{try{i||null==a.return||a.return()}finally{if(r)throw o}}var l=TypesetBotUtils.getArrayIndexes(n),u=0,d=s[e.indexes[u++]],p=d.text.length,y=0,g=0,c=!0,f=!1,b=void 0;try{for(var m,T=l[Symbol.iterator]();!(c=(m=T.next()).done);c=!0){for(g+=m.value;p<g;)y=p,p+=(d=s[e.indexes[u++]]).text.length;var v=g-y-1;d.hyphenIndexPositions.push(v)}}catch(t){f=!0,b=t}finally{try{c||null==T.return||T.return()}finally{if(f)throw b}}}},this._tsb=e},TypesetBotWordData=function t(e,n,s,i,r,o){_classCallCheck(this,t),this.str=e,this.indexes=n,this.tokenIndex=s,this.width=i,this.height=r,this.lastWordTokenIndex=o},TypesetBotWordOffset=function t(e,n){_classCallCheck(this,t),this.left=e,this.right=n};


var tsb1 = new TypesetBot(
'.container-en',
{ 'hyphenLanguage': 'en-us' }
);
var tsb2 = new TypesetBot(
'.container-da',
{ 'hyphenLanguage': 'da' }
);


              
            
!
999px

Console