Merge pull request #11376 from quarto-dev/revealjs/inline-code-style

revealjs - set code-font-size as em value for variable default

Author: cscheid

src/resources/formats/revealjs/quarto.scss

@@ -16,7 +16,7 @@ $presentation-line-height: 1.3 !default;
 // and are here to simplify the implementation of _brand.yml and
 // user theming customization in general
 $font-weight-base: 400 !default;
-$code-font-size: $presentation-font-size-root !default;
+$code-font-size: 1em !default;
 $font-family-monospace-block: $font-family-monospace !default;
 $font-family-monospace-inline: $font-family-monospace !default;
 $link-weight: $font-weight-base !default;
@@ -25,7 +25,6 @@ $link-decoration: inherit !default;
 $font-weight-monospace: $font-weight-base !default;
 $font-weight-monospace-block: $font-weight-monospace !default;
 $font-weight-monospace-inline: $font-weight-monospace !default;
-$code-inline-font-size: $code-font-size !default;
 
 // main colors
 $body-bg: #fff !default;
@@ -80,13 +79,14 @@ $presentation-list-bullet-color: $body-color !default;
 // code blocks
 $code-block-bg: $body-bg !default;
 $code-block-border-color: lighten($body-color, 60%) !default;
-$code-block-font-size: ($code-font-size * 0.55) !default;
+$code-block-font-size: $code-font-size * 0.55 !default;
 $code-block-height: 500px !default;
 $code-block-theme-dark-threshhold: 40% !default;
 $code-block-line-height: $presentation-line-height !default;
 $code-block-color: $body-color !default;
 
 // inline code
+$code-inline-font-size: $code-font-size * 0.875 !default;
 $code-color: var(--quarto-hl-fu-color) !default;
 $code-bg: transparent !default;
 
@@ -234,12 +234,17 @@ $overlayElementFgColor: 0, 0, 0 !default;
   }
 }
 
+// Make the font size smaller by a factor of $times
+// Useful for font-size defined in px inside smaller font size controled by em
+// as they would not be impacted by the smaller font size
 @mixin make-smaller-font-size($element, $times: 1) {
   font-size: calc(
     #{$element} * #{quarto-math.pow($presentation-font-smaller, $times)}
   );
 }
 
+// Undo the smaller font size
+// Useful for font-size in em already that should not be impacted by smaller font size controled by em
 @mixin undo-smaller-font-size($element) {
   font-size: calc(#{$element} / #{$presentation-font-smaller});
 }
@@ -505,17 +510,6 @@ $panel-sidebar-padding: 0.5em;
       h3 {
         @include undo-smaller-font-size($revealjs-h3-font-size);
       }
-      // Though we want pre and code to be smaller and they are in px
-      pre {
-        @include make-smaller-font-size($revealjs-code-block-font-size);
-        // Make sure code inside pre use code block font size
-        code {
-          font-size: inherit;
-        }
-      }
-      code {
-        @include make-smaller-font-size($revealjs-code-inline-font-size);
-      }
     }
   }
 
@@ -534,17 +528,6 @@ $panel-sidebar-padding: 0.5em;
       h3 {
         @include undo-smaller-font-size($revealjs-h3-font-size);
       }
-      // Though we want pre and code to be smaller and they are in px
-      pre {
-        @include make-smaller-font-size($revealjs-code-block-font-size);
-        // Make sure code inside pre use code block font size
-        code {
-          font-size: inherit;
-        }
-      }
-      code {
-        @include make-smaller-font-size($revealjs-code-inline-font-size);
-      }
     }
 
     // On callout we want to make the font-size smaller too
@@ -561,32 +544,6 @@ $panel-sidebar-padding: 0.5em;
       h3 {
         @include undo-smaller-font-size($revealjs-h3-font-size);
       }
-      // Though we want pre and code to be smaller and they are in px
-      pre {
-        @include make-smaller-font-size($revealjs-code-block-font-size);
-        // Make sure code inside pre use code block font size
-        code {
-          font-size: inherit;
-        }
-      }
-      code {
-        @include make-smaller-font-size($revealjs-code-inline-font-size);
-      }
-    }
-    // twice for code / pre inside callout if inside a smaller slide
-    // this is because they are passed in pixels
-    &.smaller div.callout {
-      // Though we want pre and code to be smaller and they are in px
-      pre {
-        @include make-smaller-font-size($revealjs-code-block-font-size, 2);
-        // Make sure code inside pre use code block font size
-        code {
-          font-size: inherit;
-        }
-      }
-      code {
-        @include make-smaller-font-size($revealjs-code-inline-font-size, 2);
-      }
     }
   }
 }

tests/docs/playwright/revealjs/code-font-size.qmd

@@ -23,7 +23,7 @@ Every test is a call to `testthat::test_that()` function.
 
 - And inside a list : `1+1`
 
-## Highlited Cell
+## Highlighted Cell
 
 ````{.python}
 1 + 1

tests/integration/playwright/src/utils.ts

@@ -151,4 +151,10 @@ export async function getCSSProperty(loc: Locator, variable: string, asNumber =
 export async function checkFontSizeIdentical(loc1: Locator, loc2: Locator) {
   const loc1FontSize = await getCSSProperty(loc1, 'font-size', false) as string;
   await expect(loc2).toHaveCSS('font-size', loc1FontSize);
+}
+
+export async function checkFontSizeSimilar(loc1: Locator, loc2: Locator, factor: number = 1) {
+  const loc1FontSize = await getCSSProperty(loc1, 'font-size', true) as number;
+  const loc2FontSize = await getCSSProperty(loc2, 'font-size', true) as number;
+  await expect(loc1FontSize).toBeCloseTo(loc2FontSize * factor);
 }

tests/integration/playwright/tests/revealjs-themes.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect, Locator } from '@playwright/test';
-import { asRGB, checkColor, checkFontSizeIdentical, getCSSProperty, RGBColor } from '../src/utils';
+import { asRGB, checkColor, checkFontSizeIdentical, checkFontSizeSimilar, getCSSProperty, RGBColor } from '../src/utils';
 
 async function getRevealMainFontSize(page: any): Promise<number> {
   return await getCSSProperty(page.locator('body'), "--r-main-font-size", true) as number;
@@ -16,25 +16,25 @@ async function getRevealCodeInlineFontSize(page: any): Promise<number> {
 
 test('Code font size in callouts and smaller slide is scaled down', async ({ page }) => {
   await page.goto('./revealjs/code-font-size.html');
-  await page.locator('body').press('ArrowRight');
   // Get smaller slide scale factor
   const calloutsFontSize = await getCSSProperty(page.locator('#callouts div.callout'), "font-size", true) as number;
   const mainFontSize = await getRevealMainFontSize(page);
   const scaleFactor = calloutsFontSize / mainFontSize;
   expect(scaleFactor).toBeLessThan(1);
+  // Get non smaller size
+  const codeBlockFontSizeDefault = await getCSSProperty(page.locator('#highlighted-cell pre'), "font-size", true) as number;
+  const codeInlineFontSizeDefault = await getCSSProperty(page.locator('#no-callout-inline').getByText('testthat::test_that()'), "font-size", true) as number;
   // Font size in callout for inline code should be scaled smaller than default inline code
+  expect(await getCSSProperty(page.locator('#callouts').getByText('testthat::test_that()'), "font-size", true)).toBeCloseTo(codeInlineFontSizeDefault * scaleFactor);
+  // Font size for code block in callout should be scaled smaller that default code block
+  expect(await getCSSProperty(page.locator('#callouts .callout pre code'), 'font-size', true)).toBeCloseTo(codeBlockFontSizeDefault * scaleFactor);
+  // Font size in callout for inline code should be samely size as text than by default
   const codeInlineFontSize = await getRevealCodeInlineFontSize(page);
-  const computedInlineFontSize = scaleFactor * codeInlineFontSize;
-  expect(await getCSSProperty(page.locator('#callouts').getByText('testthat::test_that()'), 'font-size', true)).toBeCloseTo(computedInlineFontSize);
-  // Font size in callout for inline code should be same size as text by default
-  await checkFontSizeIdentical(
-    page.locator('#callouts').getByText('Every test is a call to'), 
-    page.locator('#callouts').getByText('testthat::test_that()')
+  await checkFontSizeSimilar( 
+    page.locator('#callouts').getByText('testthat::test_that()'),
+    page.locator('#callouts').getByText('Every test is a call to'),
+    codeInlineFontSize
   );
-  // Font size for code block in callout should be scaled smaller that default code block
-  const codeBlockFontSize = await getRevealCodeBlockFontSize(page)
-  const computedBlockFontSize = scaleFactor * codeBlockFontSize;
-  expect(await getCSSProperty(page.locator('#callouts .callout pre code'), 'font-size', true)).toBeCloseTo(computedBlockFontSize);
 });
 
 test('Code font size in smaller slide is scaled down', async ({ page }) => {
@@ -44,63 +44,20 @@ test('Code font size in smaller slide is scaled down', async ({ page }) => {
   const mainFontSize = await getRevealMainFontSize(page);
   const scaleFactor = smallerFontSize / mainFontSize;
   expect(scaleFactor).toBeLessThan(1);
-  // Code Font size in smaller slide for inline code should be scaled smaller than default inline code
-  const codeInlineFontSize = await getRevealCodeInlineFontSize(page);
-  const computedInlineFontSize = scaleFactor * codeInlineFontSize;
-  expect(
-    await getCSSProperty(
-      page.locator('#smaller-slide p').filter({ hasText: 'Some inline code' }).getByRole('code'),
-       'font-size', true
-    )
-  ).toBeCloseTo(computedInlineFontSize);
-  // Font size for code block in callout should be scaled smaller that default code block
-  const codeBlockFontSize = await getRevealCodeBlockFontSize(page)
-  const computedBlockFontSize = scaleFactor * codeBlockFontSize;
-  expect(await getCSSProperty(page.locator('#smaller-slide pre').getByRole('code'), 'font-size', true)).toBeCloseTo(computedBlockFontSize);
-});
-
-test('Code font size in callouts in smaller slide is scaled down twice', async ({ page }) => {
-  await page.goto('./revealjs/code-font-size.html#/smaller-slide2');
-  // Get smaller slide scale factor
-  const smallerFontSize = await getCSSProperty(page.locator('#smaller-slide2').getByText('And block code:', { exact: true }), "font-size", true) as number;
-  const mainFontSize = await getRevealMainFontSize(page);
-  const scaleFactor = smallerFontSize / mainFontSize;
-  expect(scaleFactor).toBeLessThan(1);
+  // Get non smaller size
+  const codeBlockFontSizeDefault = await getCSSProperty(page.locator('#highlighted-cell pre'), "font-size", true) as number;
+  const codeInlineFontSizeDefault = await getCSSProperty(page.locator('#no-callout-inline').getByText('testthat::test_that()'), "font-size", true) as number;
   // Font size in callout for inline code should be scaled smaller than default inline code
-  const codeInlineFontSize = await getRevealCodeInlineFontSize(page);
-  const computedInlineFontSize = scaleFactor * codeInlineFontSize;
-  expect(await getCSSProperty(page.locator('#smaller-slide2').getByText('1 + 1'), 'font-size', true)).toBeCloseTo(computedInlineFontSize);
-  // Font size in callout for inline code should be same size as text by default
-  await checkFontSizeIdentical(
-    page.locator('#smaller-slide2').getByText('Some inline code'), 
-    page.locator('#smaller-slide2').getByText('1 + 1')
-  );
+  expect(await getCSSProperty(page.locator('#smaller-slide p').filter({ hasText: 'Some inline code' }).getByRole('code'), "font-size", true)).toBeCloseTo(codeInlineFontSizeDefault * scaleFactor);
   // Font size for code block in callout should be scaled smaller that default code block
-  const codeBlockFontSize = await getRevealCodeBlockFontSize(page)
-  const computedBlockFontSize = scaleFactor * codeBlockFontSize;
-  expect(await getCSSProperty(page.locator('#smaller-slide2 .callout pre code'), 'font-size', true)).toBeCloseTo(computedBlockFontSize);
-});
-
-test('Code font size is correctly set', async ({ page }) => {
-  await page.goto('./revealjs/code-font-size.html');
-  await page.locator('body').press('ArrowRight');
-  await page.locator('body').press('ArrowRight');
+  expect(await getCSSProperty(page.locator('#smaller-slide pre').getByRole('code'), 'font-size', true)).toBeCloseTo(codeBlockFontSizeDefault * scaleFactor);
+  // Font size in callout for inline code should be samely size as text than by default
   const codeInlineFontSize = await getRevealCodeInlineFontSize(page);
-  expect(
-    await getCSSProperty(page.locator('#no-callout-inline').getByText('testthat::test_that()'), 'font-size', true)
-  ).toBeCloseTo(codeInlineFontSize);
-  expect(
-    await getCSSProperty(page.getByText('1+1', { exact: true }), 'font-size', true)
-  ).toBeCloseTo(codeInlineFontSize);
-  await page.locator('body').press('ArrowRight');
-  const codeBlockFontSize = await getRevealCodeBlockFontSize(page);
-  expect(
-    await getCSSProperty(page.locator("#highlited-cell div.sourceCode pre code"), 'font-size', true)
-  ).toBeCloseTo(codeBlockFontSize);
-  await page.locator('body').press('ArrowRight');
-  expect(
-    await getCSSProperty(page.locator("#non-highligted pre code"), 'font-size', true)
-  ).toBeCloseTo(codeBlockFontSize);
+  await checkFontSizeSimilar( 
+    page.locator('#smaller-slide2').getByText('+ 1'),
+    page.locator('#smaller-slide2').getByText('Some inline code'),
+    codeInlineFontSize
+  );
 });
 
 test('Callouts can be customized using SCSS variables', async ({ page }) => {