Html on Bitcoin Stamps

It is possible to encode Bitcoin Stamps with html, css and javascript allowing for high resolution, scalable, complex, animated art.  It also allows for immutable and decentralised storage of text based documents.

Html Bitcoin Stamps Rules

Apart from abiding to the general Bitcoin Stamps rules (https://github.com/mikeinspace/stamps/blob/main/README.md#stamps-abide-by-the-following-rules) Html Stamps have the following rules:

Valid Html Stamps - Bitcoin True

Follows one of the three Bitcoin Stamps Standards.
All css and javascript is either embedded or inline.
No malign code.

Invalid Html Stamps

Non compliant code.
Referencing external links - stylesheets (css/google fonts) or scripts (anime.js/node.js).
Code that creates security risks.

Html Bitcoin Stamps Standards

There are three ways of encoding html on Bitcoin Stamps.

Html5

Bitcoin Stamps support W3C standards, Html5 and CSS3. At the moment no indexers or marketplaces support the title and meta tags. 

Example of responsive html with centered white text on black background: (The script tags are unnecessary if you are not using javascript and are only included for demonstration purposes).

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="AUTHOR">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>BITCOIN STAMPS ARE IMMUTABLE</title>
        <script></script>
        <style>
            body {
                margin: 0;
                height: 100vh;
                width: 100vw;
                display: flex;
                justify-content: center;
                align-items: center;
                background: #000;
            }
            p {
                font-family: Arial, sans-serif;
                font-weight: 700;
                font-size: 10vw;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <p>BITCOIN STAMPS<br>
            ARE IMMUTABLE</p>
    </body>
</html>

Pros: general web standard, title and metatags attributes. Cons: heavy, performance and security issues.

StampHtml

A lighter version of html5 omitting the document type definition, html, head and body tags. All modern browsers can render html without using the above mentioned tags.

Example 1: (Omit the script tags if you are not using javascript).

<script></script>
<style>
    body {
        margin: 0;
        height: 100vh;
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #000;
    }
    p {
        font-family: Arial, sans-serif;
        font-weight: 700;
        font-size: 10vw;
        color: #fff;
    }
</style>
<p>BITCOIN STAMPS<br>
    ARE IMMUTABLE</p>

Example 2:  Browsers will display text without tags and styling.   You can reduce the example code to just encode the (unstyled) text in a Base64 string.

BITCOIN STAMPS<br>
ARE IMMUTABLE

Pros: light. Cons: no support for title or meta tags, performance and security.

SVG

Wrapping the html in a svg container using the <foreignObject> tag.

Example: !!! This is not working !!!

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none" >
    <foreignObject width="100%" height="100%">
        <style>
            div {
                margin: 0;
                height: 100vh;
                width: 100vw;
                display: flex;
                justify-content: center;
                align-items: center;
                background: #000;
            }
            p {
                font-family: Arial, sans-serif;
                font-weight: 700;
                font-size: 10vw;
                color: #fff;
            }
        </style>
        <div xmlns="http://www.w3.org/1999/xhtml">
            <p>BITCOIN STAMPS<br>
            ARE IMMUTABLE</p>
        </div>
    </foreignObject>
</svg>

Pros: No performance and security issues. Cons: No javascript support, not commonly used or known about.

Mint process overview

Choose which standard you want to use.
Minify your html code.
Convert it to Base64 code.
Encode the Base64 string using the STAMP: prefix.  Example: STAMP:iPCFET0NUWVBFIGh0bWw+PGh0bWw… This can be done using a Bitcoin Stamp compatible wallet like the Stamped Ninja Wallet.

Tools for creating Html Stamps

Minify html - https://codebeautify.org/minify-html Base64 encoder - https://codebeautify.org/html-to-base64-converter Html viewer - https://codebeautify.org/htmlviewer Stamped Ninja Wallet - https://wallet.stamped.ninja/ Freewallet - https://freewallet.io/

Hi,

I have written up a draft, offering clarification about html on the Bitcoin Stamps protocol. I believe it’s important to create guidance for artists and creators on how to mint html, css, js on Stamps.   Also for developers, marketplaces and explorers, so they know how to decode, parse and display the code.

Issues that I believe need resolution

1 - A consensus about how to encode html on Bitcoin Stamps.

The draft describes three ways of encoding html.

There has been a suggestion that creators place the html code in a svg container using the <foreignObject> tag.

I understand the developer angle of improved security and performance, but as a creator and someone ill versed in svg I have spent several hours reading up on svg and struggled to create the svg example in the draft.  It would be greatly appreciated if someone can edit the code so that it works (and displays like the two other standard examples).   For css artists or creators only schooled in html and css, this is a mayor hurdle.

Can't indexers, explorers and marketplaces create the same kind of secure container on their side, that encapsulates the html (Base64 string) and controls performance issues ?

2 - Guidance to how indexers, explorers and marketplaces decode/parse the (html) Base64 string and display html stamps

2a - stampchain.io - as I understand is the official Bitcoin Stamp explorer - needs to support live html images.

2b - The “Binary Media” link (at the bottom of a specific html page in the stampchain explorer) should open a new browser tab displaying the stamp (html file). This is general practice with jpeg, png and gif stamps.

On most html stamps the link initiates a download of the html file: https://stampchain.io/asset.html?asset=A1528536217967210108

Here’s one of the few examples of it displaying the stamp when clicking the “Binary Media” link:  https://stampchain.io/asset.html?asset=A1643113086046048689 I would recommend it opens in a new tab.

2c - Will Bitcoin Stamps (indexers and marketplaces) support <title> and <meta> tags ?

2d - Is there any purpose in including other metatags than <meta name="author" content=“NAME”> ?

2e - Would it make sense to add/define some more meta tags ?  One thing I’ve pondered including is a collection name.  Or you can include if the html stamp is part of a directory (Book of Stamps).  Would it make sense to define that the html code is a stamp - does that have any future use cases ?

3 - Security concerns

We have touched upon security risks with html, but there are probably other aspects that reach beyond my scope of knowledge.  This is something that developers need to address. 

4 - Other issues that you are aware of

Remarks

Please comment, critic, improve the verbiage and draft in general, so that we can create clarity about the subject. My angle is from a creator of “normal” Bitcoin Stamps and I have not included thoughts from a dev perspective or issues pertaining to SRC-721s.

There has been a conversation about html on StampedNinja Discord, that I recommend reading up on: https://discord.com/channels/1128691073825378304/1133345469926477915/1136408581109973144

Best wishes,

StampHtml, exemple 2 shouldn't be allowed in any case, would make the parser hard to know if it should be parsed as html or anything else.

What would then be the minimum amount of html code needed ?

<p>BITCOIN STAMPS<br>ARE IMMUTABLE</p>

Or would you need to wrap it ?

<div><p>BITCOIN STAMPS<br>ARE IMMUTABLE</p></div>

I have written up a new draft version, detailing the different Bitcoin Stamps HTML Standards with more code examples and images.

The svgHTML code is now working.

 The naming has been changed from “stampHTML” to “simpleHTML”, since the code is not Bitcoin Stamps specific, but just stripped HTML5. It could be named strippedHTML !!!

I still think the devs or community need to address Issue 2. It would be really great if stampchain.io starts supporting Html Stamps.

May I propose to start Stamp simpleHTML code with <meta charset="UTF-8"> as a way of addressing @SN-Noop 's concerns.

Please comment and critique !

Bitcoin Stamps HTML Standards - draft v2

It is possible to encode Bitcoin Stamps with html, css and javascript allowing for high resolution, scalable, complex, animated art. It also allows for immutable and decentralised storage of text based documents.

Html Stamps Rules

Apart from abiding to the general Bitcoin Stamps rules Html Stamps have the following rules:

Valid Html Stamps - Bitcoin True

Follows the Bitcoin Stamps HTML Standards.
All css and javascript code is either embedded or inline.

Invalid Html Stamps

Non compliant code.
Referencing external links - stylesheets (css/google fonts) or scripts (anime.js/node.js).
Code that creates security risks.

Bitcoin Stamps HTML Standards

There are three ways of encoding html on Bitcoin Stamps. Either using standard HTML5, simpleHTML or svgHTML.

HTML5 - Bitcoin Stamps support W3C standards, HTML5 and CSS3. At the moment no indexers or marketplaces support the title and meta tags.
simpleHTML - A lighter version of HTML5 omitting the document type definition, html, head and body tags.  All modern browsers can render html without using the above mentioned tags.
svgHTML - It is possible to wrap html in a svg container using the <foreignObject> tag.  This eliminates certain security and rendering issues with html.

Examples

A range of html examples using the three different Bitcoin Stamps Html Standards.

Basic Templates

A basic text-focused template, using a minimum amount of html code. The example uses browsers default styling. A serif black font on white background, positioned top left.   It would probably look better with a small margin and a bigger font size.

HTML5

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="AUTHOR">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>TITLE</title>
    </head>
    <body>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
        <p>
            Duis pulvinar gravida diam, id scelerisque risus auctor sit amet. Morbi vitae imperdiet leo. Duis id justo dictum, vestibulum erat a, dapibus tellus. Donec neque nibh, porttitor at fringilla et, cursus eu tellus. Nullam sed quam molestie, commodo tellus in, dictum neque. Sed sed posuere elit, ac rutrum libero. Fusce dui magna, commodo et placerat nec, efficitur ut neque.
        </p>
        <p><b>Vivamus commodo ac sem vel efficitur.</b></p>
        <p>
            Aliquam mollis lacus ut eleifend luctus. Aliquam erat volutpat. Vestibulum imperdiet felis quis placerat placerat. Morbi ut lorem ac dolor lobortis commodo. Suspendisse potenti.<br>
            Vestibulum interdum metus ac ex lacinia interdum.
        </p>
    </body>
</html>

NOTE

If Author and Title are not defined, then they may as well be omitted.
The default browser styling can be changed by adding the <style></style> tags to the document (between the <head> and <body> tags) and styling with preferred css.

simpleHTML

<meta charset=“UTF-8">
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
    Duis pulvinar gravida diam, id scelerisque risus auctor sit amet. Morbi vitae imperdiet leo. Duis id justo dictum, vestibulum erat a, dapibus tellus. Donec neque nibh, porttitor at fringilla et, cursus eu tellus. Nullam sed quam molestie, commodo tellus in, dictum neque. Sed sed posuere elit, ac rutrum libero. Fusce dui magna, commodo et placerat nec, efficitur ut neque.
</p>
<p><b>Vivamus commodo ac sem vel efficitur.</b></p>
<p>
    Aliquam mollis lacus ut eleifend luctus. Aliquam erat volutpat. Vestibulum imperdiet felis quis placerat placerat. Morbi ut lorem ac dolor lobortis commodo. Suspendisse potenti.<br>
    Vestibulum interdum metus ac ex lacinia interdum.
</p>

NOTE

Omitting the <head> and <body> tags may slightly alter the positioning of text and images, compared to HTML5..
The default browser styling can be changed by adding the <style></style> tags to the document (between the meta charset=“UTF-8"> and <p> tags) and styling with css.
meta charset=“UTF-8"> Browsers need to be informed about what type of Unicode character set is used. Adding this to the top of the document also helps Stamps indexers identify that the (encoded Base64) text is a html document and parse it accordingly.

svgHTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700">
    <foreignObject width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </p>
            <p>
                Duis pulvinar gravida diam, id scelerisque risus auctor sit amet. Morbi vitae imperdiet leo. Duis id justo dictum, vestibulum erat a, dapibus tellus. Donec neque nibh, porttitor at fringilla et, cursus eu tellus. Nullam sed quam molestie, commodo tellus in, dictum neque. Sed sed posuere elit, ac rutrum libero. Fusce dui magna, commodo et placerat nec, efficitur ut neque.
            </p>
            <p><b>Vivamus commodo ac sem vel efficitur.</b></p>
            <p>
                Aliquam mollis lacus ut eleifend luctus. Aliquam erat volutpat. Vestibulum imperdiet felis quis placerat placerat. Morbi ut lorem ac dolor lobortis commodo. Suspendisse potenti. Vestibulum interdum metus ac ex lacinia interdum.
            </p>
        </div>
    </foreignObject>
</svg>

NOTE

The viewBox="0 0 700 700" defines the size of the content and thereby controls the size of the font.
Resizing the browser window also resizes the content and the font size.
There is no possibility of scrolling the document in a browser.
It is mandatory to include the XHTML namespace on the outermost or root element - the <div> tag.

Elaborate Templates

Examples that show more advanced css styling. The text is positioned center screen and uses viewport sizing vw - to make it responsive. The middle word TO is styled slightly different. 

HTML5

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="AUTHOR">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>TITLE</title>
        <style>
            html, body {
                margin: 0;
                height: 100%;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                background: #4D4D4D;
            }
            p {
                font-family: Futura, Arial, sans-serif;
                font-weight: 700;
                font-size: 8vw;
                color: #F7931A;
                text-align: center;
            }
            span {
                font-size: 10vw;
                opacity: 0.8;
            }
        </style>
    </head>
    <body>
        <p>
            FREEDOM<br>
            <span>TO</span><br>
            TRANSACT
        </p>
    </body>
</html>

NOTE

The css can be trimmed even more.  You can merge the p tag styling with the html, body tag, use font shorthand properties and omit the Title and Author - if they aren’t needed.

simpleHTML

<meta charset="UTF-8">
<title>TITLE</title>
<style>
    body {
        margin: 0;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #4D4D4D;
        font: 700 8vw Futura, Arial, sans-serif;
        color: #F7931A;
        text-align: center;
    }
    a {
        font-size: 10vw;
        opacity: 0.8;
        }
</style>
<p>
    FREEDOM<br>
    <a>TO</a><br>
    TRANSACT
</p>

NOTE

Both the HTML5 template and the simpleHTML code generate the same output.
The css can be trimmed even more by omitting the <title> tag - if it isn’t needed.
Instead of using the <span> tag for styling, you can save characters and bytes by using <a>, <b> or<i> and similar type tags.

svgHTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" >
    <foreignObject width="100%" height="100%">
        <style>
            svg {
                background: #4D4D4D;
            }
            a {
                margin: 0;
                height: 100%;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                font: 700 8vw Futura, Arial, sans-serif;  
                color: #F7931A;
                text-align: center;
            }
            b {
                display: block;
            }
            i {
                font-style: normal;
                font-size: 10vw;
                opacity: 0.8;
                }
        </style>
        <a xmlns="http://www.w3.org/1999/xhtml">
            <b>
            <p style="margin-bottom: -1em;">
                FREEDOM
            </p>    
            <p style="margin-bottom: -1em;">
                <i>TO</i>
            </p>
            <p>    
                TRANSACT
            </p>
            </b>
        </a>
    </foreignObject>
</svg>

NOTE

The font size is dependant upon both font-size: 10vw; and viewBox="0 0 500 500" definitions.
Instead of using <div> and <span> tags for styling, you can save characters by using <a>, <b> and/or <I>.
You cannot use <br> for linebreaks in a svg container, therefore the inline margin-bottom: -1em; styling - you could embed it with css, if you had more paragraphs.

Extra Templates

The following examples are all made using simpleHTML. A template with a simple circle, showcasing css art. An ascii art specific template. A template showing the use of javascript.

CSS ART

<meta charset="UTF-8">
<style>
    body {
        margin: 0;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #ffb7c6;
    }
    a {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #ffe9b8;
    }
</style>
<a></a>

NOTE

<meta charset="UTF-8"> could be omitted, since there is no use of characters or text. It would however make it harder for indexers to recognise that the (Base64) text is html code.
Instead of styling the circle with #circle { width: 100px; hei... } and <div id="circle"></div> you can save characters by using <a> instead.

ASCII ART

<meta charset="UTF-8">
<style>
    body {
        margin: 0;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: blue;
        font-size: 3vw;
        color: white;
    }
</style>
<pre>
 ____________________
|  |              |  |
|[]|              |[]|
|  |     BOOT     |  |
|  |     DISK     |  |
|  |              |  |
|  |______________|  |
|                    |
|     ____________   |
|    | __      |  |  |
|    ||  |     |  |  |
|    ||__|     |  |  |
|____|_________|__|__|
</pre>

NOTE

The <pre> tag, lets you preserve multiple white spaces and uses monospace font.

CSS WITH JAVASCRIPT

<meta charset="UTF-8">
<title>TITLE</title>
<script>
    var opacity = 0; 
    var intervalID = 0; 
    window.onload = fadeIn; 
    function fadeIn() { 
        setInterval(show, 50); 
    } 
    function show() { 
        var body = document.getElementById("z"); 
        opacity = Number(window.getComputedStyle(body) 
                        .getPropertyValue("opacity")); 
        if (opacity < 1) { 
            opacity = opacity + 0.05; 
            body.style.opacity = opacity
        } else { 
            clearInterval(intervalID); 
        } 
    } 
</script>
<style>
    body {
        margin: 0;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #4D4D4D;    
    }
    p {
        font: 700 8vw Futura, Arial, sans-serif;
        color: #F7931A;
        text-align: center;
        opacity: 0;
        }
    a {
        font-size: 10vw;
        opacity: 0.8;
        }
</style>
<p id="z">
    FREEDOM<br>
    <a>TO</a><br>
    TRANSACT
</p>

NOTE

The javascript code makes the text fade in on load.
Javascript can be embedded in css <script></script> tags or inline.
It would demand less characters if the animation was done with css @keyframes.
<p id="z"> it would be more descriptive to give the id a proper name, but using single characters saves bytes.

Additional resources

Mint process overview

Choose which standard you want to use.
Create your html/css/js file.
Minify your html code.
Encode it to Base64. This will be an alphanumeric text string.
Double check the code, by decoding the Base64 text string and viewing the (minified) html code in a html viewer. This is not mandatory - but advisable - since spaces or line-breaks in certain instances can be deleted when minifying the html document. Another example is the font "Arial Black" will by some minifiers be changed to "Arial #000".
Mint the Base64 string using the STAMP: prefix.  Example: STAMP:iPCFET0NUWVBFIGh0bWw+PGh0bWw… This can be done using a Bitcoin Stamp compatible wallet like the Stamped Ninja Wallet or FreeWallet or on a site like OpenStamp.

Tools for creating Html Stamps

I have written up a new draft version, detailing the different Bitcoin Stamps HTML Standards with more code examples and images.

The svgHTML code is now working.

 The naming has been changed from “stampHTML” to “simpleHTML”, since the code is not Bitcoin Stamps specific, but just stripped HTML5. It could be named strippedHTML !!!

I still think the devs or community need to address Issue 2. It would be really great if stampchain.io starts supporting Html Stamps.

May I propose to start Stamp simpleHTML code with <meta charset="UTF-8"> as a way of addressing @SN-Noop 's concerns.

Please comment and critique !

Awesome to see that stampchain supports live preview of Html stamps ! I have noticed that older stamps aren't updated/supported yet. If someone could look into that, it would be great. I.g. 18447,, 71653, 73352, 73816, 73817, 37691, 69475, 73932, ....

2c - Will Bitcoin Stamps (indexers and marketplaces) support and <meta> tags ?</p> </blockquote> <p>Any opinions on a standard way of supporting these - common, but unnecessary- tags or shall we just let it be up to marketplaces if they want to include the info (if provided) ?</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

mikeinspace / stamps