changing font attributes in jupyter notebook label widget

Question

I am trying to modify the font attributes (weight, color, etc) of a jupyter label widget in python 2.7. As an example, I have tried the following:

import ipywidgets as widgets
myLabel= widgets.Label(value = 'Some Label',color = '#ff0000') #change font color to red
myLabel

When I run this bit of code, I get no errors, however the label color remains the default black.

Solution 1

There are 2 methods that I know of.

1. HTML widget
2. Label widget with latex

text = 'Some text'

htmlWidget = widgets.HTML(value = f"<b><font color='red'>{text}</b>")

labelWidget = widgets.Label(value = r'\(\color{red} {' + text  + '}\)')

Update: and now with Ipyvuetify....

import ipyvuetify as v
text = 'Some text'
v.Html(tag="div", children=[text], style_ = "color: red; font-weight: bold")

Solution 2

This is a late reply, but for everyone who's still having this issue, you can add styling to the widget labels and description by using latex formatting. Here's an example to color the label text in red:

myLabel= widgets.Label(value = r'\(\color{red} {highlighted}\)')

Solution 3

one of the developers of the widgets says here that all the layout options shall be done in the layout attribute.

Currently i am exploring the capabilities of this attribute, but there seems to be no way to change font, font color or font size.

It may be that you have to write your own css file.

Solution 4

There are limitations with both the HTML widget (can't be aggregated in a collection, e.g. VBox, Hbox, Tab), and the use of LaTeX formating inside a label (will format as an equation - which is typically not what is wanted).

A way to overcome both these limitations, is to use the add_class method of the widget, to allow you to create any CSS styling:

from ipywidgets import Label
from IPython.display import display, HTML

display(HTML("<style>.red_label { color:red }</style>"))
l = Label(value="My Label")
l.add_class("red_label")
display(l)

View more solutions

Comments

[John Mahoney]

I wanted to control the font size. For the HTML version you can use htmlWidget = widgets.HTML(value = f"<b><font color='red'><font size=10>{text}</b>"). This appears to be measured in pixels. Note that increasing this font size will probably saturate a global layout bound. E.g. you might ask for font size=100 but it still looks like font size=10.

[DougR]

@JohnMahoney , if you use Ipyvuetify, you can use this : v.Html(tag="div", children=['Some text'], style_ = " color: red; font-family: courier; font-size: 100px; font-weight: bold")

[John Mark]

HTML widgets are a versatile replacement for Label widgets when formatting is needed, for instance one can write : HTML(value= r'<p style="font-size:24px"><b>My Title</b></p>)

[John Carrell]

The widgets.HTML class can be aggregated in a collection. I found this out struggling with a similar issue.