Hyphenopoly - Hyphenation for node and Polyfill for client-side hyphenation.

  •        107

Hyphenopoly.js is a JavaScript-polyfill for hyphenation in HTML: it hyphenates text if the user agent does not support CSS-hyphenation at all or not for the required languages and it is a Node.js-module. Place all code for Hyphenopoly at the top of the header (immediately after the tag) to ensure resources are loaded as early as possible. You'll have to insert two script blocks. In the first block provide the initial configurations for Hyphenopoly_Loader as inline script. In the second block load Hyphenopoly_Loader.js as external script. Also, don't forget to enable CSS hyphenation.</p> <a class="more-link" href="https://github.com/mnater/Hyphenopoly" rel="nofollow" target="_blank"> https://github.com/mnater/Hyphenopoly </a> <br> <hr> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="30%">Tags</td> <td> <a class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/hyphenation" rel=tag> hyphenation </a> <a class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/hyphenation-algorithm" rel=tag> hyphenation-algorithm </a> <a class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/html" rel=tag> html </a> <a class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/polyfill" rel=tag> polyfill </a> <a class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/hyphens" rel=tag> hyphens </a> <a class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/hyphen" rel=tag> hyphen </a> <a class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/soft" rel=tag> soft </a> <a class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/hyphenate" rel=tag> hyphenate </a> </td> </tr> <tr> <td width="30%">Implementation</td> <td> <a class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/HTML" rel=tag> HTML </a> </td> </tr> <tr> <td width="30%">License</td> <td> <a class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/MIT" rel=tag> MIT </a> </td> </tr> <tr> <td width="30%">Platform</td> <td> <a class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/NodeJS" rel=tag> NodeJS </a> </td> </tr> </table> <p align="right">     <!-- AddThis Button BEGIN --> <!-- Go to www.addthis.com/dashboard to customize your tools --> <div class="addthis_sharing_toolbox"></div> <!-- AddThis Button END --> </p> </div> </div> <br> <div class="col-md-3"> </div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- large_rectangle_1 --> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-5687467405122227" data-ad-slot="3407416813"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <br> <BR> <div class="headline headline-md"><h2>Related Projects</h2></div> <div style="border: solid 1px #eee;" class="dummy"> <div class="funny-boxes bg-color-white"> <div class="row" style="margin-right:5px;margin-left:5px;"> <h2><a href="/product/mnater-hyphenator" >Hyphenator - Javascript that implements client-side hyphenation of HTML-Documents</a></h2> <ul class="list-unstyled funny-boxes-rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="lang">   Javascript</li> </ul> <hr class="hr-xs"> <p style="text-align:justify;">Warning: Active maintenance of this project will come to an end on fall 2018. Have a look at its successor: https://github.com/mnater/Hyphenopoly. Hyphenator.js is a free open source Javascript library that automatically hyphenates text on websites. It comes in handy as a polyfill for legacy browsers that don't support CSS 3 hyphenation at all or for modern browsers that do hyphenation, but do not provide hyphenation dictionaries for a particular language.</p> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/hyphenation-algorithm" rel=tag> hyphenation-algorithm </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/hyphenation" rel=tag> hyphenation </A> </div> </div> </div> <div style="border: solid 1px #eee;" class="dummy"> <div class="funny-boxes bg-color-white"> <div class="row" style="margin-right:5px;margin-left:5px;"> <h2><a href="/product/bramstein-hypher" >hypher - A fast and small JavaScript hyphenation engine</a></h2> <ul class="list-unstyled funny-boxes-rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="lang">   Javascript</li> </ul> <hr class="hr-xs"> <p style="text-align:justify;">A small and fast JavaScript hyphenation engine. Can be used in Node.js and as a jQuery plugin. The hyphenateText method takes an optional second parameter minLength which is the minimum length a word should have to be considered for hyphenation (defaults to 4.) Note that an instance of the Hypher class should only be created once for each language object.</p> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/hyphenation" rel=tag> hyphenation </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/hypher" rel=tag> hypher </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/hypher.js" rel=tag> hypher.js </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/ender" rel=tag> ender </A> </div> </div> </div> <div style="border: solid 1px #eee;" class="dummy"> <div class="funny-boxes bg-color-white"> <div class="row" style="margin-right:5px;margin-left:5px;"> <h2><a href="/product/nhunspell" >NHunspell: Spellcheck, Hyphen, Thesaurus</a></h2> <ul class="list-unstyled funny-boxes-rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="lang">   ASPNET</li> </ul> <hr class="hr-xs"> <p style="text-align:justify;">NHunspell is a .NET version of the open office spell checker. Functions: spell checking, hyphenation, thesaurus with the open office dictionaries. It is free (GPL,LGPL, MPL) and can be used in closed source software. http://nhunspell.sourceforge.net. Here is the NuGet Package: http://nuget.org/packages/NHunspell/</p> </div> </div> </div> <div style="border: solid 1px #eee;" class="dummy"> <div class="funny-boxes bg-color-white"> <div class="row" style="margin-right:5px;margin-left:5px;"> <h2><a href="/product/deco-cow" >wordaxe</a></h2> <ul class="list-unstyled funny-boxes-rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="lang">   Python</li> </ul> <hr class="hr-xs"> <p style="text-align:justify;">wordaxe (formerly deco-cow): A hyphenation library for Python. Several hyphenation algorithms: - the pattern-based from TeX/OOO, - by decomposition of compound words for German language. Includes support for paragraph line-breaking with ReportLab.</p> </div> </div> </div> <div style="border: solid 1px #eee;" class="dummy"> <div class="funny-boxes bg-color-white"> <div class="row" style="margin-right:5px;margin-left:5px;"> <h2><a href="/product/paradj" >Paragraph Adjuster with Hyphenation</a></h2> <ul class="list-unstyled funny-boxes-rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="lang">   Perl</li> </ul> <hr class="hr-xs"> <p style="text-align:justify;">Paragraph justification in any of the following formats: left-justified, right-justified, centered, or both left- and right-justified, with option for word hyphenation in case the word does not fit on a line</p> </div> </div> </div> <BR> <div style="border: solid 1px #eee;" class="dummy"> <div class="funny-boxes bg-color-white"> <div class="row" style="margin-right:5px;margin-left:5px;"> <h2><a href="/product/google-budou" >budou - Budou is an automatic organizer tool for beautiful line breaking in CJK (Chinese, Japanese, and Korean)</a></h2> <ul class="list-unstyled funny-boxes-rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="lang">   Python</li> </ul> <hr class="hr-xs"> <p style="text-align:justify;">English uses spacing and hyphenation as cues to allow for beautiful and legible line breaks. Certain CJK languages have none of these, and are notoriously more difficult. Breaks occur randomly, usually in the middle of a word. This is a long standing issue in typography on web, and results in degradation of readability.Budou automatically translates CJK sentences into organized HTML code with lexical chunks wrapped in non-breaking markup so as to semantically control line breaks. Budou uses Google Cloud Natural Language API (NL API) to analyze the input sentence, and it concatenates proper words in order to produce meaningful chunks utilizing part-of-speech (pos) tagging and syntactic information. Processed chunks are wrapped with SPAN tag, so semantic units will no longer be split at the end of a line by specifying their display property as inline-block in CSS.</p> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/natural-language-processing" rel=tag> natural-language-processing </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/web-development" rel=tag> web-development </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/cjk" rel=tag> cjk </A> </div> </div> </div> <div style="border: solid 1px #eee;" class="dummy"> <div class="funny-boxes bg-color-white"> <div class="row" style="margin-right:5px;margin-left:5px;"> <h2><a href="/product/supertable" >SuperTable</a></h2> <ul class="list-unstyled funny-boxes-rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="lang">   Javascript</li> </ul> <hr class="hr-xs"> <p style="text-align:justify;">SuperTable is an Obect-Oriented Javascript API for dynamically manipulating HTML tables. Features include column sorting, row filtering, pattern-based cell/row styling, auto-numbering sequence column, auto-hyphenation... IE5+,NS6+,Mozilla1+,Opera7+</p> </div> </div> </div> <div style="border: solid 1px #eee;" class="dummy"> <div class="funny-boxes bg-color-white"> <div class="row" style="margin-right:5px;margin-left:5px;"> <h2><a href="/product/davidmerfield-typeset" >Typeset - An HTML pre-proces­sor for web ty­pog­ra­phy</a></h2> <ul class="list-unstyled funny-boxes-rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="lang">   Javascript</li> </ul> <hr class="hr-xs"> <p style="text-align:justify;">Then tweak typeset.css to match the metrics of your font and include it on your page. Typeset.js is available as a plugin for grunt and gulp.</p> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/type" rel=tag> type </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/typeset" rel=tag> typeset </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/typography" rel=tag> typography </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/dropcap" rel=tag> dropcap </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/smallcap" rel=tag> smallcap </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/hyphenation" rel=tag> hyphenation </A> </div> </div> </div> <div style="border: solid 1px #eee;" class="dummy"> <div class="funny-boxes bg-color-white"> <div class="row" style="margin-right:5px;margin-left:5px;"> <h2><a href="/product/pslib" >Library to create PostScript files</a></h2> <ul class="list-unstyled funny-boxes-rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="lang">   C</li> </ul> <hr class="hr-xs"> <p style="text-align:justify;">PSlib is a C-library for generating multi page PostScript documents. There are functions for drawing lines, arcs, rectangles, curves, etc. PSlib also provides very sophisticated functions for text output including hyphenation and kerning.</p> </div> </div> </div> <div style="border: solid 1px #eee;" class="dummy"> <div class="funny-boxes bg-color-white"> <div class="row" style="margin-right:5px;margin-left:5px;"> <h2><a href="/product/defoe" >Folio; XSL Formatting Objects Renderer</a></h2> <ul class="list-unstyled funny-boxes-rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="lang">   Java</li> </ul> <hr class="hr-xs"> <p style="text-align:justify;">Folio is an XSL Formatting Objects renderer. Written to Java 5, it aims at full conformance with XSL 1.0 and subsequent versions. Initial target renderer is PDF. HyFo is the Folio stand-alone hyphenation package.</p> </div> </div> </div> <div style="border: solid 1px #eee;" class="dummy"> <div class="funny-boxes bg-color-white"> <div class="row" style="margin-right:5px;margin-left:5px;"> <h2><a href="/product/bgoffice" >Bulgarian language support</a></h2> <ul class="list-unstyled funny-boxes-rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="lang">   C++</li> </ul> <hr class="hr-xs"> <p style="text-align:justify;">The goal of this project is to provide spell check, grammar check and hyphenation for Bulgarian language for Open Source products such as OpenOffice.org, aspell, ispell etc.</p> </div> </div> </div> <div style="border: solid 1px #eee;" class="dummy"> <div class="funny-boxes bg-color-white"> <div class="row" style="margin-right:5px;margin-left:5px;"> <h2><a href="/product/voikko" >Voikko</a></h2> <ul class="list-unstyled funny-boxes-rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="lang">   Java</li> </ul> <hr class="hr-xs"> <p style="text-align:justify;">Voikko is a spell checking, grammar checking, morphological analysis and hyphenation system. Spell checkers are available for multiple languages, other features for Finnish only.</p> </div> </div> </div> <div style="border: solid 1px #eee;" class="dummy"> <div class="funny-boxes bg-color-white"> <div class="row" style="margin-right:5px;margin-left:5px;"> <h2><a href="/product/tcpdf" >TCPDF - PHP class for generating PDF</a></h2> <ul class="list-unstyled funny-boxes-rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="lang">   PHP</li> </ul> <hr class="hr-xs"> <a target="_blank"> <img src="/AppImages/Product/tcpdf_thumb.JPG" alt="" class="pull-left lft-img-margin img-width-100" class="float-left"> </a> <p style="text-align:justify;">TCPDF is a PHP class for generating PDF documents without requiring external extensions. TCPDF Supports UTF-8, Unicode, RTL languages, XHTML, Javascript, digital signatures, barcodes and much more.</p> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/text-extraction" rel=tag> text-extraction </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/pdf" rel=tag> pdf </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/pdf-library" rel=tag> pdf-library </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/pdf-text-extraction" rel=tag> pdf-text-extraction </A> </div> </div> </div> <div style="border: solid 1px #eee;" class="dummy"> <div class="funny-boxes bg-color-white"> <div class="row" style="margin-right:5px;margin-left:5px;"> <h2><a href="/product/ekalinin-typogr.js" >typogr.js - Typography utils for javascript</a></h2> <ul class="list-unstyled funny-boxes-rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="lang">   Javascript</li> </ul> <hr class="hr-xs"> <p style="text-align:justify;">typogr.js provides a set of functions which automatically apply various transformations to plain text in order to yield typographically-improved HTML.typogr.js has no external dependencies and can be used both on the server and in the browser.</p> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/nodejs" rel=tag> nodejs </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/typography" rel=tag> typography </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/smartypants" rel=tag> smartypants </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/typogrify" rel=tag> typogrify </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/typogr" rel=tag> typogr </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/hyphenation" rel=tag> hyphenation </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/quotes" rel=tag> quotes </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/dashes" rel=tag> dashes </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/ampersands" rel=tag> ampersands </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/prettify" rel=tag> prettify </A> </div> </div> </div> <div style="border: solid 1px #eee;" class="dummy"> <div class="funny-boxes bg-color-white"> <div class="row" style="margin-right:5px;margin-left:5px;"> <h2><a href="/product/openoffice-lv" >Latvian Lingucomponents for OpenOffice</a></h2> <ul class="list-unstyled funny-boxes-rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="lang">   </li> </ul> <hr class="hr-xs"> <p style="text-align:justify;">The aim of the project is to develop platform independent lingucomponents (at the first - spell checker, possible - hyphenation dictionary, grammar checker) for the LibreOffice and OpenOffice.org suites, Mozilla products and other software using HunSpell spell checking engine. For extensions for LibreOffice, OpenOffice and Mozilla products look in respective extension repositories.</p> </div> </div> </div> <div style="border: solid 1px #eee;" class="dummy"> <div class="funny-boxes bg-color-white"> <div class="row" style="margin-right:5px;margin-left:5px;"> <h2><a href="/product/openoffice-es" >OpenOffice.org en Espantilde;ol</a></h2> <ul class="list-unstyled funny-boxes-rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="lang">   C++</li> </ul> <hr class="hr-xs"> <p style="text-align:justify;">Proyecto de soporte a la versioacute;n en Espantilde;ol de OpenOffice.org y sus herramientas relacionadas. Entre ellas el diccionario de sinoacute;nimos LGPL (tesauro) y el separador silaacute;bico LGPL (hyphenation).</p> </div> </div> </div> <div style="border: solid 1px #eee;" class="dummy"> <div class="funny-boxes bg-color-white"> <div class="row" style="margin-right:5px;margin-left:5px;"> <h2><a href="/product/offo" >Objects for Formatting Objects</a></h2> <ul class="list-unstyled funny-boxes-rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="lang">   </li> </ul> <hr class="hr-xs"> <p style="text-align:justify;">Objects for Formatting Objects makes accessory data available to users of Formatting Object Processors. Example: Hyphenation files for various languages.</p> </div> </div> </div> <div style="border: solid 1px #eee;" class="dummy"> <div class="funny-boxes bg-color-white"> <div class="row" style="margin-right:5px;margin-left:5px;"> <h2><a href="/product/googlechrome-dialog-polyfill" >dialog-polyfill - Polyfill for the HTML dialog element</a></h2> <ul class="list-unstyled funny-boxes-rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="lang">   Javascript</li> </ul> <hr class="hr-xs"> <p style="text-align:justify;"><dialog> is an element for a popup box in a web page, including a modal option which will make the rest of the page inert during use. This could be useful to block a user's interaction until they give you a response, or to confirm an action. See the HTML spec. This polyfill works on modern versions of all major browsers. It also supports IE9 and above.</p> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/html" rel=tag> html </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/dialog" rel=tag> dialog </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/polyfill" rel=tag> polyfill </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/a11y" rel=tag> a11y </A> </div> </div> </div> <div style="border: solid 1px #eee;" class="dummy"> <div class="funny-boxes bg-color-white"> <div class="row" style="margin-right:5px;margin-left:5px;"> <h2><a href="/product/webcomponents-custom-elements" >custom-elements - A polyfill for HTML Custom Elements v1</a></h2> <ul class="list-unstyled funny-boxes-rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="lang">   Javascript</li> </ul> <hr class="hr-xs"> <p style="text-align:justify;">A polyfill for the custom elements v1 spec. API which might trigger custom element reactions in the DOM and HTML specifications are marked with the CEReactions extended attribute.</p> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/custom-elements" rel=tag> custom-elements </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/customelements" rel=tag> customelements </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/web-components" rel=tag> web-components </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/webcomponents" rel=tag> webcomponents </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/polyfill" rel=tag> polyfill </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/shim" rel=tag> shim </A> </div> </div> </div> <div style="border: solid 1px #eee;" class="dummy"> <div class="funny-boxes bg-color-white"> <div class="row" style="margin-right:5px;margin-left:5px;"> <h2><a href="/product/afarkas-respimage" >respimage - respimage is a responsive images polyfill, that loads your images fast and responsibly</a></h2> <ul class="list-unstyled funny-boxes-rating"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li class="lang">   Javascript</li> </ul> <hr class="hr-xs"> <p style="text-align:justify;">#respimage respimage is a fast, lightweight and robust responsive images polyfill, that saves the users bandwidth by utilizing smart resource selection algorithm. It implements the srcset/sizes attributes as also the picture element. Unlike other responsive images polyfills respimage plays nicely with your graceful degradation / progressive enhancement and image SEO strategy. ##Download and Embed Simply download the respimage.min.js script and add it to your website or bundle it in your normal JS.</p> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/responsive" rel=tag> responsive </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/image" rel=tag> image </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/responsive-images" rel=tag> responsive-images </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/picture" rel=tag> picture </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/srcset" rel=tag> srcset </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/polyfill" rel=tag> polyfill </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/respimg" rel=tag> respimg </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/respimage" rel=tag> respimage </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/picturefill" rel=tag> picturefill </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/performance" rel=tag> performance </A> <A class="btn-u btn-u-sm btn-u-sea" title="show projects tagged" href="/tagged/bandwidth" rel=tag> bandwidth </A> </div> </div> </div> </div> <div class="col-md-3 col-xs-4"> <div class="margin-bottom-50"> <div class="featured-post"> <div class="search-bar"> <div class="headline headline-md"><h2>Social Icons</h2></div> <ul class="social-icons social-icons-color"> <li><a class="social_rss" data-original-title="Feed" href="https://feeds.feedburner.com/findbestopensource"></a></li> <li><a class="social_facebook" data-original-title="Facebook" href="https://www.facebook.com/pages/BestOpenSource/143284469017710"></a></li> <li><a class="social_twitter" data-original-title="Twitter" href="https://www.twitter.com/bestopensource"></a></li> <li><a class="social_googleplus" data-original-title="Goole Plus" href="https://plus.google.com/105258921192325657922"></a></li> </ul> <a href="https://goo.gl/forms/D1TEFtS5vNXWhGVD3" class="author-name" >Subscribe to our mailing list</a> </div> </div> <!--End mc_embed_signup--> <br> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Skyscrapper --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-5687467405122227" data-ad-slot="7767304811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <br> <br><br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <div class="search-bar posts margin-bottom-10"> <div class="headline headline-md"><h2>Most Viewed Product</h2></div> <dl class="dl-horizontal"> <a href="/product/jforum" > JForum </a> </dl> <dl class="dl-horizontal"> <a href="/product/asgbookphp" > Asgbookphp - PHP Guestbook Script </a> </dl> <dl class="dl-horizontal"> <a href="/product/phorum" > Phorum - PHP based forum software </a> </dl> <dl class="dl-horizontal"> <a href="/product/usebb" > Usebb - UseBB forum software in PHP 4 and 5.3. </a> </dl> <dl class="dl-horizontal"> <a href="/product/pligg" > Pligg - Social Publishing CMS </a> </dl> <dl class="dl-horizontal"> <a href="/product/crawltrack" > Crawltrack - Tracks the visits of Crawler </a> </dl> <dl class="dl-horizontal"> <a href="/product/microlinkr" > Microlinkr - Tiny url generator </a> </dl> <dl class="dl-horizontal"> <a href="/product/webalizer" > Webalizer - fast web server log file analysis </a> </dl> <dl class="dl-horizontal"> <a href="/product/smf" > Simple Machines Forum - Elegant, Effective and Powerful </a> </dl> <dl class="dl-horizontal"> <a href="/product/mybb" > MyBB - professional,efficient discussion board </a> </dl> </div> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <div class="search-bar posts margin-bottom-10"> <div class="headline headline-md"><h2>Recently Viewed Product</h2></div> <dl class="dl-horizontal"> <a href="/product/flite" > Flite - Fast Run time Synthesis Engine </a> </dl> <dl class="dl-horizontal"> <a href="/product/ykyouhei-kydrawercontroller" > KYDrawerController - Side Drawer Navigation Controller similar to Android </a> </dl> <dl class="dl-horizontal"> <a href="/product/rhdunn-espeak" > espeak - eSpeak NG is an open source speech synthesizer that supports 99 languages and accents. </a> </dl> <dl class="dl-horizontal"> <a href="/product/vapor-jwt-provider" > jwt-provider - Adds conveniences for using JWTs in Vapor. </a> </dl> <dl class="dl-horizontal"> <a href="/product/tencent-vconsole" > vConsole - A lightweight, extendable front-end developer tool for mobile web page. </a> </dl> <dl class="dl-horizontal"> <a href="/product/yarolegovich-slidingrootnav" > SlidingRootNav - DrawerLayout-like ViewGroup, where a "drawer" is hidden under the content view, which can be shifted to make the drawer visible </a> </dl> <dl class="dl-horizontal"> <a href="/product/chartjs-chartjs-plugin-datalabels" > chartjs-plugin-datalabels - Chart.js plugin to display labels on data elements </a> </dl> <dl class="dl-horizontal"> <a href="/product/pcmm" > Portos Commander </a> </dl> <dl class="dl-horizontal"> <a href="/product/lorenzo-audit-stash" > audit-stash - Flexible and rock solid audit log tracking for CakePHP 3 </a> </dl> <dl class="dl-horizontal"> <a href="/product/arachnode" > Arachnode.net </a> </dl> </div> <p> We have large collection of open source products. Follow the tags from <a href="/tags?filter=A" class="more-link"> Tag Cloud >></a> <br><br> </p> <BR> <p> Open source products are scattered around the web. Please provide information about the open source projects you own / you use. <b><a href="https://goo.gl/forms/0GHSdTi0GxJYfq1E3" rel="nofollow" class="more-link">Add Projects.</a></b> <br><br> <a href="https://www.linode.com/?r=cf80696e1d0c6553a9035f6395f16e8ee9e2c8c8"><img src="/images/linode-powered.png"></a> <br> </div> </div> </div> </div> <!-- end container --> </section> <div class="footer-v1"> <div class="copyright"> <div class="container"> <div class="row"> <div class="col-md-3"> </div> <div class="col-md-9"> </div> </div> <div class="row"> <div class="col-md-6"> <p> 2018 © findbestopensource.com. Made in India. All trademarks and copyrights are held by respective owners. <a href="/page/advertise">Advertise</a>  |  <a href="/page/aboutus">About us</a>  |  <a href="/page/privacy-policy">Privacy Policy</a>  |  <a href="/page/terms-of-use">Terms of Use</a>  |  </p> </div> <!-- Social Links --> <div class="col-md-6"> <ul class="footer-socials list-inline"> <li> <a href="http://www.facebook.com/pages/BestOpenSource/143284469017710" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Facebook"> <i class="fa fa-facebook"></i> </a> </li> <li> <a href="https://plus.google.com/105258921192325657922" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Google Plus"> <i class="fa fa-google-plus"></i> </a> </li> <li> <a href="http://www.twitter.com/bestopensource" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Twitter"> <i class="fa fa-twitter"></i> </a> </li> </ul> </div> <!-- End Social Links --> </div> </div> </div><!--/copyright--> </div> <!--=== End Footer Version 1 ===--> </div><!--/wrapper--> <!-- JS Global Compulsory --> <script type="text/javascript" src="/assets/plugins/jquery/jquery.min.js"></script> <script type="text/javascript" src="/assets/plugins/jquery/jquery-migrate.min.js"></script> <script type="text/javascript" src="/assets/plugins/bootstrap/js/bootstrap.min.js"></script> <!-- JS Implementing Plugins --> <script type="text/javascript" src="/assets/plugins/back-to-top.js"></script> <script type="text/javascript" src="/assets/plugins/smoothScroll.js"></script> <script type="text/javascript" src="/assets/plugins/masonry/jquery.masonry.min.js"></script> <script type="text/javascript" src="/assets/plugins/counter/jquery.counterup.min.js"></script> <script type="text/javascript" src="/assets/plugins/circles-master/circles.js"></script> <script type="text/javascript" src="/assets/plugins/counter/waypoints.min.js"></script> <script src="/assets/plugins/sky-forms-pro/skyforms/js/jquery.validate.min.js"></script> <script src="/assets/plugins/sky-forms-pro/skyforms/js/jquery.maskedinput.min.js"></script> <script src="/assets/plugins/sky-forms-pro/skyforms/js/jquery-ui.min.js"></script> <script src="/assets/plugins/sky-forms-pro/skyforms/js/jquery.form.min.js"></script> <!-- JS Customization --> <script type="text/javascript" src="/assets/js/custom.js"></script> <!-- JS Page Level --> <script type="text/javascript" src="/assets/js/app.js"></script> <script type="text/javascript" src="/assets/js/pages/blog-masonry.js"></script> <script type="text/javascript" src="/assets/js/plugins/circles-master.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { App.init(); App.initCounter(); }); </script> <!-- Go to www.addthis.com/dashboard to customize your tools --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=solai" async="async"></script> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-15794144-1"); pageTracker._trackPageview(); } catch(err) {} </script> <!--[if lt IE 9]> <script src="assets/plugins/respond.js"></script> <script src="assets/plugins/html5shiv.js"></script> <script src="assets/plugins/placeholder-IE-fixes.js"></script> <![endif]--> </body> </html>