How to print colored text in an html file?

Dash Python
1

Hello everyone,

I am looking for a way to print colored text in my html file but I can’t find so far.

What I do is to import data from a file, with the following columns, and I want to print in my html file in red each row where the column [‘Urgence’] is equal to ‘Urgent’.

How can I do this please ? Thank you.

My code is :

# Here we get the columns needed and we put them into a list
test = []
for index, row in df.iterrows():
x = row['Date'] + ' | ' + row['Description'] + ' | ' + row['Titre de la consigne'] + ' | ' + row['Prenom'] + ' | ' 
+ row['Urgence'] + ' | ' + row['Prenom'] + '\r\n'
test.append(x)

print(test)
2

Hi @BeginnerDash ,
I don’t think this is a Dash question. If you wanna know how to print colored content on web pages, the common way is to use CSS or markdown
<span style="color:blue">text</span>
, as well \textcolor{tomato}{\LaTeX}.

4

Actually, you are already using CSS. Just append the color attribution to style.

5

Edit : my dash html code

        html.Div(
            className='dashboard',
            style={"border": "1px black solid", 'width': '100%', 'height': '50%', "overflow-wrap": "break-word", "overflow": "hidden"},
            children=[
                html.P(data),

        ])

I want to color my text conditionally : when the row [‘Urgence’] is equal to ‘Urgence’ then color the concerned line into red, not the whole table.

So if you have :

07/07/22 | Normal | Prenomtest | equipement3_1 | equipement2_3 | Prenomtest
12/01/22 | Urgent | Prenomtest | equipement1_1 | equipement2_1 | Prenomtes ← This line in red

6
7

Not sure this would work with my current code, I am not exactly printing a table, I thought maybe there is a function to print colored the text into the html file. I’ll try to see.

# Opening excel file
file = r"test2.xlsx"

try:
    df = pd.read_excel(file)

except OSError:
    print("Impossible to read :", file)

# Function to add a space between lines
def intersperse(lst, item):
    result = [item] * (len(lst) * 2 - 1)
    result[0::2] = lst
    return result

# Printing lines
test = []
for index, row in df.iterrows():
    x = row['Date'] + ' | ' + row['Description'] + ' | ' + row['Urgence'] + ' | ' + row['Prenom'] + ' | ' + row['Choix des equipements 1'] + ' | ' + row['Choix des equipements 2'] + ' | ' + row['Prenom'] + '\r\n'
    test.append(x)

    data = intersperse(test, html.Br())
8

Yes, I know. But considering your current learning progress, using dash-table would be a better choice.
Alternately, you need to learn callbacks first.

9

In case this could be useful to some people, I found the solution :


# Function to return a colored text
def text_color(text ,color):
    return html.P(text, style={"color": color, "marginTop": 0, "marginBottom": 8})

# Adding conditional formatting
test = []
for index, row in df.iterrows():
    x = row['Date'] + ' | ' + row['Description'] + ' | ' + row['Urgence']

    if row['Urgence'] == 'Urgent':
        x = text_color(row['Date'] + ' | ' + row['Description'] + ' | ' + row['Urgence', "red")
        test.append(x)
    else:
        x = text_color(row['Date'] + ' | ' + row['Description'] + ' | ' + row['Urgence', "black")
        test.append(x)

Then you can put the test variable into html.P(test) in your view file, so you can display the data.

1 Like