CODEWITHSUNDEEP
htmlpandasjupyter-notebook
J Grif
J Grif

Reputation: 1093

manipulate HTML() module font size in ipython notebook

Does anyone know how to manipulate the font size of HTML function calls in ipython notebook?

I've been finding the HTML function very useful for various notebook tasks, incl. viewing SVG files (matplotlib isn't very good at), and getting spreadsheet-like renders of pandas dataframes. I'm sure more handy uses will emerge.

So I would do something like this (assuming a pandas dataframe df):

 from IPython.display import HTML
 df_html = df.to_html()
 HTML(df_html)

How can I manipulate the font size of the output? I imagine this needs either an argument in the HTML function, or some global font size statement prepended to the df_html text.

Any ideas?

Thanks.

Upvotes: 1

Views: 6864

Answers (2)

maxymoo
maxymoo

Reputation: 36545

It is now possible to add CSS styling using the style methods of DataFrame, e.g.

df.style.set_properties(**{'font-size':'6pt'})

Note that at the moment this only works on values, you can't style the header or index-labels this way. (This functionality should be added in the future.)

Upvotes: 7

Jakob
Jakob

Reputation: 20821

In IPython objects can have different representations, like html, latex, png, text, etc. The respective object method is called _repr_xxx_ with xxx being e.g. html. If you check your pandas object the pd._repr_html_ method exists and calls after some logic the df.to_html method. Hence I would recommend to use the _repr_html_ call instead of the to_html method.

To change the fontsize, color etc. an enclosing html tag can be use. Here, it doesn't matter if you want to use the css or classical approach. You could use something like (CSS)

HTML('<span style="font-size:180%; line-height:140%">'+df_html+'</span>'))

or (HTML)

HTML('<font size=5>'+df_html+'</font>'))

of course, these two examples give not the same result.
For convenience you could create a class to do this for you ...

class sizeme():
    """ Class to change html fontsize of object's representation"""
    def __init__(self,ob, size, height=100):
        self.ob = ob
        self.size = size
        self.height = height
    def _repr_html_(self):
        repl_tuple = (self.size, self.height, self.ob._repr_html_())
        return u'<span style="font-size:{0}%; line-height:{1}%">{2}</span>'.format(*repl_tuple)

enter image description here

It you want to apply these to all your pandas tables you can use css. A (not recommended) way is put the following into a markdown cell of the active notebook. 

<style>
table.dataframe {
font-size:150%;
}
</style>

This uses the dataframe class of pandas tables to identify the correct objects. A better way is to use the custom.css file.

Upvotes: 5

Related Questions