Giter VIP home page Giter VIP logo

codrops / arctext Goto Github PK

View Code? Open in Web Editor NEW
180.0 180.0 62.0 307 KB

While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let's you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.

CSS 27.96% HTML 25.97% JavaScript 46.07%

arctext's People

Contributors

botelho avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

arctext's Issues

Multiline support

It would be great if this plugin also supports arced multi-line text.
Currently in case of line breaking the subsequent lines either
aren't visible or arc into the other direction and overlap.
Using a Mutation Observer the styles could be even automatically adjusted when the line breaking changes.

Is css/style.css needed?

What is the purpose of css/style.css?
Are the styles needed/optional for using the Arctext plugin? Are they only used for the demo page?

Responsive or Resetting Curve on resize

Hey I don't really believe this is an issue.

But I would like to know how you manage with being responsive. In my instance I wrap around images that resize on click and are a certain size on mobile devices therefore when I set the initial radius it must change on an event or in nested if statements.

I was wondering if you have another workaround to setting the radius? I was thinking of using some sort of formula to derive the desired radius based on window width, it would be easier to set the radius to something like 3vw but it only takes a interger value.

Again thanks for the awesome library and hope you might have some insights

Issues with demo page

Because the demo uses the JavaScript files over non-HTTPS,
the demo doesn't work until the external JavaScript files have been explicitly allowed in Chrome.

Add npm support

It would be great if npm (yarn) support can be added so I can import this in webpack.
PR ready: #8

Arc to remain even thou character length is different.

I'm wondering if there is away to maintain the character width curve even if the character length changes.
For example if I type "Juan" at radius 140 and then I type "Set me to example" at 140. The "Juan" will have a slight curve and the "Set me to example" will have a large curve.

Is there away to make it where it has the same arc?

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.