Send beautifully formatted HTML text to web browsers

The CMS Questions
1

Hi.

A few months ago, I asked for a solution to a comparable task.

But there were various tasks mixed together there.

I would like to revisit the topic with a clear focus on:

Send beautifully formatted HTML text to web browsers

I realise that this is not necessary. But I have always liked tidy source code : )

Has anyone ever done this task before?

There is one particular part of the task that I would very much like to have done:

1 Removal of all superfluous end tags

2 Removal of all superfluous quotation marks around attribute values

I look forward to your advice : ) Thank you.

2

My solution: Using tidy

/site/plugins/tidy/index.php:

<?php

use Kirby\Cms\App;
use Kirby\Template\Template;

class TidyTemplate extends Template
{
    public function render(array $data = []): string
    {
        $kirby = App::instance();
        $html = parent::render($data);

        if (
            $kirby->option('debug') === true &&
            class_exists('tidy')
        ) {
            $config = [
'quote-nbsp' => false,
'indent' => true,
'indent-spaces' => 2,
'wrap' => 0,
'output-html' => true,
'omit-optional-tags' => true,
'custom-tags' => true,
'output-encoding' => 'utf8',
'preserve-entities' => false,
'doctype' => 'html5',
'tidy-mark' => false
            ];
            
            $tidy = new tidy();
            $tidy->parseString($html, $config, 'utf8');
            $tidy->cleanRepair();
            return (string) $tidy;
        }

        return $html;
    }
}

Kirby::plugin('andreas/html-tidy', [
    'components' => [
        'template' => function (App $kirby, string $name, string $contentType = null) {
            return new TidyTemplate($name, $contentType);
        }
    ]
]);

Documentation of the options of tidy:

I don’t know whether this has a strong negative effect on performance.
Perhaps there are elegant ways to counteract this.

What can’t Tidy do?
Remove unnecessary quotation marks in attribute values.

I don’t know if there is a solution for this task.

3

I’d use GitHub - j9t/html-minifier-next: Highly configurable, well-tested, JavaScript-based HTML minifier (maintained fork of html-minifier-terser and html-minifier) for that. It’s original goal ist to minify the source (roughly the opposite of what you want) but its options let you decide what to do and it supports most things you mentioned here.

4

Hi Anselm.

I’ve held Jens Meiert in high regard for 20 years now :slight_smile: He’s an excellent thinker in the field of web standards.

However, if I understand correctly, his j9t tool cannot be misused for the opposite purpose, for my purpose prettifying.

For example: for indentation

Regardless of this, j9t cannot remove optional end tags.

Remove optional tags

does not remove the end tags.

Source code for testing:

<p>Lorem</p>         
<x-karten>      
<p>Ipsum</p>  
</x-karten>

Result:

<p>Lorem</p><x-karten><p>Ipsum</p></x-karten>
5

Your example does not have optional close tags, hence they’re kept as should.

The whitespace (one line) can be configured, however you’re right this tool is not a prettify tool so it can’t fix your indentation. This is usually a task for your code editor using editorconfig or other tools.