Formatting and color the text

Dash Python
1

Hello, Dash community,

I have a textbox that allows users to enter any statement. The text will be shown after triggering the confirm button. The default color is black, how can I show the text with different colors? Such as “You have entered” as blue and “Game of Thrones” as red?

For example,

tempsnip
tempsnip1920×837 14.7 KB

to this,

got
got969×234 4.26 KB 

import numpy as np
import pandas as pd
import dash
from dash.dependencies import Input, Output, State
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_table as dt


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__,
                external_stylesheets=external_stylesheets
                )


app.layout = html.Div(children=[

    # Header
    dbc.Row(children=[
        html.H3(children=["This is my title"],
                style={"text-align": "center"})
    ]),

    # Textarea
    dcc.Textarea(
        id='textarea',
        placeholder='Please Enter a Description...',
        style={'width': '100%', 'height': 200},
    ),

    # Button
    html.Button('Confirm', id='button', n_clicks=0),

    html.Br(),
    html.Br(),
    html.Br(),

    # children
    dbc.Row(children=[

        dcc.Loading(
            id="loading-1",
            type="circle",  # circle default
            children=html.Div(id='output_children')
        ),
    ],
        style={'width': '100%', 'padding': '5px 5px', 'display': 'inline-block'}),

])


@app.callback(
    [Output(component_id='output_children', component_property='children')],
    [Input(component_id='button', component_property='n_clicks'),
     State(component_id='textarea', component_property='value')],
    prevent_initial_call=True
)
def update_output(n_clicks, textarea):

    if n_clicks > 0:
        my_children = html.H5(children=['You have entered: \n{}'.format(textarea)])

    return [my_children]


if __name__ == '__main__':
    app.run_server(debug=False,
                   # host="sd-hchs-rc46.nam.nsroot.net",
                   port=8005)

Thx in advance!

2

Hi @liuzc123

If you change the callback to something like this it should work:

@app.callback(
    Output(component_id="output_children", component_property="children"),
    Input(component_id="button", component_property="n_clicks"),
    State(component_id="textarea", component_property="value"),
    prevent_initial_call=True,
)
def update_output(n_clicks, textarea):
    if n_clicks > 0:
        return html.H1(
            [
                html.Span("You have entered: ", style={"color": "blue"}),
                html.Span(textarea, style={"color": "red"}),
            ]
        )
2 Likes
3

Hello, @AnnMarieW

Right now, I think I should be able to mark it as a solution. :+1: :cowboy_hat_face: Thanks again!

1 Like
4

Hello @AnnMarieW ,

If we have a long description and we want to color-code phrases into different colors in the description based on those known phrases starting index number and ending index number, how can we do that in Dash?

I have five phrases that I want to color into different colors.

image
image1277×725 29.2 KB

Output would be like this.

image
image1400×255 25.6 KB

Thank you in advance, go Dash!

5

Hello @AnnMarieW,

Just want to reach out again. Instead of using “html.Span()” to manually color code specific keywords in the whole string and concatenate them together, can we automatically color code string based on known strings starting index number and ending index number?

For example, the description “Game of Thrones is an HBO series that tells the story of a medieval country’s civil war.”

“Game of Thrones” starting index number is 0, and the ending index number is 15.
“HBO” starting index number is 22, and the ending index number is 25.

Ideally output,

image
image863×36 6.53 KB

Does Dash/ Plotly have this functionality? Thank you in advance and go Dash!

6

Hi @liuzc123

There is no built-in function that I know of that will color words based on index, but you could create one. :wink:

7

Okay! Anyway, thanks though. :cowboy_hat_face:

8

I came across this old thread and I have a better answer now :slightly_smiling_face: