View source for Infobox

{{toc numerate=1}}
{{tree}}
The highligters and wrappers were parsed in the ##wacko_preprocess()## of the WackoFormatter.

%%(php)
<?php
/*
* WackoFormatter
*
* Formats text with wacko-formatting.
* Links and actions aren't processed. Its processed by PostWacko formatter
*/

// . . .

$result = $wacko->_format($code, 'highlight/' . $formatter, $params);

// add wrapper
if (isset($params['wrapper']) && ($params['wrapper'] != 'none'))
{
	$wrapper			= 'wrapper_' . $params['wrapper'];
	$params['wrapper']	= ''; // no recursion
	$result				= $wacko->_format(trim($result), 'highlight/' . $wrapper, $params);
}
%% 

  1. extend the wrappers ##box## and ##shade##
  2. add formatter for ##callout##
  3. arguments for formatter and wrapper
    4. ##type##
    5. ##title##
    6. ##icon##
    7. ##col##
  5. add prefix ##wrapper_## for wrapper arguments

Wrappers were parsed after the highlighter...

Formatter
  1. ##""%%(info type="warning" title="Warning") Formatter info.%%""##
Wrapper
  1. ##""%%(wacko wrapper="shade"  wrapper_type="warning" wrapper_title="Warning") Formatter wacko with shade wrapper.%%""##

===Issues===
  1. nesting
    * Nested formatters / wrappers are currently not feasible, that means you cant wrap a page or a section of o page in a wrapper, if it already contains a formatter (see exception below)
    * As character markup for text formatters, you can use percent signs ##""%%, %%""## or grave accents ##""``, ``""##. Both characters are equal. Grave accents can be useful if the text already contains percent signs, which may be mistakenly considered markup.
Beyond that this allows you to wrap a formatter in a formatter, e.g. wrapping a CSS highlighter in a details formatter.

  1. CSS for print and wordprocessor
  2. --Reset ##body_r## after changing CSS class for wrapper to ##.wrapper## and ##.wrapper-content##--
  3. --SVG: set only **viewbox**--
    * all SVG background images require a change, so we can set the icon size in the CSS file, e.g. ##<span>text</span>## and ##.success span::before{}##.
    * added CSS class ##msg##: ##<div class="msg note">##
  1. --CSS: define ##min-height## for both containers--
  2. use ##type## to assign style only to paragraph ##<p class="type-warning">##
  3. Unicode icon versus SVG icon
  4. Paragrafica & Formatters: ##<ignore>## terminator versus auto-paragraphs
  5. it is too colorful, reduce and simplify color usage
  6. make ##icon## optional in container and wrapper title

===Formatter===
%%(info type="example" title="Formatter Examples") ((!/Example Test here...))%%

====Callout====

##""%%(info type="warning" title="Warning") Formatter info.%%""##
%%(info type="warning" title="Warning") Formatter info.%%

**formatter/highlight/info.php**
``(php)
<?php

/*
	%%(info
		[type="default | error | example | important | note | question | quote | success | warning"]
		[title="Title"]
		[icon=0|1]
		[style="no use"]
		)
	content
	%%
*/

$types			= ['default', 'error', 'example', 'important', 'note', 'question', 'quote', 'success', 'warning'];

// defaults
$options['type']	??= 'default';
$options['title']	??= '';
$options['icon']	??= 1;
$options['style']	??= false;

$options['tpl']		= true;

if (in_array($options['type'], $types))
{
	// info type-* in wacko.css
	$tpl->type = ' type-' . $options['type'];
}

if ($options['icon'])
{
	$tpl->icon	= true;
	$tpl->eicon	= true;
}

$tpl->style		= 'info';
$tpl->t_title	= $options['title'] ?? null;
$tpl->include	= include Ut::join_path(FORMATTER_DIR, 'wiki.php');
``
**formatter/highlight/template/info.tpl**
``
[ === main === ]
<ignore>
	<div class="[ ' style ' ][ ' type ' ]">
	[= icon _ =
		[ ' nonstatic ' ]
		<div class="info-content">
	=]
	[= t _ =
		<p class="info-title">[ ' title | e ' ]</p>
	=]
[ ' include  // <-- no indention for embeded pre ' ]
	[= eicon _ =
		[ ' nonstatic ' ]
		</div>
	=]
	</div>
</ignore>
``
====Pre-configured formatter====

**formatter/highlight/customized.php**
%%(php)
<?php
// set wrapper options
$options['wrapper'] = 'box';
$options['wrapper_align'] = $options['align'];
$options['wrapper_width'] = $options['width'];

// add / include highlighter / formatter ...

echo Ut::html($text);
%% 

===Color scheme===
<#
<table class="wikitable">
<tr>
<th>type</th>
<th>background</th>
<th>color</th>
<th>border</th>
</tr>
<tr>
<td>default</td>
<td style="background:rgb(147, 154, 69,.1); font-family:monospace;">rgb(147, 154, 69,.1)</td>
<td style="background:#939A45; color:#ffffff; font-family:monospace;"> </td>
<td style="background:#939A45; color:#ffffff; font-family:monospace;">#939A45</td>
</tr>
<tr>
<td>important</td>
<td style="background:rgba(255,23,68,.1); font-family:monospace;">rgba(255,23,68,.1)</td>
<td> </td>
<td style="background:#ff1744; font-family:monospace;">#ff1744</td>
</tr>
<tr>
<td>note</td>
<td style="background:rgba(68,138,255,.1); font-family:monospace;">rgba(68,138,255,.1)</td>
<td style="background:#448aff; color:#ffffff; font-family:monospace;"> </td>
<td style="background:#448aff; color:#ffffff; font-family:monospace;">#448aff</td>
</tr>
<tr>
<td>warning</td>
<td style="background:rgba(255,145,0,.1); font-family:monospace;">rgba(255,145,0,.1)</td>
<td> </td>
<td style="background:#ff9100; color:#ffffff; font-family:monospace;">#ff9100</td>
</tr>
<tr>
<td>success</td>
<td style="background:rgba(0,200,83,.1); font-family:monospace;">rgba(0,200,83,.1)</td>
<td> </td>
<td style="background:#00c853; color:#ffffff; font-family:monospace;">#00c853</td>
</tr>
<tr>
<td>question</td>
<td style="background:rgba(100,221,23,.1); font-family:monospace;">rgba(100,221,23,.1)</td>
<td> </td>
<td style="background:#64dd17; color:#ffffff; font-family:monospace;">#64dd17</td>
</tr>
<tr>
<td>error</td>
<td style="background:rgba(255,82,82,.1); font-family:monospace;">rgba(255,82,82,.1)</td>
<td> </td>
<td style="background:#ff5252; color:#ffffff; font-family:monospace;">#ff5252</td>
</tr>
<tr>
<td>example</td>
<td style="background:rgba(101,31,255,.1); font-family:monospace;">rgba(101,31,255,.1)</td>
<td> </td>
<td style="background:#651fff; color:#ffffff; font-family:monospace;">#651fff</td>
</tr>
<tr>
<td>quote</td>
<td style="background:hsla(0,0%,62%,.1); font-family:monospace;">hsla(0,0%,62%,.1)</td>
<td> </td>
<td style="background:#9e9e9e; color:#ffffff; font-family:monospace;">#9e9e9e</td>
</tr>
<tr>
<td>summary</td>
<td style="background:rgba(224, 203, 82,.1); font-family:monospace;">rgba(224, 203, 82,.1)</td>
<td> </td>
<td style="background:#e0cb52; font-family:monospace;">#e0cb52</td>
</tr>
</table>
#>

((https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool Color picker tool))

===Types===
  1. **note**, tip, hint, nota bene  *
  1. abstract, summary
  1. **error**, failure, fail
  1. **important**, attention
  1. **success**
  1. **question**, help, faq
  1. **warning**, caution, attention, danger
  1. issue, bug
  1. **example**, snippet
  1. **quote**, cite

* ##info## is used as a meta term for the formatter.

===Layout===
  * info

%%(html)
<ignore>
<div class="info type-note">
	<div class="info-content">
		<p class="info-title">Info</p>
	</div>
</div>
</ignore>
%% 

  * <div> 
  * <aside>
  * <p>

##<ignore>## is terminator tag for ((/Dev/Projects/Typografica Paragrafica)), gets parsed away in the process

====Icon====
=====background:=====
%%(hl css)
span.icon{
/* 	background-size: 16px 16px;*/
	/* ! required for span width -> inline element */
	display: inline-block;
	height: 16px;
	width: 0;
	vertical-align: text-bottom; /* middle */
}

a.external-link .icon {
	background: rgba(0, 0, 0, 0) url('./../icon/web.svg') no-repeat scroll left center;
	padding-left: 17px;
}
%% 
=====before::=====
%%(hl css)
span.icon {
	position: relative;
	padding: 0 1rem 0 0;
	vertical-align: middle; /* text-bottom */
}
.icon::before{
	position: absolute;
	height: 1rem;
	width: 1rem;
}

a.external-link .icon::before {
	content: url('./../icon/web.svg') " ";
}
%% 
===CSS===

color
background
border 
icon


#|
*| # | type | hl | class | icon | svg | syntax |*
|| 1 | default | | | β„Ή | ((https://wackowiki.org/doc/theme/default/icon/light/info.svg width=16))  | ||
|| 2 | error | | | βœ• | ((https://wackowiki.org/doc/theme/default/icon/light/cross.svg width=16)) | ||
|| 3 | example | | | πŸ’‘ | ((https://wackowiki.org/doc/theme/default/icon/light/jabber.svg width=16)) | ||
|| 4 |  | | | | | ||
|| 5 | important | | | ! | ((https://wackowiki.org/doc/theme/default/icon/light/important.svg width=16)) | ||
|| 6 | note | | | ✎ | ((https://wackowiki.org/doc/theme/default/icon/light/edit.svg width=16)) | ||
|| 7 | question | | | ? | | ||
|| 8 | quote | | | ❝ | ((https://wackowiki.org/doc/image/wikiedit/quote.svg width=16)) | ||
|| 9 | success | | | βœ“ | ((https://wackowiki.org/doc/theme/default/icon/light/tick.svg width=16)) | ||
|| 10 | warning | | | ⚠ | ((https://wackowiki.org/doc/theme/default/icon/light/warning.svg width=16)) | ||
|| custom ||
||  | | | | | | ||
|#

====Icons====
=====Unicode=====
%%(hl css).callout.type-fail > .callout-title::before {
	color: #ff5252;
	content: "βœ•"
} %%

πŸ–‰βœŽ βœοΈβš™βš πŸš«β­•βŒπŸž
πŒ†β˜ β˜‘β˜’βœ…πŸ‘€πŸ’₯πŸ‘πŸ”§
β“β—πŸ“ŒπŸ“πŸ’‘β”β•πŸ—‘οΈβ°πŸΎ
β„ΉπŸ“‹πŸ“πŸ”₯βš‘βœ”οΈβœ“βœ”βœ•βœ–

❝❞¢ πŸ·βš™οΈπŸš§

  * ((https://unicode.org/emoji/charts/full-emoji-list.html Full Emoji List))
  * ((https://developer.mozilla.org/de/docs/Web/CSS/::before ::before))

=====SVG=====
%%(hl css).callout.type-fail > .callout-title::before {
	content: url('./../icon/report-bug.svg') " ";
	height: 1rem;
	width: 1rem;
} %%

====wacko.css====
%%(hl css)
/* Callouts: SYNTAX % %(callout type="warning" title="Warning")text% % */

/* 1. default */
.info,
.wrapper {
	/* box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2); */
	position: relative;
	margin: 1em 0;
	padding: .4rem .6rem;
	border: .05rem solid rgb(147, 154, 69,.1);
	border-left: .2rem solid #939a45;
	border-radius: .1rem;
	min-height: 5em;
	overflow: auto;
}

.wrapper-title {
	margin: -.4rem -.6rem .4rem -.6rem;
	padding: .4rem .6rem .4rem 2rem;
/* 	border-bottom: .05rem solid rgba(68,138,255,.1);
	background-color: rgba(68,138,255,.1); */
	font-weight: 700;
}
.info.type-default,
.wrapper.type-default,
.wrapper-title {
	border-bottom: .05rem solid rgb(147, 154, 69,.1);
	background-color: rgb(147, 154, 69,.1);
}
.wrapper > .wrapper-title::before {
	position: absolute;
	left: .6rem;
	color: #939a45;
	font-size: 1rem;
	content: "i";
	height: 1rem;
	width: 1rem;
	font-family: "Times New Roman", Times, serif;
}

/* 2. note */
.info.type-note {
	border-color: rgba(68,138,255,.1);
	border-left-color: #448aff;
}
.info.type-note,
.wrapper.type-note,
.wrapper.type-note > .wrapper-title {
	background-color: rgba(68,138,255,.1);
}
.wrapper.type-note > .wrapper-title {
	border-bottom-color: rgba(68,138,255,.1);
}
.info.type-note > .info-content::before,
.wrapper.type-note > .wrapper-title::before {
	color: #448aff;
	content: "✎";
}

/* 3. warning */
.info.type-warning {
	border-color: rgba(255,145,0,.1);
	border-left-color: #ff9100;
}
.info.type-warning,
.wrapper.type-warning,
.wrapper.type-warning > .wrapper-title {
	background-color: rgba(255,145,0,.1);
}
.wrapper.type-warning > .wrapper-title {
	border-bottom-color: rgba(255,145,0,.1);
}
.info.type-warning > .info-content::before,
.wrapper.type-warning > .wrapper-title::before {
	color: #ff9100;
	content: "⚠";
	/* content: url('./../icon/warning.svg') " "; */
}

/* 4. success */
.info.type-success {
	border-color: rgba(100,221,23,.1);
	border-left-color: #64dd17;
}
.info.type-success,
.wrapper.type-success,
.wrapper.type-success > .wrapper-title {
	background-color: rgba(100,221,23,.1);
}
.wrapper.type-success > .wrapper-title {
	border-bottom-color: rgba(100,221,23,.1);
}
.info.type-success > .info-content::before,
.wrapper.type-success > .wrapper-title::before {
	color: #64dd17;
	content: "βœ“";
}

/* 5. question */
.info.type-question {
	border-color: rgba(224, 203, 82,.1);
	border-left-color: #e0cb52;
}
.info.type-question,
.wrapper.type-question,
.wrapper.type-question > .wrapper-title {
	background-color: rgba(224, 203, 82,.1);
}
.wrapper.type-question > .wrapper-title {
	border-bottom-color: rgba(224, 203, 82,.1);
}
.info.type-question > .info-content::before,
.wrapper.type-question > .wrapper-title::before {
	color: #e0cb52;
	content: "?";
}

/* 6. error */
.info.type-error {
	border-color: rgba(255,82,82,.1);
	border-left-color: #ff5252;
}
.info.type-error,
.wrapper.type-error,
.wrapper.type-error > .wrapper-title {
	background-color: rgba(255,82,82,.1);
}
.wrapper.type-error > .wrapper-title {
	border-bottom-color: rgba(255,82,82,.1);
}
.info.type-error > .info-content::before,
.wrapper.type-error > .wrapper-title::before {
	color: #ff5252;
	content: "βœ•";
	/* content: url('./../icon/cross.svg') " ";
	height: 1rem;
	width: 1rem; */
}

/* 7. example */
.info.type-example {
	border-left-color: #651fff;
}
.info.type-example,
.wrapper.type-example,
.wrapper.type-example > .wrapper-title {
	background-color: rgba(101,31,255,.1);
}
.wrapper.type-example > .wrapper-title {
	border-bottom-color: rgba(101,31,255,.1);
}
.info.type-example > .info-content::before,
.wrapper.type-example > .wrapper-title::before {
	color: #651fff;
	content: "πŸ’‘";
}

/* 8. quote */
.info.type-quote {
	border-left-color: #9e9e9e;
}
.info.type-quote,
.wrapper.type-quote,
.wrapper.type-quote > .wrapper-title {
	background-color: hsla(0,0%,62%,.1);
}
.wrapper.type-quote > .wrapper-title {
	border-bottom-color: hsla(0,0%,62%,.1);
}
.info.type-quote > .info-content::before,
.wrapper.type-quote > .wrapper-title::before {
	color: #9e9e9e;
	content: "❝";
}
/* 9. important */
.info.type-important {
	border-color: rgba(255,23,68,.1);
	border-left-color: #ff1744;
}
.info.type-important,
.wrapper.type-important,
.wrapper.type-important > .wrapper-title {
	background-color: rgba(255,23,68,.1);
}
.wrapper.type-important > .wrapper-title {
	border-bottom-color: rgba(255,23,68,.1);
}
.info.type-important > .info-content::before,
.wrapper.type-important > .wrapper-title::before {
	color: #ff1744;
	content: "!";
}

/* Info container */
.info-title {
	margin: -.4rem -.6rem .4rem -.6rem;
	padding: .4rem .6rem .4rem .6rem;
	font-weight: 700;
}
.info-content {
	margin: 0;
	padding: .4rem .6rem .4rem 4.4rem;
	/* font-weight: 700; */
}
.info > .info-content::before {
	position: absolute;
	left: 1rem;
	top: .4rem;
	color: #939a45;
	/* font-weight: bold; */
	font-size: 3rem;
	content: "i";
	height: 3rem;
	width: 3rem;
	text-align: center;
	line-height: normal;
	font-family: "Times New Roman", Times, serif;
	/* opacity: 0.4; */
}
}
%%

===Sanitization===
%%(php)
<?php

$sanitize = function($value, $filter)
{
    switch ($filter)
    {
        case 'color':
            if (preg_match('/^(
                (\#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}))|        # color value
                (rgb\(([0-9]{1,3}%?,){2}[0-9]{1,3}%?\))        # rgb triplet
                )$/x', $value))
            {
                return $value;
            }
            break;
        case 'width':
            if (preg_match('/^\d*\.?\d+(%|px|em|ex|pt|cm|mm|pi|in)$/', $value))
            {
                return $value;
            }
            break;
        case 'class':
            if (preg_match('/[^A-Za-z0-9_-]/', $value))
            {
                return $value;
            }
            break;
    }
};
%%


===Wrapper===
text
shade
box


#|
*| | box | shade | page | text |*
|| type | + | + | – | - ||
|| title | + | + | – | - ||
||  ||
|| alignment | + | –[[*1]] | –[[*2]] | + ||
|| clear | + | + | – | – ||
||  ||
|| width | + | –[[*1]] | + | –[[*3]] ||
|| column | – | + | – | + ||
||  ||
|| frame | + | + | – | – ||
|| automatic line feed | + | + | + | – ||
|#
[[#1]] This option does not make sense, because the width of the block is always equal to the width of the page.
[[#2]] Only to the left.
[[#3]] If you don't put the line feeds yourself, the block width is fixed by the engine at approximately 90% of the page width.

What exactly is the purpose of the page wrapper in comparison to the text wrapper?
  * visualize
====box====
``(php)
<?php

/*
	%%(Formatter
		wrapper="box"
		[wrapper_align="left | center | right"]
		[wrapper_width="pixel"]
		[wrapper_title="Title"]
		[wrapper_type="default | error | example | important | note | question | quote | success | warning"]
		[col=2|3|4|5]
		[clear])
	content
	%%
*/

$align_class	= '';
$type_class		= '';
$types			= ['default', 'error', 'example', 'important', 'note', 'question', 'quote', 'success', 'warning'];

// defaults
$options['wrapper_type']	??= 'default';
$options['wrapper_title']	??= null;
$options['wrapper_align']	??= 'right';
$options['wrapper_width']	??= 250;
$options['clear']			??= false;
$options['col']				??= false;

if (in_array($options['wrapper_align'], ['center', 'left', 'right']))
{
	// wrapper-* align in wacko.css
	$align_class = ' wrapper-' . $options['wrapper_align'];
}

if (in_array($options['wrapper_type'], $types))
{
	// wrapper type-* in wacko.css
	$type_class = ' type-' . $options['wrapper_type'];
}

$col_class	= $options['col'] ? ' wrapper-col' . (int) $options['col'] : '';

// output wrapper
$tpl->type		= $type_class;
$tpl->align		= $align_class;
$tpl->col		= $col_class;
$tpl->width		= (int) $options['wrapper_width'];
$tpl->t_title	= $options['wrapper_title'] ?? null;
$tpl->text		= $text;

if ($options['clear'])
{
	$tpl->clear = true;
}
``

``
[ === main === ]
<ignore>
	<aside class="wrapper[ ' type ' ][ ' align ' ][ ' col ' ]" style="width: [ ' width ' ]px;">
		[= t _ =
			<p class="wrapper-title">[ ' title | e ' ]</p>
		=]
		<div class="wrapper-content">
[ ' text  // <-- no indention for embeded pre ']
		</div>
	</aside>
	[= clear _ =
		[ ' nonstatic ' ]
		<span class="clearfix"></span>
	=]
</ignore>
``
====shade====
``(php)
<?php

/*
	%%(Formatter
		wrapper="shade"
		[wrapper_title="Title"]
		[wrapper_type="default | error | example | important | note | question | quote | success | warning"]
		[col=2|3|4|5])
	content
	%%
*/

$type_class		= '';
$types			= ['default', 'error', 'example', 'important', 'note', 'question', 'quote', 'success', 'warning'];

// defaults
$options['wrapper_type']	??= 'default';
$options['wrapper_title']	??= null;
$options['col']				??= false;

if (in_array($options['wrapper_type'], $types))
{
	// wrapper type-* in wacko.css
	$type_class = ' type-' . $options['wrapper_type'];
}

$col_class	= $options['col'] ? ' wrapper-col' . (int) $options['col'] : '';

// output wrapper
$tpl->type		= $type_class;
$tpl->col		= $col_class;
$tpl->t_title	= $options['wrapper_title'] ?? null;
$tpl->text		= $text;
``


``
[ === main === ]
<ignore>
	<div class="wrapper[ ' type ' ]">
		[= t _ =
			<p class="wrapper-title">[ ' title | e ' ]</p>
		=]
		<div class="wrapper-content[ ' col ' ]">
[ ' text  // <-- no indention for embeded pre ']
		</div>
	</div>
</ignore>
``
====page====
``(php)
<?php

/*
	%%(Formatter
		wrapper="page"
		[wrapper_width=200])
	content
	%%
*/

// defaults
$options['wrapper_width']	??= '800';

// output wrapper
$tpl->width		= (int) $options['wrapper_width'];
$tpl->text		= $text;
``


``
[ === main === ]
<ignore>
	<div style="width: [ ' width ' ]px;">
[ ' text  // <-- no indention for embeded pre ']
	</div>
</ignore>
``
====text====
``(php)
<?php

/*
	%%(Formatter
		wrapper="text"
		[wrapper_align="left | center | right | justify"]
		[col=2|3|4|5]
		[clear])
	content
	%%
*/

$align_class = '';

// defaults
$options['wrapper_align']	??= 'left';
$options['clear']			??= false;
$options['col']				??= false;

if (in_array($options['wrapper_align'], ['center', 'justify', 'left', 'right']))
{
	if ($options['wrapper_align'] != 'justify')
	{
		// wrapper-* align in wacko.css
		$align_class = 'wrapper-' . $options['wrapper_align'];
	}

	$text_align		= ' style="text-align: ' . $options['wrapper_align'] . ';"';
}

$col_class	= $options['col'] ? ' wrapper-col' . (int) $options['col'] : '';

// output wrapper
$tpl->align		= $align_class;
$tpl->txtalign	= $text_align;
$tpl->col		= $col_class;
$tpl->text		= $text;

if ($options['clear'])
{
	$tpl->clear = true;
}
``


``
[ === main === ]
<ignore>
	<div class="[ ' align ' ][ ' col ' ]"[ ' txtalign ' ]>
[ ' text  // <-- no indention for embeded pre ']
	</div>
	[= clear _ =
		[ ' nonstatic ' ]
		<span class="clearfix"></span>
	=]
</ignore>
``


===Links===
  1. ((/Forum/Component/Callouts Forum: Callouts))