Fossil SCM

Documented a simpler pikchr-centering implementation for potential future use but did not activate it due to concerns about current browser-side availability.

stephan 2020-09-19 13:10 trunk
Commit 1620841523844e2411f4e64cc97d4a08a28886691c421432b0d805da40b8be1d
1 file changed +11 -2
+11 -2
--- src/default.css
+++ src/default.css
@@ -1414,18 +1414,27 @@
14141414
as the graphic), else the sources are shifted to the left as
14151415
if they were "plain text". */
14161416
div.pikchr-wrapper.center:not(.source),
14171417
div.pikchr-wrapper.center.source.source-inline{
14181418
text-align: center;
1419
+ /* Reminder for The Future: this impl also works:
1420
+
1421
+ display: grid; place-items: center;
1422
+
1423
+ and does not require setting display:inline-block on the relevant
1424
+ child items, but caniuse.com/css-grid suggests that some
1425
+ still-seemingly-legitimate browsers don't support grid mode. */
14191426
}
14201427
div.pikchr-wrapper.center > div.pikchr-svg {
14211428
}
14221429
div.pikchr-wrapper.center:not(.source) > pre.pikchr-src,
14231430
div.pikchr-wrapper.center:not(.source) > div.pikchr-svg,
1431
+/* ^^^ Centered non-source-view elements */
14241432
div.pikchr-wrapper.center.source.source-inline > pre.pikchr-src,
1425
-div.pikchr-wrapper.center.source.source-inline > div.pikchr-svg{
1426
- display:inline-block/*allows text-align to do the alignment*/;
1433
+div.pikchr-wrapper.center.source.source-inline > div.pikchr-svg
1434
+/* ^^^ Centered inline-source-view elements */{
1435
+ display:inline-block/*allows parent text-align to do the alignment*/;
14271436
}
14281437
div.pikchr-wrapper.indent:not(.source),
14291438
div.pikchr-wrapper.indent.source.source-inline{
14301439
margin-left: 4em;
14311440
}
14321441
--- src/default.css
+++ src/default.css
@@ -1414,18 +1414,27 @@
1414 as the graphic), else the sources are shifted to the left as
1415 if they were "plain text". */
1416 div.pikchr-wrapper.center:not(.source),
1417 div.pikchr-wrapper.center.source.source-inline{
1418 text-align: center;
 
 
 
 
 
 
 
1419 }
1420 div.pikchr-wrapper.center > div.pikchr-svg {
1421 }
1422 div.pikchr-wrapper.center:not(.source) > pre.pikchr-src,
1423 div.pikchr-wrapper.center:not(.source) > div.pikchr-svg,
 
1424 div.pikchr-wrapper.center.source.source-inline > pre.pikchr-src,
1425 div.pikchr-wrapper.center.source.source-inline > div.pikchr-svg{
1426 display:inline-block/*allows text-align to do the alignment*/;
 
1427 }
1428 div.pikchr-wrapper.indent:not(.source),
1429 div.pikchr-wrapper.indent.source.source-inline{
1430 margin-left: 4em;
1431 }
1432
--- src/default.css
+++ src/default.css
@@ -1414,18 +1414,27 @@
1414 as the graphic), else the sources are shifted to the left as
1415 if they were "plain text". */
1416 div.pikchr-wrapper.center:not(.source),
1417 div.pikchr-wrapper.center.source.source-inline{
1418 text-align: center;
1419 /* Reminder for The Future: this impl also works:
1420
1421 display: grid; place-items: center;
1422
1423 and does not require setting display:inline-block on the relevant
1424 child items, but caniuse.com/css-grid suggests that some
1425 still-seemingly-legitimate browsers don't support grid mode. */
1426 }
1427 div.pikchr-wrapper.center > div.pikchr-svg {
1428 }
1429 div.pikchr-wrapper.center:not(.source) > pre.pikchr-src,
1430 div.pikchr-wrapper.center:not(.source) > div.pikchr-svg,
1431 /* ^^^ Centered non-source-view elements */
1432 div.pikchr-wrapper.center.source.source-inline > pre.pikchr-src,
1433 div.pikchr-wrapper.center.source.source-inline > div.pikchr-svg
1434 /* ^^^ Centered inline-source-view elements */{
1435 display:inline-block/*allows parent text-align to do the alignment*/;
1436 }
1437 div.pikchr-wrapper.indent:not(.source),
1438 div.pikchr-wrapper.indent.source.source-inline{
1439 margin-left: 4em;
1440 }
1441

Keyboard Shortcuts

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