Fossil SCM

Documented a browser incompatibility in the pikchr-centering CSS, for later analysis/hacking. Comment changes only, no CSS.

stephan 2022-06-30 22:05 trunk
Commit d32df118afcce8965ad7a71b7423cbc1c3a2f79013d1c9bbae60ea8a717c323e
1 file changed +6
--- src/default.css
+++ src/default.css
@@ -1577,10 +1577,16 @@
15771577
/* ^^^ Centered non-source-view elements */
15781578
div.pikchr-wrapper.center.source.source-inline > pre.pikchr-src,
15791579
div.pikchr-wrapper.center.source.source-inline > div.pikchr-svg
15801580
/* ^^^ Centered inline-source-view elements */{
15811581
display:inline-block/*allows parent text-align to do the alignment*/;
1582
+ /* ^^^^ Browser incompatibility: inline-block causes the centered
1583
+ pikchr to shrink to the point of illegiblity in Chrome. The
1584
+ closest match on Chrome seems to be using 'unset', which centers
1585
+ by virtue of stretching it to the width of the window. Similarly,
1586
+ using {display: grid; place-items: center} centers and sizes well
1587
+ on FF but Chrome shrinks it in the same way. */
15821588
}
15831589
div.pikchr-wrapper.indent:not(.source),
15841590
div.pikchr-wrapper.indent.source.source-inline{
15851591
margin-left: 4em;
15861592
}
15871593
--- src/default.css
+++ src/default.css
@@ -1577,10 +1577,16 @@
1577 /* ^^^ Centered non-source-view elements */
1578 div.pikchr-wrapper.center.source.source-inline > pre.pikchr-src,
1579 div.pikchr-wrapper.center.source.source-inline > div.pikchr-svg
1580 /* ^^^ Centered inline-source-view elements */{
1581 display:inline-block/*allows parent text-align to do the alignment*/;
 
 
 
 
 
 
1582 }
1583 div.pikchr-wrapper.indent:not(.source),
1584 div.pikchr-wrapper.indent.source.source-inline{
1585 margin-left: 4em;
1586 }
1587
--- src/default.css
+++ src/default.css
@@ -1577,10 +1577,16 @@
1577 /* ^^^ Centered non-source-view elements */
1578 div.pikchr-wrapper.center.source.source-inline > pre.pikchr-src,
1579 div.pikchr-wrapper.center.source.source-inline > div.pikchr-svg
1580 /* ^^^ Centered inline-source-view elements */{
1581 display:inline-block/*allows parent text-align to do the alignment*/;
1582 /* ^^^^ Browser incompatibility: inline-block causes the centered
1583 pikchr to shrink to the point of illegiblity in Chrome. The
1584 closest match on Chrome seems to be using 'unset', which centers
1585 by virtue of stretching it to the width of the window. Similarly,
1586 using {display: grid; place-items: center} centers and sizes well
1587 on FF but Chrome shrinks it in the same way. */
1588 }
1589 div.pikchr-wrapper.indent:not(.source),
1590 div.pikchr-wrapper.indent.source.source-inline{
1591 margin-left: 4em;
1592 }
1593

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button