Superscript & subscript text in Jetpack Compose

When we use specially any chemical or mathematical formula we need to write some special types of text that is slightly below and above of the regular type in that case we can use Superscript and Subscript as text. I know you are excited to know about how to use Superscript & subscript in Jetpack Compose. Lets know about Superscript and subscript in Jetpack Compose.

Superscript

Superscript is a text that appear smaller than the surrounding text and is usually aligned slightly above the baseline of the regular type. In English, superscript is commonly used to add references (for footnotes), copyright or trademark symbols, and in equations for scientific and mathematical texts. For example, the physics formula for energy E = mc²

Subscript

Subscript is similarly aligned slightly below the baseline of regular type. Subscript is mainly reserved for chemical compounds. For example the chemical formula.

Lets create an app with texts using superscript and superscript. 

First Create a New Project Selecting Empty Activity here I am using Android Studio Flamingo. 

Write a name for your project I named it Super Sub Script Compose.

Create a file named TextScript for Superscript & Subscript Text.

TextScript

package com.example.supersubscriptcompose

import …

@Composable
fun TextScript() {
  Column {

  val superscript = SpanStyle(
     baselineShift = BaselineShift.Superscript,
  fontSize = 17.sp,
color = 
androidx.compose.ui.graphics.Color.Blue
    )

    Text(fontSize = 24.sp,
      fontWeight = FontWeight.Bold,
      text = buildAnnotatedString {
       append("E = mc")
       withStyle(superscript)
           { append("2") }
            }
        )
 val subScript = SpanStyle(
 baselineShift = BaselineShift.Subscript,
 fontSize = 17.sp,
 color = 
androidx.compose.ui.graphics.Color.Green

   )
    Text(
      fontSize = 20.sp,
      fontWeight = FontWeight.Bold,
      text = buildAnnotatedString {
                append("CH")
                withStyle(subScript) {
                    append("3")
                }
                append("COOH")
            }
        )
    }
}

MainActivity

  package com.example.supersubscriptcompose

import …

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
     super.onCreate(savedInstanceState)
      setContent {
       SuperSubScriptComposeTheme {
           Surface(
       
modifier = Modifier.fillMaxSize(),
      
color =
MaterialTheme.colorScheme.background
               
 ) {
                    
TextScript()
                }
            }
        }
    }
}

OUTPUT :

*******************************Finish*****************************