Learn Basic of Canvas Jetpack compose tutorial
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 = mc2Subscript
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 :
Frequently Asked Questions: Superscript & Subscript in Jetpack Compose
1. What is the easiest way to create superscript in Jetpack Compose?
You can apply BaselineShift.Superscript using AnnotatedString and SpanStyle.
2. How do I write subscript text in Jetpack Compose?
Use BaselineShift.Subscript inside a SpanStyle block.
3. Can I change the font size of superscript or subscript?
Yes, you can style it using both fontSize and baselineShift together.
4. Is it possible to combine normal, superscript, and subscript in the same text?
Yes, Jetpack Compose allows mixing all text styles inside a single AnnotatedString.
5. Does Jetpack Compose support HTML tags like <sup> or <sub>?
No, Compose uses its own styling system, not HTML tags.
6. Can I use superscript & subscript inside a TextField?
No, TextField does not support rich text formatting. You can only display styled text outside it.
7. How can I align superscript text properly in Jetpack Compose?
By adjusting fontSize and baselineShift. Compose aligns it automatically.
8. Can I animate superscript or subscript text?
Yes, you can animate font size, color, or opacity using Jetpack Compose animation APIs.
9. Are superscript and subscript supported with Material 3 typography?
Yes, they work perfectly with Material 2 and Material 3 text styles.
10. Can I use superscript or subscript inside buttons or cards?
Yes, any composable that displays Text() supports superscript and subscript styling.