I'm sure there are better ways to implement this, but I just thought I'd share a modification that I found useful. Any thoughts? You could equally employ something like $(elem).circleType({...}).then(function () {...}), but this was sufficient for my needs

This line https://github.com/peterhry/CircleType/blob/ffebbcc65803e1e203bde9522a8ff115de884b73/src/utils/splitNode.js#L13

.split('')

wrongly splits emojis in iOS webview, if you change to

for (const char of trimmedText) {
  // char
}

it will work with iOS emojis

Hey Peter,

Would you consider adding CircleType to Bower? I've put up an example manifest file but this PR is more just to see if you'd be interested

http://bower.io/docs/creating-packages/

The function getBoundingClientRect() might return 0 for width or height when the element is an inline element. Setting a display type inline-block fixes this.

Hi,

I used circletype.min.js in my wordpress with in header :

and i've created Html module with visual composer with :

When i load the page the tittle load bad (picture 1), but when i reload the tittle is good (picture2) ...

Can you help me please ?

Thanks, Bastien

I have installed a version with bower and it is working. However, I have installed circleType with yarn in another project and, when i do gulp to generate the app.js file, the file generated does not work. The error is: TypeError: (intermediate value)(...) is not a function When i go to the file /node_modules/circletype.js/circletype.js i can see these last lines:

if (document.readyState !== 'complete') { elem.style.visibility = 'hidden' $(window).on('load', function () { elem.style.visibility = 'visible' layout() }) } else { layout() } }) } })) If I manually add a semicolon at the end of the last line and i do the gulp process it works like a charm. In the bower version the file finish fine with semicolon.

I have resolved the problem by placing circletype library at the last position of the gulpfile. This way there are no more libraries after circleType and there is no error. But I don't think this is a definitive solution.

Provide a new option updateWidth which, when true, will calculate the width of each element and apply it via an inline style. The option is false by default as it breaks the FitText example.

Any thoughts?

Hey! First off just wanna say awesome job on a really helpful library, thanks!

I was having trouble getting my text to be spaced closer together. I thought it would be simply by playing around with forceWidth and/or forceHeight (still not quite sure how these work), but nothing seems to be working. Here's the text I have right now:

My goal is to get the letters to be spaced closer together so that the text curves up to only around the red lines pictured below. Is there any way to achieve this through the library and/or CSS?

Edit: I did decrease the font-size a bit and it helped a little, but the letters are still spaced out a little more than I'd like. It's so close!

Thanks!

Hi Peter,

Your plugin is very interesting and work perfectly, but i have one problem : I need to remove dynamically the effect, and you didn't add such method in your plugin to make that. Could you explain me how to create this function easily ?

Thanks in advance

Hey,

this is my first pull request so please don't mind mistakes. I have extended to plugin to allow the usage of links (provided as hashmap). What do you think about it?

This plugin is inaccessible to screen reader users as every letter is read out on its own. This happens because there are spans around each letter. Possible solution: Use aria-hidden to hide those spans for screen readers, while duplicating the text in the respective element and moving it out of the viewport so this duplicated text can be picked up by screen readers.

Been tryna follow the docs here, https://circletype.labwire.ca/, on how to set this up and think I've followed everything correctly, however, the expected result isn't what I get.

In the examples on the page referenced above, the text inside the target element gets pulled into the "aria-label" attribute, whereas for me it's always blank.

Here's my code:

.circular-text_wrapper { top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;

.circular-text {
    color: transparent;
    -webkit-text-stroke: 1px $navy;
    font-family: $sedgwickAveDisplay;
    font-size: 24px;
    font-weight: 400;
    font-style: normal;
    line-height: 24px;
    text-transform: uppercase;
}

}

const circleType = new CircleType( document.getElementById('circular-text') ).radius();

The circletype.min.js file is pulling in ahead of the above JS, and I'm not getting any errors in the console - and as far as I can tell it is at least trying to work as it does remove my text from #circular-text, just never adds it to the aria-label for whatever reason.

You can inspect the code here, https://matthewmeaklim.com - it's inside the image within the reviews section just above the footer.

I guess I'm doing something daft but can't for the life of me see what it is.

Many thanks in advance.

P.S. Looks to be a great plugin from the examples!

Firstly thank you for your work!

Unfortunatley I'm experiencing an Issue regarding whitespaces at the end or beginning of a text I'm using CircleType on. It seems that the whitespaces are being ignored, resulting in an uneven result when using some seperators like this:

I also tried using protected whitespaces like '&#160' or ' ' but without success.

Would it be possible to take ending or beginning whitespaces into account when using CircleType?

Thanks and Greetings from Germany!

Hello! Firstly: thank you for ur job, u're awesome!

And secondly I have problem:

First element - has normal letter spacing, but second and third elements has other spacing. I'm trying to use letter-spacing parameter in css, trying to use in js (elem.style.letterSpacing), but all of it works just on first element. What I need to do?

Part of code (I'm using svelte):

for (let i = 0; i < text.length; i++) {
    let circleType = new CircleType(text[i]);
    circleType.radius(360).dir(tabs[i].dir);
 }

  <p class="text" bind:this={text[i]} style="transform: rotate({tabs[i].rotate}deg) translate(0, {tabs[i].translate}px) scale({tabs[i].dir})">{tab.title}</p>

May be worth changing this over...

The majority of people using the library are probably going to be using it in hx and p elements, where div elements aren't valid. Not a huge issue at all, but definitely worth thinking about :)

I hope you don't mind me submitting this, I was looking for a way of doing this with the package at work today but it felt a bit too hacky. I really like the the ease of using this library, and I feel like this would be a nice feature to add :)

This adds a new fullCircle() method which will create equal spacing between each letter, making a full circle for any given radius.