Skip to content
Orbit CSS Radial Framework

o-text Custom Element

<o-text> is a standard web-component for rendering curved text. By default can be up to 60 o-texts elements per orbit.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-4"> <o-text text-anchor="middle">o-text Custom Element allows</o-text> <o-text text-anchor="middle">render curved text content</o-text> </div> </div> </div> 
body {
  
}

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-4">
      <o-text text-anchor="middle">o-text Custom Element allows</o-text>
      <o-text text-anchor="middle">render curved text content</o-text>
    </div>
  </div>
</div>

Look and feel

Changing o-text colors

Font colors, size and other font properties

To change o-text any CSS font properties just added in a o-slice style or class.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <o-text class="cyan">This text is cyan and bold</o-text> <o-text class="purple">This text is purple and capitalized</o-text> </div> </div> </div> 

o-text.cyan {
color: var(--o-cyan);
font-weight: bold
}
o-text.purple {
color: var(--o-purple);
text-transform: uppercase;
}



<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <o-text class="cyan">This text is cyan and bold</o-text>
      <o-text class="purple">This text is purple and capitalized</o-text>


    </div>
  </div>
</div>

Background colors

To change o-text background color use CSS custom var --o-text-color and -o--hover-text-color in a o-slice style.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <o-text class="cyan">This text is cyan</o-text> <o-text class="purple">This text is purple</o-text> </div> </div> </div> 

o-text.cyan {
--o-text-color: var(--o-cyan-light);
--o-hover-text-color: var(--o-cyan)
}
o-text.purple {
--o-text-color: var(--o-purple-light);
--o-hover-text-color: var(--o-purple)
}
o-text:hover{
cursor: pointer
}
o-text {
--o-gap: 1; /* This will be added as default soon*/
}


<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <o-text class="cyan">This text is cyan</o-text>
      <o-text class="purple">This text is purple</o-text>


    </div>
  </div>
</div>

Changing text justification

Use text-anchor attribute

o-text has one special attribute: text-anchor to arrange its content. You can choose between start, middle, and end values.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <o-text text-anchor="start" class="purple">This text starts at begining</o-text> <o-text text-anchor="middle" class="purple">This text starts at middle</o-text> <o-text text-anchor="end" class="purple">This text is at end</o-text> </div> </div> </div> 


o-text.purple {
--o-text-color: var(--o-purple-light);
--o-hover-text-color: var(--o-purple)
}
o-text:hover{
cursor: pointer
}
o-text {
--o-gap: 1; /* This will be added as default soon*/
color: var(--o-purple-dark);
}

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <o-text text-anchor="start" class="purple">This text starts at begining</o-text>
      <o-text text-anchor="middle" class="purple">This text starts at middle</o-text>
      <o-text text-anchor="end" class="purple">This text is at end</o-text>
    </div>
  </div>
</div>

Use fit-range attribute

o-text allow distribute its content to fill text-length using fit-range attribute.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5"> <o-text fit-range class="orange">This text is along all text path- ||| -</o-text> </div> </div> </div> 


o-text.orange {
--o-text-color: var(--o-orange-light);
--o-hover-text-color: var(--o-orange)
}
o-text:hover{
cursor: pointer
}
o-text {
color: var(--o-orange-dark);
}

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5">
      <o-text fit-range class="orange">This text is along all text path- ||| -</o-text>


    </div>
  </div>
</div>

Adjust o-text length path size and gaps

Please, see o-slice reference.

Adjusting radial layout

Arbitrary o-text angle.

.angle-*: Set starting point angle from 0 to 360 degrees, overrriding automatic radial arragement.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-5 "> <o-text text-anchor="start" class="angle-270" >Text starting at 270º</o-text> </div> </div> </div> 


.orbit-5 {
border: 1px dashed var(--o-cyan);
}
o-slice {
--o-slice-color: var(--o-purple);
}

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-5 ">
      <o-text text-anchor="start"  class="angle-270" >Text starting at 270º</o-text>
    </div>
  </div>
</div>

Relative o-text orbital position

By default, o-text is positioned in the middle of orbit path. To change that, there some CSS utilities:

.inner-orbit: To place ano-text just below its orbit.

.outer-orbit: To place o-text just above its orbit.

.quarter-inner-orbit: To place o-text a 25% into its orbit.

.quarter-outer-orbit: To place o-text a 25% outer its orbit.

<div class="bigbang"> <div class="gravity-spot"> <div class="orbit-4"> <o-text class="outer-orbit ">outer</o-text> <o-text class="quarter-outer-orbit">25% outer</o-text> <o-text class="quarter-inner-orbit">inner</o-text> <o-text class="inner-orbit">25% inner</o-text> </div> </div> 

o-text {
color: var(--o-cyan-dark)
}

.orbit-4 {
border: 1px dashed var(--o-cyan-light)
}




  <div class="bigbang">
    <div class="gravity-spot">
      <div class="orbit-4">
        <o-text class="outer-orbit ">outer</o-text>
        <o-text class="quarter-outer-orbit">25% outer</o-text>
        <o-text class="quarter-inner-orbit">inner</o-text>
        <o-text class="inner-orbit">25% inner</o-text>
      </div>


  </div>