search

toolness / p5.js-widget

A reusable widget for embedding editable p5 sketches in web pages.
https://toolness.github.io/p5.js-widget/
GNU Lesser General Public License v2.1
162 stars 44 forks source link

Font size option #66

Open russellcameronthomas opened 8 years ago

russellcameronthomas commented 8 years ago

It would be great if there was a simple font size option, or some way to inherit from a parent.

Ideally, I'd like to see this:

<div class="resize">
<script type="text/p5"> 
function setup() {
       createCanvas(100, 100);
}
function draw() {
    background(255, 0, 200);
}
 </script>
</div>

where ".resize" has font-size: 80%; set in my main css file (as default, plus several user-selectable font sizes).

But I'm open to other approaches.

Right now, I can't find any way to change the font size in the editor. I tried this in CSS but it didn't work:

.CodeMirror.cm-s-p5-widget {
   font-size: 80%;
}

However, this does work when I manually add the attribute font-size: 80%; in <div class="CodeMirror cm-s-p5-widget"> in Developer mode in the browser.

(I can't set font-size for the generic .CodeMirror because I have other uses for it.)

russellcameronthomas commented 8 years ago

You can lower the priority of this request. I cloned the project and modified the CSS to get the font size that I need. It's not variable, but at least the fixed size is better for my site.