Rise: font scaling easily?

[AshtonSBradley]

Firstly, I think this is a great piece of code. One thing that I feel is rather desperately lacking is a simple option for rescaling all fonts _without_ getting into customs style files etc, i.e. ideally from within jupyter or as a basic option when launching

In brief, I just want all fonts smaller. Nothing else needs to change. I don't want to meddle deeply with an already great package ...

[damianavila]

Firstly, I think this is a great piece of code.

Thanks!

One thing that I feel is rather desperately lacking is a simple option for rescaling all fonts without getting into customs style files etc, i.e. ideally from within jupyter or as a basic option when launching

This already asked here: https://github.com/damianavila/RISE/issues/175
We should provide that option.
Closing here so we have just one place to track the issue.

[AshtonSBradley]

that's cool, but if this issue and that issue are "closed" you are going to keep getting requests. Maybe one of them should be open until you add this option?

[damianavila]

Oh... I forgot it was closed... it makes sense to keep this open then... sorry for the early close :wink:

[mbewley]

I'd like this feature, primarily from the perspective of presenting on projectors of varying resolutions. I'm finding it quite fiddly to set up custom css that looks good on a high res one (e.g. 1920x1200), and a low res one (e.g. 1280x720). I basically have the css at the top of my notebook in a cell (which is apparently considered poor style), so I can fiddle it easily and quickly at the start of a presentation.

[AshtonSBradley]

@mbewley can you post your code for adjusting it? Would be great to have an example of changing in from a cell

[mbewley]

I currently have this content in a cell at the top - have to do a bit of fiddling to get the sizes right. I also use the technique to embed the reveal configuration in the notebook metadata (I've found saving it to the config file is a bit unpredictable in terms of changing/refreshing on the fly).

%%HTML
<style>

.CodeMirror {
    width: 100vw;
}

.container {
    width: 99% !important;
}

.rendered_html {
  font-size:0.8em;
}
.rendered_html table, .rendered_html th, .rendered_html tr, .rendered_html td {
     font-size: 100%;
}

</style>

[Spaxe]

I also do the same for making the navigations a little less prominent, better for presentations. It's pretty flexible, but the defaults are still a bit plain :)

%%HTML <!-- Not content, but for better presentation styles --> <style> .rise-enabled .rendered_html table.dataframe { font-size: 16px; } .rendered_html code { background: #EFEFEF; border: 1px solid #CCC; padding: 1px 5px; border-radius: 1px; } .rise-enabled .fa-times-circle:before, .rise-enabled .fa-question:before, .rise-enabled aside.controls { opacity: 0.1; } .rise-enabled a, .rise-enabled a:active, .rise-enabled a:hover, .rise-enabled a:visited, .rise-enabled :link { text-decoration: none; color: #A68910; } </style>

[damianavila]

Yep, we definitely need to provide a simple way for user to customize things with their own css.

[jameskyle]

I tried to put the css style block at the top cell as a markdown and with the %%HTML. Neither worked, but using lowercase %%html did.

Just an fyi for anyone stumbling upon the thread.

btw, awesome work! @damianavila

[jmmcd]

I need help to get this %%html <style> working, please. My goal is to make the font in code cells larger than it currently is. I've tried the comments above.

To be explicit, I've made a code cell (I also tried in a markdown cell as suggested by @jameskyle). I've pasted in the following (tried both lowercase and uppercase %%html:

%%HTML
<style> .CodeMirror { font-size: 200%; } </style>

When I execute that cell in notebook mode, it does take effect - the code cell font gets larger, including the cell just executed. Then I switch to RISE mode and the code cells have not changed - the font is still much smaller than the text output in markdown cells.

[parmentelat]

there are two sets of styling in action at the same time here (notebook + reveal)
as a result the CSS rules in place are sometimes a little more complex (read specific) than would feel necessary at first
in your case it is likely that you just need to use more specific css selectors;
clearly just .CodeMirror has no chance to get through

use your browser inspector to check for the selectors in action on a specific element

[firasm]

Hey @jmmcd ! Did you ever sort out how to increase code size _inside_ executable cells on RISE?

[jmmcd]

I put this in a file called rise.css in the same directory as my .ipynb:

body.rise-enabled div.inner_cell>div.input_area {
    font-size: 150%;
}

body.rise-enabled div.output_subarea.output_text.output_result {
    font-size: 150%;
}
body.rise-enabled div.output_subarea.output_text.output_stream.output_stdout {
  font-size: 150%;
}

body.rise-enabled div.output_subarea.output_html.rendered_html.output_result {
  font-size: 150%;
}

body.rise-enabled td {
  font-size: 250%;
}

body.rise-enabled th {
  font-size: 250%;
}

I think that's all I did.

[firasm]

Thanks!