Git Product home page Git Product logo

drop-cap's Introduction

drop-cap

a vanilla JavaScript plugin which makes use of CSS shape-outside and SVG fonts

#What is this? Inspired by Sara Soueidan’s article on A List Apart I wanted to achieve the effect of text flowing around the shape of its first letter – a peculiar drop cap. In order to do it I use some JavaScript, an SVG font and transform glyphs of specific letters to polygons. Since it uses SVG fonts it's also possible to flow texts around arbitrary shapes from icon fonts. Beware of the limitation described below.

drop cap

#Demo To see it live and working you need to enable support for shape-outside in your browser. As shown in the picture above you can see the actual polygon when you look closer with Chrome inspection tools.

#Usage This plugin can be used on any paragraph or paragraphs specified by a class or an ID. Just open the index.html and see the examples. I hope the comments inside provide exhaustive clarifications. Be ready for manually tweaking some sizes in the settings depending on used fonts. They vary a lot.

#Known limitation The function responsible for converting SVG paths to polygons doesn't work well with glyphs consisting of separate shapes. E.g. when used against the letter "i" it'll only find and process the dot. Since drop caps are capital letters it shouldn't really matter. However problems may occur with some icons.

#License and acknowledgement As marked in the source code the function pathToPolygon is based on the code from the Path to Polygon Converter authored by Bear Travis licensed on a [creative commons license] (http://creativecommons.org/licenses/by/3.0/). Everything else has a double license MIT/CC from the previous sentence. Fonts Open Sans, Entypo and Freebooter Script come from Fontsquirrel and have their respective licenses.

#Tests There's folder "tests" with Jasmine and a tiny test spec. However it doesn't mean that this plugin was developed using TDD approach. It's actually for a function I've written to find first letter instead of using a simple regexp like others. This way I support non-latin characters. And blasphemously test implementation ;). To avoid closure and possible workarounds I test the plugin with first and last lines commented out and settings pasted in.

drop-cap's People

Contributors

tadeuszrychter avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

modulexcite

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.