From 781382000f5c320a2cd1fc18fc2bc0e35c956f39 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Tue, 12 Nov 2024 13:46:29 +0100 Subject: [PATCH 1/2] revealjs - set code-font-size as em value for variable default - Scale inline code font size same as bootstrap - Scale block code font size same as previous Revealjs default, smaller than bootstrap to save some slide space --- src/resources/formats/revealjs/quarto.scss | 59 +++------------------- 1 file changed, 8 insertions(+), 51 deletions(-) diff --git a/src/resources/formats/revealjs/quarto.scss b/src/resources/formats/revealjs/quarto.scss index 089aae4668c..401b4a5d8b5 100644 --- a/src/resources/formats/revealjs/quarto.scss +++ b/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); - } } } } From b6584f6dc112d8adaee351eb02100f1541a478e2 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Tue, 12 Nov 2024 13:47:06 +0100 Subject: [PATCH 2/2] Adapt tests to new rules for code font size --- .../playwright/revealjs/code-font-size.qmd | 2 +- tests/integration/playwright/src/utils.ts | 6 ++ .../playwright/tests/revealjs-themes.spec.ts | 89 +++++-------------- 3 files changed, 30 insertions(+), 67 deletions(-) diff --git a/tests/docs/playwright/revealjs/code-font-size.qmd b/tests/docs/playwright/revealjs/code-font-size.qmd index 28c1c0de2c2..365ae31b0e1 100644 --- a/tests/docs/playwright/revealjs/code-font-size.qmd +++ b/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 diff --git a/tests/integration/playwright/src/utils.ts b/tests/integration/playwright/src/utils.ts index e8a2f2ee79d..f1f6b5ff6f4 100644 --- a/tests/integration/playwright/src/utils.ts +++ b/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); } \ No newline at end of file diff --git a/tests/integration/playwright/tests/revealjs-themes.spec.ts b/tests/integration/playwright/tests/revealjs-themes.spec.ts index 7c6c4d73aee..2eb8d33320c 100644 --- a/tests/integration/playwright/tests/revealjs-themes.spec.ts +++ b/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 { return await getCSSProperty(page.locator('body'), "--r-main-font-size", true) as number; @@ -16,25 +16,25 @@ async function getRevealCodeInlineFontSize(page: any): Promise { 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 }) => {