Rise: font size

[jcrichard]

Hi,

I want to change the font size of markdown cell because it is disproportionate compare to code cell in the presentation. I tried to add 'font-size': '80%' in ConfigManager but it is not working.

How can we do that ?

Thanks a lot

[damianavila]

There is no easy way to do it without touching the css...

You have to make all your css mods here: https://github.com/damianavila/RISE/blob/master/src/less/main.less#L118
and build the css for now. I guess we eventually can setup something to do it only in general from the ConfigManager as well...

[jcrichard]

Ok thanks so no need to use the the developer mode? Just updating the L118?

[damianavila]

Yep, that should work...

[jcrichard]

Great I will try that, I will let you know. Thanks

Le lun. 21 déc. 2015 20:54, Damián Avila [email protected] a
écrit :

Yep, that should work...

—
Reply to this email directly or view it on GitHub
https://github.com/damianavila/RISE/issues/175#issuecomment-166402468.

[jcrichard]

Hi,

I changed the value but nothing change. Do I need to build the css? I don't know how to do

[damianavila]

Yes, you need to build it...

To build the CSS assets, you'll need to install npm (and node) and then

npm install
npm run build

on the development version (https://github.com/damianavila/RISE#development)

[jcrichard]

Well but I am on windows I can't install the developer mode because of
os.symlink.

Why Rise render is not exactly the same as nbviewer. It is not possible to
do it without the css building ?

Le mar. 22 déc. 2015 12:49, Damián Avila [email protected] a
écrit :

Yes, you need to build it...

To build the CSS assets, you'll need to install npm (and node) and then

npm install
npm run build

on the development version (
https://github.com/damianavila/RISE#development)

—
Reply to this email directly or view it on GitHub
https://github.com/damianavila/RISE/issues/175#issuecomment-166593461.

[damianavila]

Well but I am on windows I can't install the developer mode because of
os.symlink.

Upsss... we should fix that is some way...

Why Rise render is not exactly the same as nbviewer.

Because they are not the same thing...

It is not possible to
do it without the css building ?

You can modified the css in the installed extension... look into %APPDATA%\jupyter, there should be an nbextension folder and inside that a live reveal folder where you will find the main.css to modify...

[jcrichard]

The last solution works thanks a lot for that!!!

Le mar. 22 déc. 2015 16:28, Damián Avila [email protected] a
écrit :

Well but I am on windows I can't install the developer mode because of
os.symlink.

Upsss... we should fix that is some way...

Why Rise render is not exactly the same as nbviewer.

Because they are not the same thing...

It is not possible to
do it without the css building ?

You can modified the css in the installed extension... look into
%APPDATA%\jupyter, there should be an nbextension folder and inside that
a live reveal folder where you will find the main.css to modify...

—
Reply to this email directly or view it on GitHub
https://github.com/damianavila/RISE/issues/175#issuecomment-166646686.

[jankoslavic]

Hi! I have the same issue: the markdown is too large compared to the code.
The above answer is from 2015. Is there today and another way to change the size of markdown vs code (or the other way around)?

[damianavila]

Same as before...

[rabernat]

Just wanted to ping here to mention that I too would really like the option to set the font-size from via the livereveal options dict, i.e.

cm.update('livereveal', {'theme': 'sky', 'font-size': '120%'})

I would be happy to try out a PR if you could give me some guidance on how to begin!

[damianavila]

I would be happy to try out a PR if you could give me some guidance on how to begin!

Sure... you probably need to make the font-side a variable inside main.js, right now is defined at the css level... and apply the css from the js side... and link that variable to the ConfigManager as with the other variables you can change from the metadata. Hopefully it makes sense...

[QCaudron]

Just a +1 on this issue - like @jankoslavic, I'm finding the markdown is too big compared with the code.

[damianavila]

Working on this option soon, it will probably available for the next release (which I don't know yet when will happen, but hopefully in a few weeks).

[sarmadsohaib]

is it done? do we now have an option to set the font size from Notebook Metadata?

[damianavila]

is it done? do we now have an option to set the font size from Notebook Metadata?

Not yet.

[rabernat]

+1

[davidnero]

+1

[leonfoks]

How about now?

[parmentelat]

There is still no connection between the notebook metadata and css settings.

However with 5.2.0 there is a simpler way to inject custom CSS into your slideshows, as explained in the doc, for a single notebook, of for all notebooks in a directory.

I have just pushed an example of how to use this in
https://github.com/damianavila/RISE/tree/master/examples

See in particular https://github.com/damianavila/RISE/blob/master/examples/font-sizes.css

Both notebooks font-sizes.ipynb and font-sizes-untampered.ipynb are identical because symlinked, so you can see the effect of the css.

[jenfly]

Hi, I'm trying to implement the above solution to adjust font sizes in my code cells, but I can't get it working. I have a file "rise.css", based on the example "font-sizes.css" mentioned above, and I have it in the same folder as "Slides.ipynb". But no matter what changes I make in "rise.css", my slideshow looks the same. This is the part that I edited from the example CSS:

div.inner_cell>div.text_cell_render.rendered_html>pre>code {
    font-size: 200%;
}

My output looks exactly the same as when I didn't have a "rise.css" file:

I've tried forcing a refresh on my browser, and re-starting Jupyter notebook, but that's about the extent of my troubleshooting skills in this area. I'm not very familiar with CSS and maybe I'm missing a step somewhere, or haven't edited the correct lines in the CSS file? I would like to have the font size for the code cell to be roughly the same as the bulleted list in the markdown cell. If anyone could help me with this, I would greatly appreciate it! Thanks so much!

[parmentelat]

Hello

The css rule that you quote would apply only to a code block embedded in a text (markdown) cell; like e.g if you quote code between lines with ```

In order to craft your css rule, the most efficient way is to turn on your browser's develop/debug tool and to inspect the DOM to see what classes are attached to the various nodes

I have very sparse connectivity but I hope my answer can still point you in the right direction

Sent from my iPhone

On 27 Jun 2018, at 01:43, Jennifer Walker [e-mail] wrote:

Hi, I'm trying to implement the above solution to adjust font sizes in my code cells, but I can't get it working. I have a file "rise.css", based on the example "font-sizes.css" mentioned above, and I have it in the same folder as "Slides.ipynb". But no matter what changes I make in "rise.css", my slideshow looks the same. This is the part that I edited from the example CSS:

div.inner_cell>div.text_cell_render.rendered_html>pre>code {
font-size: 200%;
}
My output looks exactly the same as when I didn't have a "rise.css" file:

I'm not very familiar with CSS and maybe I'm missing a step somewhere, or haven't edited the correct lines in the CSS file? I would like to have the font size for the code cell to be roughly the same as the bulleted list in the markdown cell. If anyone could help me with this, I would greatly appreciate it! Thanks so much!

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[jenfly]

@parmentelat thank you so much! This is exactly what I needed to get pointed in the right direction. In case others are wanting to adjust the font sizes on their code cells, here is what worked for me:

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%;
}

[jenfly]

Sorry to post here again, but now I'm running into a problem with the above solution. It was working perfectly while I was on my desktop computer. Then I switched to my laptop and suddenly my custom CSS file seems to be causing RISE to ignore the livereveal settings that I had specified in my notebook metadata:

"livereveal": {
    "scroll": true,
    "theme": "solarized",
    "transition": "none"
  }

When I start the slideshow, my font adjustments are all there, but otherwise the slideshow has reverted back to all the default settings ("simple" theme, animated transitions, no vertical scrollbar). I'm using Chrome in Windows 10 on both my laptop and desktop, and I have no idea why things are working the way I want on one system but not the other. Any help in resolving this issue would be greatly appreciated. Thanks so much!

Edit: Please disregard this comment! I stumbled upon a fix. My CSS file was named "Slides.css" and when I tried changing it to "rise.css", the above problem magically disappeared!