01514: enhance processing of block parameters

Description:

(:pixels:320px:)
>>frame width:"calc({$:pixels}+12px)"<<
[=pixels=]: {$:pixels}
>><<

Please enhance the parsing of block parameters so that the markup in >><< works

simon October 12, 2024, at 09:03 PM

You can customize this, set in config.php:

$WikiStylePattern = '%%|%[A-Za-z][-+,=:#\\w\\s\'"().]*%';

Result (enabled on this page):

(:correctpixels:320px:)
>>frame width:"calc({$:correctpixels} + 12px)"<<
[=correctpixels=]: {$:correctpixels}
>><<

Note that you have 2 typos in your calc() declaration. You can only add numbers of the same property, here length, and "320" is unitless: you need to add "px" or "em" or "rem" or another unit of length. Also, there need to be spaces between the + and - operators and the things.

Nevertheless, I would recommend phasing out inline CSS (defined in the page text), and try and replace it with styles in a separate CSS file like local.css. This will help with your Content Security Policy requirements. --Petko October 12, 2024, at 09:24 PM

Thanks, thats useful. I'd prefer that the wiki style pattern be added to the core, i.e. so CSS continues to be largely supported.
Agreed with your point about inline CSS, but when setting the size for bespoke images in a PmWiki page its hard to get away from inline CSS, unless the PmWiki engine itself abstracts the CSS out into a file.

Added for 2.2.38 (also / and *). Re calc() you can mix length units with percents, and the spaces are only required around plus and minus (for wikistyles, "%" needs to be replaced with "pct"). Re CSP, I'd try setting CSS classes rather than inline styles, and use the classnames in the page. Something like this. --Petko October 13, 2024, at 10:24 AM

img { 
  max-width: 100%;    /* Limit the width to 100% of the parent container */
  max-height: 75vh;   /* Limit the height to 75% of the viewport height */
  width: auto;        /* Use the original width if it's smaller than 100% */
  height: auto;       /* Use the original height if it's smaller than 45vh */
}
.box3 { width: 300px; }
.box4 { width: 400px; }

>>rframe box3<<
Right floating frame 300px wide.
Attach:Bespoke-image-may-be-scaled-down-to-300px-if-wider.jpg
>><<