Bad positionning of the letter 'i' after the letter 'f' in a vue projet

[Geoffrey00]

Hello !

So I ran into this problem recently where the position of the i after the letter when curving was always wrong.

First, I imported the library after installing it
npm install circletype --save
then
import CircleType from 'circletype';

I get my element
let profil = ref(null);

the element
<p class="font-semibold text-sm text-center relative top-[3px]" v-else ref="profil">{{ profileInformation }}</p>

then i created the new instance in the onMounted
const handleCurveText = () => { setTimeout(() => { new CircleType(profil.value).radius(1300).dir(-1); }, 1000); }

onMounted
onMounted(() => { handleCurveText(); })

Thank you in advance for your help !

[Geoffrey00]

Here's the result

[dpa99c]

Yes, I'm also seeing this in the case of "fish".
Not sure if it's exclusive to the case of "f" followed by "i" but when it occurs, the <span> that is created for "i" has the inline style transform: translateX(0em) instead of an appropriate negative value, causing the "i" to be out position.

[dpa99c]

Here's my quick and dirty hack to fix it:
if the translateX value is exactly 0em, use the transformX value of next or previous letter.
Seems to work OK for my "fish" case.

const container = document.getElementById('my_curved_text');
const circleType = new CircleType(container).radius(someRadius);


requestAnimationFrame(() => {
  const spans = container.querySelectorAll('span');
  for(let j = 0; j < spans.length; j++){
    const span = spans[j];
    if(span.style.transform.match(/translateX\(0em\)/)){
      let replacementSpan;
      if(spans[j+1]){
        replacementSpan = spans[j+1];
      }else if(spans[j-1]){
        replacementSpan = spans[j-1];
      }else{
        replacementSpan = spans[0];
      }
      if(replacementSpan){
        const translateX = replacementSpan.style.transform.match(/translateX\((.*)em\)/)[1];
        span.style.transform = span.style.transform.replace(/translateX\(0em\)/, `translateX(${translateX}em)`);
      }
    }
  }  
});