A very important feature for good typography is non breaking spaces.
When a user enters the unicode character (my users do not want to use entities of course) for this in the standard text editor in the panel, it cannot be distinguished from a normal space. Is there a solution for this for Kirby’s standard text editor?
In typical word processors, there is an option to display non-printable characters.
There’s a plugin for that: Hidden Characters | Kirby CMS Plugins
Thank you : )
I unzipped the plugin according to the instructions and placed it in:
/sites/plugins/hidden-characters/.
/site/blueprints/pages/default.yml
title: Default Page
columns:
main:
width: 2/3
sections:
fields:
type: fields
fields:
text:
type: textarea
size: huge
sidebar:
width: 1/3
sections:
pages:
type: pages
template: default
files:
type: files
Unfortunately, the visualisations are not working in the editor in the Panel. I have, of course, reloaded the browser page with the panel. Is the plugin working for someone who reads here? Thank you : )
Looks like the visualizations are only shown when the field is focussed. In my test, they are not placed correctly when the textarea buttons are shown and you would have to use some custom Panel CSS to change the top position.
Without CSS changes:
With top position changed to 2 rem:
Thank you very much : ) I can reproduce that here. I will write to the developer. I am delighted with the excellent visualisation!
An alternative would be the markdown field, but the final version for Kirby 5 hasn’t been released yet. A button to show invisibles is built in, and it also comes with some additional features.
Thanks for pointing out the “markdown field” plugin. I know my users quite well. That would overwhelm them.
Great to hear that the final version of Kirby will include a button for invisibles : ) Constant evolution at Kirby : )
The most important thing for me as an admin is that I can easily remove and add buttons in the editor for my users.
Thanks for the hint. Should be fixed with latest release. The fix uses :has() under the hood to modify css on parent element conditionally. Browser support is decent, just drop a word if there is a need to respect older browser versions.
Thanks Jakob! Works perfectly now : )
This is a really nice addition for typography enthusiasts : )
If someone needs an online tool for testing a large number of invisible characters:
@jakobgrommas I use Kirby 5.x, and only v1.0.8 works there. With the current version, invisible characters are not displayed because the path to the font hidden-characters.woff2 cannot be found:
Latest release (2.0.10) works fine for me now.
Thanks for your check, Sonja! Feel free to create issues on GitHub with more specific information (e.g. affected plugin version & browser). Maybe I accidently excluded the assets folder and fixed that with a newer version instead of reverting it.
I didn’t know about the Hidden Characters plugin — that’s a great thing! What I have done before is to create placeholders. I’ll share that simple solution here in case it is useful for someone. The benefit of it is that it might be easier for some editors, can be used literally everywhere (page titles etc) and becomes very visible and intentional. The con is … it is very visible, maybe ugly? Plus you have to remember to use kirbytext() / kirbytextinline() in your templates.
// in config.php
'placeholders' => [
'-' => '­',
'_' => ' ',
'/' => '<wbr>',
],
<?php
// plugins/placeholders/index.php
Kirby::plugin("tamburlane/placeholders", [
"hooks" => [
"kirbytext:before" => function ($text) {
return Str::template($text, option("placeholders", []), [
"start" => "{",
"end" => "}",
]);
},
],
"fieldMethods" => [
// Helper to remove all placeholder tags, e.g in the panel listings
"stripPlaceholders" => function ($field) {
$text = $field->value();
$field->value = Str::template(
$text,
[
"-" => "",
"_" => " ",
"/" => "",
],
[
"start" => "{",
"end" => "}",
"fallback" => "",
]
);
return $field;
// Option: run ->kti() then unhtml
//return str::unhtml(kti($field));
},
],
]);
Note the default start/end is double braces but I changed to single braces to make it less noisy.
Finally another tiny plugin to create a nowrap kirbytag just for fun:
<?php
// plugins/kirbytags/index.php
Kirby::plugin('tamburlane/kirbytags', [
'tags' => [
'nowrap' => [
'html' => function($tag) {
return '<span style="white-space: nowrap;">'.$tag->value().'</span>';
}
],
]
]);
In the panel editors use it like this:
Non-breaking space:
”10{_}kg of sugar”
Soft hyphen:
”The inter{-}national”
Word break opportunity :
”super{/}long{/}identifier{/}name”
Nowrap kirbytag keeps a bunch of words together as a lazy alternative to lots of non-breaking spaces:
”Now presenting (nowrap: Captain Beefheart & His Magic Band) etcetera etcetera”
In your templates
you use $text→kt() or $text→kti() to render.