---
title: "SpanStyle"
description: "Styling configuration for a text span. This configuration only allows character level styling, in
order to set paragraph level styling such as line height, or text alignment please see
[ParagraphStyle]."
type: "class"
---

<div class='type'>Class</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
class SpanStyle
internal constructor(
    internal val textForegroundStyle: TextForegroundStyle,
    val fontSize: TextUnit = TextUnit.Unspecified,
    val fontWeight: FontWeight? = null,
    val fontStyle: FontStyle? = null,
    val fontSynthesis: FontSynthesis? = null,
    val fontFamily: FontFamily? = null,
    val fontFeatureSettings: String? = null,
    val letterSpacing: TextUnit = TextUnit.Unspecified,
    val baselineShift: BaselineShift? = null,
    val textGeometricTransform: TextGeometricTransform? = null,
    val localeList: LocaleList? = null,
    val background: Color = Color.Unspecified,
    val textDecoration: TextDecoration? = null,
    val shadow: Shadow? = null,
    val platformStyle: PlatformSpanStyle? = null,
    val drawStyle: DrawStyle? = null,
) : AnnotatedString.Annotation
```


Styling configuration for a text span. This configuration only allows character level styling, in
order to set paragraph level styling such as line height, or text alignment please see
`ParagraphStyle`.

#### Parameters

| | |
| --- | --- |
| fontSize | The size of glyphs (in logical pixels) to use when painting the text. This may be `TextUnit.Unspecified` for inheriting from another `SpanStyle`. |
| fontWeight | The typeface thickness to use when painting the text (e.g., bold). |
| fontStyle | The typeface variant to use when drawing the letters (e.g., italic). |
| fontSynthesis | Whether to synthesize font weight and/or style when the requested weight or style cannot be found in the provided font family. |
| fontFamily | The font family to be used when rendering the text. |
| fontFeatureSettings | The advanced typography settings provided by font. The format is the same as the CSS font-feature-settings attribute: https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop |
| letterSpacing | The amount of space (in em) to add between each letter. |
| baselineShift | The amount by which the text is shifted up from the current baseline. |
| textGeometricTransform | The geometric transformation applied the text. |
| localeList | The locale list used to select region-specific glyphs. |
| background | The background color for the text. |
| textDecoration | The decorations to paint on the text (e.g., an underline). |
| shadow | The shadow effect applied on the text. |
| platformStyle | Platform specific `SpanStyle` parameters. |
| drawStyle | Drawing style of text, whether fill in the text while drawing or stroke around the edges. |



## Secondary Constructors

```kotlin
constructor(
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontWeight: FontWeight? = null,
    fontStyle: FontStyle? = null,
    fontSynthesis: FontSynthesis? = null,
    fontFamily: FontFamily? = null,
    fontFeatureSettings: String? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    baselineShift: BaselineShift? = null,
    textGeometricTransform: TextGeometricTransform? = null,
    localeList: LocaleList? = null,
    background: Color = Color.Unspecified,
    textDecoration: TextDecoration? = null,
    shadow: Shadow? = null,
) : this(
    textForegroundStyle = TextForegroundStyle.from(color),
    fontSize = fontSize,
    fontWeight = fontWeight,
    fontStyle = fontStyle,
    fontSynthesis = fontSynthesis,
    fontFamily = fontFamily,
    fontFeatureSettings = fontFeatureSettings,
    letterSpacing = letterSpacing,
    baselineShift = baselineShift,
    textGeometricTransform = textGeometricTransform,
    localeList = localeList,
    background = background,
    textDecoration = textDecoration,
    shadow = shadow,
    platformStyle = null,
)
```


Styling configuration for a text span. This configuration only allows character level
styling, in order to set paragraph level styling such as line height, or text alignment
please see `ParagraphStyle`.

#### Parameters

| | |
| --- | --- |
| color | The text color. |
| fontSize | The size of glyphs (in logical pixels) to use when painting the text. This may be `TextUnit.Unspecified` for inheriting from another `SpanStyle`. |
| fontWeight | The typeface thickness to use when painting the text (e.g., bold). |
| fontStyle | The typeface variant to use when drawing the letters (e.g., italic). |
| fontSynthesis | Whether to synthesize font weight and/or style when the requested weight or style cannot be found in the provided font family. |
| fontFamily | The font family to be used when rendering the text. |
| fontFeatureSettings | The advanced typography settings provided by font. The format is the same as the CSS font-feature-settings attribute: https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop |
| letterSpacing | The amount of space (in em) to add between each letter. |
| baselineShift | The amount by which the text is shifted up from the current baseline. |
| textGeometricTransform | The geometric transformation applied the text. |
| localeList | The locale list used to select region-specific glyphs. |
| background | The background color for the text. |
| textDecoration | The decorations to paint on the text (e.g., an underline). |
| shadow | The shadow effect applied on the text. |



```kotlin
constructor(
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontWeight: FontWeight? = null,
    fontStyle: FontStyle? = null,
    fontSynthesis: FontSynthesis? = null,
    fontFamily: FontFamily? = null,
    fontFeatureSettings: String? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    baselineShift: BaselineShift? = null,
    textGeometricTransform: TextGeometricTransform? = null,
    localeList: LocaleList? = null,
    background: Color = Color.Unspecified,
    textDecoration: TextDecoration? = null,
    shadow: Shadow? = null,
    platformStyle: PlatformSpanStyle? = null,
) : this(
    textForegroundStyle = TextForegroundStyle.from(color),
    fontSize = fontSize,
    fontWeight = fontWeight,
    fontStyle = fontStyle,
    fontSynthesis = fontSynthesis,
    fontFamily = fontFamily,
    fontFeatureSettings = fontFeatureSettings,
    letterSpacing = letterSpacing,
    baselineShift = baselineShift,
    textGeometricTransform = textGeometricTransform,
    localeList = localeList,
    background = background,
    textDecoration = textDecoration,
    shadow = shadow,
    platformStyle = platformStyle,
)
```


Styling configuration for a text span. This configuration only allows character level
styling, in order to set paragraph level styling such as line height, or text alignment
please see `ParagraphStyle`.

#### Parameters

| | |
| --- | --- |
| color | The color to draw the text. |
| fontSize | The size of glyphs (in logical pixels) to use when painting the text. This may be `TextUnit.Unspecified` for inheriting from another `SpanStyle`. |
| fontWeight | The typeface thickness to use when painting the text (e.g., bold). |
| fontStyle | The typeface variant to use when drawing the letters (e.g., italic). |
| fontSynthesis | Whether to synthesize font weight and/or style when the requested weight or style cannot be found in the provided font family. |
| fontFamily | The font family to be used when rendering the text. |
| fontFeatureSettings | The advanced typography settings provided by font. The format is the same as the CSS font-feature-settings attribute: https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop |
| letterSpacing | The amount of space (in em) to add between each letter. |
| baselineShift | The amount by which the text is shifted up from the current baseline. |
| textGeometricTransform | The geometric transformation applied the text. |
| localeList | The locale list used to select region-specific glyphs. |
| background | The background color for the text. |
| textDecoration | The decorations to paint on the text (e.g., an underline). |
| shadow | The shadow effect applied on the text. |
| platformStyle | Platform specific `SpanStyle` parameters. |



```kotlin
constructor(
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontWeight: FontWeight? = null,
    fontStyle: FontStyle? = null,
    fontSynthesis: FontSynthesis? = null,
    fontFamily: FontFamily? = null,
    fontFeatureSettings: String? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    baselineShift: BaselineShift? = null,
    textGeometricTransform: TextGeometricTransform? = null,
    localeList: LocaleList? = null,
    background: Color = Color.Unspecified,
    textDecoration: TextDecoration? = null,
    shadow: Shadow? = null,
    platformStyle: PlatformSpanStyle? = null,
    drawStyle: DrawStyle? = null,
) : this(
    textForegroundStyle = TextForegroundStyle.from(color),
    fontSize = fontSize,
    fontWeight = fontWeight,
    fontStyle = fontStyle,
    fontSynthesis = fontSynthesis,
    fontFamily = fontFamily,
    fontFeatureSettings = fontFeatureSettings,
    letterSpacing = letterSpacing,
    baselineShift = baselineShift,
    textGeometricTransform = textGeometricTransform,
    localeList = localeList,
    background = background,
    textDecoration = textDecoration,
    shadow = shadow,
    platformStyle = platformStyle,
    drawStyle = drawStyle,
)
```


Styling configuration for a text span. This configuration only allows character level
styling, in order to set paragraph level styling such as line height, or text alignment
please see `ParagraphStyle`.

#### Parameters

| | |
| --- | --- |
| color | The color to draw the text. |
| fontSize | The size of glyphs (in logical pixels) to use when painting the text. This may be `TextUnit.Unspecified` for inheriting from another `SpanStyle`. |
| fontWeight | The typeface thickness to use when painting the text (e.g., bold). |
| fontStyle | The typeface variant to use when drawing the letters (e.g., italic). |
| fontSynthesis | Whether to synthesize font weight and/or style when the requested weight or style cannot be found in the provided font family. |
| fontFamily | The font family to be used when rendering the text. |
| fontFeatureSettings | The advanced typography settings provided by font. The format is the same as the CSS font-feature-settings attribute: https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop |
| letterSpacing | The amount of space (in em) to add between each letter. |
| baselineShift | The amount by which the text is shifted up from the current baseline. |
| textGeometricTransform | The geometric transformation applied the text. |
| localeList | The locale list used to select region-specific glyphs. |
| background | The background color for the text. |
| textDecoration | The decorations to paint on the text (e.g., an underline). |
| shadow | The shadow effect applied on the text. |
| platformStyle | Platform specific `SpanStyle` parameters. |
| drawStyle | Drawing style of text, whether fill in the text while drawing or stroke around the edges. |



```kotlin
constructor(
    brush: Brush?,
    alpha: Float = Float.NaN,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontWeight: FontWeight? = null,
    fontStyle: FontStyle? = null,
    fontSynthesis: FontSynthesis? = null,
    fontFamily: FontFamily? = null,
    fontFeatureSettings: String? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    baselineShift: BaselineShift? = null,
    textGeometricTransform: TextGeometricTransform? = null,
    localeList: LocaleList? = null,
    background: Color = Color.Unspecified,
    textDecoration: TextDecoration? = null,
    shadow: Shadow? = null,
    platformStyle: PlatformSpanStyle? = null,
    drawStyle: DrawStyle? = null,
) : this(
    textForegroundStyle = TextForegroundStyle.from(brush, alpha),
    fontSize = fontSize,
    fontWeight = fontWeight,
    fontStyle = fontStyle,
    fontSynthesis = fontSynthesis,
    fontFamily = fontFamily,
    fontFeatureSettings = fontFeatureSettings,
    letterSpacing = letterSpacing,
    baselineShift = baselineShift,
    textGeometricTransform = textGeometricTransform,
    localeList = localeList,
    background = background,
    textDecoration = textDecoration,
    shadow = shadow,
    platformStyle = platformStyle,
    drawStyle = drawStyle,
)
```


Styling configuration for a text span. This configuration only allows character level
styling, in order to set paragraph level styling such as line height, or text alignment
please see `ParagraphStyle`.

#### Parameters

| | |
| --- | --- |
| brush | The brush to use when painting the text. If brush is given as null, it will be treated as unspecified. It is equivalent to calling the alternative color constructor with `Color.Unspecified` |
| alpha | Opacity to be applied to `brush` from 0.0f to 1.0f representing fully transparent to fully opaque respectively. |
| fontSize | The size of glyphs (in logical pixels) to use when painting the text. This may be `TextUnit.Unspecified` for inheriting from another `SpanStyle`. |
| fontWeight | The typeface thickness to use when painting the text (e.g., bold). |
| fontStyle | The typeface variant to use when drawing the letters (e.g., italic). |
| fontSynthesis | Whether to synthesize font weight and/or style when the requested weight or style cannot be found in the provided font family. |
| fontFamily | The font family to be used when rendering the text. |
| fontFeatureSettings | The advanced typography settings provided by font. The format is the same as the CSS font-feature-settings attribute: https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop |
| letterSpacing | The amount of space (in em) to add between each letter. |
| baselineShift | The amount by which the text is shifted up from the current baseline. |
| textGeometricTransform | The geometric transformation applied the text. |
| localeList | The locale list used to select region-specific glyphs. |
| background | The background color for the text. |
| textDecoration | The decorations to paint on the text (e.g., an underline). |
| shadow | The shadow effect applied on the text. |
| platformStyle | Platform specific `SpanStyle` parameters. |
| drawStyle | Drawing style of text, whether fill in the text while drawing or stroke around the edges. |



## Properties

<div class='sourceset sourceset-common'>Common</div>


```kotlin
val color: Color
```


Color to draw text.



<div class='sourceset sourceset-common'>Common</div>


```kotlin
val brush: Brush?
```


Brush to draw text. If not null, overrides `color`.



<div class='sourceset sourceset-common'>Common</div>


```kotlin
val alpha: Float
```


Opacity of text. This value is either provided along side Brush, or via alpha channel in
color.



## Functions

```kotlin
fun merge(other: SpanStyle? = null): SpanStyle
```


Returns a new span style that is a combination of this style and the given `other` style.

`other` span style's null or inherit properties are replaced with the non-null properties of
this span style. Another way to think of it is that the "missing" properties of the `other`
style are _filled_ by the properties of this style.

If the given span style is null, returns this span style.


```kotlin
operator fun plus(other: SpanStyle): SpanStyle
```


Plus operator overload that applies a `merge`.


```kotlin
fun copy(
        color: Color = this.color,
        fontSize: TextUnit = this.fontSize,
        fontWeight: FontWeight? = this.fontWeight,
        fontStyle: FontStyle? = this.fontStyle,
        fontSynthesis: FontSynthesis? = this.fontSynthesis,
        fontFamily: FontFamily? = this.fontFamily,
        fontFeatureSettings: String? = this.fontFeatureSettings,
        letterSpacing: TextUnit = this.letterSpacing,
        baselineShift: BaselineShift? = this.baselineShift,
        textGeometricTransform: TextGeometricTransform? = this.textGeometricTransform,
        localeList: LocaleList? = this.localeList,
        background: Color = this.background,
        textDecoration: TextDecoration? = this.textDecoration,
        shadow: Shadow? = this.shadow,
    ): SpanStyle
```

```kotlin
fun copy(
        color: Color = this.color,
        fontSize: TextUnit = this.fontSize,
        fontWeight: FontWeight? = this.fontWeight,
        fontStyle: FontStyle? = this.fontStyle,
        fontSynthesis: FontSynthesis? = this.fontSynthesis,
        fontFamily: FontFamily? = this.fontFamily,
        fontFeatureSettings: String? = this.fontFeatureSettings,
        letterSpacing: TextUnit = this.letterSpacing,
        baselineShift: BaselineShift? = this.baselineShift,
        textGeometricTransform: TextGeometricTransform? = this.textGeometricTransform,
        localeList: LocaleList? = this.localeList,
        background: Color = this.background,
        textDecoration: TextDecoration? = this.textDecoration,
        shadow: Shadow? = this.shadow,
        platformStyle: PlatformSpanStyle? = this.platformStyle,
    ): SpanStyle
```

```kotlin
fun copy(
        color: Color = this.color,
        fontSize: TextUnit = this.fontSize,
        fontWeight: FontWeight? = this.fontWeight,
        fontStyle: FontStyle? = this.fontStyle,
        fontSynthesis: FontSynthesis? = this.fontSynthesis,
        fontFamily: FontFamily? = this.fontFamily,
        fontFeatureSettings: String? = this.fontFeatureSettings,
        letterSpacing: TextUnit = this.letterSpacing,
        baselineShift: BaselineShift? = this.baselineShift,
        textGeometricTransform: TextGeometricTransform? = this.textGeometricTransform,
        localeList: LocaleList? = this.localeList,
        background: Color = this.background,
        textDecoration: TextDecoration? = this.textDecoration,
        shadow: Shadow? = this.shadow,
        platformStyle: PlatformSpanStyle? = this.platformStyle,
        drawStyle: DrawStyle? = this.drawStyle,
    ): SpanStyle
```

```kotlin
fun copy(
        brush: Brush?,
        alpha: Float = this.alpha,
        fontSize: TextUnit = this.fontSize,
        fontWeight: FontWeight? = this.fontWeight,
        fontStyle: FontStyle? = this.fontStyle,
        fontSynthesis: FontSynthesis? = this.fontSynthesis,
        fontFamily: FontFamily? = this.fontFamily,
        fontFeatureSettings: String? = this.fontFeatureSettings,
        letterSpacing: TextUnit = this.letterSpacing,
        baselineShift: BaselineShift? = this.baselineShift,
        textGeometricTransform: TextGeometricTransform? = this.textGeometricTransform,
        localeList: LocaleList? = this.localeList,
        background: Color = this.background,
        textDecoration: TextDecoration? = this.textDecoration,
        shadow: Shadow? = this.shadow,
        platformStyle: PlatformSpanStyle? = this.platformStyle,
        drawStyle: DrawStyle? = this.drawStyle,
    ): SpanStyle
```


## Code Examples

### AnnotatedStringBuilderSample
```kotlin
fun AnnotatedStringBuilderSample() {
    buildAnnotatedString {
        append("Hello")
        // push green text style so that any appended text will be green
        pushStyle(SpanStyle(color = Color.Green))
        // append new text, this text will be rendered as green
        append(" World")
        // pop the green style
        pop()
        // append a string without style
        append("!")
        // then style the last added word as red, exclamation mark will be red
        addStyle(SpanStyle(color = Color.Red), "Hello World".length, this.length)
        toAnnotatedString()
    }
}
```

### SpanStyleSample
```kotlin
@Composable
fun SpanStyleSample() {
    Text(
        fontSize = 16.sp,
        text =
            buildAnnotatedString {
                withStyle(style = SpanStyle(color = Color.Red)) { append("Hello") }
                withStyle(SpanStyle(color = Color.Blue)) { append(" World") }
            },
    )
}
```