proper way to update widget style (such as font-size) ?

[patrickhoebeke]

Hello,
I've noticed that since version 5.0 it is not possible to set style parameters such as 'font-size' with the following syntax

from ipywidgets import widgets
w=widgets.Text("example",font_size=75)
display(w)

neither this way:

from ipywidgets import widgets
w=widgets.Text("example")
w.font_size=75
display(w)

What is the proper way?
I've found anything in the doc :-(

[SylvainCorlay]

All the layout-related style attributes can be accessed through the layout widget attribute. Other style-related widget attributes are deprecated.

What you can do is add css class the top-level element if you have custom css in the page.

[patrickhoebeke]

Thanks Sylvain you for your answer. Could you add a small example ?

[SylvainCorlay]

You can check out and execute the "Flexbox" example : https://github.com/ipython/ipywidgets/blob/master/docs/source/examples/Flexbox%20Layout.ipynb

which shows the main possibilities.

This link is broken - could you point me to another example in which font size is specified?

[SylvainCorlay]

Yes, the example notebooks have changed

https://github.com/ipython/ipywidgets/blob/master/docs/source/examples/Widget%20Styling.ipynb

[SylvainCorlay]

Although modifying top-level styling attributes was deprecated in 5.x. Only layout related things are recommended.

Non-layout related style modification was broken in 5.1, and I intend to make a minor release of 5.x fixing it.

[djleach-belcan]

It does not seem possible to modify the font size or color of a Label or Text widget. How should this be accomplished?

[meyermj]

Is there any hack available to set the font size and color of a Text widget? Widgets are great for usability, but the small default font makes it hard for some users to see.

[sjdv1982]

@meyermj, @patrickhoebeke : I had the same problem.
After studying what CSS is and how it works, I managed a hack:

import ipywidgets
w = ipywidgets.Text("test", description="Title")
w.add_class("mytext")
w

%%html
<style>
.mytext > .widget-label {
    font-style: italic;
    color: blue;
    font-size: 30px;
}
.mytext > input[type="text"] {
    font-size: 20px;
    color: red;
}
</style>

Note that %%html is simply a wrapper around IPython.display.display_html. So it would be possible to create some kind of Pythonic (kernel-side) front-end that generates and displays the CSS. At the very least, one could use something less awkward than pure CSS (it appears that there are dialects with improved syntax, like SASS, which are pre-processed/compiled into CSS).

But, in addition, one could inform a smart (kernel-side) front-end about the internal DOM structure of the ipywidget.To my taste, this is a more flexible way to allow styling than the current method of exposing arbitrary attributes to the model-view-comm framework. But I am not really qualified to judge, since I know nothing about (browser-side) front-end development.

[jasongrout]

The DOM structure of the frontend widget is explicitly an implementation detail, so it is not exposed to the user as an API. However:

1. we do have a flexible framework for adding such styles to the various style attributes on widgets (for example, we recently added a style attribute to buttons that lets you set the ToggleButtons font weight with something ToggleButtons(options=['a','b','c'], style={'font_weight': 'bold'})).

2. For systematic changes across all widgets, a theme setting is probably better. The Jupyter notebook isn't designed for theming, but JupyterLab is, and there it is much easier to change the system-wide font size, which would also affect ipywidgets.

[jasongrout]

That said, the hack above works, but it is fragile and relies on implementation details that may change.

[sjdv1982]

we do have a flexible framework for adding such styles to the various style attributes on widgets (for example, we recently added a style attribute to buttons that lets you set the ToggleButtons font weight )

Hmm... Is this flexible framework documented somewhere? How does it work?
I can't speak for others, but as a Python developer, I have a certain set of expectations:

• We're all consenting adults, we don't hide properties from each other.
• Everything must be accessible via Python. I won't learn TypeScript or Backbone just to expose a simple styling property.
• Interactiveness. I won't re-build the ipywidgets module just to expose a simple styling property.
• I will write pure HTML/CSS/JS if I have to, but I much prefer a Pythonic API.

That said, the hack above works, but it is fragile and relies on implementation details that may change.

It is fragile, because the implementation details (the widgets' internal DOM structures and class names) are hard-coded into the CSS. A CSS generator that would be aware of these details would not be fragile.