# Circular/Round Text?

**URL:** <https://forums.fusetools.com/t/circular-round-text/4726>\
**Category:** How-to Discussions\
**Created:** [March 5, 2016, 4:50pm UTC](https://forums.fusetools.com/t/circular-round-text/4726 "2016-03-05T16:50:46Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![mbefore305](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@mbefore305](https://forums.fusetools.com/u/mbefore305)\
**Post date:** [March 5, 2016, 4:50pm UTC](https://forums.fusetools.com/t/circular-round-text/4726/1 "2016-03-05T16:50:46Z")

</div>

Hi,

is it possible to make a text circular/round? The text is an observable which is also changing.

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [March 5, 2016, 4:51pm UTC](https://forums.fusetools.com/t/circular-round-text/4726/2 "2016-03-05T16:51:59Z")

</div>

Hi!

What do you mean by circular/round? Can you please post an image that shows what you want?

---

<div class="post-metadata">

**Author:** ![mbefore305](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@mbefore305](https://forums.fusetools.com/u/mbefore305)\
**Post date:** [March 5, 2016, 4:55pm UTC](https://forums.fusetools.com/t/circular-round-text/4726/3 "2016-03-05T16:55:35Z")

</div>

Don`t have a picture. Like a ring (or wheel) where the text goes around the wheel. E.g. the data printed on a car tire. Is this clear? Otherwise I search for an image.

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [March 5, 2016, 4:58pm UTC](https://forums.fusetools.com/t/circular-round-text/4726/4 "2016-03-05T16:58:28Z")

</div>

There is no way to do that with one long string, but if you can split your string into multiple `Text` objects, you can use `Rotation` and `Translation` rotate them around in a circle. There is also a `CircularLayout` you can use, but I have never used it.

---

<div class="post-metadata">

**Author:** ![mbefore305](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@mbefore305](https://forums.fusetools.com/u/mbefore305)\
**Post date:** [March 5, 2016, 5:00pm UTC](https://forums.fusetools.com/t/circular-round-text/4726/5 "2016-03-05T17:00:20Z")

</div>

Ok, I will give that a try.

---

<div class="post-metadata">

**Author:** ![mbefore305](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@mbefore305](https://forums.fusetools.com/u/mbefore305)\
**Post date:** [March 6, 2016, 11:50am UTC](https://forums.fusetools.com/t/circular-round-text/4726/6 "2016-03-06T11:50:57Z")

</div>

Hi,

I come close, but need a hint, how to align it perfectly.

````auto

<App Theme="Basic" Background="#eeef">
    <JavaScript>

    var Observable = require("FuseJS/Observable");
    var roundText = Observable();
    var word = "ABCD";
    var sw = word.toUpperCase().split("");
    var angleDelta = Math.floor(360/(sw.length));

    console.log("angleDelta:" + angleDelta);
    for (var i = 0; i < sw.length; i++)
    {
        currentAngle = i*angleDelta + 90;
        roundText.add({ char: sw[i], angle: currentAngle });
        console.log("char: " + sw[i] + " angle: " + currentAngle ); 
    }
    module.exports = {
       roundText: roundText, 
   };
   </JavaScript>
   <ClientPanel>
    <DockPanel>
        <Panel>
            <Circle Height="180" Width="180" Fill="#FDD835" />
            <Circle Height="300" Width="300" Fill="#f44336" >
                <CircleLayout StartAngleDegrees="-360" EndAngleDegrees="0"/> 
                <Each Items="{roundText}">
                    <Rectangle Height="35" Width="35">
                        <Text Value="{char}" FontSize="20" Layer="Overlay"/>
                        <WhileActive>
                            <Rotate Degrees="{angle}" Duration="0"/>
                        </WhileActive>
                    </Rectangle>
                </Each>
                <Stroke Alignment="Center" Width="5" Brush="#212121" />
            </Circle>
        </Panel>
    </DockPanel>
</ClientPanel>
</App>

```

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/k2y192rm3QD3-legacy-files-rSsHL4ZCrGKEfFlP-NYz8XIur9u0iiqCdCkwa81E2.png)
````

---

<div class="post-metadata">

**Author:** ![mbefore305](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@mbefore305](https://forums.fusetools.com/u/mbefore305)\
**Post date:** [March 9, 2016, 2:37pm UTC](https://forums.fusetools.com/t/circular-round-text/4726/7 "2016-03-09T14:37:47Z")

</div>

Hi,

I managed to get what I wanted with this code (extract). JS:

```auto
roundText.clear(); 
var sw = randomWord.value.toUpperCase().split("") ;
var angleDelta = 360/(sw.length);
for (var i = 0; i < sw.length; i++) {
    currentAngle = i*angleDelta ;    
    roundText.add({ char: sw[i], angle: currentAngle });
}

```

UX:

```auto
<Circle Height="300" Width="300" Fill="#212121" >
   <CircleLayout StartAngleDegrees="270" EndAngleDegrees="630"/> 
   <Each Items="{roundText}">
     <Rectangle Alignment="Center" Height="60" Width="60">
       <Text Value="{char}" Alignment="Center" FontSize="25" Layer="Overlay"/>
       <WhileActive>
          <Rotate Degrees="{angle}" Duration="0.8"/>
       </WhileActive>
     </Rectangle>
  </Each>
</Circle>

```

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [March 9, 2016, 2:55pm UTC](https://forums.fusetools.com/t/circular-round-text/4726/8 "2016-03-09T14:55:33Z")

</div>

Great, thanks for sharing the code 🙂 Would love a screenshot too!

---

<div class="post-metadata">

**Author:** ![mbefore305](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@mbefore305](https://forums.fusetools.com/u/mbefore305)\
**Post date:** [March 9, 2016, 3:15pm UTC](https://forums.fusetools.com/t/circular-round-text/4726/9 "2016-03-09T15:15:33Z")

</div>

The start location of the word is random (on purpose).

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/t7l4hFn2azGw-legacy-files-kIsjXUQTrsLNwRTr-gKDnvvoSlVumDHcaEtEH_2ny.jpg)

---

<div class="post-metadata">

**Author:** ![mbefore305](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@mbefore305](https://forums.fusetools.com/u/mbefore305)\
**Post date:** [March 9, 2016, 3:16pm UTC](https://forums.fusetools.com/t/circular-round-text/4726/10 "2016-03-09T15:16:50Z")

</div>

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/MCxjdddZ2BMz-legacy-files-OjfZMP31M6bVZtC8-qPI9nlkE0qyb26gqta6amCTP.jpg)

---

<div class="post-metadata">

**Author:** ![mbefore305](https://avatars.discourse-cdn.com/v4/letter/m/da6949/32.png) [@mbefore305](https://forums.fusetools.com/u/mbefore305)\
**Post date:** [March 9, 2016, 3:17pm UTC](https://forums.fusetools.com/t/circular-round-text/4726/11 "2016-03-09T15:17:44Z")

</div>

The longer the word the more it shifts to the outer border of the circle. Not perfect, but will do for my purpose.