From e116b11d5827f2803c6098ef0d8a69565eb8a488 Mon Sep 17 00:00:00 2001 From: geoff-cox Date: Mon, 1 Jun 2026 20:14:38 -0400 Subject: [PATCH] Second Attempt: Add , an inline reveal/hide element for guided notes --- css/components/_pretext.scss | 3 +- css/components/elements/_veil.scss | 111 ++++++++++++++++ examples/sample-article/sample-article.xml | 68 ++++++++++ js/pretext_add_on.js | 140 +++++++++++++++++++++ xsl/pretext-common.xsl | 5 + xsl/pretext-html.xsl | 52 ++++++++ xsl/pretext-latex-common.xsl | 14 +++ 7 files changed, 392 insertions(+), 1 deletion(-) create mode 100644 css/components/elements/_veil.scss diff --git a/css/components/_pretext.scss b/css/components/_pretext.scss index c20614fceb..6ea9879944 100644 --- a/css/components/_pretext.scss +++ b/css/components/_pretext.scss @@ -18,4 +18,5 @@ @use 'elements/poem'; @use 'elements/prism'; @use 'elements/math'; -@use 'elements/misc-content'; \ No newline at end of file +@use 'elements/misc-content'; +@use 'elements/veil'; \ No newline at end of file diff --git a/css/components/elements/_veil.scss b/css/components/elements/_veil.scss new file mode 100644 index 0000000000..8b15135ec7 --- /dev/null +++ b/css/components/elements/_veil.scss @@ -0,0 +1,111 @@ +/* ========================================================================== + PreTeXt — final SCSS (light: royal blue, dark: burnt orange) + - Transparent background for revealed content + - Non-transparent button background (mode-aware) + - Works for inline (.veil--inline) and block (.veil--block) veils + - Includes keyboard focus and pressed feedback + ========================================================================== */ + +/* ---------------- Theme tokens via CSS variables ------------------------- */ +:root { + --veil-primary: #1d4ed8; /* royal blue */ + --veil-btn-bg: #f8fafc; /* very light gray-blue */ + --veil-text-color: inherit; + + --veil-focus-ring: rgba(29, 78, 216, 0.35); + --veil-hover-ring: rgba(29, 78, 216, 0.18); + --veil-pressed-shadow: rgba(0,0,0,0.06); +} + +/* Dark mode uses a burnt orange accent; PreTeXt toggles .dark-mode on */ +.dark-mode { + --veil-primary: #f59e0b; /* burnt orange */ + --veil-btn-bg: rgba(245, 158, 11, 0.12); + --veil-text-color: inherit; + + --veil-focus-ring: rgba(245, 158, 11, 0.45); + --veil-hover-ring: rgba(245, 158, 11, 0.22); + --veil-pressed-shadow: rgba(245, 158, 11, 0.16); +} + +/* ---------------- Containers -------------------------------------------- */ +.veil--inline { display: inline; } +.veil--block { margin: 0.25rem 0; } + +/* ---------------- Reveal button (shown when hidden) --------------------- */ +.veil .veil-toggle { + display: inline-block; + background: var(--veil-btn-bg); + color: var(--veil-primary); + padding: 0.06rem 0.35rem; + // border: 1px solid color-mix(in srgb, var(--veil-primary) 35%, transparent); + border: 1px solid currentColor; + border-radius: 0.25rem; + font-size: 0.85rem; + line-height: 1.2; + cursor: pointer; + vertical-align: baseline; + transition: box-shadow 120ms ease, transform 60ms ease, border-color 120ms ease; + + &:hover { + box-shadow: 0 0 0 2px var(--veil-hover-ring); + } + &:active { + transform: scale(0.995); + } + &:focus-visible { + outline: 2px solid var(--veil-focus-ring); + outline-offset: 2px; + } +} + +/* ---------------- Hidden by default ------------------------------------ */ +.veil .veil-content { + display: none; +} + +/* ---------------- Revealed state --------------------------------------- */ +.veil.revealed .veil-toggle { display: none; } + +.veil.revealed .veil-content { + display: inline; /* overridden to block for block variant */ + background: transparent; /* transparent background as requested */ + color: var(--veil-text-color); + border: 1px solid var(--veil-primary); + padding: 0.06rem 0.30rem; + border-radius: 0.20rem; + cursor: pointer; + transition: transform 60ms ease, box-shadow 120ms ease, border-color 120ms ease; + + &:hover { + box-shadow: 0 0 0 2px var(--veil-hover-ring) inset; + } + &:focus-visible { + outline: 2px solid var(--veil-focus-ring); + outline-offset: 2px; + } + + /* Pressed feedback (toggled by JS on pointer events) */ + &.is-pressed { + transform: scale(0.995); + box-shadow: 0 0 0 3px var(--veil-pressed-shadow) inset; + } +} + +/* Block variant shows content as a block when revealed */ +.veil--block.revealed .veil-content { + display: block; + padding: 0.40rem 0.55rem; +} + +/* ---------------- Print (HTML -> paper) --------------------------------- */ +@media print { + .veil .veil-toggle { display: none !important; } + .veil .veil-content { + display: inline !important; + border: none !important; + background: transparent !important; + padding: 0 !important; + } + .veil--block .veil-content { display: block !important; } +} \ No newline at end of file diff --git a/examples/sample-article/sample-article.xml b/examples/sample-article/sample-article.xml index 7bbd839750..907308da3d 100644 --- a/examples/sample-article/sample-article.xml +++ b/examples/sample-article/sample-article.xml @@ -10677,6 +10677,74 @@ along with MathBook XML. If not, see . +
+ <c>veil</c> Testing + +

+ The function f(t) = e^{-t} satisfies the differential equation + f'(t) = -f(t), + which is characteristic of exponential decay. +

+ +

+ This sentence contains a simple hidden phrase and continues normally. +

+ +

+ Here is a veil wrapping emphasized hidden text within an emphasized span. +

+ +

+ You can also hide inline math like f(t) = e^{-t} without breaking the flow. +

+ +

+ A slightly more complex example with a link: + Learn more at PreTeXt or explore g(x) = x^2 + 1. + + Learn more at PreTeXt. + +

+ +

+ Testing long hidden text: + + This is a very long phrase that includes emphasis, + inline math \int_0^1 x^2 dx = \frac{1}{3}, and even a short sentence to see if line wrapping behaves properly. + +

+ +

+ Testing long hidden text with p tag: + +

+ This is a very long phrase that includes emphasis, + inline math \int_0^1 x^2 dx = \frac{1}{3}, and even a short sentence to see if line wrapping behaves properly. +

+ +

+ +

+ Multiple consecutive veils: \cos(t) + first hidden, then some regular text, and second hidden part. +

+ + + h(t) = \sin(t) tiger + + + + + h(t) = \int \sin(t)\ dt + + + +

+ Final test: a veil at the end of the sentence. +

+ +
+ + + diff --git a/xsl/pretext-html.xsl b/xsl/pretext-html.xsl index b46a798d58..c6290cbd46 100644 --- a/xsl/pretext-html.xsl +++ b/xsl/pretext-html.xsl @@ -8953,6 +8953,58 @@ along with MathBook XML. If not, see . + + + + + + + + + + + + +
+ + +
+ + diff --git a/xsl/pretext-latex-common.xsl b/xsl/pretext-latex-common.xsl index 98de8d2840..062c4647f2 100644 --- a/xsl/pretext-latex-common.xsl +++ b/xsl/pretext-latex-common.xsl @@ -1194,6 +1194,20 @@ along with MathBook XML. If not, see . + + %% Veil support (PreTeXt) + \usepackage[normalem]{ulem} + \usepackage{xcolor} + + + % \newif\ifPTXVeilRevealInPrint % future publisher-driven boolean + % \PTXVeilRevealInPrintfalse % default could be set in publisher later + + + \newcommand{\PTXveil}[1]{\uline{#1}} + + \newcommand{\PTXveilblock}[1]{#1} + %% A character like a tilde, but different