harmonize font sizes (#175)

* harmonize font sizes Choose monaco editor font size according to surrounding div (editorDiv) * Switch `font-scale` to `editor-font-scale` and bump dev version * Add documentation example for new `editor-*` features in this release. * Only expose `editor-font-scale` in global cell defaults * Remove top-level adjust revealJS * Build in a check with RevealJS and namespace the function. * Move fontScaling logic into cell elements and promote to global scope. * Allow for the scaled font size to influence the output results. --------- Co-authored-by: James J Balamuta <[email protected]>
coatless · Apr 8, 2024 · 4dabeca · 4dabeca
1 parent f4bc989
commit 4dabeca
Show file tree

Hide file tree

Showing 6 changed files with 180 additions and 3 deletions.
diff --git a/_extensions/webr/qwebr-cell-elements.js b/_extensions/webr/qwebr-cell-elements.js
@@ -5,6 +5,35 @@ globalThis.EvalTypes = Object.freeze({
   Output: 'output',
 });
 
+// Function that obtains the font size for a given element 
+globalThis.qwebrCurrentFontSizeOnElement = function(element, cssProperty = 'font-size') {
+
+  const currentFontSize = parseFloat(
+    window
+    .getComputedStyle(element)
+    .getPropertyValue(cssProperty)
+  );
+
+  return currentFontSize;
+}
+
+// Function to determine font scaling
+globalThis.qwebrScaledFontSize = function(div, qwebrOptions) {
+  // Determine if we should compute font-size using RevealJS's `--r-main-font-size` 
+  // or if we can directly use the document's `font-size`.
+  const cssProperty = document.body.classList.contains('reveal') ? 
+    "--r-main-font-size" : "font-size";
+
+  // Get the current font size on the div element
+  const elementFontSize = qwebrCurrentFontSizeOnElement(div, cssProperty);
+
+  // Determine the scaled font size value
+  const scaledFontSize = ((qwebrOptions['editor-font-scale'] ?? 1) * elementFontSize) ?? 17.5;
+
+  return scaledFontSize;
+}
+
+
 // Function that dispatches the creation request
 globalThis.qwebrCreateHTMLElement = function (
   cellData

diff --git a/_extensions/webr/qwebr-compute-engine.js b/_extensions/webr/qwebr-compute-engine.js
@@ -154,6 +154,13 @@ globalThis.qwebrComputeEngine = async function(
             // Display results as HTML elements to retain output styling
             const div = document.createElement("div");
             div.innerHTML = out;
+
+            // Calculate a scaled font-size value
+            const scaledFontSize = qwebrScaledFontSize(
+                elements.outputCodeDiv, options);
+
+            // Override output code cell size
+            pre.style.fontSize = `${scaledFontSize}px`;
             pre.appendChild(div);
         } else {
             // If nothing is present, hide the element.

diff --git a/_extensions/webr/qwebr-monaco-editor-element.js b/_extensions/webr/qwebr-monaco-editor-element.js
@@ -13,7 +13,7 @@ globalThis.qwebrCreateMonacoEditorInstance = function (cellData) {
   let resetButton = document.getElementById(`qwebr-button-reset-${qwebrCounter}`);
   let copyButton = document.getElementById(`qwebr-button-copy-${qwebrCounter}`);
   let editorDiv = document.getElementById(`qwebr-editor-${qwebrCounter}`);
-  
+
   // Load the Monaco Editor and create an instance
   let editor;
   require(['vs/editor/editor.main'], function () {
@@ -26,8 +26,8 @@ globalThis.qwebrCreateMonacoEditorInstance = function (cellData) {
       minimap: {
         enabled: false
       },
-      fontSize: '17.5pt',              // Bootstrap is 1 rem
-      renderLineHighlight: "none",     // Disable current line highlighting
+      fontSize: qwebrScaledFontSize(editorDiv, qwebrOptions),         
+      renderLineHighlight: "none",      // Disable current line highlighting
       hideCursorInOverviewRuler: true,  // Remove cursor indictor in right hand side scroll bar
       readOnly: qwebrOptions['read-only'] ?? false,
       quickSuggestions: qwebrOptions['editor-quick-suggestions'] ?? false

diff --git a/_extensions/webr/webr.lua b/_extensions/webr/webr.lua
@@ -73,6 +73,7 @@ local qwebRDefaultCellOptions = {
   ["fig-height"] = 5,
   ["out-width"] = "700px",
   ["out-height"] = "",
+  ["editor-font-scale"] = 1,
   ["editor-max-height"] = "",
   ["editor-quick-suggestions"] = "false"
 }

diff --git a/docs/demos/qwebr-editor-options.qmd b/docs/demos/qwebr-editor-options.qmd
@@ -0,0 +1,139 @@
+---
+title: "Demo: Editor Options"
+format: 
+  html:
+    fontsize: "80%"
+engine: knitr
+webr:
+  cell-options:
+    editor-font-scale: 0.95
+filters:
+  - webr
+---
+
+:::{.callout-important}
+These features are currently experimental and are included in the 0.4.2-dev.2 build of `{quarto-webr}`.
+:::
+
+# Overview
+
+This feature demo introduces new options for styling the interactive editor associated with `{webr-r}` code blocks. These editor-specific options offer greater flexibility when working with the Monaco Editor integrated into the interactive area.
+
+:::{.callout-note}
+These options are only configurable during the document authoring stage.
+:::
+
+## `editor-font-scale` Option
+
+The editor area now inherits font size from Quarto's `fontsize` theme option, ensuring consistency with other elements on the page. You can adjust the font size for the editor relative to Quarto's output by setting the `editor-font-scale` option. When `editor-font-scale` is:
+
+- Equal to 1 (`= 1`), the editor's font size matches the `fontsize` value.
+- Less than 1 (`< 1`), the editor's font size is smaller than the `fontsize` value.
+- Greater than 1 (`> 1`), the editor's font size is larger than the `fontsize` value.
+
+### Default Size
+
+By default, we set `editor-font-scale` to 1, aligning the editor font size with the `fontsize` value.
+
+Let's consider a standard code cell that fits a linear model and obtains the confidence intervals for one or more parameters in a fitted model:
+
+```{r}
+#| echo: true
+fit = lm(mpg ~ am, data = mtcars)
+
+confint(fit)
+```
+
+Now, let's observe the effect with `editor-font-scale: 1`:
+
+```{webr-r}
+#| autorun: true
+#| editor-font-scale: 1
+fit = lm(mpg ~ am, data = mtcars)
+
+confint(fit)
+```
+
+Notice the consistency in font sizes.
+
+### Reducing Editor Size
+
+To decrease the font size, we set a value between `0 < editor-font-size < 1`. For example, let's set `editor-font-scale` to 0.5:
+
+```{webr-r}
+#| autorun: true
+#| editor-font-scale: 0.5
+fit = lm(mpg ~ am, data = mtcars)
+
+confint(fit)
+```
+
+### Increasing Editor Size
+
+To increase the font size, we set a value between `editor-font-size > 1`. For example, let's set `editor-font-scale` to 2:
+
+```{webr-r}
+#| autorun: true
+#| editor-font-scale: 2
+fit = lm(mpg ~ am, data = mtcars)
+
+confint(fit)
+```
+
+### Scaling Content Areas
+
+In this example, we create a custom area using a [Div block in Quarto](https://quarto.org/docs/authoring/markdown-basics.html#sec-divs-and-spans) and set the div's font size to 150%. Consequently, the editor inherits the font size within the area.
+
+:::  {.panel-tabset group="scaledEditor"}
+#### `{quarto-webr}` Output
+::: {#big-text style="font-size: 150%"}
+
+##### Quarto code cell for R
+
+```{r}
+#| echo: true
+fit = lm(mpg ~ am, data = mtcars)
+
+confint(fit)
+```
+
+##### webR code cell under quarto-webr
+
+```{webr-r}
+#| autorun: true
+fit = lm(mpg ~ am, data = mtcars)
+
+confint(fit)
+```
+:::
+
+#### Cell Code
+````md
+
+::: {#big-text style="font-size: 150%"}
+
+Quarto code cell for R
+
+```{r}
+#| echo: true
+fit = lm(mpg ~ am, data = mtcars)
+
+confint(fit)
+```
+
+webR code cell under quarto-webr
+
+```{webr-r}
+#| autorun: true
+fit = lm(mpg ~ am, data = mtcars)
+
+confint(fit)
+```
+:::
+
+````
+:::
+
+# Fin
+
+Just the beginning!
diff --git a/docs/demos/qwebr-feature-demos.qmd b/docs/demos/qwebr-feature-demos.qmd
@@ -4,6 +4,7 @@ title: "Feature Demonstrations"
 
 Below is a list of different demonstrations of the extensions features. These demos were created to showcase different feature releases.
 
+- [Editor Options](qwebr-editor-options.qmd)
 - [Set Global Cell Options](qwebr-global-cell-defaults.qmd)
 - [Read-only Interactive Code Cells](qwebr-read-only.qmd)
 - [Autorun Interactive Code Cells](qwebr-auto-run.qmd)