Advanced Theming

I’m trying to build an app with dynamic font sizing for various components.

I’ve been using a yaml file, e.g.

attrs:
        Axis:
            axis_label_text_font: arial
            axis_label_text_font_size: 5vw
            axis_label_text_font_style: bold
            axis_label_text_color: '#17648D'

What I’m running into is that 5vw (or other relative sizing) work well loading the app on mobile/smaller screens (i.e. ensuring the text isn’t too big), but they get WAY too big when loading on a big monitor/desktop.

I read into this a bit a found that you there are the means to spec “max/min” sizing in css → css - How to implement max-font-size? - Stack Overflow

e.g.

min(5vw, 18px) , which should “cap” the font size at 18 px.

This doesn’t work on bokeh’s side of things:

image780×148 5.39 KB

Is this feature request material? Or simply not feasible and I’m going about this all wrong? Any workarounds/other options welcome… thanks…

If values like that can be assigned specifically to HTML Canvas text properties, then it seems like it would straightforward feature request material. If canvas text properties are special and don’t work with those kind of CSS values, then things are more complicated. However, I think @mateusz is working towards making text use DOM rendering more generally, so there might still be a path to support those (just a longer term one).

Yeah it seems more complicated sadly →

It appears that when you assign relative sizing to html canvas text, specifically axes/titles, the plot width/height size calc is not done correctly (i.e. it doesn’t get sized to accomodate the text):

attrs:
        Axis:
            axis_label_text_font: arial
            axis_label_text_font_size: 18px
            axis_label_text_font_style: bold
            axis_label_text_color: '#17648D'
            major_label_text_font: arial
            major_label_text_font_size: 5vh
            major_label_text_font_style: normal
        Title:
            text_font: arial
            text_font_size: 3vw
            text_color: '#17648D'

produces:

image852×852 23.5 KB

I’m not sure if this intended or some unavoidable thing → I’m just trying to learn how to deal.

If I go back to say “pixel-based”:

attrs:
        Axis:
            axis_label_text_font: arial
            axis_label_text_font_size: 18px
            axis_label_text_font_style: bold
            axis_label_text_color: '#17648D'
            major_label_text_font: arial
            major_label_text_font_size: 16px
            major_label_text_font_style: normal
        Title:
            text_font: arial
            text_font_size: 20px
            text_color: '#17648D'

With “scale_width” for sizing mode, I get a nicely shrinking plot, but the fonts don’t go with it:

Now where it gets “interesting” is that if I instead style something with an InlineStyleSheet , and set the sizing mode to scale width on them, I can get the behaviour I want. Example with a slider:

(for InlineStyleSheet):

div.bk-slider-title{
                font-family: arial;
                font-weight: bold;
                font-size: min(5vw, 18px);
                color: #17648D;
				}

See how the font size starts shrinking? I want that on my yaml-theme! Any ideas/thoughts appreciated…

I did not express my thoughts as clearly as I could have. My questions was a very specific one about what values the browser’s underlying ctx.font accepts. If ctx.font could accept those kinds of “min” specifications, then I think it would be a trivial matter to loosen Bokeh’s property validation to allow those values to be passed down to the browser.

However, having thought about it a little more, I do think it is doubtful that ctx.font can use these kinds of values. The HTML canvas text rendering APIs are very simplistic, unfortunately. So I don’t think this will be an avenue forward as long as plot text is rendered using HTML canvas APIs.

I suppose all this intersects with this issue:

Scalable Text · Issue #9407 · bokeh/bokeh · GitHub

which was tagged for some recent work. @mateusz will have to comment about any current status though.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.