2023-11-06

Author: arnog

assets/css/imports/minimal-mistakes.css

@@ -2419,8 +2419,8 @@ <h1 id="canonical-form" tabindex="-1">Canonical Form</h1>
 expressions.</p>
 <p>The <code>ce.box()</code> and <code>ce.parse()</code> functions return a canonical expression by
 default, which is the desirable behavior in most cases.</p>
-<p><strong>To get a non-canonical version of an expression</strong> set the <code>canonical</code> option
-of <code>ce.parse()</code> or <code>ce.box()</code> to <code>false</code>.</p>
+<p><strong>To get a non-canonical version of an expression</strong> use
+of <code>ce.parse(s, {canonical: false})</code> or <code>ce.box(expr, {canonical: false})</code>.</p>
 <p>The non-canonical version will be closer to the literal LaTeX input, which may
 be desirable to compare a “raw” user input with an expected answer.</p>
 <pre><code class="language-js">ce.<span class="hljs-title function_">parse</span>(<span class="hljs-string">&#x27;\\frac{30}{-50}&#x27;</span>);
@@ -2452,7 +2452,8 @@ <h1 id="canonical-form" tabindex="-1">Canonical Form</h1>
 </code></pre>
 <p>The canonical form of an expression is always the same when used with a given
 Compute Engine instance. However, do not rely on the canonical form as future
-versions of the Compute Engine could provide a different result.</p>
+versions of the Compute Engine could have a different definition of
+canonical form.</p>
 <p><strong>To check if an expression is canonical</strong> use <code>expr.isCanonical</code>.</p>
 <p><strong>To obtain the canonical representation of a non-canonical expression</strong>, use
 the <code>expr.canonical</code> property.</p>

assets/css/imports/minimal-mistakes.css.map

@@ -2506,6 +2506,11 @@ <h2 id="canonical-expressions" tabindex="-1">Canonical Expressions</h2>
 <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(expr.<span class="hljs-property">json</span>);
 <span class="hljs-comment">// ➔ [&quot;Rational&quot;, -3, 5]</span>
 </code></pre>
+<p>The canonical form of a rational with a denominator of 1 is an integer.</p>
+<pre><code class="language-js"><span class="hljs-keyword">const</span> expr = ce.<span class="hljs-title function_">parse</span>(<span class="hljs-string">&quot;\\frac{17}{1}&quot;</span>);
+<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(expr.<span class="hljs-property">json</span>);
+<span class="hljs-comment">// ➔ 17</span>
+</code></pre>
 <p>You can check if a non-canonical expression is a reduced (canonical) rational
 number by checking the GCD of the numerator and denominator:</p>
 <pre><code class="language-js"><span class="hljs-keyword">const</span> input = ce.<span class="hljs-title function_">parse</span>(<span class="hljs-string">&quot;\\frac{30}{50}&quot;</span>, {<span class="hljs-attr">canonical</span>: <span class="hljs-literal">false</span>});
@@ -2514,7 +2519,7 @@ <h2 id="canonical-expressions" tabindex="-1">Canonical Expressions</h2>
 ).<span class="hljs-title function_">evaluate</span>().<span class="hljs-property">value</span> === <span class="hljs-number">1</span>);
 <span class="hljs-comment">// ➔ false</span>
 </code></pre>
-<p>The canonical form of an addition or mulipication will have its arguments
+<p>The canonical form of an addition or multiplication will have its arguments
 ordered in a canonical way.</p>
 <pre><code class="language-js"><span class="hljs-keyword">const</span> expr = ce.<span class="hljs-title function_">parse</span>(<span class="hljs-string">&quot;2+x+\\pi+\\sqrt2+1&quot;</span>);
 <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(expr.<span class="hljs-property">json</span>);

assets/css/main.css

@@ -2490,6 +2490,7 @@ <h1>Keyboard Shortcuts</h1>
   text-align: center;
   padding-top: 8px;
   align-items: center;
+  width: 100%;
 }
 
 
@@ -2508,6 +2509,7 @@ <h1>Keyboard Shortcuts</h1>
   color: var(--text-color);
   align-items: center;
   overflow-wrap: anywhere;
+  width: 100%;
 }
 
 /* .keybindings-table tr td:not(:first-child) {
@@ -2574,6 +2576,7 @@ <h1>Keyboard Shortcuts</h1>
   line-height: 1;
   text-align: center;
   font-variant-ligatures: none;
+  width: 100%;
 }
 
 
@@ -2592,6 +2595,7 @@ <h1>Keyboard Shortcuts</h1>
   color: var(--text-color);
   align-items: center;
   overflow-wrap: anywhere;
+  width: 100%;
 }
 
 .inlineshortcut-table tr td kbd {
@@ -2702,17 +2706,75 @@ <h1>Keyboard Shortcuts</h1>
   transform: translateX(26px);
 }
 
-.settings-row {
+.settings-row, .settings-stack {
   border-radius: 8px;
   border: var(--ui-border);
   padding: 1rem;
   display: flex;
   width: 100%;
+  user-select: none;
+}
+
+.settings-row {
   align-items: center;
   justify-content: space-between;
-  user-select: none;
 }
 
+.settings-stack {
+  flex-flow: column;
+}
+
+.settings-stack div div.row {
+  display: flex;
+  flex-flow: row;
+  align-items: baseline;
+}
+
+.settings-row label, .settings-stack label {
+  font-size: 1.25rem;
+}
+
+.settings-stack .label {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+}
+
+div.row input + label {
+  margin-left: 8px;
+}
+
+input[type="radio"] {
+  appearance: none;
+  background-color: var(--ui-background);
+  margin: 0;
+  font: inherit;
+  color: var(--ui-border);
+  width: 1.5em;
+  height: 1.5em;
+  border: 2.5px solid #555;
+  border-radius: 50%;
+  translate: 0 -1.25px;
+  display: grid;
+  place-content: center;
+}
+
+input[type="radio"]::before {
+  content: "";
+  width: 0.65em;
+  height: 0.65em;
+  border-radius: 50%;
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em var(--primary-color);
+}
+
+input[type="radio"]:checked::before {
+  transform: scale(1);
+}
+
+
+
 .page__content label p {
   margin: 0;
   padding: 0;
@@ -2762,19 +2824,49 @@ <h1>Keyboard Shortcuts</h1>
     const platform = navigator['userAgentData']?.platform ?? navigator.platform;
     const isApple = /^mac/i.test(platform) || /iphone|ipod|ipad/i.test(navigator.userAgent);
 
-    const appleSwitch = document.getElementById('apple');
+    const glyphsRadio = document.getElementById('glyphs-radio');
+    const textRadio = document.getElementById('text-radio');
+
+    // const appleSwitch = document.getElementById('apple');
+    // appleSwitch.addEventListener('click', (e) => {
+    //   if (e.target.checked) 
+    //     document.body.classList.add('apple', 'glyphs');
+    //    else 
+    //     document.body.classList.remove('apple', 'glyphs');
+    // });
 
     if (isApple) {
-      appleSwitch.checked = true;
+      // appleSwitch.checked = true;
+      glyphsRadio.checked = true;
+      textRadio.checked = false;
+
       document.body.classList.add('apple', 'glyphs');
+    } else {
+      glyphsRadio.checked = false;
+      textRadio.checked = true;
     }
 
-    appleSwitch.addEventListener('click', (e) => {
-      if (e.target.checked) 
-        document.body.classList.add('apple', 'glyphs');
-       else 
-        document.body.classList.remove('apple', 'glyphs');
+    glyphsRadio.addEventListener('change', (e) => {
+      if (e.target.checked) {
+        document.body.classList.add('apple');
+        document.body.classList.add('glyphs');
+      }
+       else  {
+        document.body.classList.remove('apple');
+        document.body.classList.remove('glyphs');
+      }
     });
+    textRadio.addEventListener('change', (e) => {
+      if (e.target.checked) {
+        document.body.classList.remove('apple');
+        document.body.classList.remove('glyphs');
+      }
+       else  {
+        document.body.classList.add('apple');
+        document.body.classList.add('glyphs');
+      }
+    });
+
 
   function replaceGlyphs(root) {
     // Recurse over all the children of the node
@@ -2811,14 +2903,27 @@ <h2 id="keybindings" tabindex="-1">Keybindings</h2>
 <div class='read-more'><a href="/mathlive/guides/shortcuts/">
 Read more about definining your own <strong>keybindings</strong> and <strong>shortcuts</strong>.
 <svg class="svg-chevron"><use xlink:href="#svg-chevron"></use></svg></a></div>
-<div class="settings-row">
+<!-- <div class="settings-row">
 <label for="apple"><p><strong>Shortcuts for macOS and iOS</strong></p><p>Display shortcuts using the ⌘, ⌥, ⌃, ⇧ keys</p></label>
 <label class="switch">
   <input id="apple" type="checkbox">
   <span class="slider"></span>
 </label>
+</div> -->
+<div class="settings-stack">
+<div class="label">Display shortcuts for:</div>
+<div>
+<div class="row">
+<input type="radio" id="glyphs-radio" name="glyphs" value="glyphs" checked>
+<label for="glyphs-radio">macOS, iOS</label>
+</div>
+<div class="row">
+<input type="radio" id="text-radio" name="glyphs" value="text">
+<label for="text-radio">Windows, ChromeOS, Linux</label>
+</div>
+</div>
 </div>
-<section id="special-keys">
+<section id="special-keys" class="if-glyphs">
 <div id='special-keys-table'>
   <div> <kbd>⇧</kbd><span class="label"><kbd>Shift</kbd></div> 
    <div> <kbd>⌃</kbd><span class="label"><kbd>Control</kbd></span></div>
@@ -4177,14 +4282,14 @@ <h3 id="miscelaneous" tabindex="-1">Miscelaneous</h3>
 
 
 
-        <meta itemprop="datePublished" content="October 25, 2023">
+        <meta itemprop="datePublished" content="November 06, 2023">
 
 
 
 
 
 
-          <p class="page__date"><svg class="icon1quarterem"><use role="none" xlink:href="/assets/icons.svg#calendar-days"/></svg><strong> Updated</strong> <time datetime="2023-10-25">October 25, 2023</time></p>
+          <p class="page__date"><svg class="icon1quarterem"><use role="none" xlink:href="/assets/icons.svg#calendar-days"/></svg><strong> Updated</strong> <time datetime="2023-11-06">November 06, 2023</time></p>
 
 
           <p class="page__meta-link"><svg class="icon1quarterem"><use role="none" xlink:href="/assets/icons.svg#bug"/></svg> <strong>Problem? Feedback?</strong> File a report at&nbsp;<a href="https://github.com/cortex-js/cortexjs.io">github.com/cortex-js/cortexjs.io</a></p>