stream_socket_client

Description
Syntax
Examples
Links

Description

The stream_socket_client of Stream for PHP open Internet or Unix domain socket connection.

Syntax

stream_socket_client(
    string $address,
    int &$error_code = null,
    string &$error_message = null,
    ?float $timeout = null,
    int $flags = STREAM_CLIENT_CONNECT,
    ?resource $context = null
): resource|false

Parameters

error_code

Will be set to the system level error number if connection fails.

error_message

Will be set to the system level error message if the connection fails.

timeout

Number of seconds until the connect() system call should timeout.

NOTE: This parameter only applies when not making asynchronous connection attempts.

NOTE: To set a timeout for reading/writing data over the socket, use the stream_set_timeout(), as the timeout only applies while making connecting the socket.

Bitmask field which may be set to any combination of connection flags. Currently the select of connection flags is limited to STREAM_CLIENT_CONNECT (default), STREAM_CLIENT_ASYNC_CONNECT and STREAM_CLIENT_PERSISTENT.

context

A valid context resource created with stream_context_create().

Return

On success a stream resource is returned which may be used together with the other file functions (such as fgets(), fgetss(), fwrite(), fclose(), and feof()), false on failure.

Examples

1 · address

<?

$transport = "tls";
$host = "osbo.com";
$port = "443";

$address = $transport . "://" . $host . ":" . $port;

$return = stream_socket_client($address);

    if(!$return)
    {
        exit;
    }

    $string = "GET / HTTP/1.1\r\n";
    $string .= "Host: $host\r\n";
    $string .= "Connection: close\r\n\r\n";

    fwrite($return, $string);

    $length = 1024;

    while(!feof($return))
    {
        echo fgets($return, $length);
    }

fclose($return);

HTTP/1.1 200 OK
Connection: close
Cache-Control: no-store,no-transform
link: <https://osbo.com/>;rel="canonical"
x-robots-tag: noarchive,noimageindex
Content-Type: text/html; charset=UTF-8
Transfer-Encoding: chunked
Date: Fri, 23 Jan 2026 04:02:29 GMT
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
X-Content-Type-Options: nosniff

10000
<!doctype html><html lang=en><head><meta charset=utf-8><meta content=width=device-width name=viewport><meta content=osbo.com name=description><title>osbo.com</title><link defer href=/assets/css/ rel=stylesheet><link defer href=/assets/svg/ rel=icon><script defer src=/assets/js/></script><script>var _mtm = window._mtm = window._mtm || [];_mtm.push({"mtm.startTime": (new Date().getTime()), "event": "mtm.Start"});(function(){var d=document, g=d.createElement("script"), s=d.querySelector("script");g.async=true; g.src="/matomo/js/container_Gm7CI6wt.js"; s.parentNode.insertBefore(g,s);})();</script></head><body><div id=foreground><header><a href=/><img alt=Home id=home src=/assets/svg/Home.svg title=Home></a><img alt=Menu id=menu src=/assets/svg/Menu.svg title=Menu><form action=/search/><input id=search-site name=search-site title=Search type=search></form></header><footer><a href=#><img alt=Top id=top src=/assets/svg/Top.svg title=Top></a></footer></div><div id=zeroground><div id=content><header><div id=topnav><a href=/Jesus/>Jesus</a> · <a href=/Bible/>Bible</a> · <a href=/html/>HTML</a> · <a href=/css/>CSS</a> · <a href=/js/>JS</a> · <a href=/php/>PHP</a> · <a href=/svg/>SVG</a> · <a href=/applications/>Applications</a></div></header><div class=banner><script defer src=https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4239362730750625 crossorigin=anonymous></script><ins class=adsbygoogle data-ad-client=ca-pub-4239362730750625 data-ad-slot=5564639719><a href=https://samaritanspurse.org/occ/ target=_blank><img alt="Samaritan's Purse Operation Christmas Child" src=/assets/svg/SamaritansPurseOperationChristmasChild3.svg title="Samaritan's Purse Operation Christmas Child"></a></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><main><h1><a href>Bible Image Editor</a></h1><div id=myid style=height:100vh><script>const Bibleversionarray =
        [
            [
                "العربية",
                [
                    ["ASVD", "الكتاب المقدس ترجمة فانديك وسميث (ASVD)"],
                ],
            ],
            [
                "česky",
                [
                    ["CSBKR", "Bible Kralická 1613 (CSBKR)"],
                ],
            ],
            [
                "Dansk",
                [
                    ["DA1871", "Danske Bibel 1871 (DA1871)"],
                ],
            ],
            [
                "Deutsch",
                [
                    ["DELUT", "Luther Bible 1912 (DELUT)"],
                    ["ELB", "Elberfelder 1905 (ELB)"],
                    ["ELB71", "Elberfelder 1871 (ELB71)"],
                ],
            ],
            [
                "English",
                [
                    ["ASV", "American Standard Version (ASV)"],
                    ["KJV", "King James Version (KJV)"],
                    ["WEB", "World English Bible (WEB)"],
                ],
            ],
            [
                "Español",
                [
                    ["RVES", "Reina-Valera Antigua (RVES)"],
                ],
            ],
            [
                "Suomi",
                [
                    ["FI1776", "Finnish 1776 (FI1776)"],
                    ["FINPR", "Finnish 1938 (FINPR)"],
                ],
            ],
            [
                "Français",
                [
                    ["FMAR", "Martin 1744 (FMAR)"],
                    ["FRDBY", "Bible Darby en français (FRDBY)"],
                    ["LSG", "Louis Segond 1910 (LSG)"],
                    ["OST", "Ostervald (OST)"],
                ],
            ],
            [
                "Magyar",
                [
                    ["KAR", "Károli 1590 (KAR)"],
                ],
            ],
            [
                "Bahasa Indonesia",
                [
                    ["IDBAR", "Terjemahan Baru (IDBAR)"],
                ],
            ],
            [
                "Italiano",
                [
                    ["IGD", "Giovanni Diodati Bibbia (IGD)"],
                    ["ITRIV", "Italian Riveduta 1927 (ITRIV)"],
                ],
            ],
            [
                "日本語",
                [
                    ["JA1955", "Colloquial Japanese 1955 (JA1955)"],
                ],
            ],
            [
                "Malagasy",
                [
                    ["MG1865", "Malagasy Bible (MG1865)"],
                ],
            ],
            [
                "te reo Māori",
                [
                    ["MAOR", "Maori Bible (MAOR)"],
                ],
            ],
            [
                "한국어",
                [
                    ["KORVB", "개역한글 (KORVB)"],
                ],
            ],
            [
                "Nederlands",
                [
                    ["SV1750", "Statenvertaling (SV1750)"],
                ],
            ],
            [
                "Norsk",
                [
                    ["NORSK", "Det Norsk Bibelselskap 1930 (NORSK)"],
                ],
            ],
            [
                "Polski",
                [
                    ["PBG", "Biblia Gdańska (PBG)"],
                ],
            ],
            [
                "Português",
                [
                    ["AA", "Almeida Atualizada (AA)"],
                ],
            ],
            [
                "Română",
                [
                    ["RMNN", "Romanian Cornilescu 1928 (RMNN)"],
                    ["VDC", "Versiunea Dumitru Cornilescu (VDC)"],
                    ["VDCC", "Versiunea Dumitru Cornilescu Corectată (VDCC)"],
                ],
            ],
            [
                "Pyccкий",
                [
                    ["RURSV", "Синодальный перевод (RURSV)"],
                ],
            ],
            [
                "Shqip",
                [
                    ["ALBB", "Albanian Bible (ALBB)"],
                ],
            ],
            [
                "Svenska",
                [
                    ["SK73", "Karl XII 1873 (SK73)"],
                    ["SVEN", "Svenska 1917 (SVEN)"],
                ],
            ],
            [
                "Wikang Tagalog",
                [
                    ["TLAB", "Ang Biblia (TLAB)"],
                ],
            ],
            [
                "українська",
                [
                    ["UBIO", "Біблія в пер. Івана Огієнка 1962 (UBIO)"],
                    ["UKRK", "Біблія в пер. П.Куліша та І.Пулюя 1905 (UKRK)"],
                ],
            ],
            [
                "Tiếng Việt",
                [
                    ["VI1934", "Vietnamese Bible 1934 (VI1934)"],
                ],
            ],
            [
                "简体中文",
                [
                    ["CUVS", "简体和合本 (CUVS)"],
                ],
            ],
            [
                "繁體中文",
                [
                    ["CUV", "和合本 (CUV)"],
                ],
            ],
        ];
        const Biblebookarray =
        [
            //"Genesis",
            //"John",
        ];
        const Bibleversearray =
        [
            //"In the beginning God created the heaven and the earth.",
            //"For God so loved the world, that he gave his only begotten Son, that whosoever believeth in him should not perish, but have everlasting life.",
        ];
        const tabarray =
        [
            "canvas",
            "image",
            "message",
            "reference",
            "passage",
            "save",
        ];
        const borderstylearray =
        [
            "none",
            "dashed",
            "dotted",
            "double",
            "groove",
            //"hidden",
            "inset",
            "outset",
            "ridge",
            "solid",
        ];
        const horizontalarray =
        [
            "left",
            "center",
            "right",
            "justify",
        ];
        const verticalarray =
        [
            "start",
            "center",
            "end",
        ];
        const writingmodearray =
        [
            "horizontal-tb",
            "vertical-lr",
            "vertical-rl",
            "sideways-lr",
            "sideways-rl",
        ];
        const fontfamilyarray =
        [
            //generic family
            "cursive",
            "fantasy",
            "monospace",
            "sans-serif",
            "serif",

            //web safe
            //"arial",//sans-serif
            //"brush script",//serif
            "courier",
            //"garamond",//serif
            "georgia",
            "tahoma",
            //"times new roman",//serif
            "trebuchet ms",
            "verdana",

            //popular
            //"avenir",//serif
            //"bodoni",//serif
            "franklin gothic",
            //"frutiger",//serif
            //"futura",//serif
            //"helvetica",//sans-serif
            //"rockwell",//serif
            //"univers",//serif
        ];
        const fontstylearray =
        [
            "normal",
            "italic",
            //"oblique",
        ];
        const fontvariantarray =
        [
            "normal",
            "small-caps",
        ];
        const fontweightarray =
        [
            "normal",
            "bold",
            //"bolder",
            //"lighter",
        ];
        const maxheight = 10000;
        const maxwidth = 10000;
        const image = document.createElement("img");
        const text = document.createElement("img");

        function bodyload()
        {
            //const body = document.body;
            //body.id = "myid";

            const style = myid.style;
            //style.height = "100vh";
            style.overflow = "hidden";
        }
        addEventListener("load", bodyload);

        function window1load()
        {
            const div = document.createElement("div");
            div.id = "window1";
            myid.append(div);

            const style = div.style;
            style.height = "50vh";
            style.margin = "0";
        }
        addEventListener("load", window1load);

        function window2load()
        {
            const div = document.createElement("div");
            div.id = "window2";
            myid.append(div);

            const style = div.style;
            style.height = "32px";
            style.margin = "16px 0 0";
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", window2load);

        function window3load()
        {
            const div = document.createElement("div");
            div.id = "window3";
            myid.append(div);

            const style = div.style;
            style.height = "calc(50vh - 48px)";
            style.margin = "0";
            style.overflowX = "hidden";
        }
        addEventListener("load", window3load);

        function canvasload()
        {
            const canvas = document.createElement("canvas");
            canvas.height = 1080;
            canvas.id = "canvas";
            canvas.width = 1920;
            window1.append(canvas);

            const style = canvas.style;
            style.position = "relative";
        }
        addEventListener("load", canvasload);

        function canvasupdate()
        {
            //console.log("canup");
            const ww = innerWidth - 96;
            const wh = innerHeight * 0.5;
            const cw = canvas.width;
            const ch = canvas.height;
            const x = (ww - cw) * 0.5;
            const y = (wh - ch) * 0.5;
            const sw = ww / cw;
            const sh = wh / ch;
            const s = Math.min(sw, sh);

            const style = canvas.style;
            style.left = `${x}px`;
            style.top = `${y}px`;
            style.transform = `scale(${s})`;
        }
        addEventListener("load", canvasupdate);

        function resize()
        {
            canvasupdate();
        }
        addEventListener("resize", resize);

        function svgupdate()
        {
            //console.log("svgup");
            const svg =
`<svg height="${canvas.height}" width="${canvas.width}" xmlns="http://www.w3.org/2000/svg">
    <style>
        div
        {
            background-color: ${canvas.backgroundcolor};
            height: 100%;
        }
        img
        {
            box-sizing: border-box;
            position: absolute;

            background-color: ${image.backgroundcolor};
            filter: blur(${image.filterblur}px) brightness(${image.filterbrightness}%) contrast(${image.filtercontrast}%) grayscale(${image.filtergrayscale}%) hue-rotate(${image.filterhuerotate}deg) invert(${image.filterinvert}%) opacity(${image.filteropacity}%) saturate(${image.filtersaturate}%) sepia(${image.filtersepia}%);
            height: ${image.height}px;
            left: ${image.myx}px;
            margin: ${image.margintop}px ${image.marginright}px ${image.marginbottom}px ${image.marginleft}px;
            padding: ${image.paddingtop}px ${image.paddingright}px ${image.paddingbottom}px ${image.paddingleft}px;
            object-fit: ${image.objectfit};
            //opacity: ${image.opacity};
            top: ${image.myy}px;
            width: ${image.width}px;
        }
        text
        {
            box-sizing: border-box;
            display: grid;
            overflow: hidden;
            position: absolute;
        }
        text:nth-of-type(1)
        {
            white-space: pre;

            align-items: ${text.messagevertical};
            backdrop-filter: blur(${text.messagebackdropfilterblur}px) brightness(${text.messagebackdropfilterbrightness}%) contrast(${text.messagebackdropfiltercontrast}%) grayscale(${text.messagebackdropfiltergrayscale}%) hue-rotate(${text.messagebackdropfilterhuerotate}deg) invert(${text.messagebackdropfilterinvert}%) saturate(${text.messagebackdropfiltersaturate}%) sepia(${text.messagebackdropfiltersepia}%);
            background-color: ${text.messagebackgroundcolor};
            border-color: ${text.messagebordercolor};
            border-radius: ${text.messageborderradius}px;
            border-style: ${text.messageborderstyle};
            border-width: ${text.messageborderwidth}px;
            color: ${text.messagecolor};
            font-family: ${text.messagefontfamily};
            font-size: ${text.messagefontsize}px;
            font-style: ${text.messagefontstyle};
            font-variant: ${text.messagefontvariant};
            font-weight: ${text.messagefontweight};
            height: ${text.messageheight}px;
            left: ${text.messagex}px;
            margin: ${text.messagemargintop}px ${text.messagemarginright}px ${text.messagemarginbottom}px ${text.messagemarginleft}px;
            padding: ${text.messagepaddingtop}px ${text.messagepaddingright}px ${text.messagepaddingbottom}px ${text.messagepaddingleft}px;
            text-align: ${text.messagehorizontal};
            top: ${text.messagey}px;
            width: ${text.messagewidth}px;
            writing-mode: ${text.messagewritingmode};
        }
        text:nth-of-type(2)
        {
            align-items: ${text.referencevertical};
            background-color: ${text.referencebackgroundcolor};
            border-color: ${text.referencebordercolor};
            border-radius: ${text.referenceborderradius}px;
            border-style: ${text.referenceborderstyle};
            border-width: ${text.referenceborderwidth}px;
            color: ${text.referencecolor};
            font-family: ${text.referencefontfamily};
            font-size: ${text.referencefontsize}px;
            font-style: ${text.referencefontstyle};
            font-variant: ${text.referencefontvariant};
            font-weight: ${text.referencefontweight};
            height: ${text.referenceheight}px;
            left: ${text.referencex}px;
            margin: ${text.referencemargintop}px ${text.referencemarginright}px ${text.referencemarginbottom}px ${text.referencemarginleft}px;
            padding: ${text.referencepaddingtop}px ${text.referencepaddingright}px ${text.referencepaddingbottom}px ${text.referencepaddingleft}px;
            text-align: ${text.referencehorizontal};
            top: ${text.referencey}px;
            width: ${text.referencewidth}px;
            writing-mode: ${text.referencewritingmode};
        }
        text:nth-of-type(3)
        {
            align-items: ${text.passagevertical};
            background-color: ${text.passagebackgroundcolor};
            border-color: ${text.passagebordercolor};
            border-radius: ${text.passageborderradius}px;
            border-style: ${text.passageborderstyle};
            border-width: ${text.passageborderwidth}px;
            color: ${text.passagecolor};
            font-family: ${text.passagefontfamily};
            font-size: ${text.passagefontsize}px;
            font-style: ${text.passagefontstyle};
            font-variant: ${text.passagefontvariant};
            font-weight: ${text.passagefontweight};
            height: ${text.passageheight}px;
            left: ${text.passagex}px;
            margin: ${text.passagemargintop}px ${text.passagemarginright}px ${text.passagemarginbottom}px ${text.passagemarginleft}px;
            padding: ${text.passagepaddingtop}px ${text.passagepaddingright}px ${text.passagepaddingbottom}px ${text.passagepaddingleft}px;
            text-align: ${text.passagehorizontal};
            top: ${text.passagey}px;
            width: ${text.passagewidth}px;
            writing-mode: ${text.passagewritingmode};
        }
    </style>
    <foreignObject height="100%" width="100%">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <img src="${image.dataurl}"/>
            <text>${text.messagetext}</text>
            <text>${text.referencetextbook}${text.referencetextchapter}${text.referencetextverse}${text.referencetextverseend}${text.referencetextversion}</text>
            <text>${text.passagetextverse}${text.passagetextverseend}</text>
        </div>
    </foreignObject>
</svg>`;
            text.src = `data:image/svg+xml,${svg}`;
        }

        function textupdate()
        {
            const context = canvas.getContext("2d");
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.drawImage(text, 0, 0);
        }
        text.addEventListener("load", textupdate);






        function tabload()
        {
            for(const [key, value] of tabarray.entries())
            {
                const button = document.createElement("button");
                button.className = "tab";
                if(value == "save")
                {
                    button.className = "tab current";
                }
                button.id = "tab" + tabarray[key];
                //button.innerHTML = `${key + 1}) ${tabarray[key]}`;
                button.innerHTML = tabarray[key];
                button.value = "tabcontent" + tabarray[key];
                button.addEventListener("click", tabupdate);
                window2.append(button);

                /*
                const style = button.style;
                style.backgroundColor = "#000";
                style.color = "#fff";
                style.border = "none";
                style.fontSize = "16px";
                style.padding = "16px";
                style.transition = "0.5s";
                //*/
            }
        }
        addEventListener("load", tabload);


        function tabupdate(m)
        {
            const mytarget = m.target;

            //*
            for(const t of document.querySelectorAll(".tab"))
            {
                //const style = t.style;
                //style.backgroundColor = "#000";
                //style.color = "#fff";
                t.className = t.className.replace(" current", "");
            }
            //const style = document.querySelector("#"+mytarget.id).style;
            //style.backgroundColor = "#fff";
            //style.color = "#000";
            mytarget.className += " current";
            //*/

            for(const t of document.querySelectorAll(".tabcontent"))
            {
                const style = t.style;
                style.contentVisibility = "hidden";
            }
            document.querySelector("#"+mytarget.value).style.contentVisibility = "visible";
        }

        function tabcontentload()
        {
            for(const [key, value] of tabarray.entries())
            {
                const div = document.createElement("div");
                div.className = "tabcontent";
                div.id = "tabcontent" + tabarray[key];
                window3.append(div);

                //*
                const style = div.style;
                if(value != "save")
                {
                    style.contentVisibility = "hidden";
                }
                style.margin = "0";
                //style.transitionDuration = "0.5s";
                //*/
            }
        }
        addEventListener("load", tabcontentload);






        function canvaswidthload()
        {
            const div = document.createElement("div");
            div.id = "canvaswidth";
            div.innerHTML = "width";
            tabcontentcanvas.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", canvaswidthload);

        function canvaswidthnumberload()
        {
            const br = document.createElement("br");
            canvaswidth.append(br);

            const input = document.createElement("input");
            input.id = "canvaswidthnumber";
            input.max = maxwidth;
            input.min = 0;
            input.type = "number";
            input.value = canvas.width;
            input.addEventListener("input", canvaswidthnumberupdate);
            canvaswidth.append(input);

            //canvaswidthnumberupdate();
        }
        addEventListener("load", canvaswidthnumberload);

        function canvaswidthnumberupdate()
        {
            const v = canvaswidthnumber.value;

            canvaswidthrange.value = v;
            canvas.width = v;

            canvasupdate();
            svgupdate();
        }

        function canvaswidthrangeload()
        {
            //const br = document.createElement("br");
            //canvaswidth.append(br);

            const input = document.createElement("input");
            input.id = "canvaswidthrange";
            input.max = canvaswidthnumber.max;
            input.min = canvaswidthnumber.min;
            input.type = "range";
            input.value = canvaswidthnumber.value;
            input.addEventListener("input", canvaswidthrangeupdate);
            canvaswidth.append(input);

            canvaswidthrangeupdate();
        }
        addEventListener("load", canvaswidthrangeload);

        function canvaswidthrangeupdate()
        {
            const v = canvaswidthrange.value;

            canvaswidthnumber.value = v;
            canvas.width = v;

            canvasupdate();
            svgupdate();
        }

        function canvaswidthnaturalload()
        {
            const br = document.createElement("br");
            canvaswidth.append(br);

            const button = document.createElement("button");
            button.innerHTML = "image";
            button.addEventListener("click", canvaswidthnaturalupdate);
            canvaswidth.append(button);
        }
        addEventListener("load", canvaswidthnaturalload);

        function canvaswidthnaturalupdate()
        {
            canvaswidthnumber.value = image.naturalWidth;

            canvaswidthnumberupdate();
        }

        function canvaswidthexactload()
        {
            const br = document.createElement("br");
            canvaswidth.append(br);

            const array =
            [
                ["800",800],
                ["1280",1280],
                ["1366",1366],
                ["1536",1536],
                ["1600",1600],
                ["1920",1920],
                ["2304",2304],
                ["2560",2560],
                ["3840",3840],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvaswidthexactupdate);
                canvaswidth.append(button);
            }
        }
        addEventListener("load", canvaswidthexactload);

        function canvaswidthexactupdate(e)
        {
            canvaswidthnumber.value = Number(e.target.value);

            canvaswidthnumberupdate();
        }

        function canvaswidthincrementload()
        {
            const br = document.createElement("br");
            canvaswidth.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvaswidthincrementupdate);
                canvaswidth.append(button);
            }
        }
        addEventListener("load", canvaswidthincrementload);

        function canvaswidthincrementupdate(e)
        {
            const v = Number(canvaswidthnumber.value) + Number(e.target.value);

            if((canvaswidthnumber.min <= v) && (v <= canvaswidthnumber.max))
            {
                canvaswidthnumber.value = v;

                canvaswidthnumberupdate();
            }
        }



        function canvasheightload()
        {
            const div = document.createElement("div");
            div.id = "canvasheight";
            div.innerHTML = "height";
            tabcontentcanvas.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", canvasheightload);

        function canvasheightnumberload()
        {
            const br = document.createElement("br");
            canvasheight.append(br);

            const input = document.createElement("input");
            input.id = "canvasheightnumber";
            input.max = maxheight;
            input.min = 0;
            input.type = "number";
            input.value = canvas.height;
            input.addEventListener("input", canvasheightnumberupdate);
            canvasheight.append(input);

            //canvasheightnumberupdate();
        }
        addEventListener("load", canvasheightnumberload);

        function canvasheightnumberupdate()
        {
            const v = canvasheightnumber.value;

            canvasheightrange.value = v;
            canvas.height = v;

            canvasupdate();
            svgupdate();
        }

        function canvasheightrangeload()
        {
            //const br = document.createElement("br");
            //canvasheight.append(br);

            const input = document.createElement("input");
            input.id = "canvasheightrange";
            input.max = canvasheightnumber.max;
            input.min = canvasheightnumber.min;
            input.type = "range";
            input.value = canvasheightnumber.value;
            input.addEventListener("input", canvasheightrangeupdate);
            canvasheight.append(input);

            canvasheightrangeupdate();
        }
        addEventListener("load", canvasheightrangeload);

        function canvasheightrangeupdate()
        {
            const v = canvasheightrange.value;

            canvasheightnumber.value = v;
            canvas.height = v;

            canvasupdate();
            svgupdate();
        }

        function canvasheightnaturalload()
        {
            const br = document.createElement("br");
            canvasheight.append(br);

            const button = document.createElement("button");
            button.innerHTML = "image";
            button.addEventListener("click", canvasheightnaturalupdate);
            canvasheight.append(button);
        }
        addEventListener("load", canvasheightnaturalload);

        function canvasheightnaturalupdate()
        {
            canvasheightnumber.value = image.naturalHeight;

            canvasheightnumberupdate();
        }

        function canvasheightexactload()
        {
            const br = document.createElement("br");
            canvasheight.append(br);

            const array =
            [
                ["600",600],
                ["720",720],
                ["768",768],
                ["864",864],
                ["900",900],
                ["1080",1080],
                ["1296",1296],
                ["1440",1440],
                ["2160",2160],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvasheightexactupdate);
                canvasheight.append(button);
            }
        }
        addEventListener("load", canvasheightexactload);

        function canvasheightexactupdate(e)
        {
            canvasheightnumber.value = Number(e.target.value);

            canvasheightnumberupdate();
        }

        function canvasheightincrementload()
        {
            const br = document.createElement("br");
            canvasheight.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvasheightincrementupdate);
                canvasheight.append(button);
            }
        }
        addEventListener("load", canvasheightincrementload);

        function canvasheightincrementupdate(e)
        {
            const v = Number(canvasheightnumber.value) + Number(e.target.value);

            if((canvasheightnumber.min <= v) && (v <= canvasheightnumber.max))
            {
                canvasheightnumber.value = v;

                canvasheightnumberupdate();
            }
        }



        function canvasbackgroundcolorload()
        {
            const div = document.createElement("div");
            div.id = "canvasbackgroundcolor";
            div.innerHTML = "background-color";
            tabcontentcanvas.append(div);
        }
        addEventListener("load", canvasbackgroundcolorload);

        function canvasbackgroundcolorcolorload()
        {
            const br = document.createElement("br");
            canvasbackgroundcolor.append(br);

            const input = document.createElement("input");
            input.id = "canvasbackgroundcolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", canvasbackgroundcolorcolorupdate);
            canvasbackgroundcolor.append(input);

            //canvasbackgroundcolorcolorset();
        }
        addEventListener("load", canvasbackgroundcolorcolorload);

        function canvasbackgroundcolorcolorset()
        {
            const c = canvasbackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = canvasbackgroundalphanumber.value;

            canvas.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function canvasbackgroundcolorcolorupdate()
        {
            canvasbackgroundcolorcolorset();
            svgupdate();
        }

        function canvasbackgroundcolorexactload()
        {
            const br = document.createElement("br");
            canvasbackgroundcolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvasbackgroundcolorexactupdate);
                canvasbackgroundcolor.append(button);
            }
        }
        addEventListener("load", canvasbackgroundcolorexactload);

        function canvasbackgroundcolorexactupdate(e)
        {
            canvasbackgroundcolorcolor.value = e.target.value;

            canvasbackgroundcolorcolorupdate();
        }



        function canvasbackgroundalphaload()
        {
            const div = document.createElement("div");
            div.id = "canvasbackgroundalpha";
            div.innerHTML = "background-alpha";
            tabcontentcanvas.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", canvasbackgroundalphaload);

        function canvasbackgroundalphanumberload()
        {
            const br = document.createElement("br");
            canvasbackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "canvasbackgroundalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", canvasbackgroundalphanumberupdate);
            canvasbackgroundalpha.append(input);

            //canvasbackgroundalphanumberset();
        }
        addEventListener("load", canvasbackgroundalphanumberload);

        function canvasbackgroundalphanumberset()
        {
            const c = canvasbackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = canvasbackgroundalphanumber.value;

            canvasbackgroundalpharange.value = a;
            canvas.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function canvasbackgroundalphanumberupdate()
        {
            canvasbackgroundalphanumberset();
            svgupdate();
        }

        function canvasbackgroundalpharangeload()
        {
            //const br = document.createElement("br");
            //canvasbackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "canvasbackgroundalpharange";
            input.max = canvasbackgroundalphanumber.max;
            input.min = canvasbackgroundalphanumber.min;
            input.step = canvasbackgroundalphanumber.step;
            input.type = "range";
            input.value = canvasbackgroundalphanumber.value;
            input.addEventListener("input", canvasbackgroundalpharangeupdate);
            canvasbackgroundalpha.append(input);

            canvasbackgroundalpharangeset();
        }
        addEventListener("load", canvasbackgroundalpharangeload);

        function canvasbackgroundalpharangeset()
        {
            const c = canvasbackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = canvasbackgroundalpharange.value;

            canvasbackgroundalphanumber.value = a;
            canvas.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function canvasbackgroundalpharangeupdate()
        {
            canvasbackgroundalpharangeset();
            svgupdate();
        }

        function canvasbackgroundalphaexactload()
        {
            const br = document.createElement("br");
            canvasbackgroundalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvasbackgroundalphaexactupdate);
                canvasbackgroundalpha.append(button);
            }
        }
        addEventListener("load", canvasbackgroundalphaexactload);

        function canvasbackgroundalphaexactupdate(e)
        {
            canvasbackgroundalphanumber.value = Number(e.target.value);

            canvasbackgroundalphanumberupdate();
        }

        function canvasbackgroundalphaincrementload()
        {
            const br = document.createElement("br");
            canvasbackgroundalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvasbackgroundalphaincrementupdate);
                canvasbackgroundalpha.append(button);
            }
        }
        addEventListener("load", canvasbackgroundalphaincrementload);

        function canvasbackgroundalphaincrementupdate(e)
        {
            let v = Number(canvasbackgroundalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((canvasbackgroundalphanumber.min <= v) && (v <= canvasbackgroundalphanumber.max))
            {
                canvasbackgroundalphanumber.value = v;

                canvasbackgroundalphanumberupdate();
            }
        }






        function myfunction1(e)
        {
            //console.log(myvideo.duration);
            const myvideo = e.target;

            myvideo.currentTime = 0;
        }

        function myfunction2(e)
        {
            //console.log(myvideo.currentTime);
            const myvideo = e.target;

            const mycanvas = document.createElement("canvas");
            mycanvas.height = myvideo.videoHeight;
            mycanvas.width = myvideo.videoWidth;

            const mycontext = mycanvas.getContext("2d");
            mycontext.drawImage(myvideo, 0, 0, mycanvas.width, mycanvas.height);

            //const myimg = new Image();
            //myimg.src = mycanvas.toDataURL();

            image.src = mycanvas.toDataURL();
        }

        function imageload2()
        {
            //image.src = "/assets/svg/Happy.svg";

            const date  = new Date();
            const month = date.getUTCMonth() + 1;
            const day   = date.getUTCDate();

            const myvideo = document.createElement("video");
            myvideo.addEventListener("loadedmetadata", myfunction1);
            myvideo.addEventListener("seeked", myfunction2);
            myvideo.src = `/assets/mp4/${month}/${day}.mp4`;
        }
        addEventListener("load", imageload2);

        function imageload3()
        {
            fetch(image.src)
            .then(r => r.blob())
            .then(b =>
            {
                const reader = new FileReader();
                reader.readAsDataURL(b);
                reader.onloadend = () =>
                {
                    //console.log("imageload3");
                    image.dataurl = reader.result;
                    svgupdate();
                };
            });
        }
        image.addEventListener("load", imageload3);



        function imagefileload()
        {
            const div = document.createElement("div");
            div.id = "imagefile";
            div.innerHTML = "file";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagefileload);

        function imagefilefileload()
        {
            const br = document.createElement("br");
            imagefile.append(br);

            const input = document.createElement("input");
            input.id = "imagefilefile";
            input.type = "file";
            input.addEventListener("change", imagefilefileupdate);
            imagefile.append(input);
        }
        addEventListener("load", imagefilefileload);

        function imagefilefileupdate()
        {
            const f = imagefilefile.files[0];

            image.src = URL.createObjectURL(f);
        }



        function imagefitload()
        {
            const div = document.createElement("div");
            div.id = "imagefit";
            div.innerHTML = "fit";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagefitload);

        function imagefitselectload()
        {
            const br = document.createElement("br");
            imagefit.append(br);

            const select = document.createElement("select");
            select.id = "imagefitselect";
            select.addEventListener("input", imagefitselectupdate);
            imagefit.append(select);

            const array =
            [
                "contain",
                "cover",
            ];

            for(const value of array)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            imagefitselect.value = array[1];

            imagefitselectset();
        }
        addEventListener("load", imagefitselectload);

        function imagefitselectset()
        {
            image.objectfit = imagefitselect.value;
        }

        function imagefitselectupdate()
        {
            imagefitselectset();
            svgupdate();
        }



        function imagewidthload()
        {
            const div = document.createElement("div");
            div.id = "imagewidth";
            div.innerHTML = "width";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagewidthload);

        function imagewidthnumberload()
        {
            const br = document.createElement("br");
            imagewidth.append(br);

            const input = document.createElement("input");
            input.id = "imagewidthnumber";
            input.max = maxwidth;
            input.min = 0;
            input.type = "number";
            input.value = canvas.width;
            input.addEventListener("input", imagewidthnumberupdate);
            imagewidth.append(input);

            //imagewidthnumberset();
        }
        addEventListener("load", imagewidthnumberload);

        function imagewidthnumberset()
        {
            const v = imagewidthnumber.value;

            imagewidthrange.value = v;
            image.width = v;
        }

        function imagewidthnumberupdate()
        {
            imagewidthnumberset();
            svgupdate();
        }

        function imagewidthrangeload()
        {
            //const br = document.createElement("br");
            //imagewidth.append(br);

            const input = document.createElement("input");
            input.id = "imagewidthrange";
            input.max = imagewidthnumber.max;
            input.min = imagewidthnumber.min;
            input.type = "range";
            input.value = imagewidthnumber.value;
            input.addEventListener("input", imagewidthrangeupdate);
            imagewidth.append(input);

            imagewidthrangeset();
        }
        addEventListener("load", imagewidthrangeload);

        function imagewidthrangeset()
        {
            const v = imagewidthrange.value;

            imagewidthnumber.value = v;
            image.width = v;
        }

        function imagewidthrangeupdate()
        {
            imagewidthrangeset();
            svgupdate();
        }
/*
        function imagewidthnaturalload()
        {
            const br = document.createElement("br");
            imagewidth.append(br);

            const button = document.createElement("button");
            button.innerHTML = "image";
            button.addEventListener("click", imagewidthnaturalupdate);
            imagewidth.append(button);
        }
        addEventListener("load", imagewidthnaturalload);

        function imagewidthnaturalupdate()
        {
            imagewidthnumber.value = image.naturalWidth;

            imagewidthnumberupdate();
        }
//*/
        function imagewidthexactload()
        {
            const br = document.createElement("br");
            imagewidth.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagewidthexactupdate);
                imagewidth.append(button);
            }
        }
        addEventListener("load", imagewidthexactload);

        function imagewidthexactupdate(e)
        {
            imagewidthnumber.value = canvas.width * Number(e.target.value);

            imagewidthnumberupdate();
        }

        function imagewidthincrementload()
        {
            const br = document.createElement("br");
            imagewidth.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagewidthincrementupdate);
                imagewidth.append(button);
            }
        }
        addEventListener("load", imagewidthincrementload);

        function imagewidthincrementupdate(e)
        {
            const v = Number(imagewidthnumber.value) + Number(e.target.value);

            if((imagewidthnumber.min <= v) && (v <= imagewidthnumber.max))
            {
                imagewidthnumber.value = v;

                imagewidthnumberupdate();
            }
        }



        function imageheightload()
        {
            const div = document.createElement("div");
            div.id = "imageheight";
            div.innerHTML = "height";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imageheightload);

        function imageheightnumberload()
        {
            const br = document.createElement("br");
            imageheight.append(br);

            const input = document.createElement("input");
            input.id = "imageheightnumber";
            input.max = maxheight;
            input.min = 0;
            input.type = "number";
            input.value = canvas.height;
            input.addEventListener("input", imageheightnumberupdate);
            imageheight.append(input);

            //imageheightnumberset();
        }
        addEventListener("load", imageheightnumberload);

        function imageheightnumberset()
        {
            const v = imageheightnumber.value;

            imageheightrange.value = v;
            image.height = v;
        }

        function imageheightnumberupdate()
        {
            imageheightnumberset();
            svgupdate();
        }

        function imageheightrangeload()
        {
            //const br = document.createElement("br");
            //imageheight.append(br);

            const input = document.createElement("input");
            input.id = "imageheightrange";
            input.max = imageheightnumber.max;
            input.min = imageheightnumber.min;
            input.type = "range";
            input.value = imageheightnumber.value;
            input.addEventListener("input", imageheightrangeupdate);
            imageheight.append(input);

            imageheightrangeset();
        }
        addEventListener("load", imageheightrangeload);

        function imageheightrangeset()
        {
            const v = imageheightrange.value;

            imageheightnumber.value = v;
            image.height = v;
        }

        function imageheightrangeupdate()
        {
            imageheightrangeset();
            svgupdate();
        }
/*
        function imageheightnaturalload()
        {
            const br = document.createElement("br");
            imageheight.append(br);

            const button = document.createElement("button");
            button.innerHTML = "image";
            button.addEventListener("click", imageheightnaturalupdate);
            imageheight.append(button);
        }
        addEventListener("load", imageheightnaturalload);

        function imageheightnaturalupdate()
        {
            imageheightnumber.value = image.naturalHeight;

            imageheightnumberupdate();
        }
//*/
        function imageheightexactload()
        {
            const br = document.createElement("br");
            imageheight.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageheightexactupdate);
                imageheight.append(button);
            }
        }
        addEventListener("load", imageheightexactload);

        function imageheightexactupdate(e)
        {
            imageheightnumber.value = canvas.height * Number(e.target.value);

            imageheightnumberupdate();
        }

        function imageheightincrementload()
        {
            const br = document.createElement("br");
            imageheight.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageheightincrementupdate);
                imageheight.append(button);
            }
        }
        addEventListener("load", imageheightincrementload);

        function imageheightincrementupdate(e)
        {
            const v = Number(imageheightnumber.value) + Number(e.target.value);

            if((imageheightnumber.min <= v) && (v <= imageheightnumber.max))
            {
                imageheightnumber.value = v;

                imageheightnumberupdate();
            }
        }



        function imagexload()
        {
            const div = document.createElement("div");
            div.id = "imagex";
            div.innerHTML = "x";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagexload);

        function imagexnumberload()
        {
            const br = document.createElement("br");
            imagex.append(br);

            const input = document.createElement("input");
            input.id = "imagexnumber";
            input.max = maxwidth;
            input.min = -maxwidth;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagexnumberupdate);
            imagex.append(input);

            //imagexnumberset();
        }
        addEventListener("load", imagexnumberload);

        function imagexnumberset()
        {
            const v = imagexnumber.value;

            imagexrange.value = v;
            image.myx = v;
        }

        function imagexnumberupdate()
        {
            imagexnumberset();
            svgupdate();
        }

        function imagexrangeload()
        {
            //const br = document.createElement("br");
            //imagex.append(br);

            const input = document.createElement("input");
            input.id = "imagexrange";
            input.max = imagexnumber.max;
            input.min = imagexnumber.min;
            input.type = "range";
            input.value = imagexnumber.value;
            input.addEventListener("input", imagexrangeupdate);
            imagex.append(input);

            imagexrangeset();
        }
        addEventListener("load", imagexrangeload);

        function imagexrangeset()
        {
            const v = imagexrange.value;

            imagexnumber.value = v;
            image.myx = v;
        }

        function imagexrangeupdate()
        {
            imagexrangeset();
            svgupdate();
        }

        function imagexexactload()
        {
            const br = document.createElement("br");
            imagex.append(br);

            const array =
            [
                ["left",0],
                ["center",0.5],
                ["right",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagexexactupdate);
                imagex.append(button);
            }
        }
        addEventListener("load", imagexexactload);

        function imagexexactupdate(e)
        {
            imagexnumber.value = (canvas.width - image.width) * Number(e.target.value);

            imagexnumberupdate();
        }

        function imagexincrementload()
        {
            const br = document.createElement("br");
            imagex.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagexincrementupdate);
                imagex.append(button);
            }
        }
        addEventListener("load", imagexincrementload);

        function imagexincrementupdate(e)
        {
            const v = Number(imagexnumber.value) + Number(e.target.value);

            if((imagexnumber.min <= v) && (v <= imagexnumber.max))
            {
                imagexnumber.value = v;

                imagexnumberupdate();
            }
        }



        function imageyload()
        {
            const div = document.createElement("div");
            div.id = "imagey";
            div.innerHTML = "y";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imageyload);

        function imageynumberload()
        {
            const br = document.createElement("br");
            imagey.append(br);

            const input = document.createElement("input");
            input.id = "imageynumber";
            input.max = maxheight;
            input.min = -maxheight;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imageynumberupdate);
            imagey.append(input);

            //imageynumberset();
        }
        addEventListener("load", imageynumberload);

        function imageynumberset()
        {
            const v = imageynumber.value;

            imageyrange.value = v;
            image.myy = v;
        }

        function imageynumberupdate()
        {
            imageynumberset();
            svgupdate();
        }

        function imageyrangeload()
        {
            //const br = document.createElement("br");
            //imagey.append(br);

            const input = document.createElement("input");
            input.id = "imageyrange";
            input.max = imageynumber.max;
            input.min = imageynumber.min;
            input.type = "range";
            input.value = imageynumber.value;
            input.addEventListener("input", imageyrangeupdate);
            imagey.append(input);

            imageyrangeset();
        }
        addEventListener("load", imageyrangeload);

        function imageyrangeset()
        {
            const v = imageyrange.value;

            imageynumber.value = v;
            image.myy = v;
        }

        function imageyrangeupdate()
        {
            imageyrangeset();
            svgupdate();
        }

        function imageyexactload()
        {
            const br = document.createElement("br");
            imagey.append(br);

            const array =
            [
                ["top",0],
                ["center",0.5],
                ["bottom",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageyexactupdate);
                imagey.append(button);
            }
        }
        addEventListener("load", imageyexactload);

        function imageyexactupdate(e)
        {
            imageynumber.value = (canvas.height - image.height) * Number(e.target.value);

            imageynumberupdate();
        }

        function imageyincrementload()
        {
            const br = document.createElement("br");
            imagey.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageyincrementupdate);
                imagey.append(button);
            }
        }
        addEventListener("load", imageyincrementload);

        function imageyincrementupdate(e)
        {
            const v = Number(imageynumber.value) + Number(e.target.value);

            if((imageynumber.min <= v) && (v <= imageynumber.max))
            {
                imageynumber.value = v;

                imageynumberupdate();
            }
        }



        function imagebackgroundcolorload()
        {
            const div = document.createElement("div");
            div.id = "imagebackgroundcolor";
            div.innerHTML = "background-color";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagebackgroundcolorload);

        function imagebackgroundcolorcolorload()
        {
            const br = document.createElement("br");
            imagebackgroundcolor.append(br);

            const input = document.createElement("input");
            input.id = "imagebackgroundcolorcolor";
            input.type = "color";
            input.value = "#ffffff";
            input.addEventListener("input", imagebackgroundcolorcolorupdate);
            imagebackgroundcolor.append(input);

            //imagebackgroundcolorcolorset();
        }
        addEventListener("load", imagebackgroundcolorcolorload);

        function imagebackgroundcolorcolorset()
        {
            const c = imagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = imagebackgroundalphanumber.value;

            image.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function imagebackgroundcolorcolorupdate()
        {
            imagebackgroundcolorcolorset();
            svgupdate();
        }

        function imagebackgroundcolorexactload()
        {
            const br = document.createElement("br");
            imagebackgroundcolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagebackgroundcolorexactupdate);
                imagebackgroundcolor.append(button);
            }
        }
        addEventListener("load", imagebackgroundcolorexactload);

        function imagebackgroundcolorexactupdate(e)
        {
            imagebackgroundcolorcolor.value = e.target.value;

            imagebackgroundcolorcolorupdate();
        }



        function imagebackgroundalphaload()
        {
            const div = document.createElement("div");
            div.id = "imagebackgroundalpha";
            div.innerHTML = "background-alpha";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagebackgroundalphaload);

        function imagebackgroundalphanumberload()
        {
            const br = document.createElement("br");
            imagebackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "imagebackgroundalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagebackgroundalphanumberupdate);
            imagebackgroundalpha.append(input);

            //imagebackgroundalphanumberset();
        }
        addEventListener("load", imagebackgroundalphanumberload);

        function imagebackgroundalphanumberset()
        {
            const c = imagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = imagebackgroundalphanumber.value;

            imagebackgroundalpharange.value = a;
            image.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function imagebackgroundalphanumberupdate()
        {
            imagebackgroundalphanumberset();
            svgupdate();
        }

        function imagebackgroundalpharangeload()
        {
            //const br = document.createElement("br");
            //imagebackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "imagebackgroundalpharange";
            input.max = imagebackgroundalphanumber.max;
            input.min = imagebackgroundalphanumber.min;
            input.step = imagebackgroundalphanumber.step;
            input.type = "range";
            input.value = imagebackgroundalphanumber.value;
            input.addEventListener("input", imagebackgroundalpharangeupdate);
            imagebackgroundalpha.append(input);

            imagebackgroundalpharangeset();
        }
        addEventListener("load", imagebackgroundalpharangeload);

        function imagebackgroundalpharangeset()
        {
            const c = imagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = imagebackgroundalpharange.value;

            imagebackgroundalphanumber.value = a;
            image.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function imagebackgroundalpharangeupdate()
        {
            imagebackgroundalpharangeset();
            svgupdate();
        }

        function imagebackgroundalphaexactload()
        {
            const br = document.createElement("br");
            imagebackgroundalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagebackgroundalphaexactupdate);
                imagebackgroundalpha.append(button);
            }
        }
        addEventListener("load", imagebackgroundalphaexactload);

        function imagebackgroundalphaexactupdate(e)
        {
            imagebackgroundalphanumber.value = Number(e.target.value);

            imagebackgroundalphanumberupdate();
        }

        function imagebackgroundalphaincrementload()
        {
            const br = document.createElement("br");
            imagebackgroundalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagebackgroundalphaincrementupdate);
                imagebackgroundalpha.append(button);
            }
        }
        addEventListener("load", imagebackgroundalphaincrementload);

        function imagebackgroundalphaincrementupdate(e)
        {
            let v = Number(imagebackgroundalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((imagebackgroundalphanumber.min <= v) && (v <= imagebackgroundalphanumber.max))
            {
                imagebackgroundalphanumber.value = v;

                imagebackgroundalphanumberupdate();
            }
        }



/*
        function imageopacityload()
        {
            const div = document.createElement("div");
            div.id = "imageopacity";
            div.innerHTML = "opacity";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imageopacityload);

        function imageopacitynumberload()
        {
            const br = document.createElement("br");
            imageopacity.append(br);

            const input = document.createElement("input");
            input.id = "imageopacitynumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", imageopacitynumberupdate);
            imageopacity.append(input);

            //imageopacitynumberset();
        }
        addEventListener("load", imageopacitynumberload);

        function imageopacitynumberset()
        {
            const v = imageopacitynumber.value;

            imageopacityrange.value = v;
            image.opacity = v;
        }

        function imageopacitynumberupdate()
        {
            imageopacitynumberset();
            svgupdate();
        }

        function imageopacityrangeload()
        {
            const input = document.createElement("input");
            input.id = "imageopacityrange";
            input.max = imageopacitynumber.max;
            input.min = imageopacitynumber.min;
            input.step = imageopacitynumber.step;
            input.type = "range";
            input.value = imageopacitynumber.value;
            input.addEventListener("input", imageopacityrangeupdate);
            imageopacity.append(input);

            imageopacityrangeset();
        }
        addEventListener("load", imageopacityrangeload);

        function imageopacityrangeset()
        {
            const v = imageopacityrange.value;

            imageopacitynumber.value = v;
            image.opacity = v;
        }

        function imageopacityrangeupdate()
        {
            imageopacityrangeset();
            svgupdate();
        }

        function imageopacityexactload()
        {
            const br = document.createElement("br");
            imageopacity.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageopacityexactupdate);
                imageopacity.append(button);
            }
        }
        addEventListener("load", imageopacityexactload);

        function imageopacityexactupdate(e)
        {
            imageopacitynumber.value = Number(e.target.value);

            imageopacitynumberupdate();
        }

        function imageopacityincrementload()
        {
            const br = document.createElement("br");
            imageopacity.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageopacityincrementupdate);
                imageopacity.append(button);
            }
        }
        addEventListener("load", imageopacityincrementload);

        function imageopacityincrementupdate(e)
        {
            let v = Number(imageopacitynumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((imageopacitynumber.min <= v) && (v <= imageopacitynumber.max))
            {
                imageopacitynumber.value = v;

                imageopacitynumberupdate();
            }
        }
//*/



        function imagefilterblurload()
        {
            const div = document.createElement("div");
            div.id = "imagefilterblur";
            div.innerHTML = "filter-blur";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefilterblurload);

        function imagefilterblurnumberload()
        {
            const br = document.createElement("br");
            imagefilterblur.append(br);

            const input = document.createElement("input");
            input.id = "imagefilterblurnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagefilterblurnumberupdate);
            imagefilterblur.append(input);

            //imagefilterblurnumberset();
        }
        addEventListener("load", imagefilterblurnumberload);

        function imagefilterblurnumberset()
        {
            const v = imagefilterblurnumber.value;

            imagefilterblurrange.value = v;
            image.filterblur = v;
        }

        function imagefilterblurnumberupdate()
        {
            imagefilterblurnumberset();
            svgupdate();
        }

        function imagefilterblurrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefilterblurrange";
            input.max = imagefilterblurnumber.max;
            input.min = imagefilterblurnumber.min;
            input.step = imagefilterblurnumber.step;
            input.type = "range";
            input.value = imagefilterblurnumber.value;
            input.addEventListener("input", imagefilterblurrangeupdate);
            imagefilterblur.append(input);

            imagefilterblurrangeset();
        }
        addEventListener("load", imagefilterblurrangeload);

        function imagefilterblurrangeset()
        {
            const v = imagefilterblurrange.value;

            imagefilterblurnumber.value = v;
            image.filterblur = v;
        }

        function imagefilterblurrangeupdate()
        {
            imagefilterblurrangeset();
            svgupdate();
        }

        function imagefilterblurexactload()
        {
            const br = document.createElement("br");
            imagefilterblur.append(br);

            const array =
            [
                ["0",0],
                ["2",2],
                ["4",4],
                ["8",8],
                ["16",16],
                ["32",32],
                ["64",64],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterblurexactupdate);
                imagefilterblur.append(button);
            }
        }
        addEventListener("load", imagefilterblurexactload);

        function imagefilterblurexactupdate(e)
        {
            imagefilterblurnumber.value = Number(e.target.value);

            imagefilterblurnumberupdate();
        }

        function imagefilterblurincrementload()
        {
            const br = document.createElement("br");
            imagefilterblur.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterblurincrementupdate);
                imagefilterblur.append(button);
            }
        }
        addEventListener("load", imagefilterblurincrementload);

        function imagefilterblurincrementupdate(e)
        {
            const v = Number(imagefilterblurnumber.value) + Number(e.target.value);

            if((imagefilterblurnumber.min <= v) && (v <= imagefilterblurnumber.max))
            {
                imagefilterblurnumber.value = v;

                imagefilterblurnumberupdate();
            }
        }



        function imagefilterbrightnessload()
        {
            const div = document.createElement("div");
            div.id = "imagefilterbrightness";
            div.innerHTML = "filter-brightness";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefilterbrightnessload);

        function imagefilterbrightnessnumberload()
        {
            const br = document.createElement("br");
            imagefilterbrightness.append(br);

            const input = document.createElement("input");
            input.id = "imagefilterbrightnessnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", imagefilterbrightnessnumberupdate);
            imagefilterbrightness.append(input);

            //imagefilterbrightnessnumberset();
        }
        addEventListener("load", imagefilterbrightnessnumberload);

        function imagefilterbrightnessnumberset()
        {
            const v = imagefilterbrightnessnumber.value;

            imagefilterbrightnessrange.value = v;
            image.filterbrightness = v;
        }

        function imagefilterbrightnessnumberupdate()
        {
            imagefilterbrightnessnumberset();
            svgupdate();
        }

        function imagefilterbrightnessrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefilterbrightnessrange";
            input.max = imagefilterbrightnessnumber.max;
            input.min = imagefilterbrightnessnumber.min;
            input.step = imagefilterbrightnessnumber.step;
            input.type = "range";
            input.value = imagefilterbrightnessnumber.value;
            input.addEventListener("input", imagefilterbrightnessrangeupdate);
            imagefilterbrightness.append(input);

            imagefilterbrightnessrangeset();
        }
        addEventListener("load", imagefilterbrightnessrangeload);

        function imagefilterbrightnessrangeset()
        {
            const v = imagefilterbrightnessrange.value;

            imagefilterbrightnessnumber.value = v;
            image.filterbrightness = v;
        }

        function imagefilterbrightnessrangeupdate()
        {
            imagefilterbrightnessrangeset();
            svgupdate();
        }

        function imagefilterbrightnessexactload()
        {
            const br = document.createElement("br");
            imagefilterbrightness.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterbrightnessexactupdate);
                imagefilterbrightness.append(button);
            }
        }
        addEventListener("load", imagefilterbrightnessexactload);

        function imagefilterbrightnessexactupdate(e)
        {
            imagefilterbrightnessnumber.value = Number(e.target.value);

            imagefilterbrightnessnumberupdate();
        }

        function imagefilterbrightnessincrementload()
        {
            const br = document.createElement("br");
            imagefilterbrightness.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterbrightnessincrementupdate);
                imagefilterbrightness.append(button);
            }
        }
        addEventListener("load", imagefilterbrightnessincrementload);

        function imagefilterbrightnessincrementupdate(e)
        {
            const v = Number(imagefilterbrightnessnumber.value) + Number(e.target.value);

            if((imagefilterbrightnessnumber.min <= v) && (v <= imagefilterbrightnessnumber.max))
            {
                imagefilterbrightnessnumber.value = v;

                imagefilterbrightnessnumberupdate();
            }
        }



        function imagefiltercontrastload()
        {
            const div = document.createElement("div");
            div.id = "imagefiltercontrast";
            div.innerHTML = "filter-contrast";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefiltercontrastload);

        function imagefiltercontrastnumberload()
        {
            const br = document.createElement("br");
            imagefiltercontrast.append(br);

            const input = document.createElement("input");
            input.id = "imagefiltercontrastnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", imagefiltercontrastnumberupdate);
            imagefiltercontrast.append(input);

            //imagefiltercontrastnumberset();
        }
        addEventListener("load", imagefiltercontrastnumberload);

        function imagefiltercontrastnumberset()
        {
            const v = imagefiltercontrastnumber.value;

            imagefiltercontrastrange.value = v;
            image.filtercontrast = v;
        }

        function imagefiltercontrastnumberupdate()
        {
            imagefiltercontrastnumberset();
            svgupdate();
        }

        function imagefiltercontrastrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefiltercontrastrange";
            input.max = imagefiltercontrastnumber.max;
            input.min = imagefiltercontrastnumber.min;
            input.step = imagefiltercontrastnumber.step;
            input.type = "range";
            input.value = imagefiltercontrastnumber.value;
            input.addEventListener("input", imagefiltercontrastrangeupdate);
            imagefiltercontrast.append(input);

            imagefiltercontrastrangeset();
        }
        addEventListener("load", imagefiltercontrastrangeload);

        function imagefiltercontrastrangeset()
        {
            const v = imagefiltercontrastrange.value;

            imagefiltercontrastnumber.value = v;
            image.filtercontrast = v;
        }

        function imagefiltercontrastrangeupdate()
        {
            imagefiltercontrastrangeset();
            svgupdate();
        }

        function imagefiltercontrastexactload()
        {
            const br = document.createElement("br");
            imagefiltercontrast.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltercontrastexactupdate);
                imagefiltercontrast.append(button);
            }
        }
        addEventListener("load", imagefiltercontrastexactload);

        function imagefiltercontrastexactupdate(e)
        {
            imagefiltercontrastnumber.value = Number(e.target.value);

            imagefiltercontrastnumberupdate();
        }

        function imagefiltercontrastincrementload()
        {
            const br = document.createElement("br");
            imagefiltercontrast.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventList
10000
ener("click", imagefiltercontrastincrementupdate);
                imagefiltercontrast.append(button);
            }
        }
        addEventListener("load", imagefiltercontrastincrementload);

        function imagefiltercontrastincrementupdate(e)
        {
            const v = Number(imagefiltercontrastnumber.value) + Number(e.target.value);

            if((imagefiltercontrastnumber.min <= v) && (v <= imagefiltercontrastnumber.max))
            {
                imagefiltercontrastnumber.value = v;

                imagefiltercontrastnumberupdate();
            }
        }



        function imagefiltergrayscaleload()
        {
            const div = document.createElement("div");
            div.id = "imagefiltergrayscale";
            div.innerHTML = "filter-grayscale";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefiltergrayscaleload);

        function imagefiltergrayscalenumberload()
        {
            const br = document.createElement("br");
            imagefiltergrayscale.append(br);

            const input = document.createElement("input");
            input.id = "imagefiltergrayscalenumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagefiltergrayscalenumberupdate);
            imagefiltergrayscale.append(input);

            //imagefiltergrayscalenumberset();
        }
        addEventListener("load", imagefiltergrayscalenumberload);

        function imagefiltergrayscalenumberset()
        {
            const v = imagefiltergrayscalenumber.value;

            imagefiltergrayscalerange.value = v;
            image.filtergrayscale = v;
        }

        function imagefiltergrayscalenumberupdate()
        {
            imagefiltergrayscalenumberset();
            svgupdate();
        }

        function imagefiltergrayscalerangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefiltergrayscalerange";
            input.max = imagefiltergrayscalenumber.max;
            input.min = imagefiltergrayscalenumber.min;
            input.step = imagefiltergrayscalenumber.step;
            input.type = "range";
            input.value = imagefiltergrayscalenumber.value;
            input.addEventListener("input", imagefiltergrayscalerangeupdate);
            imagefiltergrayscale.append(input);

            imagefiltergrayscalerangeset();
        }
        addEventListener("load", imagefiltergrayscalerangeload);

        function imagefiltergrayscalerangeset()
        {
            const v = imagefiltergrayscalerange.value;

            imagefiltergrayscalenumber.value = v;
            image.filtergrayscale = v;
        }

        function imagefiltergrayscalerangeupdate()
        {
            imagefiltergrayscalerangeset();
            svgupdate();
        }

        function imagefiltergrayscaleexactload()
        {
            const br = document.createElement("br");
            imagefiltergrayscale.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltergrayscaleexactupdate);
                imagefiltergrayscale.append(button);
            }
        }
        addEventListener("load", imagefiltergrayscaleexactload);

        function imagefiltergrayscaleexactupdate(e)
        {
            imagefiltergrayscalenumber.value = Number(e.target.value);

            imagefiltergrayscalenumberupdate();
        }

        function imagefiltergrayscaleincrementload()
        {
            const br = document.createElement("br");
            imagefiltergrayscale.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltergrayscaleincrementupdate);
                imagefiltergrayscale.append(button);
            }
        }
        addEventListener("load", imagefiltergrayscaleincrementload);

        function imagefiltergrayscaleincrementupdate(e)
        {
            const v = Number(imagefiltergrayscalenumber.value) + Number(e.target.value);

            if((imagefiltergrayscalenumber.min <= v) && (v <= imagefiltergrayscalenumber.max))
            {
                imagefiltergrayscalenumber.value = v;

                imagefiltergrayscalenumberupdate();
            }
        }



        function imagefilterhuerotateload()
        {
            const div = document.createElement("div");
            div.id = "imagefilterhuerotate";
            div.innerHTML = "filter-hue-rotate";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefilterhuerotateload);

        function imagefilterhuerotatenumberload()
        {
            const br = document.createElement("br");
            imagefilterhuerotate.append(br);

            const input = document.createElement("input");
            input.id = "imagefilterhuerotatenumber";
            input.max = 360;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagefilterhuerotatenumberupdate);
            imagefilterhuerotate.append(input);

            //imagefilterhuerotatenumberset();
        }
        addEventListener("load", imagefilterhuerotatenumberload);

        function imagefilterhuerotatenumberset()
        {
            const v = imagefilterhuerotatenumber.value;

            imagefilterhuerotaterange.value = v;
            image.filterhuerotate = v;
        }

        function imagefilterhuerotatenumberupdate()
        {
            imagefilterhuerotatenumberset();
            svgupdate();
        }

        function imagefilterhuerotaterangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefilterhuerotaterange";
            input.max = imagefilterhuerotatenumber.max;
            input.min = imagefilterhuerotatenumber.min;
            input.step = imagefilterhuerotatenumber.step;
            input.type = "range";
            input.value = imagefilterhuerotatenumber.value;
            input.addEventListener("input", imagefilterhuerotaterangeupdate);
            imagefilterhuerotate.append(input);

            imagefilterhuerotaterangeset();
        }
        addEventListener("load", imagefilterhuerotaterangeload);

        function imagefilterhuerotaterangeset()
        {
            const v = imagefilterhuerotaterange.value;

            imagefilterhuerotatenumber.value = v;
            image.filterhuerotate = v;
        }

        function imagefilterhuerotaterangeupdate()
        {
            imagefilterhuerotaterangeset();
            svgupdate();
        }

        function imagefilterhuerotateexactload()
        {
            const br = document.createElement("br");
            imagefilterhuerotate.append(br);

            const array =
            [
                ["0",0],
                ["90",90],
                ["180",180],
                ["270",270],
                ["360",360],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterhuerotateexactupdate);
                imagefilterhuerotate.append(button);
            }
        }
        addEventListener("load", imagefilterhuerotateexactload);

        function imagefilterhuerotateexactupdate(e)
        {
            imagefilterhuerotatenumber.value = Number(e.target.value);

            imagefilterhuerotatenumberupdate();
        }

        function imagefilterhuerotateincrementload()
        {
            const br = document.createElement("br");
            imagefilterhuerotate.append(br);

            const array =
            [
                //["-90",-90],
                ["-45",-45],
                ["-15",-15],
                ["-1",-1],
                ["+1",1],
                ["+15",15],
                ["+45",45],
                //["+90",90],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterhuerotateincrementupdate);
                imagefilterhuerotate.append(button);
            }
        }
        addEventListener("load", imagefilterhuerotateincrementload);

        function imagefilterhuerotateincrementupdate(e)
        {
            const v = Number(imagefilterhuerotatenumber.value) + Number(e.target.value);

            if((imagefilterhuerotatenumber.min <= v) && (v <= imagefilterhuerotatenumber.max))
            {
                imagefilterhuerotatenumber.value = v;

                imagefilterhuerotatenumberupdate();
            }
        }



        function imagefilterinvertload()
        {
            const div = document.createElement("div");
            div.id = "imagefilterinvert";
            div.innerHTML = "filter-invert";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefilterinvertload);

        function imagefilterinvertnumberload()
        {
            const br = document.createElement("br");
            imagefilterinvert.append(br);

            const input = document.createElement("input");
            input.id = "imagefilterinvertnumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagefilterinvertnumberupdate);
            imagefilterinvert.append(input);

            //imagefilterinvertnumberset();
        }
        addEventListener("load", imagefilterinvertnumberload);

        function imagefilterinvertnumberset()
        {
            const v = imagefilterinvertnumber.value;

            imagefilterinvertrange.value = v;
            image.filterinvert = v;
        }

        function imagefilterinvertnumberupdate()
        {
            imagefilterinvertnumberset();
            svgupdate();
        }

        function imagefilterinvertrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefilterinvertrange";
            input.max = imagefilterinvertnumber.max;
            input.min = imagefilterinvertnumber.min;
            input.step = imagefilterinvertnumber.step;
            input.type = "range";
            input.value = imagefilterinvertnumber.value;
            input.addEventListener("input", imagefilterinvertrangeupdate);
            imagefilterinvert.append(input);

            imagefilterinvertrangeset();
        }
        addEventListener("load", imagefilterinvertrangeload);

        function imagefilterinvertrangeset()
        {
            const v = imagefilterinvertrange.value;

            imagefilterinvertnumber.value = v;
            image.filterinvert = v;
        }

        function imagefilterinvertrangeupdate()
        {
            imagefilterinvertrangeset();
            svgupdate();
        }

        function imagefilterinvertexactload()
        {
            const br = document.createElement("br");
            imagefilterinvert.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterinvertexactupdate);
                imagefilterinvert.append(button);
            }
        }
        addEventListener("load", imagefilterinvertexactload);

        function imagefilterinvertexactupdate(e)
        {
            imagefilterinvertnumber.value = Number(e.target.value);

            imagefilterinvertnumberupdate();
        }

        function imagefilterinvertincrementload()
        {
            const br = document.createElement("br");
            imagefilterinvert.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterinvertincrementupdate);
                imagefilterinvert.append(button);
            }
        }
        addEventListener("load", imagefilterinvertincrementload);

        function imagefilterinvertincrementupdate(e)
        {
            const v = Number(imagefilterinvertnumber.value) + Number(e.target.value);

            if((imagefilterinvertnumber.min <= v) && (v <= imagefilterinvertnumber.max))
            {
                imagefilterinvertnumber.value = v;

                imagefilterinvertnumberupdate();
            }
        }



        function imagefilteropacityload()
        {
            const div = document.createElement("div");
            div.id = "imagefilteropacity";
            div.innerHTML = "filter-opacity";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefilteropacityload);

        function imagefilteropacitynumberload()
        {
            const br = document.createElement("br");
            imagefilteropacity.append(br);

            const input = document.createElement("input");
            input.id = "imagefilteropacitynumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", imagefilteropacitynumberupdate);
            imagefilteropacity.append(input);

            //imagefilteropacitynumberset();
        }
        addEventListener("load", imagefilteropacitynumberload);

        function imagefilteropacitynumberset()
        {
            const v = imagefilteropacitynumber.value;

            imagefilteropacityrange.value = v;
            image.filteropacity = v;
        }

        function imagefilteropacitynumberupdate()
        {
            imagefilteropacitynumberset();
            svgupdate();
        }

        function imagefilteropacityrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefilteropacityrange";
            input.max = imagefilteropacitynumber.max;
            input.min = imagefilteropacitynumber.min;
            input.step = imagefilteropacitynumber.step;
            input.type = "range";
            input.value = imagefilteropacitynumber.value;
            input.addEventListener("input", imagefilteropacityrangeupdate);
            imagefilteropacity.append(input);

            imagefilteropacityrangeset();
        }
        addEventListener("load", imagefilteropacityrangeload);

        function imagefilteropacityrangeset()
        {
            const v = imagefilteropacityrange.value;

            imagefilteropacitynumber.value = v;
            image.filteropacity = v;
        }

        function imagefilteropacityrangeupdate()
        {
            imagefilteropacityrangeset();
            svgupdate();
        }

        function imagefilteropacityexactload()
        {
            const br = document.createElement("br");
            imagefilteropacity.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100 (initial)",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilteropacityexactupdate);
                imagefilteropacity.append(button);
            }
        }
        addEventListener("load", imagefilteropacityexactload);

        function imagefilteropacityexactupdate(e)
        {
            imagefilteropacitynumber.value = Number(e.target.value);

            imagefilteropacitynumberupdate();
        }

        function imagefilteropacityincrementload()
        {
            const br = document.createElement("br");
            imagefilteropacity.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilteropacityincrementupdate);
                imagefilteropacity.append(button);
            }
        }
        addEventListener("load", imagefilteropacityincrementload);

        function imagefilteropacityincrementupdate(e)
        {
            const v = Number(imagefilteropacitynumber.value) + Number(e.target.value);

            if((imagefilteropacitynumber.min <= v) && (v <= imagefilteropacitynumber.max))
            {
                imagefilteropacitynumber.value = v;

                imagefilteropacitynumberupdate();
            }
        }



        function imagefiltersaturateload()
        {
            const div = document.createElement("div");
            div.id = "imagefiltersaturate";
            div.innerHTML = "filter-saturate";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefiltersaturateload);

        function imagefiltersaturatenumberload()
        {
            const br = document.createElement("br");
            imagefiltersaturate.append(br);

            const input = document.createElement("input");
            input.id = "imagefiltersaturatenumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", imagefiltersaturatenumberupdate);
            imagefiltersaturate.append(input);

            //imagefiltersaturatenumberset();
        }
        addEventListener("load", imagefiltersaturatenumberload);

        function imagefiltersaturatenumberset()
        {
            const v = imagefiltersaturatenumber.value;

            imagefiltersaturaterange.value = v;
            image.filtersaturate = v;
        }

        function imagefiltersaturatenumberupdate()
        {
            imagefiltersaturatenumberset();
            svgupdate();
        }

        function imagefiltersaturaterangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefiltersaturaterange";
            input.max = imagefiltersaturatenumber.max;
            input.min = imagefiltersaturatenumber.min;
            input.step = imagefiltersaturatenumber.step;
            input.type = "range";
            input.value = imagefiltersaturatenumber.value;
            input.addEventListener("input", imagefiltersaturaterangeupdate);
            imagefiltersaturate.append(input);

            imagefiltersaturaterangeset();
        }
        addEventListener("load", imagefiltersaturaterangeload);

        function imagefiltersaturaterangeset()
        {
            const v = imagefiltersaturaterange.value;

            imagefiltersaturatenumber.value = v;
            image.filtersaturate = v;
        }

        function imagefiltersaturaterangeupdate()
        {
            imagefiltersaturaterangeset();
            svgupdate();
        }

        function imagefiltersaturateexactload()
        {
            const br = document.createElement("br");
            imagefiltersaturate.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltersaturateexactupdate);
                imagefiltersaturate.append(button);
            }
        }
        addEventListener("load", imagefiltersaturateexactload);

        function imagefiltersaturateexactupdate(e)
        {
            imagefiltersaturatenumber.value = Number(e.target.value);

            imagefiltersaturatenumberupdate();
        }

        function imagefiltersaturateincrementload()
        {
            const br = document.createElement("br");
            imagefiltersaturate.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltersaturateincrementupdate);
                imagefiltersaturate.append(button);
            }
        }
        addEventListener("load", imagefiltersaturateincrementload);

        function imagefiltersaturateincrementupdate(e)
        {
            const v = Number(imagefiltersaturatenumber.value) + Number(e.target.value);

            if((imagefiltersaturatenumber.min <= v) && (v <= imagefiltersaturatenumber.max))
            {
                imagefiltersaturatenumber.value = v;

                imagefiltersaturatenumberupdate();
            }
        }



        function imagefiltersepiaload()
        {
            const div = document.createElement("div");
            div.id = "imagefiltersepia";
            div.innerHTML = "filter-sepia";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefiltersepiaload);

        function imagefiltersepianumberload()
        {
            const br = document.createElement("br");
            imagefiltersepia.append(br);

            const input = document.createElement("input");
            input.id = "imagefiltersepianumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagefiltersepianumberupdate);
            imagefiltersepia.append(input);

            //imagefiltersepianumberset();
        }
        addEventListener("load", imagefiltersepianumberload);

        function imagefiltersepianumberset()
        {
            const v = imagefiltersepianumber.value;

            imagefiltersepiarange.value = v;
            image.filtersepia = v;
        }

        function imagefiltersepianumberupdate()
        {
            imagefiltersepianumberset();
            svgupdate();
        }

        function imagefiltersepiarangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefiltersepiarange";
            input.max = imagefiltersepianumber.max;
            input.min = imagefiltersepianumber.min;
            input.step = imagefiltersepianumber.step;
            input.type = "range";
            input.value = imagefiltersepianumber.value;
            input.addEventListener("input", imagefiltersepiarangeupdate);
            imagefiltersepia.append(input);

            imagefiltersepiarangeset();
        }
        addEventListener("load", imagefiltersepiarangeload);

        function imagefiltersepiarangeset()
        {
            const v = imagefiltersepiarange.value;

            imagefiltersepianumber.value = v;
            image.filtersepia = v;
        }

        function imagefiltersepiarangeupdate()
        {
            imagefiltersepiarangeset();
            svgupdate();
        }

        function imagefiltersepiaexactload()
        {
            const br = document.createElement("br");
            imagefiltersepia.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltersepiaexactupdate);
                imagefiltersepia.append(button);
            }
        }
        addEventListener("load", imagefiltersepiaexactload);

        function imagefiltersepiaexactupdate(e)
        {
            imagefiltersepianumber.value = Number(e.target.value);

            imagefiltersepianumberupdate();
        }

        function imagefiltersepiaincrementload()
        {
            const br = document.createElement("br");
            imagefiltersepia.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltersepiaincrementupdate);
                imagefiltersepia.append(button);
            }
        }
        addEventListener("load", imagefiltersepiaincrementload);

        function imagefiltersepiaincrementupdate(e)
        {
            const v = Number(imagefiltersepianumber.value) + Number(e.target.value);

            if((imagefiltersepianumber.min <= v) && (v <= imagefiltersepianumber.max))
            {
                imagefiltersepianumber.value = v;

                imagefiltersepianumberupdate();
            }
        }



/*
        function imagemargintopload()
        {
            const div = document.createElement("div");
            div.id = "imagemargintop";
            div.innerHTML = "margin-top";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagemargintopload);

        function imagemargintopnumberload()
        {
            const br = document.createElement("br");
            imagemargintop.append(br);

            const input = document.createElement("input");
            input.id = "imagemargintopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagemargintopnumberupdate);
            imagemargintop.append(input);

            //imagemargintopnumberset();
        }
        addEventListener("load", imagemargintopnumberload);

        function imagemargintopnumberset()
        {
            const v = Number(imagemargintopnumber.value);

            imagemargintoprange.value = v;
            image.margintop = v;
        }

        function imagemargintopnumberupdate()
        {
            imagemargintopnumberset();

            svgupdate();
        }

        function imagemargintoprangeload()
        {
            const input = document.createElement("input");
            input.id = "imagemargintoprange";
            input.max = imagemargintopnumber.max;
            input.min = imagemargintopnumber.min;
            input.type = "range";
            input.value = imagemargintopnumber.value;
            input.addEventListener("input", imagemargintoprangeupdate);
            imagemargintop.append(input);

            imagemargintoprangeset();
        }
        addEventListener("load", imagemargintoprangeload);

        function imagemargintoprangeset()
        {
            const v = Number(imagemargintoprange.value);

            imagemargintopnumber.value = v;
            image.margintop = v;
        }

        function imagemargintoprangeupdate()
        {
            imagemargintoprangeset();

            svgupdate();
        }



        function imagemarginbottomload()
        {
            const div = document.createElement("div");
            div.id = "imagemarginbottom";
            div.innerHTML = "margin-bottom";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagemarginbottomload);

        function imagemarginbottomnumberload()
        {
            const br = document.createElement("br");
            imagemarginbottom.append(br);

            const input = document.createElement("input");
            input.id = "imagemarginbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagemarginbottomnumberupdate);
            imagemarginbottom.append(input);

            //imagemarginbottomnumberset();
        }
        addEventListener("load", imagemarginbottomnumberload);

        function imagemarginbottomnumberset()
        {
            const v = Number(imagemarginbottomnumber.value);

            imagemarginbottomrange.value = v;
            image.marginbottom = v;
        }

        function imagemarginbottomnumberupdate()
        {
            imagemarginbottomnumberset();

            svgupdate();
        }

        function imagemarginbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagemarginbottomrange";
            input.max = imagemarginbottomnumber.max;
            input.min = imagemarginbottomnumber.min;
            input.type = "range";
            input.value = imagemarginbottomnumber.value;
            input.addEventListener("input", imagemarginbottomrangeupdate);
            imagemarginbottom.append(input);

            imagemarginbottomrangeset();
        }
        addEventListener("load", imagemarginbottomrangeload);

        function imagemarginbottomrangeset()
        {
            const v = Number(imagemarginbottomrange.value);

            imagemarginbottomnumber.value = v;
            image.marginbottom = v;
        }

        function imagemarginbottomrangeupdate()
        {
            imagemarginbottomrangeset();

            svgupdate();
        }



        function imagemarginleftload()
        {
            const div = document.createElement("div");
            div.id = "imagemarginleft";
            div.innerHTML = "margin-left";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagemarginleftload);

        function imagemarginleftnumberload()
        {
            const br = document.createElement("br");
            imagemarginleft.append(br);

            const input = document.createElement("input");
            input.id = "imagemarginleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagemarginleftnumberupdate);
            imagemarginleft.append(input);

            //imagemarginleftnumberset();
        }
        addEventListener("load", imagemarginleftnumberload);

        function imagemarginleftnumberset()
        {
            const v = Number(imagemarginleftnumber.value);

            imagemarginleftrange.value = v;
            image.marginleft = v;
        }

        function imagemarginleftnumberupdate()
        {
            imagemarginleftnumberset();

            svgupdate();
        }

        function imagemarginleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagemarginleftrange";
            input.max = imagemarginleftnumber.max;
            input.min = imagemarginleftnumber.min;
            input.type = "range";
            input.value = imagemarginleftnumber.value;
            input.addEventListener("input", imagemarginleftrangeupdate);
            imagemarginleft.append(input);

            imagemarginleftrangeset();
        }
        addEventListener("load", imagemarginleftrangeload);

        function imagemarginleftrangeset()
        {
            const v = Number(imagemarginleftrange.value);

            imagemarginleftnumber.value = v;
            image.marginleft = v;
        }

        function imagemarginleftrangeupdate()
        {
            imagemarginleftrangeset();

            svgupdate();
        }



        function imagemarginrightload()
        {
            const div = document.createElement("div");
            div.id = "imagemarginright";
            div.innerHTML = "margin-right";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagemarginrightload);

        function imagemarginrightnumberload()
        {
            const br = document.createElement("br");
            imagemarginright.append(br);

            const input = document.createElement("input");
            input.id = "imagemarginrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagemarginrightnumberupdate);
            imagemarginright.append(input);

            //imagemarginrightnumberset();
        }
        addEventListener("load", imagemarginrightnumberload);

        function imagemarginrightnumberset()
        {
            const v = Number(imagemarginrightnumber.value);

            imagemarginrightrange.value = v;
            image.marginright = v;
        }

        function imagemarginrightnumberupdate()
        {
            imagemarginrightnumberset();

            svgupdate();
        }

        function imagemarginrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagemarginrightrange";
            input.max = imagemarginrightnumber.max;
            input.min = imagemarginrightnumber.min;
            input.type = "range";
            input.value = imagemarginrightnumber.value;

            input.addEventListener("input", imagemarginrightrangeupdate);
            imagemarginright.append(input);

            imagemarginrightrangeset();
        }
        addEventListener("load", imagemarginrightrangeload);

        function imagemarginrightrangeset()
        {
            const v = Number(imagemarginrightrange.value);

            imagemarginrightnumber.value = v;
            image.marginright = v;
        }

        function imagemarginrightrangeupdate()
        {
            imagemarginrightrangeset();

            svgupdate();
        }



        function imagepaddingtopload()
        {
            const div = document.createElement("div");
            div.id = "imagepaddingtop";
            div.innerHTML = "padding-top";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagepaddingtopload);

        function imagepaddingtopnumberload()
        {
            const br = document.createElement("br");
            imagepaddingtop.append(br);

            const input = document.createElement("input");
            input.id = "imagepaddingtopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagepaddingtopnumberupdate);
            imagepaddingtop.append(input);

            //imagepaddingtopnumberset();
        }
        addEventListener("load", imagepaddingtopnumberload);

        function imagepaddingtopnumberset()
        {
            const v = Number(imagepaddingtopnumber.value);

            imagepaddingtoprange.value = v;
            image.paddingtop = v;
        }

        function imagepaddingtopnumberupdate()
        {
            imagepaddingtopnumberset();

            svgupdate();
        }

        function imagepaddingtoprangeload()
        {
            const input = document.createElement("input");
            input.id = "imagepaddingtoprange";
            input.max = imagepaddingtopnumber.max;
            input.min = imagepaddingtopnumber.min;
            input.type = "range";
            input.value = imagepaddingtopnumber.value;
            input.addEventListener("input", imagepaddingtoprangeupdate);
            imagepaddingtop.append(input);

            imagepaddingtoprangeset();
        }
        addEventListener("load", imagepaddingtoprangeload);

        function imagepaddingtoprangeset()
        {
            const v = Number(imagepaddingtoprange.value);

            imagepaddingtopnumber.value = v;
            image.paddingtop = v;
        }

        function imagepaddingtoprangeupdate()
        {
            imagepaddingtoprangeset();

            svgupdate();
        }



        function imagepaddingbottomload()
        {
            const div = document.createElement("div");
            div.id = "imagepaddingbottom";
            div.innerHTML = "padding-bottom";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagepaddingbottomload);

        function imagepaddingbottomnumberload()
        {
            const br = document.createElement("br");
            imagepaddingbottom.append(br);

            const input = document.createElement("input");
            input.id = "imagepaddingbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagepaddingbottomnumberupdate);
            imagepaddingbottom.append(input);

            //imagepaddingbottomnumberset();
        }
        addEventListener("load", imagepaddingbottomnumberload);

        function imagepaddingbottomnumberset()
        {
            const v = Number(imagepaddingbottomnumber.value);

            imagepaddingbottomrange.value = v;
            image.paddingbottom = v;
        }

        function imagepaddingbottomnumberupdate()
        {
            imagepaddingbottomnumberset();

            svgupdate();
        }

        function imagepaddingbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagepaddingbottomrange";
            input.max = imagepaddingbottomnumber.max;
            input.min = imagepaddingbottomnumber.min;
            input.type = "range";
            input.value = imagepaddingbottomnumber.value;
            input.addEventListener("input", imagepaddingbottomrangeupdate);
            imagepaddingbottom.append(input);

            imagepaddingbottomrangeset();
        }
        addEventListener("load", imagepaddingbottomrangeload);

        function imagepaddingbottomrangeset()
        {
            const v = Number(imagepaddingbottomrange.value);

            imagepaddingbottomnumber.value = v;
            image.paddingbottom = v;
        }

        function imagepaddingbottomrangeupdate()
        {
            imagepaddingbottomrangeset();

            svgupdate();
        }



        function imagepaddingleftload()
        {
            const div = document.createElement("div");
            div.id = "imagepaddingleft";
            div.innerHTML = "padding-left";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagepaddingleftload);

        function imagepaddingleftnumberload()
        {
            const br = document.createElement("br");
            imagepaddingleft.append(br);

            const input = document.createElement("input");
            input.id = "imagepaddingleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagepaddingleftnumberupdate);
            imagepaddingleft.append(input);

            //imagepaddingleftnumberset();
        }
        addEventListener("load", imagepaddingleftnumberload);

        function imagepaddingleftnumberset()
        {
            const v = Number(imagepaddingleftnumber.value);

            imagepaddingleftrange.value = v;
            image.paddingleft = v;
        }

        function imagepaddingleftnumberupdate()
        {
            imagepaddingleftnumberset();

            svgupdate();
        }

        function imagepaddingleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagepaddingleftrange";
            input.max = imagepaddingleftnumber.max;
            input.min = imagepaddingleftnumber.min;
            input.type = "range";
            input.value = imagepaddingleftnumber.value;
            input.addEventListener("input", imagepaddingleftrangeupdate);
            imagepaddingleft.append(input);

            imagepaddingleftrangeset();
        }
        addEventListener("load", imagepaddingleftrangeload);

        function imagepaddingleftrangeset()
        {
            const v = Number(imagepaddingleftrange.value);

            imagepaddingleftnumber.value = v;
            image.paddingleft = v;
        }

        function imagepaddingleftrangeupdate()
        {
            imagepaddingleftrangeset();

            svgupdate();
        }



        function imagepaddingrightload()
        {
            const div = document.createElement("div");
            div.id = "imagepaddingright";
            div.innerHTML = "padding-right";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagepaddingrightload);

        function imagepaddingrightnumberload()
        {
            const br = document.createElement("br");
            imagepaddingright.append(br);

            const input = document.createElement("input");
            input.id = "imagepaddingrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagepaddingrightnumberupdate);
            imagepaddingright.append(input);

            //imagepaddingrightnumberset();
        }
        addEventListener("load", imagepaddingrightnumberload);

        function imagepaddingrightnumberset()
        {
            const v = Number(imagepaddingrightnumber.value);

            imagepaddingrightrange.value = v;
            image.paddingright = v;
        }

        function imagepaddingrightnumberupdate()
        {
            imagepaddingrightnumberset();

            svgupdate();
        }

        function imagepaddingrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagepaddingrightrange";
            input.max = imagepaddingrightnumber.max;
            input.min = imagepaddingrightnumber.min;
            input.type = "range";
            input.value = imagepaddingrightnumber.value;
            input.addEventListener("input", imagepaddingrightrangeupdate);
            imagepaddingright.append(input);

            imagepaddingrightrangeset();
        }
        addEventListener("load", imagepaddingrightrangeload);

        function imagepaddingrightrangeset()
        {
            const v = Number(imagepaddingrightrange.value);

            imagepaddingrightnumber.value = v;
            image.paddingright = v;
        }

        function imagepaddingrightrangeupdate()
        {
            imagepaddingrightrangeset();

            svgupdate();
        }
//*/






        function messagetextload()
        {
            const div = document.createElement("div");
            div.id = "messagetext";
            div.innerHTML = "text";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagetextload);

        function messagetexttextareaload()
        {
            const br = document.createElement("br");
            messagetext.append(br);

            const textarea = document.createElement("textarea");
            textarea.id = "messagetexttextarea";
            textarea.addEventListener("input", messagetexttextareaupdate);
            messagetext.append(textarea);

            textarea.value = "Jesus loves you!";

            messagetexttextareaset();
        }
        addEventListener("load", messagetexttextareaload);

        function messagetexttextareaset()
        {
            text.messagetext = messagetexttextarea.value;
        }

        function messagetexttextareaupdate()
        {
            messagetexttextareaset();
            svgupdate();
        }



        function messagewidthload()
        {
            const div = document.createElement("div");
            div.id = "messagewidth";
            div.innerHTML = "width";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagewidthload);

        function messagewidthnumberload()
        {
            const br = document.createElement("br");
            messagewidth.append(br);

            const input = document.createElement("input");
            input.id = "messagewidthnumber";
            input.max = maxwidth;
            input.min = 0;
            input.type = "number";
            input.value = canvas.width - 100;
            input.addEventListener("input", messagewidthnumberupdate);
            messagewidth.append(input);

            //messagewidthnumberset();
        }
        addEventListener("load", messagewidthnumberload);

        function messagewidthnumberset()
        {
            const v = Number(messagewidthnumber.value);

            messagewidthrange.value = v;
            text.messagewidth = v;
        }

        function messagewidthnumberupdate()
        {
            messagewidthnumberset();
            svgupdate();
        }

        function messagewidthrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagewidthrange";
            input.max = messagewidthnumber.max;
            input.min = messagewidthnumber.min;
            input.type = "range";
            input.value = messagewidthnumber.value;
            input.addEventListener("input", messagewidthrangeupdate);
            messagewidth.append(input);

            messagewidthrangeset();
        }
        addEventListener("load", messagewidthrangeload);

        function messagewidthrangeset()
        {
            const v = Number(messagewidthrange.value);

            messagewidthnumber.value = v;
            text.messagewidth = v;
        }

        function messagewidthrangeupdate()
        {
            messagewidthrangeset();
            svgupdate();
        }

        function messagewidthexactload()
        {
            const br = document.createElement("br");
            messagewidth.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagewidthexactupdate);
                messagewidth.append(button);
            }
        }
        addEventListener("load", messagewidthexactload);

        function messagewidthexactupdate(e)
        {
            messagewidthnumber.value = canvas.width * Number(e.target.value);

            messagewidthnumberupdate();
        }

        function messagewidthincrementload()
        {
            const br = document.createElement("br");
            messagewidth.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagewidthincrementupdate);
                messagewidth.append(button);
            }
        }
        addEventListener("load", messagewidthincrementload);

        function messagewidthincrementupdate(e)
        {
            const v = Number(messagewidthnumber.value) + Number(e.target.value);

            if((messagewidthnumber.min <= v) && (v <= messagewidthnumber.max))
            {
                messagewidthnumber.value = v;

                messagewidthnumberupdate();
            }
        }



        function messageheightload()
        {
            const div = document.createElement("div");
            div.id = "messageheight";
            div.innerHTML = "height";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messageheightload);

        function messageheightnumberload()
        {
            const br = document.createElement("br");
            messageheight.append(br);

            const input = document.createElement("input");
            input.id = "messageheightnumber";
            input.max = maxheight;
            input.min = 0;
            input.type = "number";
            input.value = 300;
            input.addEventListener("input", messageheightnumberupdate);
            messageheight.append(input);

            //messageheightnumberset();
        }
        addEventListener("load", messageheightnumberload);

        function messageheightnumberset()
        {
            const v = Number(messageheightnumber.value);

            messageheightrange.value = v;
            text.messageheight = v;
        }

        function messageheightnumberupdate()
        {
            messageheightnumberset();
            svgupdate();
        }

        function messageheightrangeload()
        {
            const input = document.createElement("input");
            input.id = "messageheightrange";
            input.max = messageheightnumber.max;
            input.min = messageheightnumber.min;
            input.type = "range";
            input.value = messageheightnumber.value;
            input.addEventListener("input", messageheightrangeupdate);
            messageheight.append(input);

            messageheightrangeset();
        }
        addEventListener("load", messageheightrangeload);

        function messageheightrangeset()
        {
            const v = Number(messageheightrange.value);

            messageheightnumber.value = v;
            text.messageheight = v;
        }

        function messageheightrangeupdate()
        {
            messageheightrangeset();
            svgupdate();
        }

        function messageheightexactload()
        {
            const br = document.createElement("br");
            messageheight.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageheightexactupdate);
                messageheight.append(button);
            }
        }
        addEventListener("load", messageheightexactload);

        function messageheightexactupdate(e)
        {
            messageheightnumber.value = canvas.height * Number(e.target.value);

            messageheightnumberupdate();
        }

        function messageheightincrementload()
        {
            const br = document.createElement("br");
            messageheight.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageheightincrementupdate);
                messageheight.append(button);
            }
        }
        addEventListener("load", messageheightincrementload);

        function messageheightincrementupdate(e)
        {
            const v = Number(messageheightnumber.value) + Number(e.target.value);

            if((messageheightnumber.min <= v) && (v <= messageheightnumber.max))
            {
                messageheightnumber.value = v;

                messageheightnumberupdate();
            }
        }



        function messagexload()
        {
            const div = document.createElement("div");
            div.id = "messagex";
            div.innerHTML = "x";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagexload);

        function messagexnumberload()
        {
            const br = document.createElement("br");
            messagex.append(br);

            const input = document.createElement("input");
            input.id = "messagexnumber";
            input.max = maxwidth;
            input.min = -maxwidth;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", messagexnumberupdate);
            messagex.append(input);

            //messagexnumberset();
        }
        addEventListener("load", messagexnumberload);

        function messagexnumberset()
        {
            const v = Number(messagexnumber.value);

            messagexrange.value = v;
            text.messagex = v;
        }

        function messagexnumberupdate()
        {
            messagexnumberset();
            svgupdate();
        }

        function messagexrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagexrange";
            input.max = messagexnumber.max;
            input.min = messagexnumber.min;
            input.type = "range";
            input.value = messagexnumber.value;
            input.addEventListener("input", messagexrangeupdate);
            messagex.append(input);

            messagexrangeset();
        }
        addEventListener("load", messagexrangeload);

        function messagexrangeset()
        {
            const v = Number(messagexrange.value);

            messagexnumber.value = v;
            text.messagex = v;
        }

        function messagexrangeupdate()
        {
            messagexrangeset();
            svgupdate();
        }

        function messagexexactload()
        {
            const br = document.createElement("br");
            messagex.append(br);

            const array =
            [
                ["left",0],
                ["center",0.5],
                ["right",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagexexactupdate);
                messagex.append(button);
            }
        }
        addEventListener("load", messagexexactload);

        function messagexexactupdate(e)
        {
            //messagexnumber.value = (canvas.width - text.messagewidth - text.messagepaddingleft - text.messagepaddingright) * Number(e.target.value);
            messagexnumber.value = (canvas.width - text.messagewidth) * Number(e.target.value);

            messagexnumberupdate();
        }

        function messagexincrementload()
        {
            const br = document.createElement("br");
            messagex.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagexincrementupdate);
                messagex.append(button);
            }
        }
        addEventListener("load", messagexincrementload);

        function messagexincrementupdate(e)
        {
            const v = Number(messagexnumber.value) + Number(e.target.value);

            if((messagexnumber.min <= v) && (v <= messagexnumber.max))
            {
                messagexnumber.value = v;

                messagexnumberupdate();
            }
        }



        function messageyload()
        {
            const div = document.createElement("div");
            div.id = "messagey";
            div.innerHTML = "y";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messageyload);

        function messageynumberload()
        {
            const br = document.createElement("br");
            messagey.append(br);

            const input = document.createElement("input");
            input.id = "messageynumber";
            input.max = maxheight;
            input.min = -maxheight;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", messageynumberupdate);
            messagey.append(input);

            //messageynumberset();
        }
        addEventListener("load", messageynumberload);

        function messageynumberset()
        {
            const v = Number(messageynumber.value);

            messageyrange.value = v;
            text.messagey = v;
        }

        function messageynumberupdate()
        {
            messageynumberset();
            svgupdate();
        }

        function messageyrangeload()
        {
            const input = document.createElement("input");
            input.id = "messageyrange";
            input.max = messageynumber.max;
            input.min = messageynumber.min;
            input.type = "range";
            input.value = messageynumber.value;
            input.addEventListener("input", messageyrangeupdate);
            messagey.append(input);

            messageyrangeset();
        }
        addEventListener("load", messageyrangeload);

        function messageyrangeset()
        {
            const v = Number(messageyrange.value);

            messageynumber.value = v;
            text.messagey = v;
        }

        function messageyrangeupdate()
        {
            messageyrangeset();
            svgupdate();
        }

        function messageyexactload()
        {
            const br = document.createElement("br");
            messagey.append(br);

            const array =
            [
                ["top",0],
                ["center",0.5],
                ["bottom",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageyexactupdate);
                messagey.append(button);
            }
        }
        addEventListener("load", messageyexactload);

        function messageyexactupdate(e)
        {
            //messageynumber.value = (canvas.height - text.messageheight - text.messagepaddingtop - text.messagepaddingbottom) * Number(e.target.value);
            messageynumber.value = (canvas.height - text.messageheight) * Number(e.target.value);

            messageynumberupdate();
        }

        function messageyincrementload()
        {
            const br = document.createElement("br");
            messagey.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageyincrementupdate);
                messagey.append(button);
            }
        }
        addEventListener("load", messageyincrementload);

        function messageyincrementupdate(e)
        {
            const v = Number(messageynumber.value) + Number(e.target.value);

            if((messageynumber.min <= v) && (v <= messageynumber.max))
            {
                messageynumber.value = v;

                messageynumberupdate();
            }
        }



        function messagebackgroundcolorload()
        {
            const div = document.createElement("div");
            div.id = "messagebackgroundcolor";
            div.innerHTML = "background-color";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagebackgroundcolorload);

        function messagebackgroundcolorcolorload()
        {
            const br = document.createElement("br");
            messagebackgroundcolor.append(br);

            const input = document.createElement("input");
            input.id = "messagebackgroundcolorcolor";
            input.type = "color";
            input.value = "#ffffff";
            input.addEventListener("input", messagebackgroundcolorcolorupdate);
            messagebackgroundcolor.append(input);

            //messagebackgroundcolorcolorset();
        }
        addEventListener("load", messagebackgroundcolorcolorload);

        function messagebackgroundcolorcolorset()
        {
            const c = messagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagebackgroundalphanumber.value;

            text.messagebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagebackgroundcolorcolorupdate()
        {
            messagebackgroundcolorcolorset();
            svgupdate();
        }

        function messagebackgroundcolorexactload()
        {
            const br = document.createElement("br");
            messagebackgroundcolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagebackgroundcolorexactupdate);
                messagebackgroundcolor.append(button);
            }
        }
        addEventListener("load", messagebackgroundcolorexactload);

        function messagebackgroundcolorexactupdate(e)
        {
            messagebackgroundcolorcolor.value = e.target.value;

            messagebackgroundcolorcolorupdate();
        }



        function messagebackgroundalphaload()
        {
            const div = document.createElement("div");
            div.id = "messagebackgroundalpha";
            div.innerHTML = "background-alpha";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagebackgroundalphaload);

        function messagebackgroundalphanumberload()
        {
            const br = document.createElement("br");
            messagebackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "messagebackgroundalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 0.5;
            input.addEventListener("input", messagebackgroundalphanumberupdate);
            messagebackgroundalpha.append(input);

            //messagebackgroundalphanumberset();
        }
        addEventListener("load", messagebackgroundalphanumberload);

        function messagebackgroundalphanumberset()
        {
            const c = messagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagebackgroundalphanumber.value;

            messagebackgroundalpharange.value = a;
            text.messagebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagebackgroundalphanumberupdate()
        {
            messagebackgroundalphanumberset();
            svgupdate();
        }

        function messagebackgroundalpharangeload()
        {
            const input = document.createElement("input");
            input.id = "messagebackgroundalpharange";
            input.max = messagebackgroundalphanumber.max;
            input.min = messagebackgroundalphanumber.min;
            input.step = messagebackgroundalphanumber.step;
            input.type = "range";
            input.value = messagebackgroundalphanumber.value;
            input.addEventListener("input", messagebackgroundalpharangeupdate);
            messagebackgroundalpha.append(input);

            messagebackgroundalpharangeset();
        }
        addEventListener("load", messagebackgroundalpharangeload);

        function messagebackgroundalpharangeset()
        {
            const c = messagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagebackgroundalpharange.value;

            messagebackgroundalphanumber.value = a;
            text.messagebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagebackgroundalpharangeupdate()
        {
            messagebackgroundalpharangeset();
            svgupdate();
        }

        function messagebackgroundalphaexactload()
        {
            const br = document.createElement("br");
            messagebackgroundalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagebackgroundalphaexactupdate);
                messagebackgroundalpha.append(button);
            }
        }
        addEventListener("load", messagebackgroundalphaexactload);

        function messagebackgroundalphaexactupdate(e)
        {
            messagebackgroundalphanumber.value = Number(e.target.value);

            messagebackgroundalphanumberupdate();
        }

        function messagebackgroundalphaincrementload()
        {
            const br = document.createElement("br");
            messagebackgroundalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagebackgroundalphaincrementupdate);
                messagebackgroundalpha.append(button);
            }
        }
        addEventListener("load", messagebackgroundalphaincrementload);

        function messagebackgroundalphaincrementupdate(e)
        {
            let v = Number(messagebackgroundalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((messagebackgroundalphanumber.min <= v) && (v <= messagebackgroundalphanumber.max))
            {
                messagebackgroundalphanumber.value = v;

                messagebackgroundalphanumberupdate();
            }
        }



        function messagebordercolorload()
        {
            const div = document.createElement("div");
            div.id = "messagebordercolor";
            div.innerHTML = "border-color";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagebordercolorload);

        function messagebordercolorcolorload()
        {
            const br = document.createElement("br");
            messagebordercolor.append(br);

            const input = document.createElement("input");
            input.id = "messagebordercolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", messagebordercolorcolorupdate);
            messagebordercolor.append(input);

            //messagebordercolorcolorset();
        }
        addEventListener("load", messagebordercolorcolorload);

        function messagebordercolorcolorset()
        {
            const c = messagebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messageborderalphanumber.value;

            text.messagebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagebordercolorcolorupdate()
        {
            messagebordercolorcolorset();
            svgupdate();
        }

        function messagebordercolorexactload()
        {
            const br = document.createElement("br");
            messagebordercolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagebordercolorexactupdate);
                messagebordercolor.append(button);
            }
        }
        addEventListener("load", messagebordercolorexactload);

        function messagebordercolorexactupdate(e)
        {
            messagebordercolorcolor.value = e.target.value;

            messagebordercolorcolorupdate();
        }



        function messageborderalphaload()
        {
            const div = document.createElement("div");
            div.id = "messageborderalpha";
            div.innerHTML = "border-alpha";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messageborderalphaload);

        function messageborderalphanumberload()
        {
            const br = document.createElement("br");
            messageborderalpha.append(br);

            const input = document.createElement("input");
            input.id = "messageborderalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", messageborderalphanumberupdate);
            messageborderalpha.append(input);

            //messageborderalphanumberset();
        }
        addEventListener("load", messageborderalphanumberload);

        function messageborderalphanumberset()
        {
            const c = messagebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messageborderalphanumber.value;

            messageborderalpharange.value = a;
            text.messagebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messageborderalphanumberupdate()
        {
            messageborderalphanumberset();
            svgupdate();
        }

        function messageborderalpharangeload()
        {
            const input = document.createElement("input");
            input.id = "messageborderalpharange";
            input.max = messageborderalphanumber.max;
            input.min = messageborderalphanumber.min;
            input.step = messageborderalphanumber.step;
            input.type = "range";
            input.value = messageborderalphanumber.value;
            input.addEventListener("input", messageborderalpharangeupdate);
            messageborderalpha.append(input);

            messageborderalpharangeset();
        }
        addEventListener("load", messageborderalpharangeload);

        function messageborderalpharangeset()
        {
            const c = messagebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messageborderalpharange.value;

            messageborderalphanumber.value = a;
            text.messagebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messageborderalpharangeupdate()
        {
            messageborderalpharangeset();
            svgupdate();
        }

        function messageborderalphaexactload()
        {
            const br = document.createElement("br");
            messageborderalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderalphaexactupdate);
                messageborderalpha.append(button);
            }
        }
        addEventListener("load", messageborderalphaexactload);

        function messageborderalphaexactupdate(e)
        {
            messageborderalphanumber.value = Number(e.target.value);

            messageborderalphanumberupdate();
        }

        function messageborderalphaincrementload()
        {
            const br = document.createElement("br");
            messageborderalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderalphaincrementupdate);
                messageborderalpha.append(button);
            }
        }
        addEventListener("load", messageborderalphaincrementload);

        function messageborderalphaincrementupdate(e)
        {
            let v = Number(messageborderalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((messageborderalphanumber.min <= v) && (v <= messageborderalphanumber.max))
            {
                messageborderalphanumber.value = v;

                messageborderalphanumberupdate();
            }
        }



        function messageborderradiusload()
        {
            const div = document.createElement("div");
            div.id = "messageborderradius";
            div.innerHTML = "border-radius";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messageborderradiusload);

        function messageborderradiusnumberload()
        {
            const br = document.createElement("br");
            messageborderradius.append(br);

            const input = document.createElement("input");
            input.id = "messageborderradiusnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", messageborderradiusnumberupdate);
            messageborderradius.append(input);

            //messageborderradiusnumberset();
        }
        addEventListener("load", messageborderradiusnumberload);

        function messageborderradiusnumberset()
        {
            const v = Number(messageborderradiusnumber.value);

            messageborderradiusrange.value = v;
            text.messageborderradius = v;
        }

        function messageborderradiusnumberupdate()
        {
            messageborderradiusnumberset();
            svgupdate();
        }

        function messageborderradiusrangeload()
        {
            const input = document.createElement("input");
            input.id = "messageborderradiusrange";
            input.max = messageborderradiusnumber.max;
            input.min = messageborderradiusnumber.min;
            input.type = "range";
            input.value = messageborderradiusnumber.value;
            input.addEventListener("input", messageborderradiusrangeupdate);
            messageborderradius.append(input);

            messageborderradiusrangeset();
        }
        addEventListener("load", messageborderradiusrangeload);

        function messageborderradiusrangeset()
        {
            const v = Number(messageborderradiusrange.value);

            messageborderradiusnumber.value = v;
            text.messageborderradius = v;
        }

        function messageborderradiusrangeupdate()
        {
            messageborderradiusrangeset();
            svgupdate();
        }

        function messageborderradiusexactload()
        {
            const br = document.createElement("br");
            messageborderradius.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderradiusexactupdate);
                messageborderradius.append(button);
            }
        }
        addEventListener("load", messageborderradiusexactload);

        function messageborderradiusexactupdate(e)
        {
            messageborderradiusnumber.value = Number(e.target.value);

            messageborderradiusnumberupdate();
        }

        function messageborderradiusincrementload()
        {
            const br = document.createElement("br");
            messageborderradius.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderradiusincrementupdate);
                messageborderradius.append(button);
            }
        }
        addEventListener("load", messageborderradiusincrementload);

        function messageborderradiusincrementupdate(e)
        {
            const v = Number(messageborderradiusnumber.value) + Number(e.target.value);

            if((messageborderradiusnumber.min <= v) && (v <= messageborderradiusnumber.max))
            {
                messageborderradiusnumber.value = v;

                messageborderradiusnumberupdate();
            }
        }



        function messageborderstyleload()
        {
            const div = document.createElement("div");
            div.id = "messageborderstyle";
            div.innerHTML = "border-style";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messageborderstyleload);

        function messageborderstyleselectload()
        {
            const br = document.createElement("br");
            messageborderstyle.append(br);

            const select = document.createElement("select");
            select.id = "messageborderstyleselect";
            select.addEventListener("input", messageborderstyleselectupdate);
            messageborderstyle.append(select);

            for(const value of borderstylearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
    
10000
        }

            //select.value = borderstylearray[8];

            messageborderstyleselectset();
        }
        addEventListener("load", messageborderstyleselectload);

        function messageborderstyleselectset()
        {
            text.messageborderstyle = messageborderstyleselect.value;
        }

        function messageborderstyleselectupdate()
        {
            messageborderstyleselectset();
            svgupdate();
        }



        function messageborderwidthload()
        {
            const div = document.createElement("div");
            div.id = "messageborderwidth";
            div.innerHTML = "border-width";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messageborderwidthload);

        function messageborderwidthnumberload()
        {
            const br = document.createElement("br");
            messageborderwidth.append(br);

            const input = document.createElement("input");
            input.id = "messageborderwidthnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 25;
            input.addEventListener("input", messageborderwidthnumberupdate);
            messageborderwidth.append(input);

            //messageborderwidthnumberset();
        }
        addEventListener("load", messageborderwidthnumberload);

        function messageborderwidthnumberset()
        {
            const v = Number(messageborderwidthnumber.value);

            messageborderwidthrange.value = v;
            text.messageborderwidth = v;
        }

        function messageborderwidthnumberupdate()
        {
            messageborderwidthnumberset();
            svgupdate();
        }

        function messageborderwidthrangeload()
        {
            const input = document.createElement("input");
            input.id = "messageborderwidthrange";
            input.max = messageborderwidthnumber.max;
            input.min = messageborderwidthnumber.min;
            input.type = "range";
            input.value = messageborderwidthnumber.value;
            input.addEventListener("input", messageborderwidthrangeupdate);
            messageborderwidth.append(input);

            messageborderwidthrangeset();
        }
        addEventListener("load", messageborderwidthrangeload);

        function messageborderwidthrangeset()
        {
            const v = Number(messageborderwidthrange.value);

            messageborderwidthnumber.value = v;
            text.messageborderwidth = v;
        }

        function messageborderwidthrangeupdate()
        {
            messageborderwidthrangeset();
            svgupdate();
        }

        function messageborderwidthexactload()
        {
            const br = document.createElement("br");
            messageborderwidth.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderwidthexactupdate);
                messageborderwidth.append(button);
            }
        }
        addEventListener("load", messageborderwidthexactload);

        function messageborderwidthexactupdate(e)
        {
            messageborderwidthnumber.value = Number(e.target.value);

            messageborderwidthnumberupdate();
        }

        function messageborderwidthincrementload()
        {
            const br = document.createElement("br");
            messageborderwidth.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderwidthincrementupdate);
                messageborderwidth.append(button);
            }
        }
        addEventListener("load", messageborderwidthincrementload);

        function messageborderwidthincrementupdate(e)
        {
            const v = Number(messageborderwidthnumber.value) + Number(e.target.value);

            if((messageborderwidthnumber.min <= v) && (v <= messageborderwidthnumber.max))
            {
                messageborderwidthnumber.value = v;

                messageborderwidthnumberupdate();
            }
        }



        function messagehorizontalload()
        {
            const div = document.createElement("div");
            div.id = "messagehorizontal";
            div.innerHTML = "horizontal";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagehorizontalload);

        function messagehorizontalselectload()
        {
            const br = document.createElement("br");
            messagehorizontal.append(br);

            const select = document.createElement("select");
            select.id = "messagehorizontalselect";
            select.addEventListener("input", messagehorizontalselectupdate);
            messagehorizontal.append(select);

            for(const value of horizontalarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            select.value = horizontalarray[1];

            messagehorizontalselectset();
        }
        addEventListener("load", messagehorizontalselectload);

        function messagehorizontalselectset()
        {
            text.messagehorizontal = messagehorizontalselect.value;
        }

        function messagehorizontalselectupdate()
        {
            messagehorizontalselectset();
            svgupdate();
        }



        function messageverticalload()
        {
            const div = document.createElement("div");
            div.id = "messagevertical";
            div.innerHTML = "vertical";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messageverticalload);

        function messageverticalselectload()
        {
            const br = document.createElement("br");
            messagevertical.append(br);

            const select = document.createElement("select");
            select.id = "messageverticalselect";
            select.addEventListener("input", messageverticalselectupdate);
            messagevertical.append(select);

            for(const value of verticalarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            select.value = verticalarray[1];

            messageverticalselectset();
        }
        addEventListener("load", messageverticalselectload);

        function messageverticalselectset()
        {
            text.messagevertical = messageverticalselect.value;
        }

        function messageverticalselectupdate()
        {
            messageverticalselectset();
            svgupdate();
        }



        function messagewritingmodeload()
        {
            const div = document.createElement("div");
            div.id = "messagewritingmode";
            div.innerHTML = "writing-mode";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagewritingmodeload);

        function messagewritingmodeselectload()
        {
            const br = document.createElement("br");
            messagewritingmode.append(br);

            const select = document.createElement("select");
            select.id = "messagewritingmodeselect";
            select.addEventListener("input", messagewritingmodeselectupdate);
            messagewritingmode.append(select);

            for(const value of writingmodearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            messagewritingmodeselectset();
        }
        addEventListener("load", messagewritingmodeselectload);

        function messagewritingmodeselectset()
        {
            text.messagewritingmode = messagewritingmodeselect.value;
        }

        function messagewritingmodeselectupdate()
        {
            messagewritingmodeselectset();
            svgupdate();
        }



        function messagefontfamilyload()
        {
            const div = document.createElement("div");
            div.id = "messagefontfamily";
            div.innerHTML = "font-family";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagefontfamilyload);

        function messagefontfamilyselectload()
        {
            const br = document.createElement("br");
            messagefontfamily.append(br);

            const select = document.createElement("select");
            select.id = "messagefontfamilyselect";
            select.addEventListener("input", messagefontfamilyselectupdate);
            messagefontfamily.append(select);

            for(const value of fontfamilyarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            messagefontfamilyselectset();
        }
        addEventListener("load", messagefontfamilyselectload);

        function messagefontfamilyselectset()
        {
            text.messagefontfamily = messagefontfamilyselect.value;
        }

        function messagefontfamilyselectupdate()
        {
            messagefontfamilyselectset();
            svgupdate();
        }




function messagefontsizeload()
        {
            const div = document.createElement("div");
            div.id = "messagefontsize";
            div.innerHTML = "font-size";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagefontsizeload);

        function messagefontsizenumberload()
        {
            const br = document.createElement("br");
            messagefontsize.append(br);

            const input = document.createElement("input");
            input.id = "messagefontsizenumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 140;
            input.addEventListener("input", messagefontsizenumberupdate);
            messagefontsize.append(input);

            //messagefontsizenumberset();
        }
        addEventListener("load", messagefontsizenumberload);

        function messagefontsizenumberset()
        {
            const v = Number(messagefontsizenumber.value);

            messagefontsizerange.value = v;
            text.messagefontsize = v;
        }

        function messagefontsizenumberupdate()
        {
            messagefontsizenumberset();
            svgupdate();
        }

        function messagefontsizerangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefontsizerange";
            input.max = messagefontsizenumber.max;
            input.min = messagefontsizenumber.min;
            input.type = "range";
            input.value = messagefontsizenumber.value;
            input.addEventListener("input", messagefontsizerangeupdate);
            messagefontsize.append(input);

            messagefontsizerangeset();
        }
        addEventListener("load", messagefontsizerangeload);

        function messagefontsizerangeset()
        {
            const v = Number(messagefontsizerange.value);

            messagefontsizenumber.value = v;
            text.messagefontsize = v;
        }

        function messagefontsizerangeupdate()
        {
            messagefontsizerangeset();
            svgupdate();
        }

        function messagefontsizeexactload()
        {
            const br = document.createElement("br");
            messagefontsize.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefontsizeexactupdate);
                messagefontsize.append(button);
            }
        }
        addEventListener("load", messagefontsizeexactload);

        function messagefontsizeexactupdate(e)
        {
            messagefontsizenumber.value = Number(e.target.value);

            messagefontsizenumberupdate();
        }

        function messagefontsizeincrementload()
        {
            const br = document.createElement("br");
            messagefontsize.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefontsizeincrementupdate);
                messagefontsize.append(button);
            }
        }
        addEventListener("load", messagefontsizeincrementload);

        function messagefontsizeincrementupdate(e)
        {
            const v = Number(messagefontsizenumber.value) + Number(e.target.value);

            if((messagefontsizenumber.min <= v) && (v <= messagefontsizenumber.max))
            {
                messagefontsizenumber.value = v;

                messagefontsizenumberupdate();
            }
        }

/*
        function messagefontsizefitload()
        {
            const button = document.createElement("button");
            button.innerHTML = "fit";
            button.addEventListener("click", messagefontsizefitupdate);
            messagefontsize.append(button);
        }
        addEventListener("load", messagefontsizefitload);

        function messagefontsizefitupdate()
        {
            const t = document.createElement("div");
            messagefontsize.append(t);
            t.innerHTML = text.bookname;
            t.style.fontSize = `${messagefontsizenumber.value}px`;

            const h1 = text.messagewidth;
            const h2 = text.messageheight;
            const h3 = t.offsetWidth;
            const h4 = t.offsetHeight;
            const h5 = messagefontsizenumber.value;

            //const h4 = t.offsetParent;//t.style.fontSize;
            //const h5 = t.clientHeight;//text.style.height;
            //const h6 = text.height;
            //const h7 = text.getBoundingClientRect().height;
            //const h8 = text.style.lineHeight;
            //const h9 = canvas.getBoundingClientRect().height;
            console.log(h1, h2, h3, h4, h5);
            //t.hidden = true;

            if(h2 < h4)
            {
                messagefontsizenumber.value -= 1;
                messagefit();
            }

            messagefontsizenumberupdate();
        }
//*/



        function messagefontstyleload()
        {
            const div = document.createElement("div");
            div.id = "messagefontstyle";
            div.innerHTML = "font-style";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagefontstyleload);

        function messagefontstyleselectload()
        {
            const br = document.createElement("br");
            messagefontstyle.append(br);

            const select = document.createElement("select");
            select.id = "messagefontstyleselect";
            select.addEventListener("input", messagefontstyleselectupdate);
            messagefontstyle.append(select);

            for(const value of fontstylearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            messagefontstyleselectset();
        }
        addEventListener("load", messagefontstyleselectload);

        function messagefontstyleselectset()
        {
            text.messagefontstyle = messagefontstyleselect.value;
        }

        function messagefontstyleselectupdate()
        {
            messagefontstyleselectset();
            svgupdate();
        }



        function messagefontvariantload()
        {
            const div = document.createElement("div");
            div.id = "messagefontvariant";
            div.innerHTML = "font-variant";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagefontvariantload);

        function messagefontvariantselectload()
        {
            const br = document.createElement("br");
            messagefontvariant.append(br);

            const select = document.createElement("select");
            select.id = "messagefontvariantselect";
            select.addEventListener("input", messagefontvariantselectupdate);
            messagefontvariant.append(select);

            for(const value of fontvariantarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            messagefontvariantselectset();
        }
        addEventListener("load", messagefontvariantselectload);

        function messagefontvariantselectset()
        {
            text.messagefontvariant = messagefontvariantselect.value;
        }

        function messagefontvariantselectupdate()
        {
            messagefontvariantselectset();
            svgupdate();
        }



        function messagefontweightload()
        {
            const div = document.createElement("div");
            div.id = "messagefontweight";
            div.innerHTML = "font-weight";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagefontweightload);

        function messagefontweightselectload()
        {
            const br = document.createElement("br");
            messagefontweight.append(br);

            const select = document.createElement("select");
            select.id = "messagefontweightselect";
            select.addEventListener("input", messagefontweightselectupdate);
            messagefontweight.append(select);

            for(const value of fontweightarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            messagefontweightselectset();
        }
        addEventListener("load", messagefontweightselectload);

        function messagefontweightselectset()
        {
            text.messagefontweight = messagefontweightselect.value;
        }

        function messagefontweightselectupdate()
        {
            messagefontweightselectset();
            svgupdate();
        }



        function messagecolorload()
        {
            const div = document.createElement("div");
            div.id = "messagecolor";
            div.innerHTML = "color";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagecolorload);

        function messagecolorcolorload()
        {
            const br = document.createElement("br");
            messagecolor.append(br);

            const input = document.createElement("input");
            input.id = "messagecolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", messagecolorcolorupdate);
            messagecolor.append(input);

            //messagecolorcolorset();
        }
        addEventListener("load", messagecolorcolorload);

        function messagecolorcolorset()
        {
            const c = messagecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagealphanumber.value;

            text.messagecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagecolorcolorupdate()
        {
            messagecolorcolorset();
            svgupdate();
        }

        function messagecolorexactload()
        {
            const br = document.createElement("br");
            messagecolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagecolorexactupdate);
                messagecolor.append(button);
            }
        }
        addEventListener("load", messagecolorexactload);

        function messagecolorexactupdate(e)
        {
            messagecolorcolor.value = e.target.value;

            messagecolorcolorupdate();
        }



        function messagealphaload()
        {
            const div = document.createElement("div");
            div.id = "messagealpha";
            div.innerHTML = "alpha";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagealphaload);

        function messagealphanumberload()
        {
            const br = document.createElement("br");
            messagealpha.append(br);

            const input = document.createElement("input");
            input.id = "messagealphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", messagealphanumberupdate);
            messagealpha.append(input);

            //messagealphanumberset();
        }
        addEventListener("load", messagealphanumberload);

        function messagealphanumberset()
        {
            const c = messagecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagealphanumber.value;

            messagealpharange.value = a;
            text.messagecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagealphanumberupdate()
        {
            messagealphanumberset();
            svgupdate();
        }

        function messagealpharangeload()
        {
            const input = document.createElement("input");
            input.id = "messagealpharange";
            input.max = messagealphanumber.max;
            input.min = messagealphanumber.min;
            input.step = messagealphanumber.step;
            input.type = "range";
            input.value = messagealphanumber.value;
            input.addEventListener("input", messagealpharangeupdate);
            messagealpha.append(input);

            messagealpharangeset();
        }
        addEventListener("load", messagealpharangeload);

        function messagealpharangeset()
        {
            const c = messagecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagealpharange.value;

            messagealphanumber.value = a;
            text.messagecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagealpharangeupdate()
        {
            messagealpharangeset();
            svgupdate();
        }

        function messagealphaexactload()
        {
            const br = document.createElement("br");
            messagealpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagealphaexactupdate);
                messagealpha.append(button);
            }
        }
        addEventListener("load", messagealphaexactload);

        function messagealphaexactupdate(e)
        {
            messagealphanumber.value = Number(e.target.value);

            messagealphanumberupdate();
        }

        function messagealphaincrementload()
        {
            const br = document.createElement("br");
            messagealpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagealphaincrementupdate);
                messagealpha.append(button);
            }
        }
        addEventListener("load", messagealphaincrementload);

        function messagealphaincrementupdate(e)
        {
            let v = Number(messagealphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((messagealphanumber.min <= v) && (v <= messagealphanumber.max))
            {
                messagealphanumber.value = v;

                messagealphanumberupdate();
            }
        }



/*leftoff
        function messagefilterblurload()
        {
            const div = document.createElement("div");
            div.id = "messagefilterblur";
            div.innerHTML = "filter-blur";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefilterblurload);

        function messagefilterblurnumberload()
        {
            const br = document.createElement("br");
            messagefilterblur.append(br);

            const input = document.createElement("input");
            input.id = "messagefilterblurnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagefilterblurnumberupdate);
            messagefilterblur.append(input);

            //messagefilterblurnumberset();
        }
        addEventListener("load", messagefilterblurnumberload);

        function messagefilterblurnumberset()
        {
            const v = messagefilterblurnumber.value;

            messagefilterblurrange.value = v;
            text.messagebackdropfilterblur = v;
        }

        function messagefilterblurnumberupdate()
        {
            messagefilterblurnumberset();
            svgupdate();
        }

        function messagefilterblurrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefilterblurrange";
            input.max = messagefilterblurnumber.max;
            input.min = messagefilterblurnumber.min;
            input.step = messagefilterblurnumber.step;
            input.type = "range";
            input.value = messagefilterblurnumber.value;
            input.addEventListener("input", messagefilterblurrangeupdate);
            messagefilterblur.append(input);

            messagefilterblurrangeset();
        }
        addEventListener("load", messagefilterblurrangeload);

        function messagefilterblurrangeset()
        {
            const v = messagefilterblurrange.value;

            messagefilterblurnumber.value = v;
            text.messagebackdropfilterblur = v;
        }

        function messagefilterblurrangeupdate()
        {
            messagefilterblurrangeset();
            svgupdate();
        }

        function messagefilterblurexactload()
        {
            const br = document.createElement("br");
            messagefilterblur.append(br);

            const array =
            [
                ["0",0],
                ["2",2],
                ["4",4],
                ["8",8],
                ["16",16],
                ["32",32],
                ["64",64],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterblurexactupdate);
                messagefilterblur.append(button);
            }
        }
        addEventListener("load", messagefilterblurexactload);

        function messagefilterblurexactupdate(e)
        {
            messagefilterblurnumber.value = Number(e.target.value);

            messagefilterblurnumberupdate();
        }

        function messagefilterblurincrementload()
        {
            const br = document.createElement("br");
            messagefilterblur.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterblurincrementupdate);
                messagefilterblur.append(button);
            }
        }
        addEventListener("load", messagefilterblurincrementload);

        function messagefilterblurincrementupdate(e)
        {
            const v = Number(messagefilterblurnumber.value) + Number(e.target.value);

            if((messagefilterblurnumber.min <= v) && (v <= messagefilterblurnumber.max))
            {
                messagefilterblurnumber.value = v;

                messagefilterblurnumberupdate();
            }
        }



        function messagefilterbrightnessload()
        {
            const div = document.createElement("div");
            div.id = "messagefilterbrightness";
            div.innerHTML = "filter-brightness";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefilterbrightnessload);

        function messagefilterbrightnessnumberload()
        {
            const br = document.createElement("br");
            messagefilterbrightness.append(br);

            const input = document.createElement("input");
            input.id = "messagefilterbrightnessnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", messagefilterbrightnessnumberupdate);
            messagefilterbrightness.append(input);

            //messagefilterbrightnessnumberset();
        }
        addEventListener("load", messagefilterbrightnessnumberload);

        function messagefilterbrightnessnumberset()
        {
            const v = messagefilterbrightnessnumber.value;

            messagefilterbrightnessrange.value = v;
            text.messagebackdropfilterbrightness = v;
        }

        function messagefilterbrightnessnumberupdate()
        {
            messagefilterbrightnessnumberset();
            svgupdate();
        }

        function messagefilterbrightnessrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefilterbrightnessrange";
            input.max = messagefilterbrightnessnumber.max;
            input.min = messagefilterbrightnessnumber.min;
            input.step = messagefilterbrightnessnumber.step;
            input.type = "range";
            input.value = messagefilterbrightnessnumber.value;
            input.addEventListener("input", messagefilterbrightnessrangeupdate);
            messagefilterbrightness.append(input);

            messagefilterbrightnessrangeset();
        }
        addEventListener("load", messagefilterbrightnessrangeload);

        function messagefilterbrightnessrangeset()
        {
            const v = messagefilterbrightnessrange.value;

            messagefilterbrightnessnumber.value = v;
            text.messagebackdropfilterbrightness = v;
        }

        function messagefilterbrightnessrangeupdate()
        {
            messagefilterbrightnessrangeset();
            svgupdate();
        }

        function messagefilterbrightnessexactload()
        {
            const br = document.createElement("br");
            messagefilterbrightness.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterbrightnessexactupdate);
                messagefilterbrightness.append(button);
            }
        }
        addEventListener("load", messagefilterbrightnessexactload);

        function messagefilterbrightnessexactupdate(e)
        {
            messagefilterbrightnessnumber.value = Number(e.target.value);

            messagefilterbrightnessnumberupdate();
        }

        function messagefilterbrightnessincrementload()
        {
            const br = document.createElement("br");
            messagefilterbrightness.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterbrightnessincrementupdate);
                messagefilterbrightness.append(button);
            }
        }
        addEventListener("load", messagefilterbrightnessincrementload);

        function messagefilterbrightnessincrementupdate(e)
        {
            const v = Number(messagefilterbrightnessnumber.value) + Number(e.target.value);

            if((messagefilterbrightnessnumber.min <= v) && (v <= messagefilterbrightnessnumber.max))
            {
                messagefilterbrightnessnumber.value = v;

                messagefilterbrightnessnumberupdate();
            }
        }



        function messagefiltercontrastload()
        {
            const div = document.createElement("div");
            div.id = "messagefiltercontrast";
            div.innerHTML = "filter-contrast";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefiltercontrastload);

        function messagefiltercontrastnumberload()
        {
            const br = document.createElement("br");
            messagefiltercontrast.append(br);

            const input = document.createElement("input");
            input.id = "messagefiltercontrastnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", messagefiltercontrastnumberupdate);
            messagefiltercontrast.append(input);

            //messagefiltercontrastnumberset();
        }
        addEventListener("load", messagefiltercontrastnumberload);

        function messagefiltercontrastnumberset()
        {
            const v = messagefiltercontrastnumber.value;

            messagefiltercontrastrange.value = v;
            text.messagebackdropfiltercontrast = v;
        }

        function messagefiltercontrastnumberupdate()
        {
            messagefiltercontrastnumberset();
            svgupdate();
        }

        function messagefiltercontrastrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefiltercontrastrange";
            input.max = messagefiltercontrastnumber.max;
            input.min = messagefiltercontrastnumber.min;
            input.step = messagefiltercontrastnumber.step;
            input.type = "range";
            input.value = messagefiltercontrastnumber.value;
            input.addEventListener("input", messagefiltercontrastrangeupdate);
            messagefiltercontrast.append(input);

            messagefiltercontrastrangeset();
        }
        addEventListener("load", messagefiltercontrastrangeload);

        function messagefiltercontrastrangeset()
        {
            const v = messagefiltercontrastrange.value;

            messagefiltercontrastnumber.value = v;
            text.messagebackdropfiltercontrast = v;
        }

        function messagefiltercontrastrangeupdate()
        {
            messagefiltercontrastrangeset();
            svgupdate();
        }

        function messagefiltercontrastexactload()
        {
            const br = document.createElement("br");
            messagefiltercontrast.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltercontrastexactupdate);
                messagefiltercontrast.append(button);
            }
        }
        addEventListener("load", messagefiltercontrastexactload);

        function messagefiltercontrastexactupdate(e)
        {
            messagefiltercontrastnumber.value = Number(e.target.value);

            messagefiltercontrastnumberupdate();
        }

        function messagefiltercontrastincrementload()
        {
            const br = document.createElement("br");
            messagefiltercontrast.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltercontrastincrementupdate);
                messagefiltercontrast.append(button);
            }
        }
        addEventListener("load", messagefiltercontrastincrementload);

        function messagefiltercontrastincrementupdate(e)
        {
            const v = Number(messagefiltercontrastnumber.value) + Number(e.target.value);

            if((messagefiltercontrastnumber.min <= v) && (v <= messagefiltercontrastnumber.max))
            {
                messagefiltercontrastnumber.value = v;

                messagefiltercontrastnumberupdate();
            }
        }



        function messagefiltergrayscaleload()
        {
            const div = document.createElement("div");
            div.id = "messagefiltergrayscale";
            div.innerHTML = "filter-grayscale";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefiltergrayscaleload);

        function messagefiltergrayscalenumberload()
        {
            const br = document.createElement("br");
            messagefiltergrayscale.append(br);

            const input = document.createElement("input");
            input.id = "messagefiltergrayscalenumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagefiltergrayscalenumberupdate);
            messagefiltergrayscale.append(input);

            //messagefiltergrayscalenumberset();
        }
        addEventListener("load", messagefiltergrayscalenumberload);

        function messagefiltergrayscalenumberset()
        {
            const v = messagefiltergrayscalenumber.value;

            messagefiltergrayscalerange.value = v;
            text.messagebackdropfiltergrayscale = v;
        }

        function messagefiltergrayscalenumberupdate()
        {
            messagefiltergrayscalenumberset();
            svgupdate();
        }

        function messagefiltergrayscalerangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefiltergrayscalerange";
            input.max = messagefiltergrayscalenumber.max;
            input.min = messagefiltergrayscalenumber.min;
            input.step = messagefiltergrayscalenumber.step;
            input.type = "range";
            input.value = messagefiltergrayscalenumber.value;
            input.addEventListener("input", messagefiltergrayscalerangeupdate);
            messagefiltergrayscale.append(input);

            messagefiltergrayscalerangeset();
        }
        addEventListener("load", messagefiltergrayscalerangeload);

        function messagefiltergrayscalerangeset()
        {
            const v = messagefiltergrayscalerange.value;

            messagefiltergrayscalenumber.value = v;
            text.messagebackdropfiltergrayscale = v;
        }

        function messagefiltergrayscalerangeupdate()
        {
            messagefiltergrayscalerangeset();
            svgupdate();
        }

        function messagefiltergrayscaleexactload()
        {
            const br = document.createElement("br");
            messagefiltergrayscale.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltergrayscaleexactupdate);
                messagefiltergrayscale.append(button);
            }
        }
        addEventListener("load", messagefiltergrayscaleexactload);

        function messagefiltergrayscaleexactupdate(e)
        {
            messagefiltergrayscalenumber.value = Number(e.target.value);

            messagefiltergrayscalenumberupdate();
        }

        function messagefiltergrayscaleincrementload()
        {
            const br = document.createElement("br");
            messagefiltergrayscale.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltergrayscaleincrementupdate);
                messagefiltergrayscale.append(button);
            }
        }
        addEventListener("load", messagefiltergrayscaleincrementload);

        function messagefiltergrayscaleincrementupdate(e)
        {
            const v = Number(messagefiltergrayscalenumber.value) + Number(e.target.value);

            if((messagefiltergrayscalenumber.min <= v) && (v <= messagefiltergrayscalenumber.max))
            {
                messagefiltergrayscalenumber.value = v;

                messagefiltergrayscalenumberupdate();
            }
        }



        function messagefilterhuerotateload()
        {
            const div = document.createElement("div");
            div.id = "messagefilterhuerotate";
            div.innerHTML = "filter-hue-rotate";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefilterhuerotateload);

        function messagefilterhuerotatenumberload()
        {
            const br = document.createElement("br");
            messagefilterhuerotate.append(br);

            const input = document.createElement("input");
            input.id = "messagefilterhuerotatenumber";
            input.max = 360;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagefilterhuerotatenumberupdate);
            messagefilterhuerotate.append(input);

            //messagefilterhuerotatenumberset();
        }
        addEventListener("load", messagefilterhuerotatenumberload);

        function messagefilterhuerotatenumberset()
        {
            const v = messagefilterhuerotatenumber.value;

            messagefilterhuerotaterange.value = v;
            text.messagebackdropfilterhuerotate = v;
        }

        function messagefilterhuerotatenumberupdate()
        {
            messagefilterhuerotatenumberset();
            svgupdate();
        }

        function messagefilterhuerotaterangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefilterhuerotaterange";
            input.max = messagefilterhuerotatenumber.max;
            input.min = messagefilterhuerotatenumber.min;
            input.step = messagefilterhuerotatenumber.step;
            input.type = "range";
            input.value = messagefilterhuerotatenumber.value;
            input.addEventListener("input", messagefilterhuerotaterangeupdate);
            messagefilterhuerotate.append(input);

            messagefilterhuerotaterangeset();
        }
        addEventListener("load", messagefilterhuerotaterangeload);

        function messagefilterhuerotaterangeset()
        {
            const v = messagefilterhuerotaterange.value;

            messagefilterhuerotatenumber.value = v;
            text.messagebackdropfilterhuerotate = v;
        }

        function messagefilterhuerotaterangeupdate()
        {
            messagefilterhuerotaterangeset();
            svgupdate();
        }

        function messagefilterhuerotateexactload()
        {
            const br = document.createElement("br");
            messagefilterhuerotate.append(br);

            const array =
            [
                ["0",0],
                ["90",90],
                ["180",180],
                ["270",270],
                ["360",360],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterhuerotateexactupdate);
                messagefilterhuerotate.append(button);
            }
        }
        addEventListener("load", messagefilterhuerotateexactload);

        function messagefilterhuerotateexactupdate(e)
        {
            messagefilterhuerotatenumber.value = Number(e.target.value);

            messagefilterhuerotatenumberupdate();
        }

        function messagefilterhuerotateincrementload()
        {
            const br = document.createElement("br");
            messagefilterhuerotate.append(br);

            const array =
            [
                //["-90",-90],
                ["-45",-45],
                ["-15",-15],
                ["-1",-1],
                ["+1",1],
                ["+15",15],
                ["+45",45],
                //["+90",90],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterhuerotateincrementupdate);
                messagefilterhuerotate.append(button);
            }
        }
        addEventListener("load", messagefilterhuerotateincrementload);

        function messagefilterhuerotateincrementupdate(e)
        {
            const v = Number(messagefilterhuerotatenumber.value) + Number(e.target.value);

            if((messagefilterhuerotatenumber.min <= v) && (v <= messagefilterhuerotatenumber.max))
            {
                messagefilterhuerotatenumber.value = v;

                messagefilterhuerotatenumberupdate();
            }
        }



        function messagefilterinvertload()
        {
            const div = document.createElement("div");
            div.id = "messagefilterinvert";
            div.innerHTML = "filter-invert";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefilterinvertload);

        function messagefilterinvertnumberload()
        {
            const br = document.createElement("br");
            messagefilterinvert.append(br);

            const input = document.createElement("input");
            input.id = "messagefilterinvertnumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagefilterinvertnumberupdate);
            messagefilterinvert.append(input);

            //messagefilterinvertnumberset();
        }
        addEventListener("load", messagefilterinvertnumberload);

        function messagefilterinvertnumberset()
        {
            const v = messagefilterinvertnumber.value;

            messagefilterinvertrange.value = v;
            text.messagebackdropfilterinvert = v;
        }

        function messagefilterinvertnumberupdate()
        {
            messagefilterinvertnumberset();
            svgupdate();
        }

        function messagefilterinvertrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefilterinvertrange";
            input.max = messagefilterinvertnumber.max;
            input.min = messagefilterinvertnumber.min;
            input.step = messagefilterinvertnumber.step;
            input.type = "range";
            input.value = messagefilterinvertnumber.value;
            input.addEventListener("input", messagefilterinvertrangeupdate);
            messagefilterinvert.append(input);

            messagefilterinvertrangeset();
        }
        addEventListener("load", messagefilterinvertrangeload);

        function messagefilterinvertrangeset()
        {
            const v = messagefilterinvertrange.value;

            messagefilterinvertnumber.value = v;
            text.messagebackdropfilterinvert = v;
        }

        function messagefilterinvertrangeupdate()
        {
            messagefilterinvertrangeset();
            svgupdate();
        }

        function messagefilterinvertexactload()
        {
            const br = document.createElement("br");
            messagefilterinvert.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterinvertexactupdate);
                messagefilterinvert.append(button);
            }
        }
        addEventListener("load", messagefilterinvertexactload);

        function messagefilterinvertexactupdate(e)
        {
            messagefilterinvertnumber.value = Number(e.target.value);

            messagefilterinvertnumberupdate();
        }

        function messagefilterinvertincrementload()
        {
            const br = document.createElement("br");
            messagefilterinvert.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterinvertincrementupdate);
                messagefilterinvert.append(button);
            }
        }
        addEventListener("load", messagefilterinvertincrementload);

        function messagefilterinvertincrementupdate(e)
        {
            const v = Number(messagefilterinvertnumber.value) + Number(e.target.value);

            if((messagefilterinvertnumber.min <= v) && (v <= messagefilterinvertnumber.max))
            {
                messagefilterinvertnumber.value = v;

                messagefilterinvertnumberupdate();
            }
        }



        function messagefiltersaturateload()
        {
            const div = document.createElement("div");
            div.id = "messagefiltersaturate";
            div.innerHTML = "filter-saturate";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefiltersaturateload);

        function messagefiltersaturatenumberload()
        {
            const br = document.createElement("br");
            messagefiltersaturate.append(br);

            const input = document.createElement("input");
            input.id = "messagefiltersaturatenumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", messagefiltersaturatenumberupdate);
            messagefiltersaturate.append(input);

            //messagefiltersaturatenumberset();
        }
        addEventListener("load", messagefiltersaturatenumberload);

        function messagefiltersaturatenumberset()
        {
            const v = messagefiltersaturatenumber.value;

            messagefiltersaturaterange.value = v;
            text.messagebackdropfiltersaturate = v;
        }

        function messagefiltersaturatenumberupdate()
        {
            messagefiltersaturatenumberset();
            svgupdate();
        }

        function messagefiltersaturaterangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefiltersaturaterange";
            input.max = messagefiltersaturatenumber.max;
            input.min = messagefiltersaturatenumber.min;
            input.step = messagefiltersaturatenumber.step;
            input.type = "range";
            input.value = messagefiltersaturatenumber.value;
            input.addEventListener("input", messagefiltersaturaterangeupdate);
            messagefiltersaturate.append(input);

            messagefiltersaturaterangeset();
        }
        addEventListener("load", messagefiltersaturaterangeload);

        function messagefiltersaturaterangeset()
        {
            const v = messagefiltersaturaterange.value;

            messagefiltersaturatenumber.value = v;
            text.messagebackdropfiltersaturate = v;
        }

        function messagefiltersaturaterangeupdate()
        {
            messagefiltersaturaterangeset();
            svgupdate();
        }

        function messagefiltersaturateexactload()
        {
            const br = document.createElement("br");
            messagefiltersaturate.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltersaturateexactupdate);
                messagefiltersaturate.append(button);
            }
        }
        addEventListener("load", messagefiltersaturateexactload);

        function messagefiltersaturateexactupdate(e)
        {
            messagefiltersaturatenumber.value = Number(e.target.value);

            messagefiltersaturatenumberupdate();
        }

        function messagefiltersaturateincrementload()
        {
            const br = document.createElement("br");
            messagefiltersaturate.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltersaturateincrementupdate);
                messagefiltersaturate.append(button);
            }
        }
        addEventListener("load", messagefiltersaturateincrementload);

        function messagefiltersaturateincrementupdate(e)
        {
            const v = Number(messagefiltersaturatenumber.value) + Number(e.target.value);

            if((messagefiltersaturatenumber.min <= v) && (v <= messagefiltersaturatenumber.max))
            {
                messagefiltersaturatenumber.value = v;

                messagefiltersaturatenumberupdate();
            }
        }



        function messagefiltersepiaload()
        {
            const div = document.createElement("div");
            div.id = "messagefiltersepia";
            div.innerHTML = "filter-sepia";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefiltersepiaload);

        function messagefiltersepianumberload()
        {
            const br = document.createElement("br");
            messagefiltersepia.append(br);

            const input = document.createElement("input");
            input.id = "messagefiltersepianumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagefiltersepianumberupdate);
            messagefiltersepia.append(input);

            //messagefiltersepianumberset();
        }
        addEventListener("load", messagefiltersepianumberload);

        function messagefiltersepianumberset()
        {
            const v = messagefiltersepianumber.value;

            messagefiltersepiarange.value = v;
            text.messagebackdropfiltersepia = v;
        }

        function messagefiltersepianumberupdate()
        {
            messagefiltersepianumberset();
            svgupdate();
        }

        function messagefiltersepiarangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefiltersepiarange";
            input.max = messagefiltersepianumber.max;
            input.min = messagefiltersepianumber.min;
            input.step = messagefiltersepianumber.step;
            input.type = "range";
            input.value = messagefiltersepianumber.value;
            input.addEventListener("input", messagefiltersepiarangeupdate);
            messagefiltersepia.append(input);

            messagefiltersepiarangeset();
        }
        addEventListener("load", messagefiltersepiarangeload);

        function messagefiltersepiarangeset()
        {
            const v = messagefiltersepiarange.value;

            messagefiltersepianumber.value = v;
            text.messagebackdropfiltersepia = v;
        }

        function messagefiltersepiarangeupdate()
        {
            messagefiltersepiarangeset();
            svgupdate();
        }

        function messagefiltersepiaexactload()
        {
            const br = document.createElement("br");
            messagefiltersepia.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltersepiaexactupdate);
                messagefiltersepia.append(button);
            }
        }
        addEventListener("load", messagefiltersepiaexactload);

        function messagefiltersepiaexactupdate(e)
        {
            messagefiltersepianumber.value = Number(e.target.value);

            messagefiltersepianumberupdate();
        }

        function messagefiltersepiaincrementload()
        {
            const br = document.createElement("br");
            messagefiltersepia.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltersepiaincrementupdate);
                messagefiltersepia.append(button);
            }
        }
        addEventListener("load", messagefiltersepiaincrementload);

        function messagefiltersepiaincrementupdate(e)
        {
            const v = Number(messagefiltersepianumber.value) + Number(e.target.value);

            if((messagefiltersepianumber.min <= v) && (v <= messagefiltersepianumber.max))
            {
                messagefiltersepianumber.value = v;

                messagefiltersepianumberupdate();
            }
        }
//*/



/*
        function messagemargintopload()
        {
            const div = document.createElement("div");
            div.id = "messagemargintop";
            div.innerHTML = "margin-top";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagemargintopload);

        function messagemargintopnumberload()
        {
            const br = document.createElement("br");
            messagemargintop.append(br);

            const input = document.createElement("input");
            input.id = "messagemargintopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagemargintopnumberupdate);
            messagemargintop.append(input);

            //messagemargintopnumberset();
        }
        addEventListener("load", messagemargintopnumberload);

        function messagemargintopnumberset()
        {
            const v = Number(messagemargintopnumber.value);

            messagemargintoprange.value = v;
            text.messagemargintop = v;
        }

        function messagemargintopnumberupdate()
        {
            messagemargintopnumberset();

            svgupdate();
        }

        function messagemargintoprangeload()
        {
            const input = document.createElement("input");
            input.id = "messagemargintoprange";
            input.max = messagemargintopnumber.max;
            input.min = messagemargintopnumber.min;
            input.type = "range";
            input.value = messagemargintopnumber.value;
            input.addEventListener("input", messagemargintoprangeupdate);
            messagemargintop.append(input);

            messagemargintoprangeset();
        }
        addEventListener("load", messagemargintoprangeload);

        function messagemargintoprangeset()
        {
            const v = Number(messagemargintoprange.value);

            messagemargintopnumber.value = v;
            text.messagemargintop = v;
        }

        function messagemargintoprangeupdate()
        {
            messagemargintoprangeset();

            svgupdate();
        }



        function messagemarginbottomload()
        {
            const div = document.createElement("div");
            div.id = "messagemarginbottom";
            div.innerHTML = "margin-bottom";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagemarginbottomload);

        function messagemarginbottomnumberload()
        {
            const br = document.createElement("br");
            messagemarginbottom.append(br);

            const input = document.createElement("input");
            input.id = "messagemarginbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagemarginbottomnumberupdate);
            messagemarginbottom.append(input);

            //messagemarginbottomnumberset();
        }
        addEventListener("load", messagemarginbottomnumberload);

        function messagemarginbottomnumberset()
        {
            const v = Number(messagemarginbottomnumber.value);

            messagemarginbottomrange.value = v;
            text.messagemarginbottom = v;
        }

        function messagemarginbottomnumberupdate()
        {
            messagemarginbottomnumberset();

            svgupdate();
        }

        function messagemarginbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagemarginbottomrange";
            input.max = messagemarginbottomnumber.max;
            input.min = messagemarginbottomnumber.min;
            input.type = "range";
            input.value = messagemarginbottomnumber.value;
            input.addEventListener("input", messagemarginbottomrangeupdate);
            messagemarginbottom.append(input);

            messagemarginbottomrangeset();
        }
        addEventListener("load", messagemarginbottomrangeload);

        function messagemarginbottomrangeset()
        {
            const v = Number(messagemarginbottomrange.value);

            messagemarginbottomnumber.value = v;
            text.messagemarginbottom = v;
        }

        function messagemarginbottomrangeupdate()
        {
            messagemarginbottomrangeset();

            svgupdate();
        }



        function messagemarginleftload()
        {
            const div = document.createElement("div");
            div.id = "messagemarginleft";
            div.innerHTML = "margin-left";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagemarginleftload);

        function messagemarginleftnumberload()
        {
            const br = document.createElement("br");
            messagemarginleft.append(br);

            const input = document.createElement("input");
            input.id = "messagemarginleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagemarginleftnumberupdate);
            messagemarginleft.append(input);

            //messagemarginleftnumberset();
        }
        addEventListener("load", messagemarginleftnumberload);

        function messagemarginleftnumberset()
        {
            const v = Number(messagemarginleftnumber.value);

            messagemarginleftrange.value = v;
            text.messagemarginleft = v;
        }

        function messagemarginleftnumberupdate()
        {
            messagemarginleftnumberset();

            svgupdate();
        }

        function messagemarginleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagemarginleftrange";
            input.max = messagemarginleftnumber.max;
            input.min = messagemarginleftnumber.min;
            input.type = "range";
            input.value = messagemarginleftnumber.value;
            input.addEventListener("input", messagemarginleftrangeupdate);
            messagemarginleft.append(input);

            messagemarginleftrangeset();
        }
        addEventListener("load", messagemarginleftrangeload);

        function messagemarginleftrangeset()
        {
            const v = Number(messagemarginleftrange.value);

            messagemarginleftnumber.value = v;
            text.messagemarginleft = v;
        }

        function messagemarginleftrangeupdate()
        {
            messagemarginleftrangeset();

            svgupdate();
        }



        function messagemarginrightload()
        {
            const div = document.createElement("div");
            div.id = "messagemarginright";
            div.innerHTML = "margin-right";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagemarginrightload);

        function messagemarginrightnumberload()
        {
            const br = document.createElement("br");
            messagemarginright.append(br);

            const input = document.createElement("input");
            input.id = "messagemarginrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagemarginrightnumberupdate);
            messagemarginright.append(input);

            //messagemarginrightnumberset();
        }
        addEventListener("load", messagemarginrightnumberload);

        function messagemarginrightnumberset()
        {
            const v = Number(messagemarginrightnumber.value);

            messagemarginrightrange.value = v;
            text.messagemarginright = v;
        }

        function messagemarginrightnumberupdate()
        {
            messagemarginrightnumberset();

            svgupdate();
        }

        function messagemarginrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagemarginrightrange";
            input.max = messagemarginrightnumber.max;
            input.min = messagemarginrightnumber.min;
            input.type = "range";
            input.value = messagemarginrightnumber.value;
            input.addEventListener("input", messagemarginrightrangeupdate);
            messagemarginright.append(input);

            messagemarginrightrangeset();
        }
        addEventListener("load", messagemarginrightrangeload);

        function messagemarginrightrangeset()
        {
            const v = Number(messagemarginrightrange.value);

            messagemarginrightnumber.value = v;
            text.messagemarginright = v;
        }

        function messagemarginrightrangeupdate()
        {
            messagemarginrightrangeset();

            svgupdate();
        }



        function messagepaddingtopload()
        {
            const div = document.createElement("div");
            div.id = "messagepaddingtop";
            div.innerHTML = "padding-top";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagepaddingtopload);

        function messagepaddingtopnumberload()
        {
            const br = document.createElement("br");
            messagepaddingtop.append(br);

            const input = document.createElement("input");
            input.id = "messagepaddingtopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagepaddingtopnumberupdate);
            messagepaddingtop.append(input);

            //messagepaddingtopnumberset();
        }
        addEventListener("load", messagepaddingtopnumberload);

        function messagepaddingtopnumberset()
        {
            const v = Number(messagepaddingtopnumber.value);

            messagepaddingtoprange.value = v;
            text.messagepaddingtop = v;
        }

        function messagepaddingtopnumberupdate()
        {
            messagepaddingtopnumberset();

            svgupdate();
        }

        function messagepaddingtoprangeload()
        {
            const input = document.createElement("input");
            input.id = "messagepaddingtoprange";
            input.max = messagepaddingtopnumber.max;
            input.min = messagepaddingtopnumber.min;
            input.type = "range";
            input.value = messagepaddingtopnumber.value;
            input.addEventListener("input", messagepaddingtoprangeupdate);
            messagepaddingtop.append(input);

            messagepaddingtoprangeset();
        }
        addEventListener("load", messagepaddingtoprangeload);

        function messagepaddingtoprangeset()
        {
            const v = Number(messagepaddingtoprange.value);

            messagepaddingtopnumber.value = v;
            text.messagepaddingtop = v;
        }

        function messagepaddingtoprangeupdate()
        {
            messagepaddingtoprangeset();

            svgupdate();
        }



        function messagepaddingbottomload()
        {
            const div = document.createElement("div");
            div.id = "messagepaddingbottom";
            div.innerHTML = "padding-bottom";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagepaddingbottomload);

        function messagepaddingbottomnumberload()
        {
            const br = document.createElement("br");
            messagepaddingbottom.append(br);

            const input = document.createElement("input");
            input.id = "messagepaddingbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagepaddingbottomnumberupdate);
            messagepaddingbottom.append(input);

            //messagepaddingbottomnumberset();
        }
        addEventListener("load", messagepaddingbottomnumberload);

        function messagepaddingbottomnumberset()
        {
            const v = Number(messagepaddingbottomnumber.value);

            messagepaddingbottomrange.value = v;
            text.messagepaddingbottom = v;
        }

        function messagepaddingbottomnumberupdate()
        {
            messagepaddingbottomnumberset();

            svgupdate();
        }

        function messagepaddingbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagepaddingbottomrange";
            input.max = messagepaddingbottomnumber.max;
            input.min = messagepaddingbottomnumber.min;
            input.type = "range";
            input.value = messagepaddingbottomnumber.value;
            input.addEventListener("input", messagepaddingbottomrangeupdate);
            messagepaddingbottom.append(input);

            messagepaddingbottomrangeset();
        }
        addEventListener("load", messagepaddingbottomrangeload);

        function messagepaddingbottomrangeset()
        {
            const v = Number(messagepaddingbottomrange.value);

            messagepaddingbottomnumber.value = v;
            text.messagepaddingbottom = v;
        }

        function messagepaddingbottomrangeupdate()
        {
            messagepaddingbottomrangeset();

            svgupdate();
        }



        function messagepaddingleftload()
        {
            const div = document.createElement("div");
            div.id = "messagepaddingleft";
            div.innerHTML = "padding-left";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagepaddingleftload);

        function messagepaddingleftnumberload()
        {
            const br = document.createElement("br");
            messagepaddingleft.append(br);

            const input = document.createElement("input");
            input.id = "messagepaddingleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagepaddingleftnumberupdate);
            messagepaddingleft.append(input);

            //messagepaddingleftnumberset();
        }
        addEventListener("load", messagepaddingleftnumberload);

        function messagepaddingleftnumberset()
        {
            const v = Number(messagepaddingleftnumber.value);

            messagepaddingleftrange.value = v;
            text.messagepaddingleft = v;
        }

        function messagepaddingleftnumberupdate()
        {
            messagepaddingleftnumberset();

            svgupdate();
        }

        function messagepaddingleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagepaddingleftrange";
            input.max = messagepaddingleftnumber.max;
            input.min = messagepaddingleftnumber.min;
            input.type = "range";
            input.value = messagepaddingleftnumber.value;
            input.addEventListener("input", messagepaddingleftrangeupdate);
            messagepaddingleft.append(input);

            messagepaddingleftrangeset();
        }
        addEventListener("load", messagepaddingleftrangeload);


        function messagepaddingleftrangeset()
        {
            const v = Number(messagepaddingleftrange.value);

            messagepaddingleftnumber.value = v;
            text.messagepaddingleft = v;
        }

        function messagepaddingleftrangeupdate()
        {
            messagepaddingleftrangeset();

            svgupdate();
        }



        function messagepaddingrightload()
        {
            const div = document.createElement("div");
            div.id = "messagepaddingright";
            div.innerHTML = "padding-right";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagepaddingrightload);

        function messagepaddingrightnumberload()
        {
            const br = document.createElement("br");
            messagepaddingright.append(br);

            const input = document.createElement("input");
            input.id = "messagepaddingrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagepaddingrightnumberupdate);
            messagepaddingright.append(input);

            //messagepaddingrightnumberset();
        }
        addEventListener("load", messagepaddingrightnumberload);

        function messagepaddingrightnumberset()
        {
            const v = Number(messagepaddingrightnumber.value);

            messagepaddingrightrange.value = v;
            text.messagepaddingright = v;
        }

        function messagepaddingrightnumberupdate()
        {
            messagepaddingrightnumberset();

            svgupdate();
        }

        function messagepaddingrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagepaddingrightrange";
            input.max = messagepaddingrightnumber.max;
            input.min = messagepaddingrightnumber.min;
            input.type = "range";
            input.value = messagepaddingrightnumber.value;
            input.addEventListener("input", messagepaddingrightrangeupdate);
            messagepaddingright.append(input);

            messagepaddingrightrangeset();
        }
        addEventListener("load", messagepaddingrightrangeload);

        function messagepaddingrightrangeset()
        {
            const v = Number(messagepaddingrightrange.value);

            messagepaddingrightnumber.value = v;
            text.messagepaddingright = v;
        }

        function messagepaddingrightrangeupdate()
        {
            messagepaddingrightrangeset();

            svgupdate();
        }
//*/






        function referenceversionload()
        {
            const div = document.createElement("div");
            div.id = "referenceversion";
            div.innerHTML = "version";
            tabcontentreference.append(div);
        }
        addEventListener("load", referenceversionload);

        function referenceversionselectload()
        {
            const br = document.createElement("br");
            referenceversion.append(br);

            const select = document.createElement("select");
            select.id = "referenceversionselect";
            select.addEventListener("input", referenceversionselectupdate);
            referenceversion.append(select);

            referenceversionselectload2();
        }
        addEventListener("load", referenceversionselectload);

        function referenceversionselectload2()
        {
            for(const value of Bibleversionarray)
            {
                const optgroup = docum
8ea8
ent.createElement("optgroup");
                optgroup.label = value[0];
                referenceversionselect.append(optgroup);

                for(const v of value[1])
                {
                    const option = document.createElement("option");
                    option.innerHTML = v[1];
                    option.value = v[0];
                    optgroup.append(option);
                }
            }

            referenceversionselect.value = Bibleversionarray[4][1][1][0];

            referenceversionselectset();
        }

        function referenceversionselectset()
        {
            text.version = referenceversionselect.options.selectedIndex + 1;
            text.versionname = referenceversionselect.value;

            text.referencetextversion = "";
            if(text.versionbool)
            {
                text.referencetextversion = ` ${text.versionname}`;
            }
        }

        function referenceversionselectupdate()
        {
            referenceversionselectset();
            /*
            referencebookselectload2();
            referencechapterselectload2();
            referenceverseselectload2();
            referenceverseendselectload2();
            svgupdate();
            //*/
            Bibleload();
        }

        function referenceversioncheckboxload()
        {
            const input = document.createElement("input");
            input.type = "checkbox";
            input.addEventListener("click", referenceversioncheckboxupdate);
            referenceversion.append(input);
        }
        addEventListener("load", referenceversioncheckboxload);

        function referenceversioncheckboxupdate()
        {
            text.versionbool = !text.versionbool;

            //referenceversionselectupdate();
            referenceversionselectset();
            svgupdate();
        }



        function Bibleload()
        {
            //console.log("Bibleload");
            fetch(`/assets/txt/new/${text.versionname}.txt`)
            .then(r => r.text())
            .then(t =>
            {
                const split = t.split("@");
                //console.log(split);

                const b = split[1].trim();
                //console.log(b);
                const c = b.split("\n");
                //console.log(c);
                for(const [key, value] of c.entries())
                {
                    const split = value.split("#");
                    const b = split[1];
                    Biblebookarray[key] = b;
                    //console.log(Biblebookarray[key]);
                }

                const v = split[2].trim();
                //console.log(v);
                const w = v.split("\n");
                //console.log(w);
                for(const value of w)
                {
                    const split = value.split("#");
                    const b = Number(split[0]);
                    const c = Number(split[1]);
                    const v = Number(split[2]);
                    const t = split[3];
                    if(!Array.isArray(Bibleversearray[b]))
                    {
                        Bibleversearray[b] = [];
                    }
                    if(!Array.isArray(Bibleversearray[b][c]))
                    {
                        Bibleversearray[b][c] = [];
                    }
                    Bibleversearray[b][c][v] = t;
                    //console.log(b, c, v, t);
                }

                //imageload2();
                //referenceversionselectload2();
                //*
                referencebookselectload2();
                referencechapterselectload2()
                referenceverseselectload2();
                referenceverseendselectload2();
                //*/
                //canvasupdate();
                svgupdate();
            });
        }
        addEventListener("load", Bibleload);

        function referencebookload()
        {
            const div = document.createElement("div");
            div.id = "referencebook";
            div.innerHTML = "book";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencebookload);

        function referencebookselectload()
        {
            const br = document.createElement("br");
            referencebook.append(br);

            const select = document.createElement("select");
            select.id = "referencebookselect";
            select.addEventListener("input", referencebookselectupdate);
            referencebook.append(select);

            text.referencetextbook = "Genesis";

            //referencebookselectload2();
        }
        addEventListener("load", referencebookselectload);

        function referencebookselectload2()
        {
            for(let i = referencebookselect.options.length - 1; i >= 0; --i)
            {
                referencebookselect.remove(i);
            }

            for(const value of Biblebookarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                referencebookselect.add(option);
            }

            //referencebookselect.value = Biblebookarray[42];

            referencebookselectset();
        }

        function referencebookselectset()
        {
            text.book = referencebookselect.options.selectedIndex + 1;
            text.bookname = referencebookselect.value;

            text.referencetextbook = text.bookname;
        }

        function referencebookselectupdate()
        {
            referencebookselectset();
            referencechapterselectload2();
            referenceverseselectload2();
            referenceverseendselectload2();
            svgupdate();
        }



        function referencechapterload()
        {
            const div = document.createElement("div");
            div.id = "referencechapter";
            div.innerHTML = "chapter";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencechapterload);

        function referencechapterselectload()
        {
            const br = document.createElement("br");
            referencechapter.append(br);

            const select = document.createElement("select");
            select.id = "referencechapterselect";
            select.addEventListener("input", referencechapterselectupdate);
            referencechapter.append(select);

            text.referencetextchapter = " 1";

            //referencechapterselectload2();
        }
        addEventListener("load", referencechapterselectload);

        function referencechapterselectload2()
        {
            for(let i = referencechapterselect.options.length - 1; i >= 0; --i)
            {
                referencechapterselect.remove(i);
            }

            for(let i = 1; i < Bibleversearray[text.book].length; ++i)
            {
                const option = document.createElement("option");
                option.innerHTML = i;
                referencechapterselect.add(option);
            }

            referencechapterselect.value = 1;

            referencechapterselectset();
        }

        function referencechapterselectset()
        {
            text.chapter = referencechapterselect.value;

            text.referencetextchapter = ` ${text.chapter}`;
        }

        function referencechapterselectupdate()
        {
            referencechapterselectset();
            referenceverseselectload2();
            referenceverseendselectload2();
            svgupdate();
        }



        function referenceverseload()
        {
            const div = document.createElement("div");
            div.id = "referenceverse";
            div.innerHTML = "verse-start";
            tabcontentreference.append(div);
        }
        addEventListener("load", referenceverseload);

        function referenceverseselectload()
        {
            const br = document.createElement("br");
            referenceverse.append(br);

            const select = document.createElement("select");
            select.id = "referenceverseselect";
            select.addEventListener("input", referenceverseselectupdate);
            referenceverse.append(select);

            text.referencetextverse = ":1";
            text.passagetextverse = "In the beginning God created the heaven and the earth.";

            //referenceverseselectload2();
        }
        addEventListener("load", referenceverseselectload);

        function referenceverseselectload2()
        {
            for(let i = referenceverseselect.options.length - 1; i >= 0; --i)
            {
                referenceverseselect.remove(i);
            }

            for(let i = 1; i < Bibleversearray[text.book][text.chapter].length; ++i)
            {
                const option = document.createElement("option");
                option.innerHTML = i;
                referenceverseselect.add(option);
            }

            referenceverseselect.value = 1;

            referenceverseselectset();
        }

        function referenceverseselectset()
        {
            text.verse = referenceverseselect.value;

            text.referencetextverse = `:${text.verse}`;
            text.passagetextverse = Bibleversearray[text.book][text.chapter][text.verse];
        }

        function referenceverseselectupdate()
        {
            referenceverseselectset();
            referenceverseendselectload2();
            svgupdate();
        }



        function referenceverseendload()
        {
            const div = document.createElement("div");
            div.id = "referenceverseend";
            div.innerHTML = "verse-end";
            tabcontentreference.append(div);
        }
        addEventListener("load", referenceverseendload);

        function referenceverseendselectload()
        {
            const br = document.createElement("br");
            referenceverseend.append(br);

            const select = document.createElement("select");
            select.id = "referenceverseendselect";
            select.addEventListener("input", referenceverseendselectupdate);
            referenceverseend.append(select);

            text.referencetextverseend = "";
            text.passagetextverseend = "";

            //referenceverseendselectload2();
        }
        addEventListener("load", referenceverseendselectload);

        function referenceverseendselectload2()
        {
            for(let i = referenceverseendselect.options.length - 1; i >= 0; --i)
            {
                referenceverseendselect.remove(i);
            }

            for(let i = referenceverseselect.value; i < Bibleversearray[text.book][text.chapter].length; ++i)
            {
                const option = document.createElement("option");
                option.innerHTML = i;
                referenceverseendselect.add(option);
            }

            referenceverseendselect.value = referenceverseselect.value;

            referenceverseendselectset();
        }

        function referenceverseendselectset()
        {
            text.verseend = referenceverseendselect.value;

            //text.referencetext = `${text.bookname} ${text.chapter}:${text.verse}`;
            //text.passagetext = `${Bibleversearray[text.book][text.chapter][text.verse]}`;
            text.referencetextverseend = "";
            text.passagetextverseend = "";

            if(text.verse != text.verseend)
            {
                //text.referencetext += `-${text.verseend}`;
                text.referencetextverseend = `-${text.verseend}`;

                for(let i = Number(text.verse) + 1; i <= text.verseend; ++i)
                {
                    //text.passagetext += ` ${Bibleversearray[text.book][text.chapter][i]}`;
                    text.passagetextverseend += ` ${Bibleversearray[text.book][text.chapter][i]}`;
                }
            }

            //if(text.versionbool)
            //{
            //    text.referencetext += ` ${text.versionname}`;
            //}
            //console.log(text.referencetext);
            //console.log(text.passagetext);
        }

        function referenceverseendselectupdate()
        {
            referenceverseendselectset();
            svgupdate();
        }



        function referencewidthload()
        {
            const div = document.createElement("div");
            div.id = "referencewidth";
            div.innerHTML = "width";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencewidthload);

        function referencewidthnumberload()
        {
            const br = document.createElement("br");
            referencewidth.append(br);

            const input = document.createElement("input");
            input.id = "referencewidthnumber";
            input.max = maxwidth;
            input.min = 0;
            input.type = "number";
            input.value = canvas.width - 100;
            input.addEventListener("input", referencewidthnumberupdate);
            referencewidth.append(input);

            //referencewidthnumberset();
        }
        addEventListener("load", referencewidthnumberload);

        function referencewidthnumberset()
        {
            const v = Number(referencewidthnumber.value);

            referencewidthrange.value = v;
            text.referencewidth = v;
        }

        function referencewidthnumberupdate()
        {
            referencewidthnumberset();
            svgupdate();
        }

        function referencewidthrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencewidthrange";
            input.max = referencewidthnumber.max;
            input.min = referencewidthnumber.min;
            input.type = "range";
            input.value = referencewidthnumber.value;
            input.addEventListener("input", referencewidthrangeupdate);
            referencewidth.append(input);

            referencewidthrangeset();
        }
        addEventListener("load", referencewidthrangeload);

        function referencewidthrangeset()
        {
            const v = Number(referencewidthrange.value);

            referencewidthnumber.value = v;
            text.referencewidth = v;
        }

        function referencewidthrangeupdate()
        {
            referencewidthrangeset();
            svgupdate();
        }

        function referencewidthexactload()
        {
            const br = document.createElement("br");
            referencewidth.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencewidthexactupdate);
                referencewidth.append(button);
            }
        }
        addEventListener("load", referencewidthexactload);

        function referencewidthexactupdate(e)
        {
            referencewidthnumber.value = canvas.width * Number(e.target.value);

            referencewidthnumberupdate();
        }

        function referencewidthincrementload()
        {
            const br = document.createElement("br");
            referencewidth.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencewidthincrementupdate);
                referencewidth.append(button);
            }
        }
        addEventListener("load", referencewidthincrementload);

        function referencewidthincrementupdate(e)
        {
            const v = Number(referencewidthnumber.value) + Number(e.target.value);

            if((referencewidthnumber.min <= v) && (v <= referencewidthnumber.max))
            {
                referencewidthnumber.value = v;

                referencewidthnumberupdate();
            }
        }



        function referenceheightload()
        {
            const div = document.createElement("div");
            div.id = "referenceheight";
            div.innerHTML = "height";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referenceheightload);

        function referenceheightnumberload()
        {
            const br = document.createElement("br");
            referenceheight.append(br);

            const input = document.createElement("input");
            input.id = "referenceheightnumber";
            input.max = maxheight;
            input.min = 0;
            input.type = "number";
            input.value = 280;
            input.addEventListener("input", referenceheightnumberupdate);
            referenceheight.append(input);

            //referenceheightnumberset();
        }
        addEventListener("load", referenceheightnumberload);

        function referenceheightnumberset()
        {
            const v = Number(referenceheightnumber.value);

            referenceheightrange.value = v;
            text.referenceheight = v;
        }

        function referenceheightnumberupdate()
        {
            referenceheightnumberset();
            svgupdate();
        }

        function referenceheightrangeload()
        {
            const input = document.createElement("input");
            input.id = "referenceheightrange";
            input.max = referenceheightnumber.max;
            input.min = referenceheightnumber.min;
            input.type = "range";
            input.value = referenceheightnumber.value;
            input.addEventListener("input", referenceheightrangeupdate);
            referenceheight.append(input);

            referenceheightrangeset();
        }
        addEventListener("load", referenceheightrangeload);

        function referenceheightrangeset()
        {
            const v = Number(referenceheightrange.value);

            referenceheightnumber.value = v;
            text.referenceheight = v;
        }

        function referenceheightrangeupdate()
        {
            referenceheightrangeset();
            svgupdate();
        }

        function referenceheightexactload()
        {
            const br = document.createElement("br");
            referenceheight.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceheightexactupdate);
                referenceheight.append(button);
            }
        }
        addEventListener("load", referenceheightexactload);

        function referenceheightexactupdate(e)
        {
            referenceheightnumber.value = canvas.height * Number(e.target.value);

            referenceheightnumberupdate();
        }

        function referenceheightincrementload()
        {
            const br = document.createElement("br");
            referenceheight.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceheightincrementupdate);
                referenceheight.append(button);
            }
        }
        addEventListener("load", referenceheightincrementload);

        function referenceheightincrementupdate(e)
        {
            const v = Number(referenceheightnumber.value) + Number(e.target.value);

            if((referenceheightnumber.min <= v) && (v <= referenceheightnumber.max))
            {
                referenceheightnumber.value = v;

                referenceheightnumberupdate();
            }
        }



        function referencexload()
        {
            const div = document.createElement("div");
            div.id = "referencex";
            div.innerHTML = "x";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencexload);

        function referencexnumberload()
        {
            const br = document.createElement("br");
            referencex.append(br);

            const input = document.createElement("input");
            input.id = "referencexnumber";
            input.max = maxwidth;
            input.min = -maxwidth;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", referencexnumberupdate);
            referencex.append(input);

            //referencexnumberset();
        }
        addEventListener("load", referencexnumberload);

        function referencexnumberset()
        {
            const v = Number(referencexnumber.value);

            referencexrange.value = v;
            text.referencex = v;
        }

        function referencexnumberupdate()
        {
            referencexnumberset();
            svgupdate();
        }

        function referencexrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencexrange";
            input.max = referencexnumber.max;
            input.min = referencexnumber.min;
            input.type = "range";
            input.value = referencexnumber.value;
            input.addEventListener("input", referencexrangeupdate);
            referencex.append(input);

            referencexrangeset();
        }
        addEventListener("load", referencexrangeload);

        function referencexrangeset()
        {
            const v = Number(referencexrange.value);

            referencexnumber.value = v;
            text.referencex = v;
        }

        function referencexrangeupdate()
        {
            referencexrangeset();
            svgupdate();
        }

        function referencexexactload()
        {
            const br = document.createElement("br");
            referencex.append(br);

            const array =
            [
                ["left",0],
                ["center",0.5],
                ["right",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencexexactupdate);
                referencex.append(button);
            }
        }
        addEventListener("load", referencexexactload);

        function referencexexactupdate(e)
        {
            //referencexnumber.value = (canvas.width - text.referencewidth - text.referencepaddingleft - text.referencepaddingright) * Number(e.target.value);
            referencexnumber.value = (canvas.width - text.referencewidth) * Number(e.target.value);

            referencexnumberupdate();
        }

        function referencexincrementload()
        {
            const br = document.createElement("br");
            referencex.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencexincrementupdate);
                referencex.append(button);
            }
        }
        addEventListener("load", referencexincrementload);

        function referencexincrementupdate(e)
        {
            const v = Number(referencexnumber.value) + Number(e.target.value);

            if((referencexnumber.min <= v) && (v <= referencexnumber.max))
            {
                referencexnumber.value = v;

                referencexnumberupdate();
            }
        }



        function referenceyload()
        {
            const div = document.createElement("div");
            div.id = "referencey";
            div.innerHTML = "y";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referenceyload);

        function referenceynumberload()
        {
            const br = document.createElement("br");
            referencey.append(br);

            const input = document.createElement("input");
            input.id = "referenceynumber";
            input.max = maxheight;
            input.min = -maxheight;
            input.type = "number";
            input.value = 400;
            input.addEventListener("input", referenceynumberupdate);
            referencey.append(input);

            //referenceynumberset();
        }
        addEventListener("load", referenceynumberload);

        function referenceynumberset()
        {
            const v = Number(referenceynumber.value);

            referenceyrange.value = v;
            text.referencey = v;
        }

        function referenceynumberupdate()
        {
            referenceynumberset();
            svgupdate();
        }

        function referenceyrangeload()
        {
            const input = document.createElement("input");
            input.id = "referenceyrange";
            input.max = referenceynumber.max;
            input.min = referenceynumber.min;
            input.type = "range";
            input.value = referenceynumber.value;
            input.addEventListener("input", referenceyrangeupdate);
            referencey.append(input);

            referenceyrangeset();
        }
        addEventListener("load", referenceyrangeload);

        function referenceyrangeset()
        {
            const v = Number(referenceyrange.value);

            referenceynumber.value = v;
            text.referencey = v;
        }

        function referenceyrangeupdate()
        {
            referenceyrangeset();
            svgupdate();
        }

        function referenceyexactload()
        {
            const br = document.createElement("br");
            referencey.append(br);

            const array =
            [
                ["top",0],
                ["center",0.5],
                ["bottom",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceyexactupdate);
                referencey.append(button);
            }
        }
        addEventListener("load", referenceyexactload);

        function referenceyexactupdate(e)
        {
            //referenceynumber.value = (canvas.height - text.referenceheight - text.referencepaddingtop - text.referencepaddingbottom) * Number(e.target.value);
            referenceynumber.value = (canvas.height - text.referenceheight) * Number(e.target.value);

            referenceynumberupdate();
        }

        function referenceyincrementload()
        {
            const br = document.createElement("br");
            referencey.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceyincrementupdate);
                referencey.append(button);
            }
        }
        addEventListener("load", referenceyincrementload);

        function referenceyincrementupdate(e)
        {
            const v = Number(referenceynumber.value) + Number(e.target.value);

            if((referenceynumber.min <= v) && (v <= referenceynumber.max))
            {
                referenceynumber.value = v;

                referenceynumberupdate();
            }
        }



        function referencebackgroundcolorload()
        {
            const div = document.createElement("div");
            div.id = "referencebackgroundcolor";
            div.innerHTML = "background-color";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencebackgroundcolorload);

        function referencebackgroundcolorcolorload()
        {
            const br = document.createElement("br");
            referencebackgroundcolor.append(br);

            const input = document.createElement("input");
            input.id = "referencebackgroundcolorcolor";
            input.type = "color";
            input.value = "#ffffff";
            input.addEventListener("input", referencebackgroundcolorcolorupdate);
            referencebackgroundcolor.append(input);

            //referencebackgroundcolorcolorset();
        }
        addEventListener("load", referencebackgroundcolorcolorload);

        function referencebackgroundcolorcolorset()
        {
            const c = referencebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referencebackgroundalphanumber.value;

            text.referencebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencebackgroundcolorcolorupdate()
        {
            referencebackgroundcolorcolorset();
            svgupdate();
        }

        function referencebackgroundcolorexactload()
        {
            const br = document.createElement("br");
            referencebackgroundcolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencebackgroundcolorexactupdate);
                referencebackgroundcolor.append(button);
            }
        }
        addEventListener("load", referencebackgroundcolorexactload);

        function referencebackgroundcolorexactupdate(e)
        {
            referencebackgroundcolorcolor.value = e.target.value;

            referencebackgroundcolorcolorupdate();
        }



        function referencebackgroundalphaload()
        {
            const div = document.createElement("div");
            div.id = "referencebackgroundalpha";
            div.innerHTML = "background-alpha";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencebackgroundalphaload);

        function referencebackgroundalphanumberload()
        {
            const br = document.createElement("br");
            referencebackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "referencebackgroundalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 0.5;
            input.addEventListener("input", referencebackgroundalphanumberupdate);
            referencebackgroundalpha.append(input);

            //referencebackgroundalphanumberset();
        }
        addEventListener("load", referencebackgroundalphanumberload);

        function referencebackgroundalphanumberset()
        {
            const c = referencebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referencebackgroundalphanumber.value;

            referencebackgroundalpharange.value = a;
            text.referencebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencebackgroundalphanumberupdate()
        {
            referencebackgroundalphanumberset();
            svgupdate();
        }

        function referencebackgroundalpharangeload()
        {
            const input = document.createElement("input");
            input.id = "referencebackgroundalpharange";
            input.max = referencebackgroundalphanumber.max;
            input.min = referencebackgroundalphanumber.min;
            input.step = referencebackgroundalphanumber.step;
            input.type = "range";
            input.value = referencebackgroundalphanumber.value;
            input.addEventListener("input", referencebackgroundalpharangeupdate);
            referencebackgroundalpha.append(input);

            referencebackgroundalpharangeset();
        }
        addEventListener("load", referencebackgroundalpharangeload);

        function referencebackgroundalpharangeset()
        {
            const c = referencebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referencebackgroundalpharange.value;

            referencebackgroundalphanumber.value = a;
            text.referencebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencebackgroundalpharangeupdate()
        {
            referencebackgroundalpharangeset();
            svgupdate();
        }

        function referencebackgroundalphaexactload()
        {
            const br = document.createElement("br");
            referencebackgroundalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencebackgroundalphaexactupdate);
                referencebackgroundalpha.append(button);
            }
        }
        addEventListener("load", referencebackgroundalphaexactload);

        function referencebackgroundalphaexactupdate(e)
        {
            referencebackgroundalphanumber.value = Number(e.target.value);

            referencebackgroundalphanumberupdate();
        }

        function referencebackgroundalphaincrementload()
        {
            const br = document.createElement("br");
            referencebackgroundalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencebackgroundalphaincrementupdate);
                referencebackgroundalpha.append(button);
            }
        }
        addEventListener("load", referencebackgroundalphaincrementload);

        function referencebackgroundalphaincrementupdate(e)
        {
            let v = Number(referencebackgroundalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((referencebackgroundalphanumber.min <= v) && (v <= referencebackgroundalphanumber.max))
            {
                referencebackgroundalphanumber.value = v;

                referencebackgroundalphanumberupdate();
            }
        }



        function referencebordercolorload()
        {
            const div = document.createElement("div");
            div.id = "referencebordercolor";
            div.innerHTML = "border-color";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencebordercolorload);

        function referencebordercolorcolorload()
        {
            const br = document.createElement("br");
            referencebordercolor.append(br);

            const input = document.createElement("input");
            input.id = "referencebordercolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", referencebordercolorcolorupdate);
            referencebordercolor.append(input);

            //referencebordercolorcolorset();
        }
        addEventListener("load", referencebordercolorcolorload);

        function referencebordercolorcolorset()
        {
            const c = referencebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referenceborderalphanumber.value;

            text.referencebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencebordercolorcolorupdate()
        {
            referencebordercolorcolorset();
            svgupdate();
        }

        function referencebordercolorexactload()
        {
            const br = document.createElement("br");
            referencebordercolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencebordercolorexactupdate);
                referencebordercolor.append(button);
            }
        }
        addEventListener("load", referencebordercolorexactload);

        function referencebordercolorexactupdate(e)
        {
            referencebordercolorcolor.value = e.target.value;

            referencebordercolorcolorupdate();
        }



        function referenceborderalphaload()
        {
            const div = document.createElement("div");
            div.id = "referenceborderalpha";
            div.innerHTML = "border-alpha";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referenceborderalphaload);

        function referenceborderalphanumberload()
        {
            const br = document.createElement("br");
            referenceborderalpha.append(br);

            const input = document.createElement("input");
            input.id = "referenceborderalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", referenceborderalphanumberupdate);
            referenceborderalpha.append(input);

            //referenceborderalphanumberset();
        }
        addEventListener("load", referenceborderalphanumberload);

        function referenceborderalphanumberset()
        {
            const c = referencebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referenceborderalphanumber.value;

            referenceborderalpharange.value = a;
            text.referencebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referenceborderalphanumberupdate()
        {
            referenceborderalphanumberset();
            svgupdate();
        }

        function referenceborderalpharangeload()
        {
            const input = document.createElement("input");
            input.id = "referenceborderalpharange";
            input.max = referenceborderalphanumber.max;
            input.min = referenceborderalphanumber.min;
            input.step = referenceborderalphanumber.step;
            input.type = "range";
            input.value = referenceborderalphanumber.value;
            input.addEventListener("input", referenceborderalpharangeupdate);
            referenceborderalpha.append(input);

            referenceborderalpharangeset();
        }
        addEventListener("load", referenceborderalpharangeload);

        function referenceborderalpharangeset()
        {
            const c = referencebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referenceborderalpharange.value;

            referenceborderalphanumber.value = a;
            text.referencebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referenceborderalpharangeupdate()
        {
            referenceborderalpharangeset();
            svgupdate();
        }

        function referenceborderalphaexactload()
        {
            const br = document.createElement("br");
            referenceborderalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceborderalphaexactupdate);
                referenceborderalpha.append(button);
            }
        }
        addEventListener("load", referenceborderalphaexactload);

        function referenceborderalphaexactupdate(e)
        {
            referenceborderalphanumber.value = Number(e.target.value);

            referenceborderalphanumberupdate();
        }

        function referenceborderalphaincrementload()
        {
            const br = document.createElement("br");
            referenceborderalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceborderalphaincrementupdate);
                referenceborderalpha.append(button);
            }
        }
        addEventListener("load", referenceborderalphaincrementload);

        function referenceborderalphaincrementupdate(e)
        {
            let v = Number(referenceborderalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((referenceborderalphanumber.min <= v) && (v <= referenceborderalphanumber.max))
            {
                referenceborderalphanumber.value = v;

                referenceborderalphanumberupdate();
            }
        }



        function referenceborderradiusload()
        {
            const div = document.createElement("div");
            div.id = "referenceborderradius";
            div.innerHTML = "border-radius";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referenceborderradiusload);

        function referenceborderradiusnumberload()
        {
            const br = document.createElement("br");
            referenceborderradius.append(br);

            const input = document.createElement("input");
            input.id = "referenceborderradiusnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", referenceborderradiusnumberupdate);
            referenceborderradius.append(input);

            //referenceborderradiusnumberset();
        }
        addEventListener("load", referenceborderradiusnumberload);

        function referenceborderradiusnumberset()
        {
            const v = Number(referenceborderradiusnumber.value);

            referenceborderradiusrange.value = v;
            text.referenceborderradius = v;
        }

        function referenceborderradiusnumberupdate()
        {
            referenceborderradiusnumberset();
            svgupdate();
        }

        function referenceborderradiusrangeload()
        {
            const input = document.createElement("input");
            input.id = "referenceborderradiusrange";
            input.max = referenceborderradiusnumber.max;
            input.min = referenceborderradiusnumber.min;
            input.type = "range";
            input.value = referenceborderradiusnumber.value;
            input.addEventListener("input", referenceborderradiusrang
7158
eupdate);
            referenceborderradius.append(input);

            referenceborderradiusrangeset();
        }
        addEventListener("load", referenceborderradiusrangeload);

        function referenceborderradiusrangeset()
        {
            const v = Number(referenceborderradiusrange.value);

            referenceborderradiusnumber.value = v;
            text.referenceborderradius = v;
        }

        function referenceborderradiusrangeupdate()
        {
            referenceborderradiusrangeset();
            svgupdate();
        }

        function referenceborderradiusexactload()
        {
            const br = document.createElement("br");
            referenceborderradius.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceborderradiusexactupdate);
                referenceborderradius.append(button);
            }
        }
        addEventListener("load", referenceborderradiusexactload);

        function referenceborderradiusexactupdate(e)
        {
            referenceborderradiusnumber.value = Number(e.target.value);

            referenceborderradiusnumberupdate();
        }

        function referenceborderradiusincrementload()
        {
            const br = document.createElement("br");
            referenceborderradius.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceborderradiusincrementupdate);
                referenceborderradius.append(button);
            }
        }
        addEventListener("load", referenceborderradiusincrementload);

        function referenceborderradiusincrementupdate(e)
        {
            const v = Number(referenceborderradiusnumber.value) + Number(e.target.value);

            if((referenceborderradiusnumber.min <= v) && (v <= referenceborderradiusnumber.max))
            {
                referenceborderradiusnumber.value = v;

                referenceborderradiusnumberupdate();
            }
        }



        function referenceborderstyleload()
        {
            const div = document.createElement("div");
            div.id = "referenceborderstyle";
            div.innerHTML = "border-style";
            tabcontentreference.append(div);
        }
        addEventListener("load", referenceborderstyleload);

        function referenceborderstyleselectload()
        {
            const br = document.createElement("br");
            referenceborderstyle.append(br);

            const select = document.createElement("select");
            select.id = "referenceborderstyleselect";
            select.addEventListener("input", referenceborderstyleselectupdate);
            referenceborderstyle.append(select);

            for(const value of borderstylearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            //select.value = borderstylearray[8];

            referenceborderstyleselectset();
        }
        addEventListener("load", referenceborderstyleselectload);

        function referenceborderstyleselectset()
        {
            text.referenceborderstyle = referenceborderstyleselect.value;
        }

        function referenceborderstyleselectupdate()
        {
            referenceborderstyleselectset();
            svgupdate();
        }



        function referenceborderwidthload()
        {
            const div = document.createElement("div");
            div.id = "referenceborderwidth";
            div.innerHTML = "border-width";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referenceborderwidthload);

        function referenceborderwidthnumberload()
        {
            const br = document.createElement("br");
            referenceborderwidth.append(br);

            const input = document.createElement("input");
            input.id = "referenceborderwidthnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 25;
            input.addEventListener("input", referenceborderwidthnumberupdate);
            referenceborderwidth.append(input);

            //referenceborderwidthnumberset();
        }
        addEventListener("load", referenceborderwidthnumberload);

        function referenceborderwidthnumberset()
        {
            const v = Number(referenceborderwidthnumber.value);

            referenceborderwidthrange.value = v;
            text.referenceborderwidth = v;
        }

        function referenceborderwidthnumberupdate()
        {
            referenceborderwidthnumberset();
            svgupdate();
        }

        function referenceborderwidthrangeload()
        {
            const input = document.createElement("input");
            input.id = "referenceborderwidthrange";
            input.max = referenceborderwidthnumber.max;
            input.min = referenceborderwidthnumber.min;
            input.type = "range";
            input.value = referenceborderwidthnumber.value;
            input.addEventListener("input", referenceborderwidthrangeupdate);
            referenceborderwidth.append(input);

            referenceborderwidthrangeset();
        }
        addEventListener("load", referenceborderwidthrangeload);

        function referenceborderwidthrangeset()
        {
            const v = Number(referenceborderwidthrange.value);

            referenceborderwidthnumber.value = v;
            text.referenceborderwidth = v;
        }

        function referenceborderwidthrangeupdate()
        {
            referenceborderwidthrangeset();
            svgupdate();
        }

        function referenceborderwidthexactload()
        {
            const br = document.createElement("br");
            referenceborderwidth.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceborderwidthexactupdate);
                referenceborderwidth.append(button);
            }
        }
        addEventListener("load", referenceborderwidthexactload);

        function referenceborderwidthexactupdate(e)
        {
            referenceborderwidthnumber.value = Number(e.target.value);

            referenceborderwidthnumberupdate();
        }

        function referenceborderwidthincrementload()
        {
            const br = document.createElement("br");
            referenceborderwidth.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceborderwidthincrementupdate);
                referenceborderwidth.append(button);
            }
        }
        addEventListener("load", referenceborderwidthincrementload);

        function referenceborderwidthincrementupdate(e)
        {
            const v = Number(referenceborderwidthnumber.value) + Number(e.target.value);

            if((referenceborderwidthnumber.min <= v) && (v <= referenceborderwidthnumber.max))
            {
                referenceborderwidthnumber.value = v;

                referenceborderwidthnumberupdate();
            }
        }



        function referencehorizontalload()
        {
            const div = document.createElement("div");
            div.id = "referencehorizontal";
            div.innerHTML = "horizontal";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencehorizontalload);

        function referencehorizontalselectload()
        {
            const br = document.createElement("br");
            referencehorizontal.append(br);

            const select = document.createElement("select");
            select.id = "referencehorizontalselect";
            select.addEventListener("input", referencehorizontalselectupdate);
            referencehorizontal.append(select);

            for(const value of horizontalarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            select.value = horizontalarray[1];

            referencehorizontalselectset();
        }
        addEventListener("load", referencehorizontalselectload);

        function referencehorizontalselectset()
        {
            text.referencehorizontal = referencehorizontalselect.value;
        }

        function referencehorizontalselectupdate()
        {
            referencehorizontalselectset();
            svgupdate();
        }



        function referenceverticalload()
        {
            const div = document.createElement("div");
            div.id = "referencevertical";
            div.innerHTML = "vertical";
            tabcontentreference.append(div);
        }
        addEventListener("load", referenceverticalload);

        function referenceverticalselectload()
        {
            const br = document.createElement("br");
            referencevertical.append(br);

            const select = document.createElement("select");
            select.id = "referenceverticalselect";
            select.addEventListener("input", referenceverticalselectupdate);
            referencevertical.append(select);

            for(const value of verticalarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            select.value = verticalarray[1];

            referenceverticalselectset();
        }
        addEventListener("load", referenceverticalselectload);

        function referenceverticalselectset()
        {
            text.referencevertical = referenceverticalselect.value;
        }

        function referenceverticalselectupdate()
        {
            referenceverticalselectset();
            svgupdate();
        }



        function referencewritingmodeload()
        {
            const div = document.createElement("div");
            div.id = "referencewritingmode";
            div.innerHTML = "writing-mode";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencewritingmodeload);

        function referencewritingmodeselectload()
        {
            const br = document.createElement("br");
            referencewritingmode.append(br);

            const select = document.createElement("select");
            select.id = "referencewritingmodeselect";
            select.addEventListener("input", referencewritingmodeselectupdate);
            referencewritingmode.append(select);

            for(const value of writingmodearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            referencewritingmodeselectset();
        }
        addEventListener("load", referencewritingmodeselectload);

        function referencewritingmodeselectset()
        {
            text.referencewritingmode = referencewritingmodeselect.value;
        }

        function referencewritingmodeselectupdate()
        {
            referencewritingmodeselectset();
            svgupdate();
        }



        function referencefontfamilyload()
        {
            const div = document.createElement("div");
            div.id = "referencefontfamily";
            div.innerHTML = "font-family";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencefontfamilyload);

        function referencefontfamilyselectload()
        {
            const br = document.createElement("br");
            referencefontfamily.append(br);

            const select = document.createElement("select");
            select.id = "referencefontfamilyselect";
            select.addEventListener("input", referencefontfamilyselectupdate);
            referencefontfamily.append(select);

            for(const value of fontfamilyarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            referencefontfamilyselectset();
        }
        addEventListener("load", referencefontfamilyselectload);

        function referencefontfamilyselectset()
        {
            text.referencefontfamily = referencefontfamilyselect.value;
        }

        function referencefontfamilyselectupdate()
        {
            referencefontfamilyselectset();
            svgupdate();
        }



        function referencefontsizeload()
        {
            const div = document.createElement("div");
            div.id = "referencefontsize";
            div.innerHTML = "font-size";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencefontsizeload);

        function referencefontsizenumberload()
        {
            const br = document.createElement("br");
            referencefontsize.append(br);

            const input = document.createElement("input");
            input.id = "referencefontsizenumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", referencefontsizenumberupdate);
            referencefontsize.append(input);

            //referencefontsizenumberset();
        }
        addEventListener("load", referencefontsizenumberload);

        function referencefontsizenumberset()
        {
            const v = Number(referencefontsizenumber.value);

            referencefontsizerange.value = v;
            text.referencefontsize = v;
        }

        function referencefontsizenumberupdate()
        {
            referencefontsizenumberset();
            svgupdate();
        }

        function referencefontsizerangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefontsizerange";
            input.max = referencefontsizenumber.max;
            input.min = referencefontsizenumber.min;
            input.type = "range";
            input.value = referencefontsizenumber.value;
            input.addEventListener("input", referencefontsizerangeupdate);
            referencefontsize.append(input);

            referencefontsizerangeset();
        }
        addEventListener("load", referencefontsizerangeload);

        function referencefontsizerangeset()
        {
            const v = Number(referencefontsizerange.value);

            referencefontsizenumber.value = v;
            text.referencefontsize = v;
        }

        function referencefontsizerangeupdate()
        {
            referencefontsizerangeset();
            svgupdate();
        }

        function referencefontsizeexactload()
        {
            const br = document.createElement("br");
            referencefontsize.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefontsizeexactupdate);
                referencefontsize.append(button);
            }
        }
        addEventListener("load", referencefontsizeexactload);

        function referencefontsizeexactupdate(e)
        {
            referencefontsizenumber.value = Number(e.target.value);

            referencefontsizenumberupdate();
        }

        function referencefontsizeincrementload()
        {
            const br = document.createElement("br");
            referencefontsize.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefontsizeincrementupdate);
                referencefontsize.append(button);
            }
        }
        addEventListener("load", referencefontsizeincrementload);

        function referencefontsizeincrementupdate(e)
        {
            const v = Number(referencefontsizenumber.value) + Number(e.target.value);

            if((referencefontsizenumber.min <= v) && (v <= referencefontsizenumber.max))
            {
                referencefontsizenumber.value = v;

                referencefontsizenumberupdate();
            }
        }

/*
        function referencefontsizefitload()
        {
            const button = document.createElement("button");
            button.innerHTML = "fit";
            button.addEventListener("click", referencefontsizefitupdate);
            referencefontsize.append(button);
        }
        addEventListener("load", referencefontsizefitload);

        function referencefontsizefitupdate()
        {
            const t = document.createElement("div");
            referencefontsize.append(t);
            t.innerHTML = text.bookname;
            t.style.fontSize = `${referencefontsizenumber.value}px`;

            const h1 = text.referencewidth;
            const h2 = text.referenceheight;
            const h3 = t.offsetWidth;
            const h4 = t.offsetHeight;
            const h5 = referencefontsizenumber.value;

            //const h4 = t.offsetParent;//t.style.fontSize;
            //const h5 = t.clientHeight;//text.style.height;
            //const h6 = text.height;
            //const h7 = text.getBoundingClientRect().height;
            //const h8 = text.style.lineHeight;
            //const h9 = canvas.getBoundingClientRect().height;
            console.log(h1, h2, h3, h4, h5);
            //t.hidden = true;

            if(h2 < h4)
            {
                referencefontsizenumber.value -= 1;
                referencefit();
            }

            referencefontsizenumberupdate();
        }
//*/



        function referencefontstyleload()
        {
            const div = document.createElement("div");
            div.id = "referencefontstyle";
            div.innerHTML = "font-style";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencefontstyleload);

        function referencefontstyleselectload()
        {
            const br = document.createElement("br");
            referencefontstyle.append(br);

            const select = document.createElement("select");
            select.id = "referencefontstyleselect";
            select.addEventListener("input", referencefontstyleselectupdate);
            referencefontstyle.append(select);

            for(const value of fontstylearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            referencefontstyleselectset();
        }
        addEventListener("load", referencefontstyleselectload);

        function referencefontstyleselectset()
        {
            text.referencefontstyle = referencefontstyleselect.value;
        }

        function referencefontstyleselectupdate()
        {
            referencefontstyleselectset();
            svgupdate();
        }



        function referencefontvariantload()
        {
            const div = document.createElement("div");
            div.id = "referencefontvariant";
            div.innerHTML = "font-variant";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencefontvariantload);

        function referencefontvariantselectload()
        {
            const br = document.createElement("br");
            referencefontvariant.append(br);

            const select = document.createElement("select");
            select.id = "referencefontvariantselect";
            select.addEventListener("input", referencefontvariantselectupdate);
            referencefontvariant.append(select);

            for(const value of fontvariantarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            referencefontvariantselectset();
        }
        addEventListener("load", referencefontvariantselectload);

        function referencefontvariantselectset()
        {
            text.referencefontvariant = referencefontvariantselect.value;
        }

        function referencefontvariantselectupdate()
        {
            referencefontvariantselectset();
            svgupdate();
        }



        function referencefontweightload()
        {
            const div = document.createElement("div");
            div.id = "referencefontweight";
            div.innerHTML = "font-weight";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencefontweightload);

        function referencefontweightselectload()
        {
            const br = document.createElement("br");
            referencefontweight.append(br);

            const select = document.createElement("select");
            select.id = "referencefontweightselect";
            select.addEventListener("input", referencefontweightselectupdate);
            referencefontweight.append(select);

            for(const value of fontweightarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            referencefontweightselectset();
        }
        addEventListener("load", referencefontweightselectload);

        function referencefontweightselectset()
        {
            text.referencefontweight = referencefontweightselect.value;
        }

        function referencefontweightselectupdate()
        {
            referencefontweightselectset();
            svgupdate();
        }



        function referencecolorload()
        {
            const div = document.createElement("div");
            div.id = "referencecolor";
            div.innerHTML = "color";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencecolorload);

        function referencecolorcolorload()
        {
            const br = document.createElement("br");
            referencecolor.append(br);

            const input = document.createElement("input");
            input.id = "referencecolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", referencecolorcolorupdate);
            referencecolor.append(input);

            //referencecolorcolorset();
        }
        addEventListener("load", referencecolorcolorload);

        function referencecolorcolorset()
        {
            const c = referencecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referencealphanumber.value;

            text.referencecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencecolorcolorupdate()
        {
            referencecolorcolorset();
            svgupdate();
        }

        function referencecolorexactload()
        {
            const br = document.createElement("br");
            referencecolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencecolorexactupdate);
                referencecolor.append(button);
            }
        }
        addEventListener("load", referencecolorexactload);

        function referencecolorexactupdate(e)
        {
            referencecolorcolor.value = e.target.value;

            referencecolorcolorupdate();
        }



        function referencealphaload()
        {
            const div = document.createElement("div");
            div.id = "referencealpha";
            div.innerHTML = "alpha";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencealphaload);

        function referencealphanumberload()
        {
            const br = document.createElement("br");
            referencealpha.append(br);

            const input = document.createElement("input");
            input.id = "referencealphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", referencealphanumberupdate);
            referencealpha.append(input);

            //referencealphanumberset();
        }
        addEventListener("load", referencealphanumberload);

        function referencealphanumberset()
        {
            const c = referencecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referencealphanumber.value;

            referencealpharange.value = a;
            text.referencecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencealphanumberupdate()
        {
            referencealphanumberset();
            svgupdate();
        }

        function referencealpharangeload()
        {
            const input = document.createElement("input");
            input.id = "referencealpharange";
            input.max = referencealphanumber.max;
            input.min = referencealphanumber.min;
            input.step = referencealphanumber.step;
            input.type = "range";
            input.value = referencealphanumber.value;
            input.addEventListener("input", referencealpharangeupdate);
            referencealpha.append(input);

            referencealpharangeset();
        }
        addEventListener("load", referencealpharangeload);

        function referencealpharangeset()
        {
            const c = referencecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referencealpharange.value;

            referencealphanumber.value = a;
            text.referencecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencealpharangeupdate()
        {
            referencealpharangeset();
            svgupdate();
        }

        function referencealphaexactload()
        {
            const br = document.createElement("br");
            referencealpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencealphaexactupdate);
                referencealpha.append(button);
            }
        }
        addEventListener("load", referencealphaexactload);

        function referencealphaexactupdate(e)
        {
            referencealphanumber.value = Number(e.target.value);

            referencealphanumberupdate();
        }

        function referencealphaincrementload()
        {
            const br = document.createElement("br");
            referencealpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencealphaincrementupdate);
                referencealpha.append(button);
            }
        }
        addEventListener("load", referencealphaincrementload);

        function referencealphaincrementupdate(e)
        {
            let v = Number(referencealphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((referencealphanumber.min <= v) && (v <= referencealphanumber.max))
            {
                referencealphanumber.value = v;

                referencealphanumberupdate();
            }
        }



/*leftoff
        function referencefilterblurload()
        {
            const div = document.createElement("div");
            div.id = "referencefilterblur";
            div.innerHTML = "filter-blur";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefilterblurload);

        function referencefilterblurnumberload()
        {
            const br = document.createElement("br");
            referencefilterblur.append(br);

            const input = document.createElement("input");
            input.id = "referencefilterblurnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencefilterblurnumberupdate);
            referencefilterblur.append(input);

            //referencefilterblurnumberset();
        }
        addEventListener("load", referencefilterblurnumberload);

        function referencefilterblurnumberset()
        {
            const v = referencefilterblurnumber.value;

            referencefilterblurrange.value = v;
            text.referencebackdropfilterblur = v;
        }

        function referencefilterblurnumberupdate()
        {
            referencefilterblurnumberset();
            svgupdate();
        }

        function referencefilterblurrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefilterblurrange";
            input.max = referencefilterblurnumber.max;
            input.min = referencefilterblurnumber.min;
            input.step = referencefilterblurnumber.step;
            input.type = "range";
            input.value = referencefilterblurnumber.value;
            input.addEventListener("input", referencefilterblurrangeupdate);
            referencefilterblur.append(input);

            referencefilterblurrangeset();
        }
        addEventListener("load", referencefilterblurrangeload);

        function referencefilterblurrangeset()
        {
            const v = referencefilterblurrange.value;

            referencefilterblurnumber.value = v;
            text.referencebackdropfilterblur = v;
        }

        function referencefilterblurrangeupdate()
        {
            referencefilterblurrangeset();
            svgupdate();
        }

        function referencefilterblurexactload()
        {
            const br = document.createElement("br");
            referencefilterblur.append(br);

            const array =
            [
                ["0",0],
                ["2",2],
                ["4",4],
                ["8",8],
                ["16",16],
                ["32",32],
                ["64",64],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterblurexactupdate);
                referencefilterblur.append(button);
            }
        }
        addEventListener("load", referencefilterblurexactload);

        function referencefilterblurexactupdate(e)
        {
            referencefilterblurnumber.value = Number(e.target.value);

            referencefilterblurnumberupdate();
        }

        function referencefilterblurincrementload()
        {
            const br = document.createElement("br");
            referencefilterblur.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterblurincrementupdate);
                referencefilterblur.append(button);
            }
        }
        addEventListener("load", referencefilterblurincrementload);

        function referencefilterblurincrementupdate(e)
        {
            const v = Number(referencefilterblurnumber.value) + Number(e.target.value);

            if((referencefilterblurnumber.min <= v) && (v <= referencefilterblurnumber.max))
            {
                referencefilterblurnumber.value = v;

                referencefilterblurnumberupdate();
            }
        }



        function referencefilterbrightnessload()
        {
            const div = document.createElement("div");
            div.id = "referencefilterbrightness";
            div.innerHTML = "filter-brightness";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefilterbrightnessload);

        function referencefilterbrightnessnumberload()
        {
            const br = document.createElement("br");
            referencefilterbrightness.append(br);

            const input = document.createElement("input");
            input.id = "referencefilterbrightnessnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", referencefilterbrightnessnumberupdate);
            referencefilterbrightness.append(input);

            //referencefilterbrightnessnumberset();
        }
        addEventListener("load", referencefilterbrightnessnumberload);

        function referencefilterbrightnessnumberset()
        {
            const v = referencefilterbrightnessnumber.value;

            referencefilterbrightn
10000
essrange.value = v;
            text.referencebackdropfilterbrightness = v;
        }

        function referencefilterbrightnessnumberupdate()
        {
            referencefilterbrightnessnumberset();
            svgupdate();
        }

        function referencefilterbrightnessrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefilterbrightnessrange";
            input.max = referencefilterbrightnessnumber.max;
            input.min = referencefilterbrightnessnumber.min;
            input.step = referencefilterbrightnessnumber.step;
            input.type = "range";
            input.value = referencefilterbrightnessnumber.value;
            input.addEventListener("input", referencefilterbrightnessrangeupdate);
            referencefilterbrightness.append(input);

            referencefilterbrightnessrangeset();
        }
        addEventListener("load", referencefilterbrightnessrangeload);

        function referencefilterbrightnessrangeset()
        {
            const v = referencefilterbrightnessrange.value;

            referencefilterbrightnessnumber.value = v;
            text.referencebackdropfilterbrightness = v;
        }

        function referencefilterbrightnessrangeupdate()
        {
            referencefilterbrightnessrangeset();
            svgupdate();
        }

        function referencefilterbrightnessexactload()
        {
            const br = document.createElement("br");
            referencefilterbrightness.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterbrightnessexactupdate);
                referencefilterbrightness.append(button);
            }
        }
        addEventListener("load", referencefilterbrightnessexactload);

        function referencefilterbrightnessexactupdate(e)
        {
            referencefilterbrightnessnumber.value = Number(e.target.value);

            referencefilterbrightnessnumberupdate();
        }

        function referencefilterbrightnessincrementload()
        {
            const br = document.createElement("br");
            referencefilterbrightness.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterbrightnessincrementupdate);
                referencefilterbrightness.append(button);
            }
        }
        addEventListener("load", referencefilterbrightnessincrementload);

        function referencefilterbrightnessincrementupdate(e)
        {
            const v = Number(referencefilterbrightnessnumber.value) + Number(e.target.value);

            if((referencefilterbrightnessnumber.min <= v) && (v <= referencefilterbrightnessnumber.max))
            {
                referencefilterbrightnessnumber.value = v;

                referencefilterbrightnessnumberupdate();
            }
        }



        function referencefiltercontrastload()
        {
            const div = document.createElement("div");
            div.id = "referencefiltercontrast";
            div.innerHTML = "filter-contrast";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefiltercontrastload);

        function referencefiltercontrastnumberload()
        {
            const br = document.createElement("br");
            referencefiltercontrast.append(br);

            const input = document.createElement("input");
            input.id = "referencefiltercontrastnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", referencefiltercontrastnumberupdate);
            referencefiltercontrast.append(input);

            //referencefiltercontrastnumberset();
        }
        addEventListener("load", referencefiltercontrastnumberload);

        function referencefiltercontrastnumberset()
        {
            const v = referencefiltercontrastnumber.value;

            referencefiltercontrastrange.value = v;
            text.referencebackdropfiltercontrast = v;
        }

        function referencefiltercontrastnumberupdate()
        {
            referencefiltercontrastnumberset();
            svgupdate();
        }

        function referencefiltercontrastrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefiltercontrastrange";
            input.max = referencefiltercontrastnumber.max;
            input.min = referencefiltercontrastnumber.min;
            input.step = referencefiltercontrastnumber.step;
            input.type = "range";
            input.value = referencefiltercontrastnumber.value;
            input.addEventListener("input", referencefiltercontrastrangeupdate);
            referencefiltercontrast.append(input);

            referencefiltercontrastrangeset();
        }
        addEventListener("load", referencefiltercontrastrangeload);

        function referencefiltercontrastrangeset()
        {
            const v = referencefiltercontrastrange.value;

            referencefiltercontrastnumber.value = v;
            text.referencebackdropfiltercontrast = v;
        }

        function referencefiltercontrastrangeupdate()
        {
            referencefiltercontrastrangeset();
            svgupdate();
        }

        function referencefiltercontrastexactload()
        {
            const br = document.createElement("br");
            referencefiltercontrast.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltercontrastexactupdate);
                referencefiltercontrast.append(button);
            }
        }
        addEventListener("load", referencefiltercontrastexactload);

        function referencefiltercontrastexactupdate(e)
        {
            referencefiltercontrastnumber.value = Number(e.target.value);

            referencefiltercontrastnumberupdate();
        }

        function referencefiltercontrastincrementload()
        {
            const br = document.createElement("br");
            referencefiltercontrast.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltercontrastincrementupdate);
                referencefiltercontrast.append(button);
            }
        }
        addEventListener("load", referencefiltercontrastincrementload);

        function referencefiltercontrastincrementupdate(e)
        {
            const v = Number(referencefiltercontrastnumber.value) + Number(e.target.value);

            if((referencefiltercontrastnumber.min <= v) && (v <= referencefiltercontrastnumber.max))
            {
                referencefiltercontrastnumber.value = v;

                referencefiltercontrastnumberupdate();
            }
        }



        function referencefiltergrayscaleload()
        {
            const div = document.createElement("div");
            div.id = "referencefiltergrayscale";
            div.innerHTML = "filter-grayscale";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefiltergrayscaleload);

        function referencefiltergrayscalenumberload()
        {
            const br = document.createElement("br");
            referencefiltergrayscale.append(br);

            const input = document.createElement("input");
            input.id = "referencefiltergrayscalenumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencefiltergrayscalenumberupdate);
            referencefiltergrayscale.append(input);

            //referencefiltergrayscalenumberset();
        }
        addEventListener("load", referencefiltergrayscalenumberload);

        function referencefiltergrayscalenumberset()
        {
            const v = referencefiltergrayscalenumber.value;

            referencefiltergrayscalerange.value = v;
            text.referencebackdropfiltergrayscale = v;
        }

        function referencefiltergrayscalenumberupdate()
        {
            referencefiltergrayscalenumberset();
            svgupdate();
        }

        function referencefiltergrayscalerangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefiltergrayscalerange";
            input.max = referencefiltergrayscalenumber.max;
            input.min = referencefiltergrayscalenumber.min;
            input.step = referencefiltergrayscalenumber.step;
            input.type = "range";
            input.value = referencefiltergrayscalenumber.value;
            input.addEventListener("input", referencefiltergrayscalerangeupdate);
            referencefiltergrayscale.append(input);

            referencefiltergrayscalerangeset();
        }
        addEventListener("load", referencefiltergrayscalerangeload);

        function referencefiltergrayscalerangeset()
        {
            const v = referencefiltergrayscalerange.value;

            referencefiltergrayscalenumber.value = v;
            text.referencebackdropfiltergrayscale = v;
        }

        function referencefiltergrayscalerangeupdate()
        {
            referencefiltergrayscalerangeset();
            svgupdate();
        }

        function referencefiltergrayscaleexactload()
        {
            const br = document.createElement("br");
            referencefiltergrayscale.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltergrayscaleexactupdate);
                referencefiltergrayscale.append(button);
            }
        }
        addEventListener("load", referencefiltergrayscaleexactload);

        function referencefiltergrayscaleexactupdate(e)
        {
            referencefiltergrayscalenumber.value = Number(e.target.value);

            referencefiltergrayscalenumberupdate();
        }

        function referencefiltergrayscaleincrementload()
        {
            const br = document.createElement("br");
            referencefiltergrayscale.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltergrayscaleincrementupdate);
                referencefiltergrayscale.append(button);
            }
        }
        addEventListener("load", referencefiltergrayscaleincrementload);

        function referencefiltergrayscaleincrementupdate(e)
        {
            const v = Number(referencefiltergrayscalenumber.value) + Number(e.target.value);

            if((referencefiltergrayscalenumber.min <= v) && (v <= referencefiltergrayscalenumber.max))
            {
                referencefiltergrayscalenumber.value = v;

                referencefiltergrayscalenumberupdate();
            }
        }



        function referencefilterhuerotateload()
        {
            const div = document.createElement("div");
            div.id = "referencefilterhuerotate";
            div.innerHTML = "filter-hue-rotate";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefilterhuerotateload);

        function referencefilterhuerotatenumberload()
        {
            const br = document.createElement("br");
            referencefilterhuerotate.append(br);

            const input = document.createElement("input");
            input.id = "referencefilterhuerotatenumber";
            input.max = 360;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencefilterhuerotatenumberupdate);
            referencefilterhuerotate.append(input);

            //referencefilterhuerotatenumberset();
        }
        addEventListener("load", referencefilterhuerotatenumberload);

        function referencefilterhuerotatenumberset()
        {
            const v = referencefilterhuerotatenumber.value;

            referencefilterhuerotaterange.value = v;
            text.referencebackdropfilterhuerotate = v;
        }

        function referencefilterhuerotatenumberupdate()
        {
            referencefilterhuerotatenumberset();
            svgupdate();
        }

        function referencefilterhuerotaterangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefilterhuerotaterange";
            input.max = referencefilterhuerotatenumber.max;
            input.min = referencefilterhuerotatenumber.min;
            input.step = referencefilterhuerotatenumber.step;
            input.type = "range";
            input.value = referencefilterhuerotatenumber.value;
            input.addEventListener("input", referencefilterhuerotaterangeupdate);
            referencefilterhuerotate.append(input);

            referencefilterhuerotaterangeset();
        }
        addEventListener("load", referencefilterhuerotaterangeload);

        function referencefilterhuerotaterangeset()
        {
            const v = referencefilterhuerotaterange.value;

            referencefilterhuerotatenumber.value = v;
            text.referencebackdropfilterhuerotate = v;
        }

        function referencefilterhuerotaterangeupdate()
        {
            referencefilterhuerotaterangeset();
            svgupdate();
        }

        function referencefilterhuerotateexactload()
        {
            const br = document.createElement("br");
            referencefilterhuerotate.append(br);

            const array =
            [
                ["0",0],
                ["90",90],
                ["180",180],
                ["270",270],
                ["360",360],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterhuerotateexactupdate);
                referencefilterhuerotate.append(button);
            }
        }
        addEventListener("load", referencefilterhuerotateexactload);

        function referencefilterhuerotateexactupdate(e)
        {
            referencefilterhuerotatenumber.value = Number(e.target.value);

            referencefilterhuerotatenumberupdate();
        }

        function referencefilterhuerotateincrementload()
        {
            const br = document.createElement("br");
            referencefilterhuerotate.append(br);

            const array =
            [
                //["-90",-90],
                ["-45",-45],
                ["-15",-15],
                ["-1",-1],
                ["+1",1],
                ["+15",15],
                ["+45",45],
                //["+90",90],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterhuerotateincrementupdate);
                referencefilterhuerotate.append(button);
            }
        }
        addEventListener("load", referencefilterhuerotateincrementload);

        function referencefilterhuerotateincrementupdate(e)
        {
            const v = Number(referencefilterhuerotatenumber.value) + Number(e.target.value);

            if((referencefilterhuerotatenumber.min <= v) && (v <= referencefilterhuerotatenumber.max))
            {
                referencefilterhuerotatenumber.value = v;

                referencefilterhuerotatenumberupdate();
            }
        }



        function referencefilterinvertload()
        {
            const div = document.createElement("div");
            div.id = "referencefilterinvert";
            div.innerHTML = "filter-invert";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefilterinvertload);

        function referencefilterinvertnumberload()
        {
            const br = document.createElement("br");
            referencefilterinvert.append(br);

            const input = document.createElement("input");
            input.id = "referencefilterinvertnumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencefilterinvertnumberupdate);
            referencefilterinvert.append(input);

            //referencefilterinvertnumberset();
        }
        addEventListener("load", referencefilterinvertnumberload);

        function referencefilterinvertnumberset()
        {
            const v = referencefilterinvertnumber.value;

            referencefilterinvertrange.value = v;
            text.referencebackdropfilterinvert = v;
        }

        function referencefilterinvertnumberupdate()
        {
            referencefilterinvertnumberset();
            svgupdate();
        }

        function referencefilterinvertrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefilterinvertrange";
            input.max = referencefilterinvertnumber.max;
            input.min = referencefilterinvertnumber.min;
            input.step = referencefilterinvertnumber.step;
            input.type = "range";
            input.value = referencefilterinvertnumber.value;
            input.addEventListener("input", referencefilterinvertrangeupdate);
            referencefilterinvert.append(input);

            referencefilterinvertrangeset();
        }
        addEventListener("load", referencefilterinvertrangeload);

        function referencefilterinvertrangeset()
        {
            const v = referencefilterinvertrange.value;

            referencefilterinvertnumber.value = v;
            text.referencebackdropfilterinvert = v;
        }

        function referencefilterinvertrangeupdate()
        {
            referencefilterinvertrangeset();
            svgupdate();
        }

        function referencefilterinvertexactload()
        {
            const br = document.createElement("br");
            referencefilterinvert.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterinvertexactupdate);
                referencefilterinvert.append(button);
            }
        }
        addEventListener("load", referencefilterinvertexactload);

        function referencefilterinvertexactupdate(e)
        {
            referencefilterinvertnumber.value = Number(e.target.value);

            referencefilterinvertnumberupdate();
        }

        function referencefilterinvertincrementload()
        {
            const br = document.createElement("br");
            referencefilterinvert.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterinvertincrementupdate);
                referencefilterinvert.append(button);
            }
        }
        addEventListener("load", referencefilterinvertincrementload);

        function referencefilterinvertincrementupdate(e)
        {
            const v = Number(referencefilterinvertnumber.value) + Number(e.target.value);

            if((referencefilterinvertnumber.min <= v) && (v <= referencefilterinvertnumber.max))
            {
                referencefilterinvertnumber.value = v;

                referencefilterinvertnumberupdate();
            }
        }



        function referencefiltersaturateload()
        {
            const div = document.createElement("div");
            div.id = "referencefiltersaturate";
            div.innerHTML = "filter-saturate";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefiltersaturateload);

        function referencefiltersaturatenumberload()
        {
            const br = document.createElement("br");
            referencefiltersaturate.append(br);

            const input = document.createElement("input");
            input.id = "referencefiltersaturatenumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", referencefiltersaturatenumberupdate);
            referencefiltersaturate.append(input);

            //referencefiltersaturatenumberset();
        }
        addEventListener("load", referencefiltersaturatenumberload);

        function referencefiltersaturatenumberset()
        {
            const v = referencefiltersaturatenumber.value;

            referencefiltersaturaterange.value = v;
            text.referencebackdropfiltersaturate = v;
        }

        function referencefiltersaturatenumberupdate()
        {
            referencefiltersaturatenumberset();
            svgupdate();
        }

        function referencefiltersaturaterangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefiltersaturaterange";
            input.max = referencefiltersaturatenumber.max;
            input.min = referencefiltersaturatenumber.min;
            input.step = referencefiltersaturatenumber.step;
            input.type = "range";
            input.value = referencefiltersaturatenumber.value;
            input.addEventListener("input", referencefiltersaturaterangeupdate);
            referencefiltersaturate.append(input);

            referencefiltersaturaterangeset();
        }
        addEventListener("load", referencefiltersaturaterangeload);

        function referencefiltersaturaterangeset()
        {
            const v = referencefiltersaturaterange.value;

            referencefiltersaturatenumber.value = v;
            text.referencebackdropfiltersaturate = v;
        }

        function referencefiltersaturaterangeupdate()
        {
            referencefiltersaturaterangeset();
            svgupdate();
        }

        function referencefiltersaturateexactload()
        {
            const br = document.createElement("br");
            referencefiltersaturate.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltersaturateexactupdate);
                referencefiltersaturate.append(button);
            }
        }
        addEventListener("load", referencefiltersaturateexactload);

        function referencefiltersaturateexactupdate(e)
        {
            referencefiltersaturatenumber.value = Number(e.target.value);

            referencefiltersaturatenumberupdate();
        }

        function referencefiltersaturateincrementload()
        {
            const br = document.createElement("br");
            referencefiltersaturate.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltersaturateincrementupdate);
                referencefiltersaturate.append(button);
            }
        }
        addEventListener("load", referencefiltersaturateincrementload);

        function referencefiltersaturateincrementupdate(e)
        {
            const v = Number(referencefiltersaturatenumber.value) + Number(e.target.value);

            if((referencefiltersaturatenumber.min <= v) && (v <= referencefiltersaturatenumber.max))
            {
                referencefiltersaturatenumber.value = v;

                referencefiltersaturatenumberupdate();
            }
        }



        function referencefiltersepiaload()
        {
            const div = document.createElement("div");
            div.id = "referencefiltersepia";
            div.innerHTML = "filter-sepia";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefiltersepiaload);

        function referencefiltersepianumberload()
        {
            const br = document.createElement("br");
            referencefiltersepia.append(br);

            const input = document.createElement("input");
            input.id = "referencefiltersepianumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencefiltersepianumberupdate);
            referencefiltersepia.append(input);

            //referencefiltersepianumberset();
        }
        addEventListener("load", referencefiltersepianumberload);

        function referencefiltersepianumberset()
        {
            const v = referencefiltersepianumber.value;

            referencefiltersepiarange.value = v;
            text.referencebackdropfiltersepia = v;
        }

        function referencefiltersepianumberupdate()
        {
            referencefiltersepianumberset();
            svgupdate();
        }

        function referencefiltersepiarangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefiltersepiarange";
            input.max = referencefiltersepianumber.max;
            input.min = referencefiltersepianumber.min;
            input.step = referencefiltersepianumber.step;
            input.type = "range";
            input.value = referencefiltersepianumber.value;
            input.addEventListener("input", referencefiltersepiarangeupdate);
            referencefiltersepia.append(input);

            referencefiltersepiarangeset();
        }
        addEventListener("load", referencefiltersepiarangeload);

        function referencefiltersepiarangeset()
        {
            const v = referencefiltersepiarange.value;

            referencefiltersepianumber.value = v;
            text.referencebackdropfiltersepia = v;
        }

        function referencefiltersepiarangeupdate()
        {
            referencefiltersepiarangeset();
            svgupdate();
        }

        function referencefiltersepiaexactload()
        {
            const br = document.createElement("br");
            referencefiltersepia.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltersepiaexactupdate);
                referencefiltersepia.append(button);
            }
        }
        addEventListener("load", referencefiltersepiaexactload);

        function referencefiltersepiaexactupdate(e)
        {
            referencefiltersepianumber.value = Number(e.target.value);

            referencefiltersepianumberupdate();
        }

        function referencefiltersepiaincrementload()
        {
            const br = document.createElement("br");
            referencefiltersepia.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltersepiaincrementupdate);
                referencefiltersepia.append(button);
            }
        }
        addEventListener("load", referencefiltersepiaincrementload);

        function referencefiltersepiaincrementupdate(e)
        {
            const v = Number(referencefiltersepianumber.value) + Number(e.target.value);

            if((referencefiltersepianumber.min <= v) && (v <= referencefiltersepianumber.max))
            {
                referencefiltersepianumber.value = v;

                referencefiltersepianumberupdate();
            }
        }
//*/



/*
        function referencemargintopload()
        {
            const div = document.createElement("div");
            div.id = "referencemargintop";
            div.innerHTML = "margin-top";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencemargintopload);

        function referencemargintopnumberload()
        {
            const br = document.createElement("br");
            referencemargintop.append(br);

            const input = document.createElement("input");
            input.id = "referencemargintopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencemargintopnumberupdate);
            referencemargintop.append(input);

            //referencemargintopnumberset();
        }
        addEventListener("load", referencemargintopnumberload);

        function referencemargintopnumberset()
        {
            const v = Number(referencemargintopnumber.value);

            referencemargintoprange.value = v;
            text.referencemargintop = v;
        }

        function referencemargintopnumberupdate()
        {
            referencemargintopnumberset();

            svgupdate();
        }

        function referencemargintoprangeload()
        {
            const input = document.createElement("input");
            input.id = "referencemargintoprange";
            input.max = referencemargintopnumber.max;
            input.min = referencemargintopnumber.min;
            input.type = "range";
            input.value = referencemargintopnumber.value;
            input.addEventListener("input", referencemargintoprangeupdate);
            referencemargintop.append(input);

            referencemargintoprangeset();
        }
        addEventListener("load", referencemargintoprangeload);

        function referencemargintoprangeset()
        {
            const v = Number(referencemargintoprange.value);

            referencemargintopnumber.value = v;
            text.referencemargintop = v;
        }

        function referencemargintoprangeupdate()
        {
            referencemargintoprangeset();

            svgupdate();
        }



        function referencemarginbottomload()
        {
            const div = document.createElement("div");
            div.id = "referencemarginbottom";
            div.innerHTML = "margin-bottom";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencemarginbottomload);

        function referencemarginbottomnumberload()
        {
            const br = document.createElement("br");
            referencemarginbottom.append(br);

            const input = document.createElement("input");
            input.id = "referencemarginbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencemarginbottomnumberupdate);
            referencemarginbottom.append(input);

            //referencemarginbottomnumberset();
        }
        addEventListener("load", referencemarginbottomnumberload);

        function referencemarginbottomnumberset()
        {
            const v = Number(referencemarginbottomnumber.value);

            referencemarginbottomrange.value = v;
            text.referencemarginbottom = v;
        }

        function referencemarginbottomnumberupdate()
        {
            referencemarginbottomnumberset();

            svgupdate();
        }

        function referencemarginbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencemarginbottomrange";
            input.max = referencemarginbottomnumber.max;
            input.min = referencemarginbottomnumber.min;
            input.type = "range";
            input.value = referencemarginbottomnumber.value;
            input.addEventListener("input", referencemarginbottomrangeupdate);
            referencemarginbottom.append(input);

            referencemarginbottomrangeset();
        }
        addEventListener("load", referencemarginbottomrangeload);

        function referencemarginbottomrangeset()
        {
            const v = Number(referencemarginbottomrange.value);

            referencemarginbottomnumber.value = v;
            text.referencemarginbottom = v;
        }

        function referencemarginbottomrangeupdate()
        {
            referencemarginbottomrangeset();

            svgupdate();
        }



        function referencemarginleftload()
        {
            const div = document.createElement("div");
            div.id = "referencemarginleft";
            div.innerHTML = "margin-left";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencemarginleftload);

        function referencemarginleftnumberload()
        {
            const br = document.createElement("br");
            referencemarginleft.append(br);

            const input = document.createElement("input");
            input.id = "referencemarginleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencemarginleftnumberupdate);
            referencemarginleft.append(input);

            //referencemarginleftnumberset();
        }
        addEventListener("load", referencemarginleftnumberload);

        function referencemarginleftnumberset()
        {
            const v = Number(referencemarginleftnumber.value);

            referencemarginleftrange.value = v;
            text.referencemarginleft = v;
        }

        function referencemarginleftnumberupdate()
        {
            referencemarginleftnumberset();

            svgupdate();
        }

        function referencemarginleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencemarginleftrange";
            input.max = referencemarginleftnumber.max;
            input.min = referencemarginleftnumber.min;
            input.type = "range";
            input.value = referencemarginleftnumber.value;
            input.addEventListener("input", referencemarginleftrangeupdate);
            referencemarginleft.append(input);

            referencemarginleftrangeset();
        }
        addEventListener("load", referencemarginleftrangeload);

        function referencemarginleftrangeset()
        {
            const v = Number(referencemarginleftrange.value);

            referencemarginleftnumber.value = v;
            text.referencemarginleft = v;
        }

        function referencemarginleftrangeupdate()
        {
            referencemarginleftrangeset();

            svgupdate();
        }



        function referencemarginrightload()
        {
            const div = document.createElement("div");
            div.id = "referencemarginright";
            div.innerHTML = "margin-right";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencemarginrightload);

        function referencemarginrightnumberload()
        {
            const br = document.createElement("br");
            referencemarginright.append(br);

            const input = document.createElement("input");
            input.id = "referencemarginrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencemarginrightnumberupdate);
            referencemarginright.append(input);

            //referencemarginrightnumberset();
        }
        addEventListener("load", referencemarginrightnumberload);

        function referencemarginrightnumberset()
        {
            const v = Number(referencemarginrightnumber.value);

            referencemarginrightrange.value = v;
            text.referencemarginright = v;
        }

        function referencemarginrightnumberupdate()
        {
            referencemarginrightnumberset();

            svgupdate();
        }

        function referencemarginrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencemarginrightrange";
            input.max = referencemarginrightnumber.max;
            input.min = referencemarginrightnumber.min;
            input.type = "range";
            input.value = referencemarginrightnumber.value;
            input.addEventListener("input", referencemarginrightrangeupdate);
            referencemarginright.append(input);

            referencemarginrightrangeset();
        }
        addEventListener("load", referencemarginrightrangeload);

        function referencemarginrightrangeset()
        {
            const v = Number(referencemarginrightrange.value);

            referencemarginrightnumber.value = v;
            text.referencemarginright = v;
        }

        function referencemarginrightrangeupdate()
        {
            referencemarginrightrangeset();

            svgupdate();
        }



        function referencepaddingtopload()
        {
            const div = document.createElement("div");
            div.id = "referencepaddingtop";
            div.innerHTML = "padding-top";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencepaddingtopload);

        function referencepaddingtopnumberload()
        {
            const br = document.createElement("br");
            referencepaddingtop.append(br);

            const input = document.createElement("input");
            input.id = "referencepaddingtopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencepaddingtopnumberupdate);
            referencepaddingtop.append(input);

            //referencepaddingtopnumberset();
        }
        addEventListener("load", referencepaddingtopnumberload);

        function referencepaddingtopnumberset()
        {
            const v = Number(referencepaddingtopnumber.value);

            referencepaddingtoprange.value = v;
            text.referencepaddingtop = v;
        }

        function referencepaddingtopnumberupdate()
        {
            referencepaddingtopnumberset();

            svgupdate();
        }

        function referencepaddingtoprangeload()
        {
            const input = document.createElement("input");
            input.id = "referencepaddingtoprange";
            input.max = referencepaddingtopnumber.max;
            input.min = referencepaddingtopnumber.min;
            input.type = "range";
            input.value = referencepaddingtopnumber.value;
            input.addEventListener("input", referencepaddingtoprangeupdate);
            referencepaddingtop.append(input);

            referencepaddingtoprangeset();
        }
        addEventListener("load", referencepaddingtoprangeload);

        function referencepaddingtoprangeset()
        {
            const v = Number(referencepaddingtoprange.value);

            referencepaddingtopnumber.value = v;
            text.referencepaddingtop = v;
        }

        function referencepaddingtoprangeupdate()
        {
            referencepaddingtoprangeset();

            svgupdate();
        }



        function referencepaddingbottomload()
        {
            const div = document.createElement("div");
            div.id = "referencepaddingbottom";
            div.innerHTML = "padding-bottom";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencepaddingbottomload);

        function referencepaddingbottomnumberload()
        {
            const br = document.createElement("br");
            referencepaddingbottom.append(br);

            const input = document.createElement("input");
            input.id = "referencepaddingbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencepaddingbottomnumberupdate);
            referencepaddingbottom.append(input);

            //referencepaddingbottomnumberset();
        }
        addEventListener("load", referencepaddingbottomnumberload);

        function referencepaddingbottomnumberset()
        {
            const v = Number(referencepaddingbottomnumber.value);

            referencepaddingbottomrange.value = v;
            text.referencepaddingbottom = v;
        }

        function referencepaddingbottomnumberupdate()
        {
            referencepaddingbottomnumberset();

            svgupdate();
        }

        function referencepaddingbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencepaddingbottomrange";
            input.max = referencepaddingbottomnumber.max;
            input.min = referencepaddingbottomnumber.min;
            input.type = "range";
            input.value = referencepaddingbottomnumber.value;
            input.addEventListener("input", referencepaddingbottomrangeupdate);
            referencepaddingbottom.append(input);

            referencepaddingbottomrangeset();
        }
        addEventListener("load", referencepaddingbottomrangeload);

        function referencepaddingbottomrangeset()
        {
            const v = Number(referencepaddingbottomrange.value);

            referencepaddingbottomnumber.value = v;
            text.referencepaddingbottom = v;
        }

        function referencepaddingbottomrangeupdate()
        {
            referencepaddingbottomrangeset();

            svgupdate();
        }



        function referencepaddingleftload()
        {
            const div = document.createElement("div");
            div.id = "referencepaddingleft";
            div.innerHTML = "padding-left";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencepaddingleftload);

        function referencepaddingleftnumberload()
        {
            const br = document.createElement("br");
            referencepaddingleft.append(br);

            const input = document.createElement("input");
            input.id = "referencepaddingleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencepaddingleftnumberupdate);
            referencepaddingleft.append(input);

            //referencepaddingleftnumberset();
        }
        addEventListener("load", referencepaddingleftnumberload);

        function referencepaddingleftnumberset()
        {
            const v = Number(referencepaddingleftnumber.value);

            referencepaddingleftrange.value = v;
            text.referencepaddingleft = v;
        }

        function referencepaddingleftnumberupdate()
        {
            referencepaddingleftnumberset();

            svgupdate();
        }

        function referencepaddingleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencepaddingleftrange";
            input.max = referencepaddingleftnumber.max;
            input.min = referencepaddingleftnumber.min;
            input.type = "range";
            input.value = referencepaddingleftnumber.value;
            input.addEventListener("input", referencepaddingleftrangeupdate);
            referencepaddingleft.append(input);

            referencepaddingleftrangeset();
        }
        addEventListener("load", referencepaddingleftrangeload);


        function referencepaddingleftrangeset()
        {
            const v = Number(referencepaddingleftrange.value);

            referencepaddingleftnumber.value = v;
            text.referencepaddingleft = v;
        }

        function referencepaddingleftrangeupdate()
        {
            referencepaddingleftrangeset();

            svgupdate();
        }



        function referencepaddingrightload()
        {
            const div = document.createElement("div");
            div.id = "referencepaddingright";
            div.innerHTML = "padding-right";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencepaddingrightload);

        function referencepaddingrightnumberload()
        {
            const br = document.createElement("br");
            referencepaddingright.append(br);

            const input = document.createElement("input");
            input.id = "referencepaddingrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencepaddingrightnumberupdate);
            referencepaddingright.append(input);

            //referencepaddingrightnumberset();
        }
        addEventListener("load", referencepaddingrightnumberload);

        function referencepaddingrightnumberset()
        {
            const v = Number(referencepaddingrightnumber.value);

            referencepaddingrightrange.value = v;
            text.referencepaddingright = v;
        }

        function referencepaddingrightnumberupdate()
        {
            referencepaddingrightnumberset();

            svgupdate();
        }

        function referencepaddingrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencepaddingrightrange";
            input.max = referencepaddingrightnumber.max;
            input.min = referencepaddingrightnumber.min;
            input.type = "range";
            input.value = referencepaddingrightnumber.value;
            input.addEventListener("input", referencepaddingrightrangeupdate);
            referencepaddingright.append(input);

            referencepaddingrightrangeset();
        }
        addEventListener("load", referencepaddingrightrangeload);

        function referencepaddingrightrangeset()
        {
            const v = Number(referencepaddingrightrange.value);

            referencepaddingrightnumber.value = v;
            text.referencepaddingright = v;
        }

        function referencepaddingrightrangeupdate()
        {
            referencepaddingrightrangeset();

            svgupdate();
        }
//*/






        function passagewidthload()
        {
            const div = document.createElement("div");
            div.id = "passagewidth";
            div.innerHTML = "width";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagewidthload);

        function passagewidthnumberload()
        {
            const br = document.createElement("br");
            passagewidth.append(br);

            const input = document.createElement("input");
            input.id = "passagewidthnumber";
            input.max = maxwidth;
            input.min = 0;
            input.type = "number";
            input.value = canvas.width - 100;
            input.addEventListener("input", passagewidthnumberupdate);
            passagewidth.append(input);

            //passagewidthnumberset();
        }
        addEventListener("load", passagewidthnumberload);

        function passagewidthnumberset()
        {
            const v = Number(passagewidthnumber.value);

            passagewidthrange.value = v;
            text.passagewidth = v;
        }

        function passagewidthnumberupdate()
        {
            passagewidthnumberset();
            svgupdate();
        }

        function passagewidthrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagewidthrange";
            input.max = passagewidthnumber.max;
            input.min = passagewidthnumber.min;
            input.type = "range";
            input.value = passagewidthnumber.value;
            input.addEventListener("input", passagewidthrangeupdate);
            passagewidth.append(input);

            passagewidthrangeset();
        }
        addEventListener("load", passagewidthrangeload);

        function passagewidthrangeset()
        {
            const v = Number(passagewidthrange.value);

            passagewidthnumber.value = v;
            text.passagewidth = v;
        }

        function passagewidthrangeupdate()
        {
            passagewidthrangeset();
            svgupdate();
        }

        function passagewidthexactload()
        {
            const br = document.createElement("br");
            passagewidth.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagewidthexactupdate);
                passagewidth.append(button);
            }
        }
        addEventListener("load", passagewidthexactload);

        function passagewidthexactupdate(e)
        {
            passagewidthnumber.value = canvas.width * Number(e.target.value);

            passagewidthnumberupdate();
        }

        function passagewidthincrementload()
        {
            const br = document.createElement("br");
            passagewidth.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagewidthincrementupdate);
                passagewidth.append(button);
            }
        }
        addEventListener("load", passagewidthincrementload);

        function passagewidthincrementupdate(e)
        {
            const v = Number(passagewidthnumber.value) + Number(e.target.value);

            if((passagewidthnumber.min <= v) && (v <= passagewidthnumber.max))
            {
                passagewidthnumber.value = v;

                passagewidthnumberupdate();
            }
        }



        function passageheightload()
        {
            const div = document.createElement("div");
            div.id = "passageheight";
            div.innerHTML = "height";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passageheightload);

        function passageheightnumberload()
        {
            const br = document.createElement("br");
            passageheight.append(br);

            const input = document.createElement("input");
            input.id = "passageheightnumber";
            input.max = maxheight;
            input.min = 0;
            input.type = "number";
            input.value = 300;
            input.addEventListener("input", passageheightnumberupdate);
            passageheight.append(input);

            //passageheightnumberset();
        }
        addEventListener("load", passageheightnumberload);

        function passageheightnumberset()
        {
            const v = Number(passageheightnumber.value);

            passageheightrange.value = v;
            text.passageheight = v;
        }

        function passageheightnumberupdate()
        {
            passageheightnumberset();
            svgupdate();
        }

        function passageheightrangeload()
        {
            const input = document.createElement("input");
            input.id = "passageheightrange";
            input.max = passageheightnumber.max;
            input.min = passageheightnumber.min;
            input.type = "range";
            input.value = passageheightnumber.value;
            input.addEventListener("input", passageheightrangeupdate);
            passageheight.append(input);

            passageheightrangeset();
        }
        addEventListener("load", passageheightrangeload);

        function passageheightrangeset()
        {
            const v = Number(passageheightrange.value);

            passageheightnumber.value = v;
            text.passageheight = v;
        }

        function passageheightrangeupdate()
        {
            passageheightrangeset();
            svgupdate();
        }

        function passageheightexactload()
        {
            const br = document.createElement("br");
            passageheight.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageheightexactupdate);
                passageheight.append(button);
            }
        }
        addEventListener("load", passageheightexactload);

        function passageheightexactupdate(e)
        {
            passageheightnumber.value = canvas.height * Number(e.target.value);

            passageheightnumberupdate();
        }

        function passageheightincrementload()
        {
            const br = document.createElement("br");
            passageheight.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageheightincrementupdate);
                passageheight.append(button);
            }
        }
        addEventListener("load", passageheightincrementload);

        function passageheightincrementupdate(e)
        {
            const v = Number(passageheightnumber.value) + Number(e.target.value);

            if((passageheightnumber.min <= v) && (v <= passageheightnumber.max))
            {
                passageheightnumber.value = v;

                passageheightnumberupdate();
            }
        }



        function passagexload()
        {
            const div = document.createElement("div");
            div.id = "passagex";
            div.innerHTML = "x";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagexload);

        function passagexnumberload()
        {
            const br = document.createElement("br");
            passagex.append(br);

            const input = document.createElement("input");
            input.id = "passagexnumber";
            input.max = maxwidth;
            input.min = -maxwidth;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", passagexnumberupdate);
            passagex.append(input);

            //passagexnumberset();
        }
        addEventListener("load", passagexnumberload);

        function passagexnumberset()
        {
            const v = Number(passagexnumber.value);

            passagexrange.value = v;
            text.passagex = v;
        }

        function passagexnumberupdate()
        {
            passagexnumberset();
            svgupdate();
        }

        function passagexrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagexrange";
            input.max = passagexnumber.max;
            input.min = passagexnumber.min;
            input.type = "range";
            input.value = passagexnumber.value;
            input.addEventListener("input", passagexrangeupdate);
            passagex.append(input);

            passagexrangeset();
        }
        addEventListener("load", passagexrangeload);

        function passagexrangeset()
        {
            const v = Number(passagexrange.value);

            passagexnumber.value = v;
            text.passagex = v;
        }

        function passagexrangeupdate()
        {
            passagexrangeset();
            svgupdate();
        }

        function passagexexactload()
        {
            const br = document.createElement("br");
            passagex.append(br);

            const array =
            [
                ["left",0],
                ["center",0.5],
                ["right",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagexexactupdate);
                passagex.append(button);
            }
        }
        addEventListener("load", passagexexactload);

        function passagexexactupdate(e)
        {
            //passagexnumber.value = (canvas.width - text.passagewidth - text.passagepaddingleft - text.passagepaddingright) * Number(e.target.value);
            passagexnumber.value = (canvas.width - text.passagewidth) * Number(e.target.value);

            passagexnumberupdate();
        }

        function passagexincrementload()
        {
            const br = document.createElement("br");
            passagex.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagexincrementupdate);
                passagex.append(button);
            }
        }
        addEventListener("load", passagexincrementload);

        function passagexincrementupdate(e)
        {
            const v = Number(passagexnumber.value) + Number(e.target.value);

            if((passagexnumber.min <= v) && (v <= passagexnumber.max))
            {
                passagexnumber.value = v;

                passagexnumberupdate();
            }
        }



        function passageyload()
        {
            const div = document.createElement("div");
            div.id = "passagey";
            div.innerHTML = "y";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passageyload);

        function passageynumberload()
        {
            const br = document.createElement("br");
            passagey.append(br);

            const input = document.createElement("input");
            input.id = "passageynumber";
            input.max = maxheight;
            input.min = -maxheight;
            input.type = "number";
            input.value = 730;
            input.addEventListener("input", passageynumberupdate);
            passagey.append(input);

            //passageynumberset();
        }
        addEventListener("load", passageynumberload);

        function passageynumberset()
        {
            const v = Number(passageynumber.value);

            passageyrange.value = v;
            text.passagey = v;
        }

        function passageynumberupdate()
        {
            passageynumberset();
            svgupdate();
        }

        function passageyrangeload()
        {
            const input = document.createElement("input");
            input.id = "passageyrange";
            input.max = passageynumber.max;
            input.min = passageynumber.min;
            input.type = "range";
            input.value = passageynumber.value;
            input.addEventListener("input", passageyrangeupdate);
            passagey.append(input);

            passageyrangeset();
        }
        addEventListener("load", passageyrangeload);

        function passageyrangeset()
        {
            const v = Number(passageyrange.value);

            passageynumber.value = v;
            text.passagey = v;
        }

        function passageyrangeupdate()
        {
            passageyrangeset();
            svgupdate();
        }

        function passageyexactload()
        {
            const br = document.createElement("br");
            passagey.append(br);

            const array =
            [
                ["top",0],
                ["center",0.5],
                ["bottom",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageyexactupdate);
                passagey.append(button);
            }
        }
        addEventListener("load", passageyexactload);

        function passageyexactupdate(e)
        {
            //passageynumber.value = (canvas.height - text.passageheight - text.passagepaddingtop - text.passagepaddingbottom) * Number(e.target.value);
            passageynumber.value = (canvas.height - text.passageheight) * Number(e.target.value);

            passageynumberupdate();
        }

        function passageyincrementload()
        {
            const br = document.createElement("br");
            passagey.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageyincrementupdate);
                passagey.append(button);
            }
        }
        addEventListener("load", passageyincrementload);

        function passageyincrementupdate(e)
        {
            const v = Number(passageynumber.value) + Number(e.target.value);

            if((passageynumber.min <= v) && (v <= passageynumber.max))
            {
                passageynumber.value = v;

                passageynumberupdate();
            }
        }



        function passagebackgroundcolorload()
        {
            const div = document.createElement("div");
            div.id = "passagebackgroundcolor";
            div.innerHTML = "background-color";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagebackgroundcolorload);

        function passagebackgroundcolorcolorload()
        {
            const br = document.createElement("br");
            passagebackgroundcolor.append(br);

            const input = document.createElement("input");
            input.id = "passagebackgroundcolorcolor";
            input.type = "color";
            input.value = "#ffffff";
            input.addEventListener("input", passagebackgroundcolorcolorupdate);
            passagebackgroundcolor.append(input);

            //passagebackgroundcolorcolorset();
        }
        addEventListener("load", passagebackgroundcolorcolorload);

        function passagebackgroundcolorcolorset()
        {
            const c = passagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passagebackgroundalphanumber.value;

            text.passagebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passagebackgroundcolorcolorupdate()
        {
            passagebackgroundcolorcolorset();
            svgupdate();
        }

        function passagebackgroundcolorexactload()
        {
            const br = document.createElement("br");
            passagebackgroundcolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagebackgroundcolorexactupdate);
                passagebackgroundcolor.append(button);
            }
        }
        addEventListener("load", passagebackgroundcolorexactload);

        function passagebackgroundcolorexactupdate(e)
        {
            passagebackgroundcolorcolor.value = e.target.value;

            passagebackgroundcolorcolorupdate();
        }



        function passagebackgroundalphaload()
        {
            const div = document.createElement("div");
            div.id = "passagebackgroundalpha";
            div.innerHTML = "background-alpha";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagebackgroundalphaload);

        function passagebackgroundalphanumberload()
        {
            const br = document.createElement("br");
            passagebackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "passagebackgroundalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 0.5;
            input.addEventListener("input", passagebackgroundalphanumberupdate);
            passagebackgroundalpha.append(input);

            //passagebackgroundalphanumberset();
        }
        addEventListener("load", passagebackgroundalphanumberload);

        function passagebackgroundalphanumberset()
        {
            const c = passagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passagebackgroundalphanumber.value;

            passagebackgroundalpharange.value = a;
            text.passagebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passagebackgroundalphanumberupdate()
        {
            passagebackgroundalphanumberset();
            svgupdate();
        }

        function passagebackgroundalpharangeload()
        {
            const input = document.createElement("input");
            input.id = "passagebackgroundalpharange";
            input.max = passagebackgroundalphanumber.max;
            input.min = passagebackgroundalphanumber.min;
            input.step = passagebackgroundalphanumber.step;
            input.type = "range";
            input.value = passagebackgroundalphanumber.value;
            input.addEventListener("input", passagebackgroundalpharangeupdate);
            passagebackgroundalpha.append(input);

            passagebackgroundalpharangeset();
        }
        addEventListener("load", passagebackgroundalpharangeload);

        function passagebackgroundalpharangeset()
        {
            const c = passagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passagebackgroundalpharange.value;

            passagebackgroundalphanumber.value = a;
            text.passagebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passagebackgroundalpharangeupdate()
        {
            passagebackgroundalpharangeset();
            svgupdate();
        }

        function passagebackgroundalphaexactload()
        {
            const br = document.createElement("br");
            passagebackgroundalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagebackgroundalphaexactupdate);
                passagebackgroundalpha.append(button);
            }
        }
        addEventListener("load", passagebackgroundalphaexactload);

        function passagebackgroundalphaexactupdate(e)
        {
            passagebackgroundalphanumber.value = Number(e.target.value);

            passagebackgroundalphanumberupdate();
        }

        function passagebackgroundalphaincrementload()
        {
            const br = document.createElement("br");
            passagebackgroundalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagebackgroundalphaincrementupdate);
                passagebackgroundalpha.append(button);
            }
        }
        addEventListener("load", passagebackgroundalphaincrementload);

        function passagebackgroundalphaincrementupdate(e)
        {
            let v = Number(passagebackgroundalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((passagebackgroundalphanumber.min <= v) && (v <= passagebackgroundalphanumber.max))
            {
                passagebackgroundalphanumber.value = v;

                passagebackgroundalphanumberupdate();
            }
        }



        function passagebordercolorload()
        {
            const div = document.createElement("div");
            div.id = "passagebordercolor";
            div.innerHTML = "border-color";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagebordercolorload);

        function passagebordercolorcolorload()
        {
            const br = document.createElement("br");
            passagebordercolor.append(br);

            const input = document.createElement("input");
            input.id = "passagebordercolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", passagebordercolorcolorupdate);
            passagebordercolor.append(input);

            //passagebordercolorcolorset();
        }
        addEventListener("load", passagebordercolorcolorload);

        function passagebordercolorcolorset()
        {
            const c = passagebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passageborderalphanumber.value;

            text.passagebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passagebordercolorcolorupdate()
        {
            passagebordercolorcolorset();
            svgupdate();
        }

        function passagebordercolorexactload()
        {
            const br = document.createElement("br");
            passagebordercolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagebordercolorexactupdate);
                passagebordercolor.append(button);
            }
        }
        addEventListener("load", passagebordercolorexactload);

        function passagebordercolorexactupdate(e)
        {
            passagebordercolorcolor.value = e.target.value;

            passagebordercolorcolorupdate();
        }



        function passageborderalphaload()
        {
            const div = document.createElement("div");
            div.id = "passageborderalpha";
            div.innerHTML = "border-alpha";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passageborderalphaload);

        function passageborderalphanumberload()
        {
            const br = document.createElement("br");
            passageborderalpha.append(br);

            const input = document.createElement("input");
            input.id = "passageborderalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", passageborderalphanumberupdate);
            passageborderalpha.append(input);

            //passageborderalphanumberset();
        }
        addEventListener("load", passageborderalphanumberload);

        function passageborderalphanumberset()
        {
            const c = passagebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passageborderalphanumber.value;

            passageborderalpharange.value = a;
            text.passagebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passageborderalphanumberupdate()
        {
            passageborderalphanumberset();
            svgupdate();
        }

        function passageborderalpharangeload()
        {
            const input = document.createElement("input");
            input.id = "passageborderalpharange";
            input.max = passageborderalphanumber.max;
            input.min = passageborderalphanumber.min;
            input.step = passageborderalphanumber.step;
            input.type = "range";
            input.value = passageborderalphanumber.value;
            input.addEventListener("input", passageborderalpharangeupdate);
            passageborderalpha.append(input);

            passageborderalpharangeset();
        }
        addEventListener("load", passageborderalpharangeload);

        function passageborderalpharangeset()
        {
            const c = passagebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passageborderalpharange.value;

            passageborderalphanumber.value = a;
            text.passagebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passageborderalpharangeupdate()
        {
            passageborderalpharangeset();
            svgupdate();
        }

        function passageborderalphaexactload()
        {
            const br = document.createElement("br");
            passageborderalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageborderalphaexactupdate);
                passageborderalpha.append(button);
            }
        }
        addEventListener("load", passageborderalphaexactload);

        function passageborderalphaexactupdate(e)
        {
            passageborderalphanumber.value = Number(e.target.value);

            passageborderalphanumberupdate();
        }

        function passageborderalphaincrementload()
        {
            const br = document.createElement("br");
            passageborderalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageborderalphaincrementupdate);
                passageborderalpha.append(button);
            }
        }
        addEventListener("load", passageborderalphaincrementload);

        function passageborderalphaincrementupdate(e)
        {
            let v = Number(passageborderalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((passageborderalphanumber.min <= v) && (v <= passageborderalphanumber.max))
            {
                passageborderalphanumber.value = v;

                passageborderalphanumberupdate();
            }
        }



        function passageborderradiusload()
        {
            const div = document.createElement("div");
            div.id = "passageborderradius";
            div.innerHTML = "border-radius";
            tabconten
10000
tpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passageborderradiusload);

        function passageborderradiusnumberload()
        {
            const br = document.createElement("br");
            passageborderradius.append(br);

            const input = document.createElement("input");
            input.id = "passageborderradiusnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", passageborderradiusnumberupdate);
            passageborderradius.append(input);

            //passageborderradiusnumberset();
        }
        addEventListener("load", passageborderradiusnumberload);

        function passageborderradiusnumberset()
        {
            const v = Number(passageborderradiusnumber.value);

            passageborderradiusrange.value = v;
            text.passageborderradius = v;
        }

        function passageborderradiusnumberupdate()
        {
            passageborderradiusnumberset();
            svgupdate();
        }

        function passageborderradiusrangeload()
        {
            const input = document.createElement("input");
            input.id = "passageborderradiusrange";
            input.max = passageborderradiusnumber.max;
            input.min = passageborderradiusnumber.min;
            input.type = "range";
            input.value = passageborderradiusnumber.value;
            input.addEventListener("input", passageborderradiusrangeupdate);
            passageborderradius.append(input);

            passageborderradiusrangeset();
        }
        addEventListener("load", passageborderradiusrangeload);

        function passageborderradiusrangeset()
        {
            const v = Number(passageborderradiusrange.value);

            passageborderradiusnumber.value = v;
            text.passageborderradius = v;
        }

        function passageborderradiusrangeupdate()
        {
            passageborderradiusrangeset();
            svgupdate();
        }

        function passageborderradiusexactload()
        {
            const br = document.createElement("br");
            passageborderradius.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageborderradiusexactupdate);
                passageborderradius.append(button);
            }
        }
        addEventListener("load", passageborderradiusexactload);

        function passageborderradiusexactupdate(e)
        {
            passageborderradiusnumber.value = Number(e.target.value);

            passageborderradiusnumberupdate();
        }

        function passageborderradiusincrementload()
        {
            const br = document.createElement("br");
            passageborderradius.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageborderradiusincrementupdate);
                passageborderradius.append(button);
            }
        }
        addEventListener("load", passageborderradiusincrementload);

        function passageborderradiusincrementupdate(e)
        {
            const v = Number(passageborderradiusnumber.value) + Number(e.target.value);

            if((passageborderradiusnumber.min <= v) && (v <= passageborderradiusnumber.max))
            {
                passageborderradiusnumber.value = v;

                passageborderradiusnumberupdate();
            }
        }



        function passageborderstyleload()
        {
            const div = document.createElement("div");
            div.id = "passageborderstyle";
            div.innerHTML = "border-style";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passageborderstyleload);

        function passageborderstyleselectload()
        {
            const br = document.createElement("br");
            passageborderstyle.append(br);

            const select = document.createElement("select");
            select.id = "passageborderstyleselect";
            select.addEventListener("input", passageborderstyleselectupdate);
            passageborderstyle.append(select);

            for(const value of borderstylearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            //select.value = borderstylearray[8];

            passageborderstyleselectset();
        }
        addEventListener("load", passageborderstyleselectload);

        function passageborderstyleselectset()
        {
            text.passageborderstyle = passageborderstyleselect.value;
        }

        function passageborderstyleselectupdate()
        {
            passageborderstyleselectset();
            svgupdate();
        }



        function passageborderwidthload()
        {
            const div = document.createElement("div");
            div.id = "passageborderwidth";
            div.innerHTML = "border-width";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passageborderwidthload);

        function passageborderwidthnumberload()
        {
            const br = document.createElement("br");
            passageborderwidth.append(br);

            const input = document.createElement("input");
            input.id = "passageborderwidthnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 25;
            input.addEventListener("input", passageborderwidthnumberupdate);
            passageborderwidth.append(input);

            //passageborderwidthnumberset();
        }
        addEventListener("load", passageborderwidthnumberload);

        function passageborderwidthnumberset()
        {
            const v = Number(passageborderwidthnumber.value);

            passageborderwidthrange.value = v;
            text.passageborderwidth = v;
        }

        function passageborderwidthnumberupdate()
        {
            passageborderwidthnumberset();
            svgupdate();
        }

        function passageborderwidthrangeload()
        {
            const input = document.createElement("input");
            input.id = "passageborderwidthrange";
            input.max = passageborderwidthnumber.max;
            input.min = passageborderwidthnumber.min;
            input.type = "range";
            input.value = passageborderwidthnumber.value;
            input.addEventListener("input", passageborderwidthrangeupdate);
            passageborderwidth.append(input);

            passageborderwidthrangeset();
        }
        addEventListener("load", passageborderwidthrangeload);

        function passageborderwidthrangeset()
        {
            const v = Number(passageborderwidthrange.value);

            passageborderwidthnumber.value = v;
            text.passageborderwidth = v;
        }

        function passageborderwidthrangeupdate()
        {
            passageborderwidthrangeset();
            svgupdate();
        }

        function passageborderwidthexactload()
        {
            const br = document.createElement("br");
            passageborderwidth.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageborderwidthexactupdate);
                passageborderwidth.append(button);
            }
        }
        addEventListener("load", passageborderwidthexactload);

        function passageborderwidthexactupdate(e)
        {
            passageborderwidthnumber.value = Number(e.target.value);

            passageborderwidthnumberupdate();
        }

        function passageborderwidthincrementload()
        {
            const br = document.createElement("br");
            passageborderwidth.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageborderwidthincrementupdate);
                passageborderwidth.append(button);
            }
        }
        addEventListener("load", passageborderwidthincrementload);

        function passageborderwidthincrementupdate(e)
        {
            const v = Number(passageborderwidthnumber.value) + Number(e.target.value);

            if((passageborderwidthnumber.min <= v) && (v <= passageborderwidthnumber.max))
            {
                passageborderwidthnumber.value = v;

                passageborderwidthnumberupdate();
            }
        }



        function passagehorizontalload()
        {
            const div = document.createElement("div");
            div.id = "passagehorizontal";
            div.innerHTML = "horizontal";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagehorizontalload);

        function passagehorizontalselectload()
        {
            const br = document.createElement("br");
            passagehorizontal.append(br);

            const select = document.createElement("select");
            select.id = "passagehorizontalselect";
            select.addEventListener("input", passagehorizontalselectupdate);
            passagehorizontal.append(select);

            for(const value of horizontalarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            select.value = horizontalarray[1];

            passagehorizontalselectset();
        }
        addEventListener("load", passagehorizontalselectload);

        function passagehorizontalselectset()
        {
            text.passagehorizontal = passagehorizontalselect.value;
        }

        function passagehorizontalselectupdate()
        {
            passagehorizontalselectset();
            svgupdate();
        }



        function passageverticalload()
        {
            const div = document.createElement("div");
            div.id = "passagevertical";
            div.innerHTML = "vertical";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passageverticalload);

        function passageverticalselectload()
        {
            const br = document.createElement("br");
            passagevertical.append(br);

            const select = document.createElement("select");
            select.id = "passageverticalselect";
            select.addEventListener("input", passageverticalselectupdate);
            passagevertical.append(select);

            for(const value of verticalarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            select.value = verticalarray[1];

            passageverticalselectset();
        }
        addEventListener("load", passageverticalselectload);

        function passageverticalselectset()
        {
            text.passagevertical = passageverticalselect.value;
        }

        function passageverticalselectupdate()
        {
            passageverticalselectset();
            svgupdate();
        }



        function passagewritingmodeload()
        {
            const div = document.createElement("div");
            div.id = "passagewritingmode";
            div.innerHTML = "writing-mode";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagewritingmodeload);

        function passagewritingmodeselectload()
        {
            const br = document.createElement("br");
            passagewritingmode.append(br);

            const select = document.createElement("select");
            select.id = "passagewritingmodeselect";
            select.addEventListener("input", passagewritingmodeselectupdate);
            passagewritingmode.append(select);

            for(const value of writingmodearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            passagewritingmodeselectset();
        }
        addEventListener("load", passagewritingmodeselectload);

        function passagewritingmodeselectset()
        {
            text.passagewritingmode = passagewritingmodeselect.value;
        }

        function passagewritingmodeselectupdate()
        {
            passagewritingmodeselectset();
            svgupdate();
        }



        function passagefontfamilyload()
        {
            const div = document.createElement("div");
            div.id = "passagefontfamily";
            div.innerHTML = "font-family";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagefontfamilyload);

        function passagefontfamilyselectload()
        {
            const br = document.createElement("br");
            passagefontfamily.append(br);

            const select = document.createElement("select");
            select.id = "passagefontfamilyselect";
            select.addEventListener("input", passagefontfamilyselectupdate);
            passagefontfamily.append(select);

            for(const value of fontfamilyarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            passagefontfamilyselectset();
        }
        addEventListener("load", passagefontfamilyselectload);

        function passagefontfamilyselectset()
        {
            text.passagefontfamily = passagefontfamilyselect.value;
        }

        function passagefontfamilyselectupdate()
        {
            passagefontfamilyselectset();
            svgupdate();
        }



        function passagefontsizeload()
        {
            const div = document.createElement("div");
            div.id = "passagefontsize";
            div.innerHTML = "font-size";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagefontsizeload);

        function passagefontsizenumberload()
        {
            const br = document.createElement("br");
            passagefontsize.append(br);

            const input = document.createElement("input");
            input.id = "passagefontsizenumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 60;
            input.addEventListener("input", passagefontsizenumberupdate);
            passagefontsize.append(input);

            //passagefontsizenumberset();
        }
        addEventListener("load", passagefontsizenumberload);

        function passagefontsizenumberset()
        {
            const v = Number(passagefontsizenumber.value);

            passagefontsizerange.value = v;
            text.passagefontsize = v;
        }

        function passagefontsizenumberupdate()
        {
            passagefontsizenumberset();
            svgupdate();
        }

        function passagefontsizerangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefontsizerange";
            input.max = passagefontsizenumber.max;
            input.min = passagefontsizenumber.min;
            input.type = "range";
            input.value = passagefontsizenumber.value;
            input.addEventListener("input", passagefontsizerangeupdate);
            passagefontsize.append(input);

            passagefontsizerangeset();
        }
        addEventListener("load", passagefontsizerangeload);

        function passagefontsizerangeset()
        {
            const v = Number(passagefontsizerange.value);

            passagefontsizenumber.value = v;
            text.passagefontsize = v;
        }

        function passagefontsizerangeupdate()
        {
            passagefontsizerangeset();
            svgupdate();
        }

        function passagefontsizeexactload()
        {
            const br = document.createElement("br");
            passagefontsize.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefontsizeexactupdate);
                passagefontsize.append(button);
            }
        }
        addEventListener("load", passagefontsizeexactload);

        function passagefontsizeexactupdate(e)
        {
            passagefontsizenumber.value = Number(e.target.value);

            passagefontsizenumberupdate();
        }

        function passagefontsizeincrementload()
        {
            const br = document.createElement("br");
            passagefontsize.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefontsizeincrementupdate);
                passagefontsize.append(button);
            }
        }
        addEventListener("load", passagefontsizeincrementload);

        function passagefontsizeincrementupdate(e)
        {
            const v = Number(passagefontsizenumber.value) + Number(e.target.value);

            if((passagefontsizenumber.min <= v) && (v <= passagefontsizenumber.max))
            {
                passagefontsizenumber.value = v;

                passagefontsizenumberupdate();
            }
        }

/*
        function passagefontsizefitload()
        {
            const button = document.createElement("button");
            button.innerHTML = "fit";
            button.addEventListener("click", passagefontsizefitupdate);
            passagefontsize.append(button);
        }
        addEventListener("load", passagefontsizefitload);

        function passagefontsizefitupdate()
        {
            const t = document.createElement("div");
            passagefontsize.append(t);
            t.innerHTML = text.bookname;
            t.style.fontSize = `${passagefontsizenumber.value}px`;

            const h1 = text.passagewidth;
            const h2 = text.passageheight;
            const h3 = t.offsetWidth;
            const h4 = t.offsetHeight;
            const h5 = passagefontsizenumber.value;

            //const h4 = t.offsetParent;//t.style.fontSize;
            //const h5 = t.clientHeight;//text.style.height;
            //const h6 = text.height;
            //const h7 = text.getBoundingClientRect().height;
            //const h8 = text.style.lineHeight;
            //const h9 = canvas.getBoundingClientRect().height;
            console.log(h1, h2, h3, h4, h5);
            //t.hidden = true;

            if(h2 < h4)
            {
                passagefontsizenumber.value -= 1;
                passagefit();
            }

            passagefontsizenumberupdate();
        }
//*/



        function passagefontstyleload()
        {
            const div = document.createElement("div");
            div.id = "passagefontstyle";
            div.innerHTML = "font-style";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagefontstyleload);

        function passagefontstyleselectload()
        {
            const br = document.createElement("br");
            passagefontstyle.append(br);

            const select = document.createElement("select");
            select.id = "passagefontstyleselect";
            select.addEventListener("input", passagefontstyleselectupdate);
            passagefontstyle.append(select);

            for(const value of fontstylearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            passagefontstyleselectset();
        }
        addEventListener("load", passagefontstyleselectload);

        function passagefontstyleselectset()
        {
            text.passagefontstyle = passagefontstyleselect.value;
        }

        function passagefontstyleselectupdate()
        {
            passagefontstyleselectset();
            svgupdate();
        }



        function passagefontvariantload()
        {
            const div = document.createElement("div");
            div.id = "passagefontvariant";
            div.innerHTML = "font-variant";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagefontvariantload);

        function passagefontvariantselectload()
        {
            const br = document.createElement("br");
            passagefontvariant.append(br);

            const select = document.createElement("select");
            select.id = "passagefontvariantselect";
            select.addEventListener("input", passagefontvariantselectupdate);
            passagefontvariant.append(select);

            for(const value of fontvariantarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            passagefontvariantselectset();
        }
        addEventListener("load", passagefontvariantselectload);

        function passagefontvariantselectset()
        {
            text.passagefontvariant = passagefontvariantselect.value;
        }

        function passagefontvariantselectupdate()
        {
            passagefontvariantselectset();
            svgupdate();
        }



        function passagefontweightload()
        {
            const div = document.createElement("div");
            div.id = "passagefontweight";
            div.innerHTML = "font-weight";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagefontweightload);

        function passagefontweightselectload()
        {
            const br = document.createElement("br");
            passagefontweight.append(br);

            const select = document.createElement("select");
            select.id = "passagefontweightselect";
            select.addEventListener("input", passagefontweightselectupdate);
            passagefontweight.append(select);

            for(const value of fontweightarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            passagefontweightselectset();
        }
        addEventListener("load", passagefontweightselectload);

        function passagefontweightselectset()
        {
            text.passagefontweight = passagefontweightselect.value;
        }

        function passagefontweightselectupdate()
        {
            passagefontweightselectset();
            svgupdate();
        }



        function passagecolorload()
        {
            const div = document.createElement("div");
            div.id = "passagecolor";
            div.innerHTML = "color";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagecolorload);

        function passagecolorcolorload()
        {
            const br = document.createElement("br");
            passagecolor.append(br);

            const input = document.createElement("input");
            input.id = "passagecolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", passagecolorcolorupdate);
            passagecolor.append(input);

            //passagecolorcolorset();
        }
        addEventListener("load", passagecolorcolorload);

        function passagecolorcolorset()
        {
            const c = passagecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passagealphanumber.value;

            text.passagecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passagecolorcolorupdate()
        {
            passagecolorcolorset();
            svgupdate();
        }

        function passagecolorexactload()
        {
            const br = document.createElement("br");
            passagecolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagecolorexactupdate);
                passagecolor.append(button);
            }
        }
        addEventListener("load", passagecolorexactload);

        function passagecolorexactupdate(e)
        {
            passagecolorcolor.value = e.target.value;

            passagecolorcolorupdate();
        }



        function passagealphaload()
        {
            const div = document.createElement("div");
            div.id = "passagealpha";
            div.innerHTML = "alpha";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagealphaload);

        function passagealphanumberload()
        {
            const br = document.createElement("br");
            passagealpha.append(br);

            const input = document.createElement("input");
            input.id = "passagealphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", passagealphanumberupdate);
            passagealpha.append(input);

            //passagealphanumberset();
        }
        addEventListener("load", passagealphanumberload);

        function passagealphanumberset()
        {
            const c = passagecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passagealphanumber.value;

            passagealpharange.value = a;
            text.passagecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passagealphanumberupdate()
        {
            passagealphanumberset();
            svgupdate();
        }

        function passagealpharangeload()
        {
            const input = document.createElement("input");
            input.id = "passagealpharange";
            input.max = passagealphanumber.max;
            input.min = passagealphanumber.min;
            input.step = passagealphanumber.step;
            input.type = "range";
            input.value = passagealphanumber.value;
            input.addEventListener("input", passagealpharangeupdate);
            passagealpha.append(input);

            passagealpharangeset();
        }
        addEventListener("load", passagealpharangeload);

        function passagealpharangeset()
        {
            const c = passagecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passagealpharange.value;

            passagealphanumber.value = a;
            text.passagecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passagealpharangeupdate()
        {
            passagealpharangeset();
            svgupdate();
        }

        function passagealphaexactload()
        {
            const br = document.createElement("br");
            passagealpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagealphaexactupdate);
                passagealpha.append(button);
            }
        }
        addEventListener("load", passagealphaexactload);

        function passagealphaexactupdate(e)
        {
            passagealphanumber.value = Number(e.target.value);

            passagealphanumberupdate();
        }

        function passagealphaincrementload()
        {
            const br = document.createElement("br");
            passagealpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagealphaincrementupdate);
                passagealpha.append(button);
            }
        }
        addEventListener("load", passagealphaincrementload);

        function passagealphaincrementupdate(e)
        {
            let v = Number(passagealphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((passagealphanumber.min <= v) && (v <= passagealphanumber.max))
            {
                passagealphanumber.value = v;

                passagealphanumberupdate();
            }
        }



/*leftoff
        function passagefilterblurload()
        {
            const div = document.createElement("div");
            div.id = "passagefilterblur";
            div.innerHTML = "filter-blur";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefilterblurload);

        function passagefilterblurnumberload()
        {
            const br = document.createElement("br");
            passagefilterblur.append(br);

            const input = document.createElement("input");
            input.id = "passagefilterblurnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagefilterblurnumberupdate);
            passagefilterblur.append(input);

            //passagefilterblurnumberset();
        }
        addEventListener("load", passagefilterblurnumberload);

        function passagefilterblurnumberset()
        {
            const v = passagefilterblurnumber.value;

            passagefilterblurrange.value = v;
            text.passagebackdropfilterblur = v;
        }

        function passagefilterblurnumberupdate()
        {
            passagefilterblurnumberset();
            svgupdate();
        }

        function passagefilterblurrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefilterblurrange";
            input.max = passagefilterblurnumber.max;
            input.min = passagefilterblurnumber.min;
            input.step = passagefilterblurnumber.step;
            input.type = "range";
            input.value = passagefilterblurnumber.value;
            input.addEventListener("input", passagefilterblurrangeupdate);
            passagefilterblur.append(input);

            passagefilterblurrangeset();
        }
        addEventListener("load", passagefilterblurrangeload);

        function passagefilterblurrangeset()
        {
            const v = passagefilterblurrange.value;

            passagefilterblurnumber.value = v;
            text.passagebackdropfilterblur = v;
        }

        function passagefilterblurrangeupdate()
        {
            passagefilterblurrangeset();
            svgupdate();
        }

        function passagefilterblurexactload()
        {
            const br = document.createElement("br");
            passagefilterblur.append(br);

            const array =
            [
                ["0",0],
                ["2",2],
                ["4",4],
                ["8",8],
                ["16",16],
                ["32",32],
                ["64",64],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterblurexactupdate);
                passagefilterblur.append(button);
            }
        }
        addEventListener("load", passagefilterblurexactload);

        function passagefilterblurexactupdate(e)
        {
            passagefilterblurnumber.value = Number(e.target.value);

            passagefilterblurnumberupdate();
        }

        function passagefilterblurincrementload()
        {
            const br = document.createElement("br");
            passagefilterblur.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterblurincrementupdate);
                passagefilterblur.append(button);
            }
        }
        addEventListener("load", passagefilterblurincrementload);

        function passagefilterblurincrementupdate(e)
        {
            const v = Number(passagefilterblurnumber.value) + Number(e.target.value);

            if((passagefilterblurnumber.min <= v) && (v <= passagefilterblurnumber.max))
            {
                passagefilterblurnumber.value = v;

                passagefilterblurnumberupdate();
            }
        }



        function passagefilterbrightnessload()
        {
            const div = document.createElement("div");
            div.id = "passagefilterbrightness";
            div.innerHTML = "filter-brightness";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefilterbrightnessload);

        function passagefilterbrightnessnumberload()
        {
            const br = document.createElement("br");
            passagefilterbrightness.append(br);

            const input = document.createElement("input");
            input.id = "passagefilterbrightnessnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", passagefilterbrightnessnumberupdate);
            passagefilterbrightness.append(input);

            //passagefilterbrightnessnumberset();
        }
        addEventListener("load", passagefilterbrightnessnumberload);

        function passagefilterbrightnessnumberset()
        {
            const v = passagefilterbrightnessnumber.value;

            passagefilterbrightnessrange.value = v;
            text.passagebackdropfilterbrightness = v;
        }

        function passagefilterbrightnessnumberupdate()
        {
            passagefilterbrightnessnumberset();
            svgupdate();
        }

        function passagefilterbrightnessrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefilterbrightnessrange";
            input.max = passagefilterbrightnessnumber.max;
            input.min = passagefilterbrightnessnumber.min;
            input.step = passagefilterbrightnessnumber.step;
            input.type = "range";
            input.value = passagefilterbrightnessnumber.value;
            input.addEventListener("input", passagefilterbrightnessrangeupdate);
            passagefilterbrightness.append(input);

            passagefilterbrightnessrangeset();
        }
        addEventListener("load", passagefilterbrightnessrangeload);

        function passagefilterbrightnessrangeset()
        {
            const v = passagefilterbrightnessrange.value;

            passagefilterbrightnessnumber.value = v;
            text.passagebackdropfilterbrightness = v;
        }

        function passagefilterbrightnessrangeupdate()
        {
            passagefilterbrightnessrangeset();
            svgupdate();
        }

        function passagefilterbrightnessexactload()
        {
            const br = document.createElement("br");
            passagefilterbrightness.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterbrightnessexactupdate);
                passagefilterbrightness.append(button);
            }
        }
        addEventListener("load", passagefilterbrightnessexactload);

        function passagefilterbrightnessexactupdate(e)
        {
            passagefilterbrightnessnumber.value = Number(e.target.value);

            passagefilterbrightnessnumberupdate();
        }

        function passagefilterbrightnessincrementload()
        {
            const br = document.createElement("br");
            passagefilterbrightness.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterbrightnessincrementupdate);
                passagefilterbrightness.append(button);
            }
        }
        addEventListener("load", passagefilterbrightnessincrementload);

        function passagefilterbrightnessincrementupdate(e)
        {
            const v = Number(passagefilterbrightnessnumber.value) + Number(e.target.value);

            if((passagefilterbrightnessnumber.min <= v) && (v <= passagefilterbrightnessnumber.max))
            {
                passagefilterbrightnessnumber.value = v;

                passagefilterbrightnessnumberupdate();
            }
        }



        function passagefiltercontrastload()
        {
            const div = document.createElement("div");
            div.id = "passagefiltercontrast";
            div.innerHTML = "filter-contrast";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefiltercontrastload);

        function passagefiltercontrastnumberload()
        {
            const br = document.createElement("br");
            passagefiltercontrast.append(br);

            const input = document.createElement("input");
            input.id = "passagefiltercontrastnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", passagefiltercontrastnumberupdate);
            passagefiltercontrast.append(input);

            //passagefiltercontrastnumberset();
        }
        addEventListener("load", passagefiltercontrastnumberload);

        function passagefiltercontrastnumberset()
        {
            const v = passagefiltercontrastnumber.value;

            passagefiltercontrastrange.value = v;
            text.passagebackdropfiltercontrast = v;
        }

        function passagefiltercontrastnumberupdate()
        {
            passagefiltercontrastnumberset();
            svgupdate();
        }

        function passagefiltercontrastrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefiltercontrastrange";
            input.max = passagefiltercontrastnumber.max;
            input.min = passagefiltercontrastnumber.min;
            input.step = passagefiltercontrastnumber.step;
            input.type = "range";
            input.value = passagefiltercontrastnumber.value;
            input.addEventListener("input", passagefiltercontrastrangeupdate);
            passagefiltercontrast.append(input);

            passagefiltercontrastrangeset();
        }
        addEventListener("load", passagefiltercontrastrangeload);

        function passagefiltercontrastrangeset()
        {
            const v = passagefiltercontrastrange.value;

            passagefiltercontrastnumber.value = v;
            text.passagebackdropfiltercontrast = v;
        }

        function passagefiltercontrastrangeupdate()
        {
            passagefiltercontrastrangeset();
            svgupdate();
        }

        function passagefiltercontrastexactload()
        {
            const br = document.createElement("br");
            passagefiltercontrast.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltercontrastexactupdate);
                passagefiltercontrast.append(button);
            }
        }
        addEventListener("load", passagefiltercontrastexactload);

        function passagefiltercontrastexactupdate(e)
        {
            passagefiltercontrastnumber.value = Number(e.target.value);

            passagefiltercontrastnumberupdate();
        }

        function passagefiltercontrastincrementload()
        {
            const br = document.createElement("br");
            passagefiltercontrast.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltercontrastincrementupdate);
                passagefiltercontrast.append(button);
            }
        }
        addEventListener("load", passagefiltercontrastincrementload);

        function passagefiltercontrastincrementupdate(e)
        {
            const v = Number(passagefiltercontrastnumber.value) + Number(e.target.value);

            if((passagefiltercontrastnumber.min <= v) && (v <= passagefiltercontrastnumber.max))
            {
                passagefiltercontrastnumber.value = v;

                passagefiltercontrastnumberupdate();
            }
        }



        function passagefiltergrayscaleload()
        {
            const div = document.createElement("div");
            div.id = "passagefiltergrayscale";
            div.innerHTML = "filter-grayscale";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefiltergrayscaleload);

        function passagefiltergrayscalenumberload()
        {
            const br = document.createElement("br");
            passagefiltergrayscale.append(br);

            const input = document.createElement("input");
            input.id = "passagefiltergrayscalenumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagefiltergrayscalenumberupdate);
            passagefiltergrayscale.append(input);

            //passagefiltergrayscalenumberset();
        }
        addEventListener("load", passagefiltergrayscalenumberload);

        function passagefiltergrayscalenumberset()
        {
            const v = passagefiltergrayscalenumber.value;

            passagefiltergrayscalerange.value = v;
            text.passagebackdropfiltergrayscale = v;
        }

        function passagefiltergrayscalenumberupdate()
        {
            passagefiltergrayscalenumberset();
            svgupdate();
        }

        function passagefiltergrayscalerangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefiltergrayscalerange";
            input.max = passagefiltergrayscalenumber.max;
            input.min = passagefiltergrayscalenumber.min;
            input.step = passagefiltergrayscalenumber.step;
            input.type = "range";
            input.value = passagefiltergrayscalenumber.value;
            input.addEventListener("input", passagefiltergrayscalerangeupdate);
            passagefiltergrayscale.append(input);

            passagefiltergrayscalerangeset();
        }
        addEventListener("load", passagefiltergrayscalerangeload);

        function passagefiltergrayscalerangeset()
        {
            const v = passagefiltergrayscalerange.value;

            passagefiltergrayscalenumber.value = v;
            text.passagebackdropfiltergrayscale = v;
        }

        function passagefiltergrayscalerangeupdate()
        {
            passagefiltergrayscalerangeset();
            svgupdate();
        }

        function passagefiltergrayscaleexactload()
        {
            const br = document.createElement("br");
            passagefiltergrayscale.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltergrayscaleexactupdate);
                passagefiltergrayscale.append(button);
            }
        }
        addEventListener("load", passagefiltergrayscaleexactload);

        function passagefiltergrayscaleexactupdate(e)
        {
            passagefiltergrayscalenumber.value = Number(e.target.value);

            passagefiltergrayscalenumberupdate();
        }

        function passagefiltergrayscaleincrementload()
        {
            const br = document.createElement("br");
            passagefiltergrayscale.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltergrayscaleincrementupdate);
                passagefiltergrayscale.append(button);
            }
        }
        addEventListener("load", passagefiltergrayscaleincrementload);

        function passagefiltergrayscaleincrementupdate(e)
        {
            const v = Number(passagefiltergrayscalenumber.value) + Number(e.target.value);

            if((passagefiltergrayscalenumber.min <= v) && (v <= passagefiltergrayscalenumber.max))
            {
                passagefiltergrayscalenumber.value = v;

                passagefiltergrayscalenumberupdate();
            }
        }



        function passagefilterhuerotateload()
        {
            const div = document.createElement("div");
            div.id = "passagefilterhuerotate";
            div.innerHTML = "filter-hue-rotate";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefilterhuerotateload);

        function passagefilterhuerotatenumberload()
        {
            const br = document.createElement("br");
            passagefilterhuerotate.append(br);

            const input = document.createElement("input");
            input.id = "passagefilterhuerotatenumber";
            input.max = 360;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagefilterhuerotatenumberupdate);
            passagefilterhuerotate.append(input);

            //passagefilterhuerotatenumberset();
        }
        addEventListener("load", passagefilterhuerotatenumberload);

        function passagefilterhuerotatenumberset()
        {
            const v = passagefilterhuerotatenumber.value;

            passagefilterhuerotaterange.value = v;
            text.passagebackdropfilterhuerotate = v;
        }

        function passagefilterhuerotatenumberupdate()
        {
            passagefilterhuerotatenumberset();
            svgupdate();
        }

        function passagefilterhuerotaterangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefilterhuerotaterange";
            input.max = passagefilterhuerotatenumber.max;
            input.min = passagefilterhuerotatenumber.min;
            input.step = passagefilterhuerotatenumber.step;
            input.type = "range";
            input.value = passagefilterhuerotatenumber.value;
            input.addEventListener("input", passagefilterhuerotaterangeupdate);
            passagefilterhuerotate.append(input);

            passagefilterhuerotaterangeset();
        }
        addEventListener("load", passagefilterhuerotaterangeload);

        function passagefilterhuerotaterangeset()
        {
            const v = passagefilterhuerotaterange.value;

            passagefilterhuerotatenumber.value = v;
            text.passagebackdropfilterhuerotate = v;
        }

        function passagefilterhuerotaterangeupdate()
        {
            passagefilterhuerotaterangeset();
            svgupdate();
        }

        function passagefilterhuerotateexactload()
        {
            const br = document.createElement("br");
            passagefilterhuerotate.append(br);

            const array =
            [
                ["0",0],
                ["90",90],
                ["180",180],
                ["270",270],
                ["360",360],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterhuerotateexactupdate);
                passagefilterhuerotate.append(button);
            }
        }
        addEventListener("load", passagefilterhuerotateexactload);

        function passagefilterhuerotateexactupdate(e)
        {
            passagefilterhuerotatenumber.value = Number(e.target.value);

            passagefilterhuerotatenumberupdate();
        }

        function passagefilterhuerotateincrementload()
        {
            const br = document.createElement("br");
            passagefilterhuerotate.append(br);

            const array =
            [
                //["-90",-90],
                ["-45",-45],
                ["-15",-15],
                ["-1",-1],
                ["+1",1],
                ["+15",15],
                ["+45",45],
                //["+90",90],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterhuerotateincrementupdate);
                passagefilterhuerotate.append(button);
            }
        }
        addEventListener("load", passagefilterhuerotateincrementload);

        function passagefilterhuerotateincrementupdate(e)
        {
            const v = Number(passagefilterhuerotatenumber.value) + Number(e.target.value);

            if((passagefilterhuerotatenumber.min <= v) && (v <= passagefilterhuerotatenumber.max))
            {
                passagefilterhuerotatenumber.value = v;

                passagefilterhuerotatenumberupdate();
            }
        }



        function passagefilterinvertload()
        {
            const div = document.createElement("div");
            div.id = "passagefilterinvert";
            div.innerHTML = "filter-invert";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefilterinvertload);

        function passagefilterinvertnumberload()
        {
            const br = document.createElement("br");
            passagefilterinvert.append(br);

            const input = document.createElement("input");
            input.id = "passagefilterinvertnumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagefilterinvertnumberupdate);
            passagefilterinvert.append(input);

            //passagefilterinvertnumberset();
        }
        addEventListener("load", passagefilterinvertnumberload);

        function passagefilterinvertnumberset()
        {
            const v = passagefilterinvertnumber.value;

            passagefilterinvertrange.value = v;
            text.passagebackdropfilterinvert = v;
        }

        function passagefilterinvertnumberupdate()
        {
            passagefilterinvertnumberset();
            svgupdate();
        }

        function passagefilterinvertrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefilterinvertrange";
            input.max = passagefilterinvertnumber.max;
            input.min = passagefilterinvertnumber.min;
            input.step = passagefilterinvertnumber.step;
            input.type = "range";
            input.value = passagefilterinvertnumber.value;
            input.addEventListener("input", passagefilterinvertrangeupdate);
            passagefilterinvert.append(input);

            passagefilterinvertrangeset();
        }
        addEventListener("load", passagefilterinvertrangeload);

        function passagefilterinvertrangeset()
        {
            const v = passagefilterinvertrange.value;

            passagefilterinvertnumber.value = v;
            text.passagebackdropfilterinvert = v;
        }

        function passagefilterinvertrangeupdate()
        {
            passagefilterinvertrangeset();
            svgupdate();
        }

        function passagefilterinvertexactload()
        {
            const br = document.createElement("br");
            passagefilterinvert.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterinvertexactupdate);
                passagefilterinvert.append(button);
            }
        }
        addEventListener("load", passagefilterinvertexactload);

        function passagefilterinvertexactupdate(e)
        {
            passagefilterinvertnumber.value = Number(e.target.value);

            passagefilterinvertnumberupdate();
        }

        function passagefilterinvertincrementload()
        {
            const br = document.createElement("br");
            passagefilterinvert.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");

                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterinvertincrementupdate);
                passagefilterinvert.append(button);
            }
        }
        addEventListener("load", passagefilterinvertincrementload);

        function passagefilterinvertincrementupdate(e)
        {
            const v = Number(passagefilterinvertnumber.value) + Number(e.target.value);

            if((passagefilterinvertnumber.min <= v) && (v <= passagefilterinvertnumber.max))
            {
                passagefilterinvertnumber.value = v;

                passagefilterinvertnumberupdate();
            }
        }



        function passagefiltersaturateload()
        {
            const div = document.createElement("div");
            div.id = "passagefiltersaturate";
            div.innerHTML = "filter-saturate";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefiltersaturateload);

        function passagefiltersaturatenumberload()
        {
            const br = document.createElement("br");
            passagefiltersaturate.append(br);

            const input = document.createElement("input");
            input.id = "passagefiltersaturatenumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", passagefiltersaturatenumberupdate);
            passagefiltersaturate.append(input);

            //passagefiltersaturatenumberset();
        }
        addEventListener("load", passagefiltersaturatenumberload);

        function passagefiltersaturatenumberset()
        {
            const v = passagefiltersaturatenumber.value;

            passagefiltersaturaterange.value = v;
            text.passagebackdropfiltersaturate = v;
        }

        function passagefiltersaturatenumberupdate()
        {
            passagefiltersaturatenumberset();
            svgupdate();
        }

        function passagefiltersaturaterangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefiltersaturaterange";
            input.max = passagefiltersaturatenumber.max;
            input.min = passagefiltersaturatenumber.min;
            input.step = passagefiltersaturatenumber.step;
            input.type = "range";
            input.value = passagefiltersaturatenumber.value;
            input.addEventListener("input", passagefiltersaturaterangeupdate);
            passagefiltersaturate.append(input);

            passagefiltersaturaterangeset();
        }
        addEventListener("load", passagefiltersaturaterangeload);

        function passagefiltersaturaterangeset()
        {
            const v = passagefiltersaturaterange.value;

            passagefiltersaturatenumber.value = v;
            text.passagebackdropfiltersaturate = v;
        }

        function passagefiltersaturaterangeupdate()
        {
            passagefiltersaturaterangeset();
            svgupdate();
        }

        function passagefiltersaturateexactload()
        {
            const br = document.createElement("br");
            passagefiltersaturate.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltersaturateexactupdate);
                passagefiltersaturate.append(button);
            }
        }
        addEventListener("load", passagefiltersaturateexactload);

        function passagefiltersaturateexactupdate(e)
        {
            passagefiltersaturatenumber.value = Number(e.target.value);

            passagefiltersaturatenumberupdate();
        }

        function passagefiltersaturateincrementload()
        {
            const br = document.createElement("br");
            passagefiltersaturate.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltersaturateincrementupdate);
                passagefiltersaturate.append(button);
            }
        }
        addEventListener("load", passagefiltersaturateincrementload);

        function passagefiltersaturateincrementupdate(e)
        {
            const v = Number(passagefiltersaturatenumber.value) + Number(e.target.value);

            if((passagefiltersaturatenumber.min <= v) && (v <= passagefiltersaturatenumber.max))
            {
                passagefiltersaturatenumber.value = v;

                passagefiltersaturatenumberupdate();
            }
        }



        function passagefiltersepiaload()
        {
            const div = document.createElement("div");
            div.id = "passagefiltersepia";
            div.innerHTML = "filter-sepia";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefiltersepiaload);

        function passagefiltersepianumberload()
        {
            const br = document.createElement("br");
            passagefiltersepia.append(br);

            const input = document.createElement("input");
            input.id = "passagefiltersepianumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagefiltersepianumberupdate);
            passagefiltersepia.append(input);

            //passagefiltersepianumberset();
        }
        addEventListener("load", passagefiltersepianumberload);

        function passagefiltersepianumberset()
        {
            const v = passagefiltersepianumber.value;

            passagefiltersepiarange.value = v;
            text.passagebackdropfiltersepia = v;
        }

        function passagefiltersepianumberupdate()
        {
            passagefiltersepianumberset();
            svgupdate();
        }

        function passagefiltersepiarangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefiltersepiarange";
            input.max = passagefiltersepianumber.max;
            input.min = passagefiltersepianumber.min;
            input.step = passagefiltersepianumber.step;
            input.type = "range";
            input.value = passagefiltersepianumber.value;
            input.addEventListener("input", passagefiltersepiarangeupdate);
            passagefiltersepia.append(input);

            passagefiltersepiarangeset();
        }
        addEventListener("load", passagefiltersepiarangeload);

        function passagefiltersepiarangeset()
        {
            const v = passagefiltersepiarange.value;

            passagefiltersepianumber.value = v;
            text.passagebackdropfiltersepia = v;
        }

        function passagefiltersepiarangeupdate()
        {
            passagefiltersepiarangeset();
            svgupdate();
        }

        function passagefiltersepiaexactload()
        {
            const br = document.createElement("br");
            passagefiltersepia.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltersepiaexactupdate);
                passagefiltersepia.append(button);
            }
        }
        addEventListener("load", passagefiltersepiaexactload);

        function passagefiltersepiaexactupdate(e)
        {
            passagefiltersepianumber.value = Number(e.target.value);

            passagefiltersepianumberupdate();
        }

        function passagefiltersepiaincrementload()
        {
            const br = document.createElement("br");
            passagefiltersepia.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltersepiaincrementupdate);
                passagefiltersepia.append(button);
            }
        }
        addEventListener("load", passagefiltersepiaincrementload);

        function passagefiltersepiaincrementupdate(e)
        {
            const v = Number(passagefiltersepianumber.value) + Number(e.target.value);

            if((passagefiltersepianumber.min <= v) && (v <= passagefiltersepianumber.max))
            {
                passagefiltersepianumber.value = v;

                passagefiltersepianumberupdate();
            }
        }
//*/



/*
        function passagemargintopload()
        {
            const div = document.createElement("div");
            div.id = "passagemargintop";
            div.innerHTML = "margin-top";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagemargintopload);

        function passagemargintopnumberload()
        {
            const br = document.createElement("br");
            passagemargintop.append(br);

            const input = document.createElement("input");
            input.id = "passagemargintopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagemargintopnumberupdate);
            passagemargintop.append(input);

            //passagemargintopnumberset();
        }
        addEventListener("load", passagemargintopnumberload);

        function passagemargintopnumberset()
        {
            const v = Number(passagemargintopnumber.value);

            passagemargintoprange.value = v;
            text.passagemargintop = v;
        }

        function passagemargintopnumberupdate()
        {
            passagemargintopnumberset();

            svgupdate();
        }

        function passagemargintoprangeload()
        {
            const input = document.createElement("input");
            input.id = "passagemargintoprange";
            input.max = passagemargintopnumber.max;
            input.min = passagemargintopnumber.min;
            input.type = "range";
            input.value = passagemargintopnumber.value;
            input.addEventListener("input", passagemargintoprangeupdate);
            passagemargintop.append(input);

            passagemargintoprangeset();
        }
        addEventListener("load", passagemargintoprangeload);

        function passagemargintoprangeset()
        {
            const v = Number(passagemargintoprange.value);

            passagemargintopnumber.value = v;
            text.passagemargintop = v;
        }

        function passagemargintoprangeupdate()
        {
            passagemargintoprangeset();

            svgupdate();
        }



        function passagemarginbottomload()
        {
            const div = document.createElement("div");
            div.id = "passagemarginbottom";
            div.innerHTML = "margin-bottom";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagemarginbottomload);

        function passagemarginbottomnumberload()
        {
            const br = document.createElement("br");
            passagemarginbottom.append(br);

            const input = document.createElement("input");
            input.id = "passagemarginbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagemarginbottomnumberupdate);
            passagemarginbottom.append(input);

            //passagemarginbottomnumberset();
        }
        addEventListener("load", passagemarginbottomnumberload);

        function passagemarginbottomnumberset()
        {
            const v = Number(passagemarginbottomnumber.value);

            passagemarginbottomrange.value = v;
            text.passagemarginbottom = v;
        }

        function passagemarginbottomnumberupdate()
        {
            passagemarginbottomnumberset();

            svgupdate();
        }

        function passagemarginbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagemarginbottomrange";
            input.max = passagemarginbottomnumber.max;
            input.min = passagemarginbottomnumber.min;
            input.type = "range";
            input.value = passagemarginbottomnumber.value;
            input.addEventListener("input", passagemarginbottomrangeupdate);
            passagemarginbottom.append(input);

            passagemarginbottomrangeset();
        }
        addEventListener("load", passagemarginbottomrangeload);

        function passagemarginbottomrangeset()
        {
            const v = Number(passagemarginbottomrange.value);

            passagemarginbottomnumber.value = v;
            text.passagemarginbottom = v;
        }

        function passagemarginbottomrangeupdate()
        {
            passagemarginbottomrangeset();

            svgupdate();
        }



        function passagemarginleftload()
        {
            const div = document.createElement("div");
            div.id = "passagemarginleft";
            div.innerHTML = "margin-left";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagemarginleftload);

        function passagemarginleftnumberload()
        {
            const br = document.createElement("br");
            passagemarginleft.append(br);

            const input = document.createElement("input");
            input.id = "passagemarginleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagemarginleftnumberupdate);
            passagemarginleft.append(input);

            //passagemarginleftnumberset();
        }
        addEventListener("load", passagemarginleftnumberload);

        function passagemarginleftnumberset()
        {
            const v = Number(passagemarginleftnumber.value);

            passagemarginleftrange.value = v;
            text.passagemarginleft = v;
        }

        function passagemarginleftnumberupdate()
        {
            passagemarginleftnumberset();

            svgupdate();
        }

        function passagemarginleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagemarginleftrange";
            input.max = passagemarginleftnumber.max;
            input.min = passagemarginleftnumber.min;
            input.type = "range";
            input.value = passagemarginleftnumber.value;
            input.addEventListener("input", passagemarginleftrangeupdate);
            passagemarginleft.append(input);

            passagemarginleftrangeset();
        }
        addEventListener("load", passagemarginleftrangeload);

        function passagemarginleftrangeset()
        {
            const v = Number(passagemarginleftrange.value);

            passagemarginleftnumber.value = v;
            text.passagemarginleft = v;
        }

        function passagemarginleftrangeupdate()
        {
            passagemarginleftrangeset();

            svgupdate();
        }



        function passagemarginrightload()
        {
            const div = document.createElement("div");
            div.id = "passagemarginright";
            div.innerHTML = "margin-right";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagemarginrightload);

        function passagemarginrightnumberload()
        {
            const br = document.createElement("br");
            passagemarginright.append(br);

            const input = document.createElement("input");
            input.id = "passagemarginrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagemarginrightnumberupdate);
            passagemarginright.append(input);

            //passagemarginrightnumberset();
        }
        addEventListener("load", passagemarginrightnumberload);

        function passagemarginrightnumberset()
        {
            const v = Number(passagemarginrightnumber.value);

            passagemarginrightrange.value = v;
            text.passagemarginright = v;
        }

        function passagemarginrightnumberupdate()
        {
            passagemarginrightnumberset();

            svgupdate();
        }

        function passagemarginrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagemarginrightrange";
            input.max = passagemarginrightnumber.max;
            input.min = passagemarginrightnumber.min;
            input.type = "range";
            input.value = passagemarginrightnumber.value;
            input.addEventListener("input", passagemarginrightrangeupdate);
            passagemarginright.append(input);

            passagemarginrightrangeset();
        }
        addEventListener("load", passagemarginrightrangeload);

        function passagemarginrightrangeset()
        {
            const v = Number(passagemarginrightrange.value);

            passagemarginrightnumber.value = v;
            text.passagemarginright = v;
        }

        function passagemarginrightrangeupdate()
        {
            passagemarginrightrangeset();

            svgupdate();
        }



        function passagepaddingtopload()
        {
            const div = document.createElement("div");
            div.id = "passagepaddingtop";
            div.innerHTML = "padding-top";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagepaddingtopload);

        function passagepaddingtopnumberload()
        {
            const br = document.createElement("br");
            passagepaddingtop.append(br);

            const input = document.createElement("input");
            input.id = "passagepaddingtopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagepaddingtopnumberupdate);
            passagepaddingtop.append(input);

            //passagepaddingtopnumberset();
        }
        addEventListener("load", passagepaddingtopnumberload);

        function passagepaddingtopnumberset()
        {
            const v = Number(passagepaddingtopnumber.value);

            passagepaddingtoprange.value = v;
            text.passagepaddingtop = v;
        }

        function passagepaddingtopnumberupdate()
        {
            passagepaddingtopnumberset();

            svgupdate();
        }

        function passagepaddingtoprangeload()
        {
            const input = document.createElement("input");
            input.id = "passagepaddingtoprange";
            input.max = passagepaddingtopnumber.max;
            input.min = passagepaddingtopnumber.min;
            input.type = "range";
            input.value = passagepaddingtopnumber.value;
            input.addEventListener("input", passagepaddingtoprangeupdate);
            passagepaddingtop.append(input);

            passagepaddingtoprangeset();
        }
        addEventListener("load", passagepaddingtoprangeload);

        function passagepaddingtoprangeset()
        {
            const v = Number(passagepaddingtoprange.value);

            passagepaddingtopnumber.value = v;
            text.passagepaddingtop = v;
        }

        function passagepaddingtoprangeupdate()
        {
            passagepaddingtoprangeset();

            svgupdate();
        }



        function passagepaddingbottomload()
        {
            const div = document.createElement("div");
            div.id = "passagepaddingbottom";
            div.innerHTML = "padding-bottom";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagepaddingbottomload);

        function passagepaddingbottomnumberload()
        {
            const br = document.createElement("br");
            passagepaddingbottom.append(br);

            const input = document.createElement("input");
            input.id = "passagepaddingbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagepaddingbottomnumberupdate);
            passagepaddingbottom.append(input);

            //passagepaddingbottomnumberset();
        }
        addEventListener("load", passagepaddingbottomnumberload);

        function passagepaddingbottomnumberset()
        {
            const v = Number(passagepaddingbottomnumber.value);

            passagepaddingbottomrange.value = v;
            text.passagepaddingbottom = v;
        }

        function passagepaddingbottomnumberupdate()
        {
            passagepaddingbottomnumberset();

            svgupdate();
        }

        function passagepaddingbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagepaddingbottomrange";
            input.max = passagepaddingbottomnumber.max;
            input.min = passagepaddingbottomnumber.min;
            input.type = "range";
            input.value = passagepaddingbottomnumber.value;
            input.addEventListener("input", passagepaddingbottomrangeupdate);
            passagepaddingbottom.append(input);

            passagepaddingbottomrangeset();
        }
        addEventListener("load", passagepaddingbottomrangeload);

        function passagepaddingbottomrangeset()
        {
            const v = Number(passagepaddingbottomrange.value);

            passagepaddingbottomnumber.value = v;
            text.passagepaddingbottom = v;
        }

        function passagepaddingbottomrangeupdate()
        {
            passagepaddingbottomrangeset();

            svgupdate();
        }



        function passagepaddingleftload()
        {
            const div = document.createElement("div");
            div.id = "passagepaddingleft";
            div.innerHTML = "padding-left";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagepaddingleftload);

        function passagepaddingleftnumberload()
        {
            
10000
const br = document.createElement("br");
            passagepaddingleft.append(br);

            const input = document.createElement("input");
            input.id = "passagepaddingleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagepaddingleftnumberupdate);
            passagepaddingleft.append(input);

            //passagepaddingleftnumberset();
        }
        addEventListener("load", passagepaddingleftnumberload);

        function passagepaddingleftnumberset()
        {
            const v = Number(passagepaddingleftnumber.value);

            passagepaddingleftrange.value = v;
            text.passagepaddingleft = v;
        }

        function passagepaddingleftnumberupdate()
        {
            passagepaddingleftnumberset();

            svgupdate();
        }

        function passagepaddingleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagepaddingleftrange";
            input.max = passagepaddingleftnumber.max;
            input.min = passagepaddingleftnumber.min;
            input.type = "range";
            input.value = passagepaddingleftnumber.value;
            input.addEventListener("input", passagepaddingleftrangeupdate);
            passagepaddingleft.append(input);

            passagepaddingleftrangeset();
        }
        addEventListener("load", passagepaddingleftrangeload);


        function passagepaddingleftrangeset()
        {
            const v = Number(passagepaddingleftrange.value);

            passagepaddingleftnumber.value = v;
            text.passagepaddingleft = v;
        }

        function passagepaddingleftrangeupdate()
        {
            passagepaddingleftrangeset();

            svgupdate();
        }



        function passagepaddingrightload()
        {
            const div = document.createElement("div");
            div.id = "passagepaddingright";
            div.innerHTML = "padding-right";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagepaddingrightload);

        function passagepaddingrightnumberload()
        {
            const br = document.createElement("br");
            passagepaddingright.append(br);

            const input = document.createElement("input");
            input.id = "passagepaddingrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagepaddingrightnumberupdate);
            passagepaddingright.append(input);

            //passagepaddingrightnumberset();
        }
        addEventListener("load", passagepaddingrightnumberload);

        function passagepaddingrightnumberset()
        {
            const v = Number(passagepaddingrightnumber.value);

            passagepaddingrightrange.value = v;
            text.passagepaddingright = v;
        }

        function passagepaddingrightnumberupdate()
        {
            passagepaddingrightnumberset();

            svgupdate();
        }

        function passagepaddingrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagepaddingrightrange";
            input.max = passagepaddingrightnumber.max;
            input.min = passagepaddingrightnumber.min;
            input.type = "range";
            input.value = passagepaddingrightnumber.value;
            input.addEventListener("input", passagepaddingrightrangeupdate);
            passagepaddingright.append(input);

            passagepaddingrightrangeset();
        }
        addEventListener("load", passagepaddingrightrangeload);

        function passagepaddingrightrangeset()
        {
            const v = Number(passagepaddingrightrange.value);

            passagepaddingrightnumber.value = v;
            text.passagepaddingright = v;
        }

        function passagepaddingrightrangeupdate()
        {
            passagepaddingrightrangeset();

            svgupdate();
        }
//*/






        function savedownloadload()
        {
            const div = document.createElement("div");
            div.id = "savedownload";
            //div.innerHTML = "download<br>";
            tabcontentsave.append(div);
        }
        addEventListener("load", savedownloadload);

        function savedownloadimageload()
        {
            const a = document.createElement("a");
            a.download = "download";
            a.id = "savedownloadimage";
            a.innerHTML = "download";
            a.addEventListener("click", savedownloadimageupdate);
            savedownload.append(a);

            savedownloadimageupdate();
        }
        addEventListener("load", savedownloadimageload);

        function savedownloadimageupdate()
        {
            savedownloadimage.href = canvas.toDataURL();
        }
/*
        function savedownloadsettingsload()
        {
            const a = document.createElement("a");
            a.download = "settings.txt";
            a.id = "savedownloadsettings";
            a.innerHTML = "<br>settings";
            a.addEventListener("click", savedownloadsettingsupdate);
            savedownload.append(a);

            savedownloadsettingsupdate();
        }
        addEventListener("load", savedownloadsettingsload);

        function savedownloadsettingsupdate()
        {
            const data =
            [
                [
                    "canvas.width",
                    canvas.width,
                ],
                canvas.height,
                canvas.backgroundcolor,
                canvas.backgroundalpha,
                image.file,
                image.fit,
                image.width,
                image.height,
                image.x,
                image.y,
                image.backgroundcolor,
                image.backgroundalpha,
                image.opacity,
                text.messagetext,
                text.messagewidth,
                text.messageheight,
                text.messagex,
                text.messagey,
                text.messagehorizontal,
                text.messagevertical,
                text.messagewritingmode,
                text.messagefontfamily,
                text.messagefontsize,
                text.messagebackgroundcolor,
                text.messagebackgroundalpha,
                text.messagecolor,
                text.messagealpha,
                text.version,
                text.versionname,
                text.book,
                text.bookname,
                text.chapter,
                text.verse,
                text.verseend,
                text.referencewidth,
                text.referenceheight,
                text.referencex,
                text.referencey,
                text.referencehorizontal,
                text.referencevertical,
                text.referencewritingmode,
                text.referencefontfamily,
                text.referencefontsize,
                text.referencebackgroundcolor,
                text.referencebackgroundalpha,
                text.referencecolor,
                text.referencealpha,
                text.passagewidth,
                text.passageheight,
                text.passagex,
                text.passagey,
                text.passagehorizontal,
                text.passagevertical,
                text.passagewritingmode,
                text.passagefontfamily,
                text.passagefontsize,
                text.passagebackgroundcolor,
                text.passagebackgroundalpha,
                text.passagecolor,
                text.passagealpha,
            ];
            //leftoff
            const data2 = [];
            for(const a of data)
            {
                data2
            }
            savedownloadsettings.href = `data:text/plain,${data}`;
        }



        function savefileload()
        {
            const div = document.createElement("div");
            div.id = "savefile";
            div.innerHTML = "file<br>";
            tabcontentsave.append(div);
        }
        addEventListener("load", savefileload);

        function savefilefileload()
        {
            const input = document.createElement("input");
            input.id = "savefilefile";
            input.type = "file";
            input.addEventListener("change", savefilefileupdate);
            savefile.append(input);
        }
        addEventListener("load", savefilefileload);

        function savefilefileupdate()
        {
            const f = savefilefile.files[0];

            save.src = URL.createObjectURL(f);
        }
//*/</script></div></main><div class=banner><script defer src=https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4239362730750625 crossorigin=anonymous></script><ins class=adsbygoogle data-ad-client=ca-pub-4239362730750625 data-ad-slot=5564639719><a href=https://samaritanspurse.org/occ/ target=_blank><img alt="Samaritan's Purse Operation Christmas Child" src=/assets/svg/SamaritansPurseOperationChristmasChild1.svg title="Samaritan's Purse Operation Christmas Child"></a></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><footer><div id=boilerplate><div><a href=/Jesus/>Jesus</a> · <a href=/Bible/>Bible</a></div><div><a href=/html/>HTML</a> · <a href=/css/>CSS</a> · <a href=/js/>JS</a> · <a href=/php/>PHP</a> · <a href=/svg/>SVG</a></div><div><a href=/applications/>Applications</a> · <a href=/editor/>Editor</a> · <a href=/favicon/>Favicon</a></div><div><a href=/htaccess/>.htaccess</a> · <a href=/acme.sh/>acme.sh</a></div><div><a href=/flash/>Flash</a> · <a href=/sketchup/>SketchUp</a> · <a href=/unity/>Unity</a> · <a href=/xcode/>Xcode</a></div><div><a href=/about/>About</a> · <a href=/terms/>Terms</a></div><div><a href=/>osbo.com</a></div></div><div id=copyright>© 2026 Osbo Design</div></footer></div><div id=nav><div class=h1><a href=/Jesus/>JESUS</a></div><div class=h1><a id=switch-Bible>BIBLE</a></div><div id=list-Bible><h2>Overview</h2><div><ul><li><a href=/Bible/>Overview</a></li></ul></div><h2>Search</h2><div><ul><li><a href=/Bible/search/>Search</a></li></ul></div><h2>Download</h2><div><ul><li><a href=/Bible/download/>Download</a></li></ul></div><h2>العربية</h2><div><ul><li><a href=/Bible/asvd/>الكتاب المقدس ترجمة فانديك وسميث (ASVD)</a></li></ul></div><h2>česky</h2><div><ul><li><a href=/Bible/csbkr/>Bible Kralická 1613 (CSBKR)</a></li></ul></div><h2>Dansk</h2><div><ul><li><a href=/Bible/da1871/>Danske Bibel 1871 (DA1871)</a></li></ul></div><h2>Deutsch</h2><div><ul><li><a href=/Bible/delut/>Luther Bible 1912 (DELUT)</a></li><li><a href=/Bible/elb/>Elberfelder 1905 (ELB)</a></li><li><a href=/Bible/elb71/>Elberfelder 1871 (ELB71)</a></li></ul></div><h2>English</h2><div><ul><li><a href=/Bible/asv/>American Standard Version (ASV)</a></li><li><a href=/Bible/kjv/>King James Version (KJV)</a></li><li><a href=/Bible/web/>World English Bible (WEB)</a></li></ul></div><h2>Español</h2><div><ul><li><a href=/Bible/rves/>Reina-Valera Antigua (RVES)</a></li></ul></div><h2>Suomi</h2><div><ul><li><a href=/Bible/fi1776/>Finnish 1776 (FI1776)</a></li><li><a href=/Bible/finpr/>Finnish 1938 (FINPR)</a></li></ul></div><h2>Français</h2><div><ul><li><a href=/Bible/fmar/>Martin 1744 (FMAR)</a></li><li><a href=/Bible/frdby/>Bible Darby en français (FRDBY)</a></li><li><a href=/Bible/lsg/>Louis Segond 1910 (LSG)</a></li><li><a href=/Bible/ost/>Ostervald (OST)</a></li></ul></div><h2>Magyar</h2><div><ul><li><a href=/Bible/kar/>Károli 1590 (KAR)</a></li></ul></div><h2>Bahasa Indonesia</h2><div><ul><li><a href=/Bible/idbar/>Terjemahan Baru (IDBAR)</a></li></ul></div><h2>Italiano</h2><div><ul><li><a href=/Bible/igd/>Giovanni Diodati Bibbia (IGD)</a></li><li><a href=/Bible/itriv/>Italian Riveduta 1927 (ITRIV)</a></li></ul></div><h2>日本語</h2><div><ul><li><a href=/Bible/ja1955/>Colloquial Japanese 1955 (JA1955)</a></li></ul></div><h2>Malagasy</h2><div><ul><li><a href=/Bible/mg1865/>Malagasy Bible (MG1865)</a></li></ul></div><h2>te reo Māori</h2><div><ul><li><a href=/Bible/maor/>Maori Bible (MAOR)</a></li></ul></div><h2>한국어</h2><div><ul><li><a href=/Bible/korvb/>개역한글 (KORVB)</a></li></ul></div><h2>Nederlands</h2><div><ul><li><a href=/Bible/sv1750/>Statenvertaling (SV1750)</a></li></ul></div><h2>Norsk</h2><div><ul><li><a href=/Bible/norsk/>Det Norsk Bibelselskap 1930 (NORSK)</a></li></ul></div><h2>Polski</h2><div><ul><li><a href=/Bible/pbg/>Biblia Gdańska (PBG)</a></li></ul></div><h2>Português</h2><div><ul><li><a href=/Bible/aa/>Almeida Atualizada (AA)</a></li></ul></div><h2>Română</h2><div><ul><li><a href=/Bible/rmnn/>Romanian Cornilescu 1928 (RMNN)</a></li><li><a href=/Bible/vdc/>Versiunea Dumitru Cornilescu (VDC)</a></li><li><a href=/Bible/vdcc/>Versiunea Dumitru Cornilescu Corectată (VDCC)</a></li></ul></div><h2>Pyccкий</h2><div><ul><li><a href=/Bible/rursv/>Синодальный перевод (RURSV)</a></li></ul></div><h2>Shqip</h2><div><ul><li><a href=/Bible/albb/>Albanian Bible (ALBB)</a></li></ul></div><h2>Svenska</h2><div><ul><li><a href=/Bible/sk73/>Karl XII 1873 (SK73)</a></li><li><a href=/Bible/sven/>Svenska 1917 (SVEN)</a></li></ul></div><h2>Wikang Tagalog</h2><div><ul><li><a href=/Bible/tlab/>Ang Biblia (TLAB)</a></li></ul></div><h2>українська</h2><div><ul><li><a href=/Bible/ubio/>Біблія в пер. Івана Огієнка 1962 (UBIO)</a></li><li><a href=/Bible/ukrk/>Біблія в пер. П.Куліша та І.Пулюя 1905 (UKRK)</a></li></ul></div><h2>Tiếng Việt</h2><div><ul><li><a href=/Bible/vi1934/>Vietnamese Bible 1934 (VI1934)</a></li></ul></div><h2>简体中文</h2><div><ul><li><a href=/Bible/cuvs/>简体和合本 (CUVS)</a></li></ul></div><h2>繁體中文</h2><div><ul><li><a href=/Bible/cuv/>和合本 (CUV)</a></li></ul></div></div><div class=h1><a id=switch-html>HTML</a></div><div id=list-html><h2>Overview</h2><div><ul><li><a href=/html/>Overview</a></li></ul></div><h2>Attributes</h2><div><ul><li><a href=/html/attributes/abbr/>abbr</a></li><li><a href=/html/attributes/accept/>accept</a></li><li><a href=/html/attributes/accept-charset/>accept-charset</a></li><li><a href=/html/attributes/accesskey/>accesskey</a></li><li><a href=/html/attributes/action/>action</a></li><li><a href=/html/attributes/alt/>alt</a></li><li><a href=/html/attributes/as/>as</a></li><li><a href=/html/attributes/async/>async</a></li><li><a href=/html/attributes/autocapitalize/>autocapitalize</a></li><li><a href=/html/attributes/autocomplete/>autocomplete</a></li><li><a href=/html/attributes/autofocus/>autofocus</a></li><li><a href=/html/attributes/autoplay/>autoplay</a></li><li><a href=/html/attributes/blocking/>blocking</a></li><li><a href=/html/attributes/charset/>charset</a></li><li><a href=/html/attributes/checked/>checked</a></li><li><a href=/html/attributes/cite/>cite</a></li><li><a href=/html/attributes/class/>class</a></li><li><a href=/html/attributes/color/>color</a></li><li><a href=/html/attributes/cols/>cols</a></li><li><a href=/html/attributes/colspan/>colspan</a></li><li><a href=/html/attributes/contenteditable/>contenteditable</a></li><li><a href=/html/attributes/controls/>controls</a></li><li><a href=/html/attributes/coords/>coords</a></li><li><a href=/html/attributes/crossorigin/>crossorigin</a></li><li><a href=/html/attributes/data/>data</a></li><li><a href=/html/attributes/datetime/>datetime</a></li><li><a href=/html/attributes/decoding/>decoding</a></li><li><a href=/html/attributes/default/>default</a></li><li><a href=/html/attributes/defer/>defer</a></li><li><a href=/html/attributes/dir/>dir</a></li><li><a href=/html/attributes/dirname/>dirname</a></li><li><a href=/html/attributes/disabled/>disabled</a></li><li><a href=/html/attributes/download/>download</a></li><li><a href=/html/attributes/draggable/>draggable</a></li><li><a href=/html/attributes/enctype/>enctype</a></li><li><a href=/html/attributes/enterkeyhint/>enterkeyhint</a></li><li><a href=/html/attributes/exportparts/>exportparts</a></li><li><a href=/html/attributes/fetchpriority/>fetchpriority</a></li><li><a href=/html/attributes/for/>for</a></li><li><a href=/html/attributes/form/>form</a></li><li><a href=/html/attributes/formaction/>formaction</a></li><li><a href=/html/attributes/formenctype/>formenctype</a></li><li><a href=/html/attributes/formmethod/>formmethod</a></li><li><a href=/html/attributes/formnovalidate/>formnovalidate</a></li><li><a href=/html/attributes/formtarget/>formtarget</a></li><li><a href=/html/attributes/headers/>headers</a></li><li><a href=/html/attributes/height/>height</a></li><li><a href=/html/attributes/hidden/>hidden</a></li><li><a href=/html/attributes/high/>high</a></li><li><a href=/html/attributes/href/>href</a></li><li><a href=/html/attributes/hreflang/>hreflang</a></li><li><a href=/html/attributes/http-equiv/>http-equiv</a></li><li><a href=/html/attributes/id/>id</a></li><li><a href=/html/attributes/imagesizes/>imagesizes</a></li><li><a href=/html/attributes/imagesrcset/>imagesrcset</a></li><li><a href=/html/attributes/inert/>inert</a></li><li><a href=/html/attributes/inputmode/>inputmode</a></li><li><a href=/html/attributes/integrity/>integrity</a></li><li><a href=/html/attributes/is/>is</a></li><li><a href=/html/attributes/ismap/>ismap</a></li><li><a href=/html/attributes/itemid/>itemid</a></li><li><a href=/html/attributes/itemprop/>itemprop</a></li><li><a href=/html/attributes/itemref/>itemref</a></li><li><a href=/html/attributes/itemscope/>itemscope</a></li><li><a href=/html/attributes/itemtype/>itemtype</a></li><li><a href=/html/attributes/kind/>kind</a></li><li><a href=/html/attributes/label/>label</a></li><li><a href=/html/attributes/lang/>lang</a></li><li><a href=/html/attributes/list/>list</a></li><li><a href=/html/attributes/loading/>loading</a></li><li><a href=/html/attributes/loop/>loop</a></li><li><a href=/html/attributes/low/>low</a></li><li><a href=/html/attributes/max/>max</a></li><li><a href=/html/attributes/maxlength/>maxlength</a></li><li><a href=/html/attributes/media/>media</a></li><li><a href=/html/attributes/method/>method</a></li><li><a href=/html/attributes/min/>min</a></li><li><a href=/html/attributes/minlength/>minlength</a></li><li><a href=/html/attributes/multiple/>multiple</a></li><li><a href=/html/attributes/muted/>muted</a></li><li><a href=/html/attributes/name/>name</a></li><li><a href=/html/attributes/nomodule/>nomodule</a></li><li><a href=/html/attributes/nonce/>nonce</a></li><li><a href=/html/attributes/novalidate/>novalidate</a></li><li><a href=/html/attributes/onabort/>onabort</a></li><li><a href=/html/attributes/onafterprint/>onafterprint</a></li><li><a href=/html/attributes/onauxclick/>onauxclick</a></li><li><a href=/html/attributes/onbeforeinput/>onbeforeinput</a></li><li><a href=/html/attributes/onbeforeprint/>onbeforeprint</a></li><li><a href=/html/attributes/onbeforetoggle/>onbeforetoggle</a></li><li><a href=/html/attributes/onbeforeunload/>onbeforeunload</a></li><li><a href=/html/attributes/onblur/>onblur</a></li><li><a href=/html/attributes/oncancel/>oncancel</a></li><li><a href=/html/attributes/oncanplay/>oncanplay</a></li><li><a href=/html/attributes/oncanplaythrough/>oncanplaythrough</a></li><li><a href=/html/attributes/onchange/>onchange</a></li><li><a href=/html/attributes/onclick/>onclick</a></li><li><a href=/html/attributes/oncontextlost/>oncontextlost</a></li><li><a href=/html/attributes/oncontextmenu/>oncontextmenu</a></li><li><a href=/html/attributes/oncontextrestored/>oncontextrestored</a></li><li><a href=/html/attributes/oncopy/>oncopy</a></li><li><a href=/html/attributes/oncut/>oncut</a></li><li><a href=/html/attributes/ondblclick/>ondblclick</a></li><li><a href=/html/attributes/ondrag/>ondrag</a></li><li><a href=/html/attributes/ondragend/>ondragend</a></li><li><a href=/html/attributes/ondragenter/>ondragenter</a></li><li><a href=/html/attributes/ondragleave/>ondragleave</a></li><li><a href=/html/attributes/ondragover/>ondragover</a></li><li><a href=/html/attributes/ondragstart/>ondragstart</a></li><li><a href=/html/attributes/ondrop/>ondrop</a></li><li><a href=/html/attributes/ondurationchange/>ondurationchange</a></li><li><a href=/html/attributes/onended/>onended</a></li><li><a href=/html/attributes/onfocus/>onfocus</a></li><li><a href=/html/attributes/onformdata/>onformdata</a></li><li><a href=/html/attributes/onhashchange/>onhashchange</a></li><li><a href=/html/attributes/oninput/>oninput</a></li><li><a href=/html/attributes/oninvalid/>oninvalid</a></li><li><a href=/html/attributes/onkeydown/>onkeydown</a></li><li><a href=/html/attributes/onkeypress/>onkeypress</a></li><li><a href=/html/attributes/onkeyup/>onkeyup</a></li><li><a href=/html/attributes/onlanguagechange/>onlanguagechange</a></li><li><a href=/html/attributes/onload/>onload</a></li><li><a href=/html/attributes/onloadeddata/>onloadeddata</a></li><li><a href=/html/attributes/onloadedmetadata/>onloadedmetadata</a></li><li><a href=/html/attributes/onloadstart/>onloadstart</a></li><li><a href=/html/attributes/onmousedown/>onmousedown</a></li><li><a href=/html/attributes/onmouseenter/>onmouseenter</a></li><li><a href=/html/attributes/onmouseleave/>onmouseleave</a></li><li><a href=/html/attributes/onmousemove/>onmousemove</a></li><li><a href=/html/attributes/onmouseout/>onmouseout</a></li><li><a href=/html/attributes/onmouseover/>onmouseover</a></li><li><a href=/html/attributes/onmouseup/>onmouseup</a></li><li><a href=/html/attributes/onmousewheel/>onmousewheel</a></li><li><a href=/html/attributes/onoffline/>onoffline</a></li><li><a href=/html/attributes/ononline/>ononline</a></li><li><a href=/html/attributes/onpagehide/>onpagehide</a></li><li><a href=/html/attributes/onpageshow/>onpageshow</a></li><li><a href=/html/attributes/onpaste/>onpaste</a></li><li><a href=/html/attributes/onpause/>onpause</a></li><li><a href=/html/attributes/onplay/>onplay</a></li><li><a href=/html/attributes/onplaying/>onplaying</a></li><li><a href=/html/attributes/onprogress/>onprogress</a></li><li><a href=/html/attributes/onratechange/>onratechange</a></li><li><a href=/html/attributes/onreset/>onreset</a></li><li><a href=/html/attributes/onresize/>onresize</a></li><li><a href=/html/attributes/onscroll/>onscroll</a></li><li><a href=/html/attributes/onscrollend/>onscrollend</a></li><li><a href=/html/attributes/onsearch/>onsearch</a></li><li><a href=/html/attributes/onseeked/>onseeked</a></li><li><a href=/html/attributes/onseeking/>onseeking</a></li><li><a href=/html/attributes/onselect/>onselect</a></li><li><a href=/html/attributes/onstorage/>onstorage</a></li><li><a href=/html/attributes/onsubmit/>onsubmit</a></li><li><a href=/html/attributes/onsuspend/>onsuspend</a></li><li><a href=/html/attributes/ontimeupdate/>ontimeupdate</a></li><li><a href=/html/attributes/ontoggle/>ontoggle</a></li><li><a href=/html/attributes/onunload/>onunload</a></li><li><a href=/html/attributes/onvolumechange/>onvolumechange</a></li><li><a href=/html/attributes/onwaiting/>onwaiting</a></li><li><a href=/html/attributes/onwheel/>onwheel</a></li><li><a href=/html/attributes/open/>open</a></li><li><a href=/html/attributes/optimum/>optimum</a></li><li><a href=/html/attributes/part/>part</a></li><li><a href=/html/attributes/pattern/>pattern</a></li><li><a href=/html/attributes/ping/>ping</a></li><li><a href=/html/attributes/placeholder/>placeholder</a></li><li><a href=/html/attributes/playsinline/>playsinline</a></li><li><a href=/html/attributes/popover/>popover</a></li><li><a href=/html/attributes/popovertarget/>popovertarget</a></li><li><a href=/html/attributes/popovertargetaction/>popovertargetaction</a></li><li><a href=/html/attributes/poster/>poster</a></li><li><a href=/html/attributes/preload/>preload</a></li><li><a href=/html/attributes/readonly/>readonly</a></li><li><a href=/html/attributes/referrerpolicy/>referrerpolicy</a></li><li><a href=/html/attributes/rel/>rel</a></li><li><a href=/html/attributes/required/>required</a></li><li><a href=/html/attributes/reversed/>reversed</a></li><li><a href=/html/attributes/rows/>rows</a></li><li><a href=/html/attributes/rowspan/>rowspan</a></li><li><a href=/html/attributes/sandbox/>sandbox</a></li><li><a href=/html/attributes/scope/>scope</a></li><li><a href=/html/attributes/selected/>selected</a></li><li><a href=/html/attributes/shape/>shape</a></li><li><a href=/html/attributes/size/>size</a></li><li><a href=/html/attributes/sizes/>sizes</a></li><li><a href=/html/attributes/slot/>slot</a></li><li><a href=/html/attributes/span/>span</a></li><li><a href=/html/attributes/spellcheck/>spellcheck</a></li><li><a href=/html/attributes/src/>src</a></li><li><a href=/html/attributes/srcdoc/>srcdoc</a></li><li><a href=/html/attributes/srclang/>srclang</a></li><li><a href=/html/attributes/srcset/>srcset</a></li><li><a href=/html/attributes/start/>start</a></li><li><a href=/html/attributes/step/>step</a></li><li><a href=/html/attributes/style/>style</a></li><li><a href=/html/attributes/tabindex/>tabindex</a></li><li><a href=/html/attributes/target/>target</a></li><li><a href=/html/attributes/title/>title</a></li><li><a href=/html/attributes/translate/>translate</a></li><li><a href=/html/attributes/type/>type</a></li><li><a href=/html/attributes/usemap/>usemap</a></li><li><a href=/html/attributes/value/>value</a></li><li><a href=/html/attributes/width/>width</a></li><li><a href=/html/attributes/wrap/>wrap</a></li></ul></div><h2>Elements</h2><div><ul><li><a href=/html/elements/!doctype/>!doctype</a></li><li><a href=/html/elements/a/>a</a></li><li><a href=/html/elements/abbr/>abbr</a></li><li><a href=/html/elements/address/>address</a></li><li><a href=/html/elements/area/>area</a></li><li><a href=/html/elements/article/>article</a></li><li><a href=/html/elements/aside/>aside</a></li><li><a href=/html/elements/audio/>audio</a></li><li><a href=/html/elements/b/>b</a></li><li><a href=/html/elements/base/>base</a></li><li><a href=/html/elements/bdi/>bdi</a></li><li><a href=/html/elements/bdo/>bdo</a></li><li><a href=/html/elements/blockquote/>blockquote</a></li><li><a href=/html/elements/body/>body</a></li><li><a href=/html/elements/br/>br</a></li><li><a href=/html/elements/button/>button</a></li><li><a href=/html/elements/canvas/>canvas</a></li><li><a href=/html/elements/caption/>caption</a></li><li><a href=/html/elements/cite/>cite</a></li><li><a href=/html/elements/code/>code</a></li><li><a href=/html/elements/col/>col</a></li><li><a href=/html/elements/colgroup/>colgroup</a></li><li><a href=/html/elements/data/>data</a></li><li><a href=/html/elements/datalist/>datalist</a></li><li><a href=/html/elements/dd/>dd</a></li><li><a href=/html/elements/del/>del</a></li><li><a href=/html/elements/details/>details</a></li><li><a href=/html/elements/dfn/>dfn</a></li><li><a href=/html/elements/dialog/>dialog</a></li><li><a href=/html/elements/div/>div</a></li><li><a href=/html/elements/dl/>dl</a></li><li><a href=/html/elements/dt/>dt</a></li><li><a href=/html/elements/em/>em</a></li><li><a href=/html/elements/embed/>embed</a></li><li><a href=/html/elements/fieldset/>fieldset</a></li><li><a href=/html/elements/figcaption/>figcaption</a></li><li><a href=/html/elements/figure/>figure</a></li><li><a href=/html/elements/footer/>footer</a></li><li><a href=/html/elements/form/>form</a></li><li><a href=/html/elements/h1/>h1</a></li><li><a href=/html/elements/h2/>h2</a></li><li><a href=/html/elements/h3/>h3</a></li><li><a href=/html/elements/h4/>h4</a></li><li><a href=/html/elements/h5/>h5</a></li><li><a href=/html/elements/h6/>h6</a></li><li><a href=/html/elements/head/>head</a></li><li><a href=/html/elements/header/>header</a></li><li><a href=/html/elements/hgroup/>hgroup</a></li><li><a href=/html/elements/hr/>hr</a></li><li><a href=/html/elements/html/>html</a></li><li><a href=/html/elements/i/>i</a></li><li><a href=/html/elements/iframe/>iframe</a></li><li><a href=/html/elements/img/>img</a></li><li><a href=/html/elements/input/>input</a></li><li><a href=/html/elements/ins/>ins</a></li><li><a href=/html/elements/kbd/>kbd</a></li><li><a href=/html/elements/label/>label</a></li><li><a href=/html/elements/legend/>legend</a></li><li><a href=/html/elements/li/>li</a></li><li><a href=/html/elements/link/>link</a></li><li><a href=/html/elements/main/>main</a></li><li><a href=/html/elements/map/>map</a></li><li><a href=/html/elements/mark/>mark</a></li><li><a href=/html/elements/menu/>menu</a></li><li><a href=/html/elements/meta/>meta</a></li><li><a href=/html/elements/meter/>meter</a></li><li><a href=/html/elements/nav/>nav</a></li><li><a href=/html/elements/noscript/>noscript</a></li><li><a href=/html/elements/object/>object</a></li><li><a href=/html/elements/ol/>ol</a></li><li><a href=/html/elements/optgroup/>optgroup</a></li><li><a href=/html/elements/option/>option</a></li><li><a href=/html/elements/output/>output</a></li><li><a href=/html/elements/p/>p</a></li><li><a href=/html/elements/param/>param</a></li><li><a href=/html/elements/picture/>picture</a></li><li><a href=/html/elements/pre/>pre</a></li><li><a href=/html/elements/progress/>progress</a></li><li><a href=/html/elements/q/>q</a></li><li><a href=/html/elements/rb/>rb</a></li><li><a href=/html/elements/rp/>rp</a></li><li><a href=/html/elements/rt/>rt</a></li><li><a href=/html/elements/rtc/>rtc</a></li><li><a href=/html/elements/ruby/>ruby</a></li><li><a href=/html/elements/s/>s</a></li><li><a href=/html/elements/samp/>samp</a></li><li><a href=/html/elements/script/>script</a></li><li><a href=/html/elements/search/>search</a></li><li><a href=/html/elements/section/>section</a></li><li><a href=/html/elements/select/>select</a></li><li><a href=/html/elements/slot/>slot</a></li><li><a href=/html/elements/small/>small</a></li><li><a href=/html/elements/source/>source</a></li><li><a href=/html/elements/span/>span</a></li><li><a href=/html/elements/strong/>strong</a></li><li><a href=/html/elements/style/>style</a></li><li><a href=/html/elements/sub/>sub</a></li><li><a href=/html/elements/summary/>summary</a></li><li><a href=/html/elements/sup/>sup</a></li><li><a href=/html/elements/table/>table</a></li><li><a href=/html/elements/tbody/>tbody</a></li><li><a href=/html/elements/td/>td</a></li><li><a href=/html/elements/template/>template</a></li><li><a href=/html/elements/textarea/>textarea</a></li><li><a href=/html/elements/tfoot/>tfoot</a></li><li><a href=/html/elements/th/>th</a></li><li><a href=/html/elements/thead/>thead</a></li><li><a href=/html/elements/time/>time</a></li><li><a href=/html/elements/title/>title</a></li><li><a href=/html/elements/tr/>tr</a></li><li><a href=/html/elements/track/>track</a></li><li><a href=/html/elements/u/>u</a></li><li><a href=/html/elements/ul/>ul</a></li><li><a href=/html/elements/var/>var</a></li><li><a href=/html/elements/video/>video</a></li><li><a href=/html/elements/wbr/>wbr</a></li></ul></div><h2>Other</h2><div><ul><li><a href=/html/characters/>Characters</a></li><li><a href=/html/comments/>Comments</a></li><li><a href=/html/datatypes/>Datatypes</a></li></ul></div></div><div class=h1><a id=switch-css>CSS</a></div><div id=list-css><h2>Overview</h2><div><ul><li><a href=/css/>Overview</a></li></ul></div><h2>Functions</h2><div><ul><li><a href=/css/functions/abs/>abs</a></li><li><a href=/css/functions/acos/>acos</a></li><li><a href=/css/functions/asin/>asin</a></li><li><a href=/css/functions/atan/>atan</a></li><li><a href=/css/functions/atan2/>atan2</a></li><li><a href=/css/functions/attr/>attr</a></li><li><a href=/css/functions/calc/>calc</a></li><li><a href=/css/functions/clamp/>clamp</a></li><li><a href=/css/functions/color/>color</a></li><li><a href=/css/functions/conic-gradient/>conic-gradient</a></li><li><a href=/css/functions/cos/>cos</a></li><li><a href=/css/functions/counter/>counter</a></li><li><a href=/css/functions/counters/>counters</a></li><li><a href=/css/functions/hsl/>hsl</a></li><li><a href=/css/functions/hsla/>hsla</a></li><li><a href=/css/functions/hwb/>hwb</a></li><li><a href=/css/functions/if/>if</a></li><li><a href=/css/functions/lab/>lab</a></li><li><a href=/css/functions/lch/>lch</a></li><li><a href=/css/functions/linear-gradient/>linear-gradient</a></li><li><a href=/css/functions/matrix/>matrix</a></li><li><a href=/css/functions/matrix3d/>matrix3d</a></li><li><a href=/css/functions/max/>max</a></li><li><a href=/css/functions/min/>min</a></li><li><a href=/css/functions/mod/>mod</a></li><li><a href=/css/functions/oklab/>oklab</a></li><li><a href=/css/functions/oklch/>oklch</a></li><li><a href=/css/functions/param/>param</a></li><li><a href=/css/functions/perspective/>perspective</a></li><li><a href=/css/functions/radial-gradient/>radial-gradient</a></li><li><a href=/css/functions/rem/>rem</a></li><li><a href=/css/functions/repeating-conic-gradient/>repeating-conic-gradient</a></li><li><a href=/css/functions/repeating-linear-gradient/>repeating-linear-gradient</a></li><li><a href=/css/functions/repeating-radial-gradient/>repeating-radial-gradient</a></li><li><a href=/css/functions/rgb/>rgb</a></li><li><a href=/css/functions/rgba/>rgba</a></li><li><a href=/css/functions/rotate/>rotate</a></li><li><a href=/css/functions/rotate3d/>rotate3d</a></li><li><a href=/css/functions/rotatex/>rotateX</a></li><li><a href=/css/functions/rotatey/>rotateY</a></li><li><a href=/css/functions/rotatez/>rotateZ</a></li><li><a href=/css/functions/round/>round</a></li><li><a href=/css/functions/scale/>scale</a></li><li><a href=/css/functions/scale3d/>scale3d</a></li><li><a href=/css/functions/scalex/>scaleX</a></li><li><a href=/css/functions/scaley/>scaleY</a></li><li><a href=/css/functions/scalez/>scaleZ</a></li><li><a href=/css/functions/sin/>sin</a></li><li><a href=/css/functions/skew/>skew</a></li><li><a href=/css/functions/skewx/>skewX</a></li><li><a href=/css/functions/skewy/>skewY</a></li><li><a href=/css/functions/src/>src</a></li><li><a href=/css/functions/tan/>tan</a></li><li><a href=/css/functions/translate/>translate</a></li><li><a href=/css/functions/translate3d/>translate3d</a></li><li><a href=/css/functions/translatex/>translateX</a></li><li><a href=/css/functions/translatey/>translateY</a></li><li><a href=/css/functions/translatez/>translateZ</a></li><li><a href=/css/functions/url/>url</a></li><li><a href=/css/functions/var/>var</a></li></ul></div><h2>Properties</h2><div><ul><li><a href=/css/properties/accent-color/>accent-color</a></li><li><a href=/css/properties/align-content/>align-content</a></li><li><a href=/css/properties/align-items/>align-items</a></li><li><a href=/css/properties/align-self/>align-self</a></li><li><a href=/css/properties/all/>all</a></li><li><a href=/css/properties/animation/>animation</a></li><li><a href=/css/properties/animation-composition/>animation-composition</a></li><li><a href=/css/properties/animation-delay/>animation-delay</a></li><li><a href=/css/properties/animation-direction/>animation-direction</a></li><li><a href=/css/properties/animation-duration/>animation-duration</a></li><li><a href=/css/properties/animation-fill-mode/>animation-fill-mode</a></li><li><a href=/css/properties/animation-iteration-count/>animation-iteration-count</a></li><li><a href=/css/properties/animation-name/>animation-name</a></li><li><a href=/css/properties/animation-play-state/>animation-play-state</a></li><li><a href=/css/properties/animation-timeline/>animation-timeline</a></li><li><a href=/css/properties/animation-timing-function/>animation-timing-function</a></li><li><a href=/css/properties/appearance/>appearance</a></li><li><a href=/css/properties/aspect-ratio/>aspect-ratio</a></li><li><a href=/css/properties/backdrop-filter/>backdrop-filter</a></li><li><a href=/css/properties/backface-visibility/>backface-visibility</a></li><li><a href=/css/properties/background/>background</a></li><li><a href=/css/properties/background-attachment/>background-attachment</a></li><li><a href=/css/properties/background-blend-mode/>background-blend-mode</a></li><li><a href=/css/properties/background-clip/>background-clip</a></li><li><a href=/css/properties/background-color/>background-color</a></li><li><a href=/css/properties/background-image/>background-image</a></li><li><a href=/css/properties/background-origin/>background-origin</a></li><li><a href=/css/properties/background-position/>background-position</a></li><li><a href=/css/properties/background-position-x/>background-position-x</a></li><li><a href=/css/properties/background-position-y/>background-position-y</a></li><li><a href=/css/properties/background-repeat/>background-repeat</a></li><li><a href=/css/properties/background-size/>background-size</a></li><li><a href=/css/properties/block-ellipsis/>block-ellipsis</a></li><li><a href=/css/properties/block-size/>block-size</a></li><li><a href=/css/properties/border/>border</a></li><li><a href=/css/properties/border-block/>border-block</a></li><li><a href=/css/properties/border-block-color/>border-block-color</a></li><li><a href=/css/properties/border-block-end/>border-block-end</a></li><li><a href=/css/properties/border-block-end-color/>border-block-end-color</a></li><li><a href=/css/properties/border-block-end-style/>border-block-end-style</a></li><li><a href=/css/properties/border-block-end-width/>border-block-end-width</a></li><li><a href=/css/properties/border-block-start/>border-block-start</a></li><li><a href=/css/properties/border-block-start-color/>border-block-start-color</a></li><li><a href=/css/properties/border-block-start-style/>border-block-start-style</a></li><li><a href=/css/properties/border-block-start-width/>border-block-start-width</a></li><li><a href=/css/properties/border-block-style/>border-block-style</a></li><li><a href=/css/properties/border-block-width/>border-block-width</a></li><li><a href=/css/properties/border-bottom/>border-bottom</a></li><li><a href=/css/properties/border-bottom-color/>border-bottom-color</a></li><li><a href=/css/properties/border-bottom-left-radius/>border-bottom-left-radius</a></li><li><a href=/css/properties/border-bottom-right-radius/>border-bottom-right-radius</a></li><li><a href=/css/properties/border-bottom-style/>border-bottom-style</a></li><li><a href=/css/properties/border-bottom-width/>border-bottom-width</a></li><li><a href=/css/properties/border-collapse/>border-collapse</a></li><li><a href=/css/properties/border-color/>border-color</a></li><li><a href=/css/properties/border-end-end-radius/>border-end-end-radius</a></li><li><a href=/css/properties/border-end-start-radius/>border-end-start-radius</a></li><li><a href=/css/properties/border-image/>border-image</a></li><li><a href=/css/properties/border-image-outset/>border-image-outset</a></li><li><a href=/css/properties/border-image-repeat/>border-image-repeat</a></li><li><a href=/css/properties/border-image-slice/>border-image-slice</a></li><li><a href=/css/properties/border-image-source/>border-image-source</a></li><li><a href=/css/properties/border-image-width/>border-image-width</a></li><li><a href=/css/properties/border-inline/>border-inline</a></li><li><a href=/css/properties/border-inline-color/>border-inline-color</a></li><li><a href=/css/properties/border-inline-end/>border-inline-end</a></li><li><a href=/css/properties/border-inline-end-color/>border-inline-end-color</a></li><li><a href=/css/properties/border-inline-end-style/>border-inline-end-style</a></li><li><a href=/css/properties/border-inline-end-width/>border-inline-end-width</a></li><li><a href=/css/properties/border-inline-start/>border-inline-start</a></li><li><a href=/css/properties/border-inline-start-color/>border-inline-start-color</a></li><li><a href=/css/properties/border-inline-start-style/>border-inline-start-style</a></li><li><a href=/css/properties/border-inline-start-width/>border-inline-start-width</a></li><li><a href=/css/properties/border-inline-style/>border-inline-style</a></li><li><a href=/css/properties/border-inline-width/>border-inline-width</a></li><li><a href=/css/properties/border-left/>border-left</a></li><li><a href=/css/properties/border-left-color/>border-left-color</a></li><li><a href=/css/properties/border-left-style/>border-left-style</a></li><li><a href=/css/properties/border-left-width/>border-left-width</a></li><li><a href=/css/properties/border-radius/>border-radius</a></li><li><a href=/css/properties/border-right/>border-right</a></li><li><a href=/css/properties/border-right-color/>border-right-color</a></li><li><a href=/css/properties/border-right-style/>border-right-style</a></li><li><a href=/css/properties/border-right-width/>border-right-width</a></li><li><a href=/css/properties/border-spacing/>border-spacing</a></li><li><a href=/css/properties/border-start-end-radius/>border-start-end-radius</a></li><li><a href=/css/properties/border-start-start-radius/>border-start-start-radius</a></li><li><a href=/css/properties/border-style/>border-style</a></li><li><a href=/css/properties/border-top/>border-top</a></li><li><a href=/css/properties/border-top-color/>border-top-color</a></li><li><a href=/css/properties/border-top-left-radius/>border-top-left-radius</a></li><li><a href=/css/properties/border-top-right-radius/>border-top-right-radius</a></li><li><a href=/css/properties/border-top-style/>border-top-style</a></li><li><a href=/css/properties/border-top-width/>border-top-width</a></li><li><a href=/css/properties/border-width/>border-width</a></li><li><a href=/css/properties/bottom/>bottom</a></li><li><a href=/css/properties/box-decoration-break/>box-decoration-break</a></li><li><a href=/css/properties/box-shadow/>box-shadow</a></li><li><a href=/css/properties/box-sizing/>box-sizing</a></li><li><a href=/css/properties/caption-side/>caption-side</a></li><li><a href=/css/properties/caret/>caret</a></li><li><a href=/css/properties/caret-animation/>caret-animation</a></li><li><a href=/css/properties/caret-color/>caret-color</a></li><li><a href=/css/properties/caret-shape/>caret-shape</a></li><li><a href=/css/properties/clear/>clear</a></li><li><a href=/css/properties/clip/>clip</a></li><li><a href=/css/properties/clip-path/>clip-path</a></li><li><a href=/css/properties/color/>color</a></li><li><a href=/css/properties/color-scheme/>color-scheme</a></li><li><a href=/css/properties/column-count/>column-count</a></li><li><a href=/css/properties/column-fill/>column-fill</a></li><li><a href=/css/properties/column-gap/>column-gap</a></li><li><a href=/css/properties/column-rule/>column-rule</a></li><li><a href=/css/properties/column-rule-color/>column-rule-color</a></li><li><a href=/css/properties/column-rule-style/>column-rule-style</a></li><li><a href=/css/properties/column-rule-width/>column-rule-width</a></li><li><a href=/css/properties/column-span/>column-span</a></li><li><a href=/css/properties/column-width/>column-width</a></li><li><a href=/css/properties/columns/>columns</a></li><li><a href=/css/properties/contain/>contain</a></li><li><a href=/css/properties/contain-intrinsic-block-size/>contain-intrinsic-block-size</a></li><li><a href=/css/properties/contain-intrinsic-height/>contain-intrinsic-height</a></li><li><a href=/css/properties/contain-intrinsic-inline-size/>contain-intrinsic-inline-size</a></li><li><a href=/css/properties/contain-intrinsic-size/>contain-intrinsic-size</a></li><li><a href=/css/properties/contain-intrinsic-width/>contain-intrinsic-width</a></li><li><a href=/css/properties/container/>container</a></li><li><a href=/css/properties/container-name/>container-name</a></li><li><a href=/css/properties/container-type/>container-type</a></li><li><a href=/css/properties/content/>content</a></li><li><a href=/css/properties/content-visibility/>content-visibility</a></li><li><a href=/css/properties/continue/>continue</a></li><li><a href=/css/properties/counter-increment/>counter-increment</a></li><li><a href=/css/properties/counter-reset/>counter-reset</a></li><li><a href=/css/properties/counter-set/>counter-set</a></li><li><a href=/css/properties/cursor/>cursor</a></li><li><a href=/css/properties/direction/>direction</a></li><li><a href=/css/properties/display/>display</a></li><li><a href=/css/properties/empty-cells/>empty-cells</a></li><li><a href=/css/properties/filter/>filter</a></li><li><a href=/css/properties/flex/>flex</a></li><li><a href=/css/properties/flex-basis/>flex-basis</a></li><li><a href=/css/properties/flex-direction/>flex-direction</a></li><li><a href=/css/properties/flex-flow/>flex-flow</a></li><li><a href=/css/properties/flex-grow/>flex-grow</a></li><li><a href=/css/properties/flex-shrink/>flex-shrink</a></li><li><a href=/css/properties/flex-wrap/>flex-wrap</a></li><li><a href=/css/properties/float/>float</a></li><li><a href=/css/properties/font/>font</a></li><li><a href=/css/properties/font-family/>font-family</a></li><li><a href=/css/properties/font-feature-settings/>font-feature-settings</a></li><li><a href=/css/properties/font-kerning/>font-kerning</a></li><li><a href=/css/properties/font-optical-sizing/>font-optical-sizing</a></li><li><a href=/css/properties/font-size/>font-size</a></li><li><a href=/css/properties/font-size-adjust/>font-size-adjust</a></li><li><a href=/css/properties/font-stretch/>font-stretch</a></li><li><a href=/css/properties/font-style/>font-style</a></li><li><a href=/css/properties/font-variant/>font-variant</a></li><li><a href=/css/properties/font-variant-caps/>font-variant-caps</a></li><li><a href=/css/properties/font-variant-ligatures/>font-variant-ligatures</a></li><li><a href=/css/properties/font-variant-numeric/>font-variant-numeric</a></li><li><a href=/css/properties/font-variant-position/>font-variant-position</a></li><li><a href=/css/properties/font-variation-settings/>font-variation-settings</a></li><li><a href=/css/properties/font-weight/>font-weight</a></li><li><a href=/css/properties/forced-color-adjust/>forced-color-adjust</a></li><li><a href=/css/properties/gap/>gap</a></li><li><a href=/css/properties/grid/>grid</a></li><li><a href=/css/properties/grid-area/>grid-area</a></li><li><a href=/css/properties/grid-auto-columns/>grid-auto-columns</a></li><li><a href=/css/properties/grid-auto-flow/>grid-auto-flow</a></li><li><a href=/css/properties/grid-auto-rows/>grid-auto-rows</a></li><li><a href=/css/properties/grid-column/>grid-column</a></li><li><a href=/css/properties/grid-column-end/>grid-column-end</a></li><li><a href=/css/properties/grid-column-start/>grid-column-start</a></li><li><a href=/css/properties/grid-row/>grid-row</a></li><li><a href=/css/properties/grid-row-end/>grid-row-end</a></li><li><a href=/css/properties/grid-row-start/>grid-row-start</a></li><li><a href=/css/properties/grid-template/>grid-template</a></li><li><a href=/css/properties/grid-template-areas/>grid-template-areas</a></li><li><a href=/css/properties/grid-template-columns/>grid-template-columns</a></li><li><a href=/css/properties/grid-template-rows/>grid-template-rows</a></li><li><a href=/css/properties/hanging-punctuation/>hanging-punctuation</a></li><li><a href=/css/properties/height/>height</a></li><li><a href=/css/properties/hyphens/>hyphens</a></li><li><a href=/css/properties/image-rendering/>image-rendering</a></li><li><a href=/css/properties/initial-letter/>initial-letter</a></li><li><a href=/css/properties/initial-letter-align/>initial-letter-align</a></li><li><a href=/css/properties/inline-size/>inline-size</a></li><li><a href=/css/properties/inset/>inset</a></li><li><a href=/css/properties/inset-block/>inset-block</a></li><li><a href=/css/properties/inset-block-end/>inset-block-end</a></li><li><a href=/css/properties/inset-block-start/>inset-block-start</a></li><li><a href=/css/properties/inset-inline/>inset-inline</a></li><li><a href=/css/properties/inset-inline-end/>inset-inline-end</a></li><li><a href=/css/properties/inset-inline-start/>inset-inline-start</a></li><li><a href=/css/properties/isolation/>isolation</a></li><li><a href=/css/properties/justify-content/>justify-content</a></li><li><a href=/css/properties/justify-items/>justify-items</a></li><li><a href=/css/properties/justify-self/>justify-self</a></li><li><a href=/css/properties/left/>left</a></li><li><a href=/css/properties/letter-spacing/>letter-spacing</a></li><li><a href=/css/properties/line-break/>line-break</a></li><li><a href=/css/properties/line-clamp/>line-clamp</a></li><li><a href=/css/properties/line-height/>line-height</a></li><li><a href=/css/properties/list-style/>list-style</a></li><li><a href=/css/properties/list-style-image/>list-style-image</a></li><li><a href=/css/properties/list-style-position/>list-style-position</a></li><li><a href=/css/properties/list-style-type/>list-style-type</a></li><li><a href=/css/properties/margin/>margin</a></li><li><a href=/css/properties/margin-block/>margin-block</a></li><li><a href=/css/properties/margin-block-end/>margin-block-end</a></li><li><a href=/css/properties/margin-block-start/>margin-block-start</a></li><li><a href=/css/properties/margin-bottom/>margin-bottom</a></li><li><a href=/css/properties/margin-inline/>margin-inline</a></li><li><a href=/css/properties/margin-inline-end/>margin-inline-end</a></li><li><a href=/css/properties/margin-inline-start/>margin-inline-start</a></li><li><a href=/css/properties/margin-left/>margin-left</a></li><li><a href=/css/properties/margin-right/>margin-right</a></li><li><a href=/css/properties/margin-top/>margin-top</a></li><li><a href=/css/properties/mask/>mask</a></li><li><a href=/css/properties/mask-border/>mask-border</a></li><li><a href=/css/properties/mask-border-mode/>mask-border-mode</a></li><li><a href=/css/properties/mask-border-outset/>mask-border-outset</a></li><li><a href=/css/properties/mask-border-repeat/>mask-border-repeat</a></li><li><a href=/css/properties/mask-border-slice/>mask-border-slice</a></li><li><a href=/css/properties/mask-border-source/>mask-border-source</a></li><li><a href=/css/properties/mask-border-width/>mask-border-width</a></li><li><a href=/css/properties/mask-clip/>mask-clip</a></li><li><a href=/css/properties/mask-composite/>mask-composite</a></li><li><a href=/css/properties/mask-image/>mask-image</a></li><li><a href=/css/properties/mask-mode/>mask-mode</a></li><li><a href=/css/properties/mask-origin/>mask-origin</a></li><li><a href=/css/properties/mask-position/>mask-position</a></li><li><a href=/css/properties/mask-repeat/>mask-repeat</a></li><li><a href=/css/properties/mask-size/>mask-size</a></li><li><a href=/css/properties/mask-type/>mask-type</a></li><li><a href=/css/properties/math-depth/>math-depth</a></li><li><a href=/css/properties/math-shift/>math-shift</a></li><li><a href=/css/properties/math-style/>math-style</a></li><li><a href=/css/properties/max-block-size/>max-block-size</a></li><li><a href=/css/properties/max-height/>max-height</a></li><li><a href=/css/properties/max-inline-size/>max-inline-size</a></li><li><a href=/css/properties/max-lines/>max-lines</a></li><li><a href=/css/properties/max-width/>max-width</a></li><li><a href=/css/properties/min-block-size/>min-block-size</a></li><li><a href=/css/properties/min-height/>min-height</a></li><li><a href=/css/properties/min-inline-size/>min-inline-size</a></li><li><a href=/css/properties/min-width/>min-width</a></li><li><a href=/css/properties/mix-blend-mode/>mix-blend-mode</a></li><li><a href=/css/properties/nav-down/>nav-down</a></li><li><a href=/css/properties/nav-left/>nav-left</a></li><li><a href=/css/properties/nav-right/>nav-right</a></li><li><a href=/css/properties/nav-up/>nav-up</a></li><li><a href=/css/properties/object-fit/>object-fit</a></li><li><a href=/css/properties/object-position/>object-position</a></li><li><a href=/css/properties/opacity/>opacity</a></li><li><a href=/css/properties/orphans/>orphans</a></li><li><a href=/css/properties/outline/>outline</a></li><li><a href=/css/properties/outline-color/>outline-color</a></li><li><a href=/css/properties/outline-offset/>outline-offset</a></li><li><a href=/css/properties/outline-style/>outline-style</a></li><li><a href=/css/properties/outline-width/>outline-width</a></li><li><a href=/css/properties/overflow/>overflow</a></li><li><a href=/css/properties/overflow-block/>overflow-block</a></li><li><a href=/css/properties/overflow-clip-margin/>overflow-clip-margin</a></li><li><a href=/css/properties/overflow-inline/>overflow-inline</a></li><li><a href=/css/properties/overflow-wrap/>overflow-wrap</a></li><li><a href=/css/properties/overflow-x/>overflow-x</a></li><li><a href=/css/properties/overflow-y/>overflow-y</a></li><li><a href=/css/properties/padding/>padding</a></li><li><a href=/css/properties/padding-block/>padding-block</a></li><li><a href=/css/properties/padding-block-end/>padding-block-end</a></li><li><a href=/css/properties/padding-block-start/>padding-block-start</a></li><li><a href=/css/properties/padding-bottom/>padding-bottom</a></li><li><a href=/css/properties/padding-inline/>padding-inline</a></li><li><a href=/css/properties/padding-inline-end/>padding-inline-end</a></li><li><a href=/css/properties/padding-inline-start/>padding-inline-start</a></li><li><a href=/css/properties/padding-left/>padding-left</a></li><li><a href=/css/properties/padding-right/>padding-right</a></li><li><a href=/css/properties/padding-top/>padding-top</a></li><li><a href=/css/properties/paint-order/>paint-order</a></li><li><a href=/css/properties/perspective/>perspective</a></li><li><a href=/css/properties/perspective-origin/>perspective-origin</a></li><li><a href=/css/properties/place-content/>place-content</a></li><li><a href=/css/properties/place-items/>place-items</a></li><li><a href=/css/properties/place-self/>place-self</a></li><li><a href=/css/properties/pointer-events/>pointer-events</a></li><li><a href=/css/properties/position/>position</a></li><li><a href=/css/properties/print-color-adjust/>print-color-adjust</a></li><li><a href=/css/properties/quotes/>quotes</a></li><li><a href=/css/properties/resize/>resize</a></li><li><a href=/css/properties/right/>right</a></li><li><a href=/css/properties/rotate/>rotate</a></li><li><a href=/css/properties/row-gap/>row-gap</a></li><li><a href=/css/properties/scale/>scale</a></li><li><a href=/css/properties/scroll-behavior/>scroll-behavior</a></li><li><a href=/css/properties/scroll-margin/>scroll-margin</a></li><li><a href=/css/properties/scroll-margin-block/>scroll-margin-block</a></li><li><a href=/css/properties/scroll-margin-block-end/>scroll-margin-block-end</a></li><li><a href=/css/properties/scroll-margin-block-start/>scroll-margin-block-start</a></li><li><a href=/css/properties/scroll-margin-bottom/>scroll-margin-bottom</a></li><li><a href=/css/properties/scroll-margin-inline/>scroll-margin-inline</a></li><li><a href=/css/properties/scroll-margin-inline-end/>scroll-margin-inline-end</a></li><li><a href=/css/properties/scroll-margin-inline-start/>scroll-margin-inline-start</a></li><li><a href=/css/properties/scroll-margin-left/>scroll-margin-left</a></li><li><a href=/css/properties/scroll-margin-right/>scroll-margin-right</a></li><li><a href=/css/properties/scroll-margin-top/>scroll-margin-top</a></li><li><a href=/css/properties/scroll-padding/>scroll-padding</a></li><li><a href=/css/properties/scroll-padding-block/>scroll-padding-block</a></li><li><a href=/css/properties/scroll-padding-block-end/>scroll-padding-block-end</a></li><li><a href=/css/properties/scroll-padding-block-start/>scroll-padding-block-start</a></li><li><a href=/css/properties/scroll-padding-bottom/>scroll-padding-bottom</a></li><li><a href=/css/properties/scroll-padding-inline/>scroll-padding-inline</a></li><li><a href=/css/properties/scroll-padding-inline-end/>scroll-padding-inline-end</a></li><li><a href=/css/properties/scroll-padding-inline-start/>scroll-padding-inline-start</a></li><li><a href=/css/properties/scroll-padding-left/>scroll-padding-left</a></li><li><a href=/css/properties/scroll-padding-right/>scroll-padding-right</a></li><li><a href=/css/properties/scroll-padding-top/>scroll-padding-top</a></li><li><a href=/css/properties/scroll-snap-align/>scroll-snap-align</a></li><li><a href=/css/properties/scroll-snap-stop/>scroll-snap-stop</a></li><li><a href=/css/properties/scroll-snap-type/>scroll-snap-type</a></li><li><a href=/css/properties/scroll-timeline/>scroll-timeline</a></li><li><a href=/css/properties/scroll-timeline-axis/>scroll-timeline-axis</a></li><li><a href=/css/properties/scroll-timeline-name/>scroll-timeline-name</a></li><li><a href=/css/properties/scrollbar-color/>scrollbar-color</a></li><li><a href=/css/properties/scrollbar-gutter/>scrollbar-gutter</a></li><li><a href=/css/properties/scrollbar-width/>scrollbar-width</a></li><li><a href=/css/properties/shape-image-threshold/>shape-image-threshold</a></li><li><a href=/css/properties/shape-margin/>shape-margin</a></li><li><a href=/css/properties/shape-outside/>shape-outside</a></li><li><a href=/css/properties/shape-rendering/>shape-rendering</a></li><li><a href=/css/properties/tab-size/>tab-size</a></li><li><a href=/css/properties/table-layout/>table-layout</a></li><li><a href=/css/properties/text-align/>text-align</a></li><li><a href=/css/properties/text-align-all/>text-align-all</a></li><li><a href=/css/properties/text-align-last/>text-align-last</a></li><li><a href=/css/properties/text-combine-upright/>text-combine-upright</a></li><li><a href=/css/properties/text-decoration/>text-decoration</a></li><li><a href=/css/properties/text-decoration-color/>text-decoration-color</a></li><li><a href=/css/properties/text-decoration-line/>text-decoration-line</a></li><li><a href=/css/properties/text-decoration-skip-ink/>text-decoration-skip-ink</a></li><li><a href=/css/properties/text-decoration-style/>text-decoration-style</a></li><li><a href=/css/properties/text-decoration-thickness/>text-decoration-thickness</a></li><li><a href=/css/properties/text-decoration-trim/>text-decoration-trim</a></li><li><a href=/css/properties/text-emphasis/>text-emphasis</a></li><li><a href=/css/properties/text-emphasis-color/>text-emphasis-color</a></li><li><a href=/css/properties/text-emphasis-position/>text-emphasis-position</a></li><li><a href=/css/properties/text-emphasis-style/>text-emphasis-style</a></li><li><a href=/css/properties/text-indent/>text-indent</a></li><li><a href=/css/properties/text-justify/>text-justify</a></li><li><a href=/css/properties/text-orientation/>text-orientation</a></li><li><a href=/css/properties/text-overflow/>text-overflow</a></li><li><a href=/css/properties/text-rendering/>text-rendering</a></li><li><a href=/css/properties/text-shadow/>text-shadow</a></li><li><a href=/css/properties/text-transform/>text-transform</a></li><li><a href=/css/properties/text-underline-offset/>text-underline-offset</a></li><li><a href=/css/properties/text-underline-position/>text-underline-position</a></li><li><a href=/css/properties/top/>top</a></li><li><a href=/css/properties/transform/>transform</a></li><li><a href=/css/properties/transform-box/>transform-box</a></li><li><a href=/css/properties/transform-origin/>transform-origin</a></li><li><a href=/css/properties/transform-style/>transform-style</a></li><li><a href=/css/properties/transition/>transition</a></li><li><a href=/css/properties/transition-delay/>transition-delay</a></li><li><a href=/css/properties/transition-duration/>transition-duration</a></li><li><a href=/css/properties/transition-property/>transition-property</a></li><li><a href=/css/properties/transition-timing-function/>transition-timing-function</a></li><li><a href=/css/properties/translate/>translate</a></li><li><a href=/css/properties/unicode-bidi/>unicode-bidi</a></li><li><a href=/css/properties/vertical-align/>vertical-align</a></li><li><a href=/css/properties/visibility/>visibility</a></li><li><a href=/css/properties/white-space/>white-space</a></li><li><a href=/css/properties/widows/>widows</a></li><li><a href=/css/properties/width/>width</a></li><li><a href=/css/properties/word-break/>word-break</a></li><li><a href=/css/properties/word-spacing/>word-spacing</a></li><li><a href=/css/properties/word-wrap/>word-wrap</a></li><li><a href=/css/properties/writing-mode/>writing-mode</a></li><li><a href=/css/properties/z-index/>z-index</a></li><li><a href=/css/properties/zoom/>zoom</a></li></ul></div><h2>Pseudo-Classes</h2><div><ul><li><a href=/css/pseudo-classes/active/>active</a></li><li><a href=/css/pseudo-classes/any-link/>any-link</a></li><li><a href=/css/pseudo-classes/autofill/>autofill</a></li><li><a href=/css/pseudo-classes/blank/>blank</a></li><li><a href=/css/pseudo-classes/checked/>checked</a></li><li><a href=/css/pseudo-classes/default/>default</a></li><li><a href=/css/pseudo-classes/defined/>defined</a></li><li><a href=/css/pseudo-classes/dir/>dir</a></li><li><a href=/css/pseudo-classes/disabled/>disabled</a></li><li><a href=/css/pseudo-classes/empty/>empty</a></li><li><a href=/css/pseudo-classes/enabled/>enabled</a></li><li><a href=/css/pseudo-classes/first-child/>first-child</a></li><li><a href=/css/pseudo-classes/first-of-type/>first-of-type</a></li><li><a href=/css/pseudo-classes/focus/>focus</a></li><li><a href=/css/pseudo-classes/focus-visible/>focus-visible</a></li><li><a href=/css/pseudo-classes/focus-within/>focus-within</a></li><li><a href=/css/pseudo-classes/fullscreen/>fullscreen</a></li><li><a href=/css/pseudo-classes/has/>has</a></li><li><a href=/css/pseudo-classes/hover/>hover</a></li><li><a href=/css/pseudo-classes/in-range/>in-range</a></li><li><a href=/css/pseudo-classes/indeterminate/>indeterminate</a></li><li><a href=/css/pseudo-classes/invalid/>invalid</a></li><li><a href=/css/pseudo-classes/is/>is</a></li><li><a href=/css/pseudo-classes/lang/>lang</a></li><li><a href=/css/pseudo-classes/last-child/>last-child</a></li><li><a href=/css/pseudo-classes/last-of-type/>last-of-type</a></li><li><a href=/css/pseudo-classes/link/>link</a></li><li><a href=/css/pseudo-classes/local-link/>local-link</a></li><li><a href=/css/pseudo-classes/modal/>modal</a></li><li><a href=/css/pseudo-classes/not/>not</a></li><li><a href=/css/pseudo-classes/nth-child/>nth-child</a></li><li><a href=/css/pseudo-classes/nth-col/>nth-col</a></li><li><a href=/css/pseudo-classes/nth-last-child/>nth-last-child</a></li><li><a href=/css/pseudo-classes/nth-last-col/>nth-last-col</a></li><li><a href=/css/pseudo-classes/nth-last-of-type/>nth-last-of-type</a></li><li><a href=/css/pseudo-classes/nth-of-type/>nth-of-type</a></li><li><a href=/css/pseudo-classes/only-child/>only-child</a></li><li><a href=/css/pseudo-classes/only-of-type/>only-of-type</a></li><li><a href=/css/pseudo-classes/optional/>optional</a></li><li><a href=/css/pseudo-classes/out-of-range/>out-of-range</a></li><li><a href=/css/pseudo-classes/picture-in-picture/>picture-in-picture</a></li><li><a href=/css/pseudo-classes/placeholder-shown/>placeholder-shown</a></li><li><a href=/css/pseudo-classes/popover-open/>popover-open</a></li><li><a href=/css/pseudo-classes/read-only/>read-only</a></li><li><a href=/css/pseudo-classes/read-write/>read-write</a></li><li><a href=/css/pseudo-classes/required/>required</a></li><li><a href=/css/pseudo-classes/root/>root</a></li><li><a href=/css/pseudo-classes/scope/>scope</a></li><li><a href=/css/pseudo-classes/target/>target</a></li><li><a href=/css/pseudo-classes/target-within/>target-within</a></li><li><a href=/css/pseudo-classes/valid/>valid</a></li><li><a href=/css/pseudo-classes/visited/>visited</a></li><li><a href=/css/pseudo-classes/where/>where</a></li></ul></div><h2>Pseudo-Elements</h2><div><ul><li><a href=/css/pseudo-elements/after/>after</a></li><li><a href=/css/pseudo-elements/backdrop/>backdrop</a></li><li><a href=/css/pseudo-elements/before/>before</a></li><li><a href=/css/pseudo-elements/details-content/>details-content</a></li><li><a href=/css/pseudo-elements/file-selector-button/>file-selector-button</a></li><li><a href=/css/pseudo-elements/first-letter/>first-letter</a></li><li><a href=/css/pseudo-elements/first-line/>first-line</a></li><li><a href=/css/pseudo-elements/highlight/>highlight</a></li><li><a href=/css/pseudo-elements/marker/>marker</a></li><li><a href=/css/pseudo-elements/part/>part</a></li><li><a href=/css/pseudo-elements/placeholder/>placeholder</a></li><li><a href=/css/pseudo-elements/selection/>selection</a></li></ul></div><h2>Units</h2><div><ul><li><a href=/css/units/cap/>cap</a></li><li><a href=/css/units/ch/>ch</a></li><li><a href=/css/units/cm/>cm</a></li><li><a href=/css/units/cqb/>cqb</a></li><li><a href=/css/units/cqh/>cqh</a></li><li><a href=/css/units/cqi/>cqi</a></li><li><a href=/css/units/cqmax/>cqmax</a></li><li><a href=/css/units/cqmin/>cqmin</a></li><li><a href=/css/units/cqw/>cqw</a></li><li><a href=/css/units/deg/>deg</a></li><li><a href=/css/units/dpcm/>dpcm</a></li><li><a href=/css/units/dpi/>dpi</a></li><li><a href=/css/units/dppx/>dppx</a></li><li><a href=/css/units/dvb/>dvb</a></li><li><a href=/css/units/dvh/>dvh</a></li><li><a href=/css/units/dvi/>dvi</a></li><li><a href=/css/units/dvmax/>dvmax</a></li><li><a href=/css/units/dvmin/>dvmin</a></li><li><a href=/css/units/dvw/>dvw</a></li><li><a href=/css/units/em/>em</a></li><li><a href=/css/units/ex/>ex</a></li><li><a href=/css/units/grad/>grad</a></li><li><a href=/css/units/ic/>ic</a></li><li><a href=/css/units/in/>in</a></li><li><a href=/css/units/lvb/>lvb</a></li><li><a href=/css/units/lvh/>lvh</a></li><li><a href=/css/units/lvi/>lvi</a></li><li><a href=/css/units/lvmax/>lvmax</a></li><li><a href=/css/units/lvmin/>lvmin</a></li><li><a href=/css/units/lvw/>lvw</a></li><li><a href=/css/units/mm/>mm</a></li><li><a href=/css/units/ms/>ms</a></li><li><a href=/css/units/pc/>pc</a></li><li><a href=/css/units/pt/>pt</a></li><li><a href=/css/units/px/>px</a></li><li><a href=/css/units/q/>Q</a></li><li><a href=/css/units/rad/>rad</a></li><li><a href=/css/units/rem/>rem</a></li><li><a href=/css/units/s/>s</a></li><li><a href=/css/units/svb/>svb</a></li><li><a href=/css/units/svh/>svh</a></li><li><a href=/css/units/svi/>svi</a></li><li><a href=/css/units/svmax/>svmax</a></li><li><a href=/css/units/svmin/>svmin</a></li><li><a href=/css/units/svw/>svw</a></li><li><a href=/css/units/turn/>turn</a></li><li><a href=/css/units/vb/>vb</a></li><li><a href=/css/units/vh/>vh</a></li><li><a href=/css/units/vi/>vi</a></li><li><a href=/css/units/vmax/>vmax</a></li><li><a href=/css/units/vmin/>vmin</a></li><li><a href=/css/units/vw/>vw</a></li></ul></div></div><div class=h1><a id=switch-js>JS</a></div><div id=list-js><h2>Overview</h2><div><ul><li><a href=/js/>Overview</a></li></ul></div><h2>AbortController</h2><div><ul><li><a href=/js/abortcontroller/abort/>abort</a></li><li><a href=/js/abortcontroller/abortcontroller/>AbortController</a></li><li><a href=/js/abortcontroller/signal/>signal</a></li></ul></div><h2>AbstractRange</h2><div><ul><li><a href=/js/abstractrange/collapsed/>collapsed</a></li><li><a href=/js/abstractrange/endcontainer/>endContainer</a></li><li><a href=/js/abstractrange/endoffset/>endOffset</a></li><li><a href=/js/abstractrange/startcontainer/>startContainer</a></li><li><a href=/js/abstractrange/startoffset/>startOffset</a></li></ul></div><h2>AbortSignal</h2><div><ul><li><a href=/js/abortsignal/abort/>abort</a></li><li><a href=/js/abortsignal/aborted/>aborted</a></li><li><a href=/js/abortsignal/reason/>reason</a></li><li><a href=/js/abortsignal/throwifaborted/>throwIfAborted</a></li><li><a href=/js/abortsignal/timeout/>timeout</a></li></ul></div><h2>ChildNode</h2><div><ul><li><a href=/js/childnode/after/>after</a></li><li><a href=/
10000
js/childnode/before/>before</a></li><li><a href=/js/childnode/remove/>remove</a></li><li><a href=/js/childnode/replacewith/>replaceWith</a></li></ul></div><h2>Comment</h2><div><ul><li><a href=/js/comment/comment/>Comment</a></li></ul></div><h2>console</h2><div><ul><li><a href=/js/console/assert/>assert</a></li><li><a href=/js/console/clear/>clear</a></li><li><a href=/js/console/count/>count</a></li><li><a href=/js/console/countreset/>countReset</a></li><li><a href=/js/console/debug/>debug</a></li><li><a href=/js/console/dir/>dir</a></li><li><a href=/js/console/dirxml/>dirxml</a></li><li><a href=/js/console/error/>error</a></li><li><a href=/js/console/group/>group</a></li><li><a href=/js/console/groupcollapsed/>groupCollapsed</a></li><li><a href=/js/console/groupend/>groupEnd</a></li><li><a href=/js/console/info/>info</a></li><li><a href=/js/console/log/>log</a></li><li><a href=/js/console/table/>table</a></li><li><a href=/js/console/time/>time</a></li><li><a href=/js/console/timeend/>timeEnd</a></li><li><a href=/js/console/timelog/>timeLog</a></li><li><a href=/js/console/trace/>trace</a></li><li><a href=/js/console/warn/>warn</a></li></ul></div><h2>CustomEvent</h2><div><ul><li><a href=/js/customevent/customevent/>CustomEvent</a></li><li><a href=/js/customevent/detail/>detail</a></li></ul></div><h2>Declarations</h2><div><ul><li><a href=/js/declarations/const/>const</a></li><li><a href=/js/declarations/let/>let</a></li><li><a href=/js/declarations/var/>var</a></li></ul></div><h2>Document</h2><div><ul><li><a href=/js/document/adoptnode/>adoptNode</a></li><li><a href=/js/document/body/>body</a></li><li><a href=/js/document/characterset/>characterSet</a></li><li><a href=/js/document/close/>close</a></li><li><a href=/js/document/compatmode/>compatMode</a></li><li><a href=/js/document/contenttype/>contentType</a></li><li><a href=/js/document/cookie/>cookie</a></li><li><a href=/js/document/createcdatasection/>createCDATASection</a></li><li><a href=/js/document/createcomment/>createComment</a></li><li><a href=/js/document/createdocumentfragment/>createDocumentFragment</a></li><li><a href=/js/document/createelement/>createElement</a></li><li><a href=/js/document/createelementns/>createElementNS</a></li><li><a href=/js/document/createprocessinginstruction/>createProcessingInstruction</a></li><li><a href=/js/document/createtextnode/>createTextNode</a></li><li><a href=/js/document/currentscript/>currentScript</a></li><li><a href=/js/document/defaultview/>defaultView</a></li><li><a href=/js/document/designmode/>designMode</a></li><li><a href=/js/document/dir/>dir</a></li><li><a href=/js/document/doctype/>doctype</a></li><li><a href=/js/document/document/>Document</a></li><li><a href=/js/document/documentelement/>documentElement</a></li><li><a href=/js/document/documenturi/>documentURI</a></li><li><a href=/js/document/domain/>domain</a></li><li><a href=/js/document/embeds/>embeds</a></li><li><a href=/js/document/exitpictureinpicture/>exitPictureInPicture</a></li><li><a href=/js/document/forms/>forms</a></li><li><a href=/js/document/getelementsbyclassname/>getElementsByClassName</a></li><li><a href=/js/document/getelementsbyname/>getElementsByName</a></li><li><a href=/js/document/getelementsbytagname/>getElementsByTagName</a></li><li><a href=/js/document/getelementsbytagnamens/>getElementsByTagNameNS</a></li><li><a href=/js/document/hasfocus/>hasFocus</a></li><li><a href=/js/document/head/>head</a></li><li><a href=/js/document/hidden/>hidden</a></li><li><a href=/js/document/images/>images</a></li><li><a href=/js/document/implementation/>implementation</a></li><li><a href=/js/document/importnode/>importNode</a></li><li><a href=/js/document/lastmodified/>lastModified</a></li><li><a href=/js/document/links/>links</a></li><li><a href=/js/document/location/>location</a></li><li><a href=/js/document/onreadystatechange/>onreadystatechange</a></li><li><a href=/js/document/onvisibilitychange/>onvisibilitychange</a></li><li><a href=/js/document/open/>open</a></li><li><a href=/js/document/parsehtmlunsafe/>parseHTMLUnsafe</a></li><li><a href=/js/document/pictureinpictureenabled/>pictureInPictureEnabled</a></li><li><a href=/js/document/plugins/>plugins</a></li><li><a href=/js/document/readystate/>readyState</a></li><li><a href=/js/document/referrer/>referrer</a></li><li><a href=/js/document/scripts/>scripts</a></li><li><a href=/js/document/title/>title</a></li><li><a href=/js/document/url/>URL</a></li><li><a href=/js/document/visibilitystate/>visibilityState</a></li><li><a href=/js/document/write/>write</a></li><li><a href=/js/document/writeln/>writeln</a></li></ul></div><h2>DocumentFragment</h2><div><ul><li><a href=/js/documentfragment/documentfragment/>DocumentFragment</a></li></ul></div><h2>DocumentOrShadowRoot</h2><div><ul><li><a href=/js/documentorshadowroot/activeelement/>activeElement</a></li><li><a href=/js/documentorshadowroot/pictureinpictureelement/>pictureInPictureElement</a></li></ul></div><h2>DOMImplementation</h2><div><ul><li><a href=/js/domimplementation/createdocument/>createDocument</a></li><li><a href=/js/domimplementation/createdocumenttype/>createDocumentType</a></li><li><a href=/js/domimplementation/createhtmldocument/>createHTMLDocument</a></li></ul></div><h2>DOMStringList</h2><div><ul><li><a href=/js/domstringlist/contains/>contains</a></li><li><a href=/js/domstringlist/item/>item</a></li><li><a href=/js/domstringlist/length/>length</a></li></ul></div><h2>DOMTokenList</h2><div><ul><li><a href=/js/domtokenlist/add/>add</a></li><li><a href=/js/domtokenlist/contains/>contains</a></li><li><a href=/js/domtokenlist/item/>item</a></li><li><a href=/js/domtokenlist/length/>length</a></li><li><a href=/js/domtokenlist/remove/>remove</a></li><li><a href=/js/domtokenlist/replace/>replace</a></li><li><a href=/js/domtokenlist/supports/>supports</a></li><li><a href=/js/domtokenlist/toggle/>toggle</a></li><li><a href=/js/domtokenlist/value/>value</a></li></ul></div><h2>Element</h2><div><ul><li><a href=/js/element/attachshadow/>attachShadow</a></li><li><a href=/js/element/classlist/>classList</a></li><li><a href=/js/element/classname/>className</a></li><li><a href=/js/element/closest/>closest</a></li><li><a href=/js/element/getattribute/>getAttribute</a></li><li><a href=/js/element/getattributenames/>getAttributeNames</a></li><li><a href=/js/element/getattributens/>getAttributeNS</a></li><li><a href=/js/element/hasattribute/>hasAttribute</a></li><li><a href=/js/element/hasattributens/>hasAttributeNS</a></li><li><a href=/js/element/hasattributes/>hasAttributes</a></li><li><a href=/js/element/id/>id</a></li><li><a href=/js/element/innerhtml/>innerHTML</a></li><li><a href=/js/element/insertadjacenthtml/>insertAdjacentHTML</a></li><li><a href=/js/element/localname/>localName</a></li><li><a href=/js/element/matches/>matches</a></li><li><a href=/js/element/namespaceuri/>namespaceURI</a></li><li><a href=/js/element/outerhtml/>outerHTML</a></li><li><a href=/js/element/prefix/>prefix</a></li><li><a href=/js/element/removeattribute/>removeAttribute</a></li><li><a href=/js/element/removeattributens/>removeAttributeNS</a></li><li><a href=/js/element/setattribute/>setAttribute</a></li><li><a href=/js/element/setattributens/>setAttributeNS</a></li><li><a href=/js/element/shadowroot/>shadowRoot</a></li><li><a href=/js/element/slot/>slot</a></li><li><a href=/js/element/tagname/>tagName</a></li><li><a href=/js/element/toggleattribute/>toggleAttribute</a></li></ul></div><h2>Event</h2><div><ul><li><a href=/js/event/bubbles/>bubbles</a></li><li><a href=/js/event/cancelable/>cancelable</a></li><li><a href=/js/event/composed/>composed</a></li><li><a href=/js/event/composedpath/>composedPath</a></li><li><a href=/js/event/currenttarget/>currentTarget</a></li><li><a href=/js/event/defaultprevented/>defaultPrevented</a></li><li><a href=/js/event/event/>Event</a></li><li><a href=/js/event/eventphase/>eventPhase</a></li><li><a href=/js/event/istrusted/>isTrusted</a></li><li><a href=/js/event/preventdefault/>preventDefault</a></li><li><a href=/js/event/stopimmediatepropagation/>stopImmediatePropagation</a></li><li><a href=/js/event/stoppropagation/>stopPropagation</a></li><li><a href=/js/event/target/>target</a></li><li><a href=/js/event/timestamp/>timeStamp</a></li><li><a href=/js/event/type/>type</a></li></ul></div><h2>EventTarget</h2><div><ul><li><a href=/js/eventtarget/addeventlistener/>addEventListener</a></li><li><a href=/js/eventtarget/dispatchevent/>dispatchEvent</a></li><li><a href=/js/eventtarget/eventtarget/>EventTarget</a></li><li><a href=/js/eventtarget/removeeventlistener/>removeEventListener</a></li></ul></div><h2>HTMLAllCollection</h2><div><ul><li><a href=/js/htmlallcollection/item/>item</a></li><li><a href=/js/htmlallcollection/length/>length</a></li><li><a href=/js/htmlallcollection/nameditem/>namedItem</a></li></ul></div><h2>HTMLBaseElement</h2><div><ul><li><a href=/js/htmlbaseelement/href/>href</a></li><li><a href=/js/htmlbaseelement/target/>target</a></li></ul></div><h2>HTMLCollection</h2><div><ul><li><a href=/js/htmlcollection/item/>item</a></li><li><a href=/js/htmlcollection/length/>length</a></li><li><a href=/js/htmlcollection/nameditem/>namedItem</a></li></ul></div><h2>HTMLDialogElement</h2><div><ul><li><a href=/js/htmldialogelement/close/>close</a></li><li><a href=/js/htmldialogelement/open/>open</a></li><li><a href=/js/htmldialogelement/returnvalue/>returnValue</a></li><li><a href=/js/htmldialogelement/show/>show</a></li><li><a href=/js/htmldialogelement/showmodal/>showModal</a></li></ul></div><h2>HTMLElement</h2><div><ul><li><a href=/js/htmlelement/accesskey/>accessKey</a></li><li><a href=/js/htmlelement/accesskeylabel/>accessKeyLabel</a></li><li><a href=/js/htmlelement/attachinternals/>attachInternals</a></li><li><a href=/js/htmlelement/autocapitalize/>autocapitalize</a></li><li><a href=/js/htmlelement/autocorrect/>autocorrect</a></li><li><a href=/js/htmlelement/click/>click</a></li><li><a href=/js/htmlelement/constructor/>constructor</a></li><li><a href=/js/htmlelement/dir/>dir</a></li><li><a href=/js/htmlelement/draggable/>draggable</a></li><li><a href=/js/htmlelement/hidden/>hidden</a></li><li><a href=/js/htmlelement/hidepopover/>hidePopover</a></li><li><a href=/js/htmlelement/inert/>inert</a></li><li><a href=/js/htmlelement/innertext/>innerText</a></li><li><a href=/js/htmlelement/lang/>lang</a></li><li><a href=/js/htmlelement/outertext/>outerText</a></li><li><a href=/js/htmlelement/popover/>popover</a></li><li><a href=/js/htmlelement/showpopover/>showPopover</a></li><li><a href=/js/htmlelement/spellcheck/>spellcheck</a></li><li><a href=/js/htmlelement/title/>title</a></li><li><a href=/js/htmlelement/togglepopover/>togglePopover</a></li><li><a href=/js/htmlelement/translate/>translate</a></li><li><a href=/js/htmlelement/writingsuggestions/>writingSuggestions</a></li></ul></div><h2>HTMLFormControlsCollection</h2><div><ul><li><a href=/js/htmlformcontrolscollection/item/>item</a></li><li><a href=/js/htmlformcontrolscollection/length/>length</a></li><li><a href=/js/htmlformcontrolscollection/nameditem/>namedItem</a></li></ul></div><h2>HTMLLinkElement</h2><div><ul><li><a href=/js/htmllinkelement/crossorigin/>crossOrigin</a></li><li><a href=/js/htmllinkelement/href/>href</a></li><li><a href=/js/htmllinkelement/rel/>rel</a></li></ul></div><h2>HTMLOptionsCollection</h2><div><ul><li><a href=/js/htmloptionscollection/add/>add</a></li><li><a href=/js/htmloptionscollection/item/>item</a></li><li><a href=/js/htmloptionscollection/length/>length</a></li><li><a href=/js/htmloptionscollection/nameditem/>namedItem</a></li><li><a href=/js/htmloptionscollection/remove/>remove</a></li><li><a href=/js/htmloptionscollection/selectedindex/>selectedIndex</a></li></ul></div><h2>HTMLOrSVGElement</h2><div><ul><li><a href=/js/htmlorsvgelement/autofocus/>autofocus</a></li><li><a href=/js/htmlorsvgelement/blur/>blur</a></li><li><a href=/js/htmlorsvgelement/dataset/>dataset</a></li><li><a href=/js/htmlorsvgelement/focus/>focus</a></li><li><a href=/js/htmlorsvgelement/nonce/>nonce</a></li><li><a href=/js/htmlorsvgelement/tabindex/>tabIndex</a></li></ul></div><h2>HTMLVideoElement</h2><div><ul><li><a href=/js/htmlvideoelement/autopictureinpicture/>autoPictureInPicture</a></li><li><a href=/js/htmlvideoelement/disablepictureinpicture/>disablePictureInPicture</a></li><li><a href=/js/htmlvideoelement/requestpictureinpicture/>requestPictureInPicture</a></li></ul></div><h2>Iterations</h2><div><ul><li><a href=/js/iterations/do-while/>do-while</a></li><li><a href=/js/iterations/for/>for</a></li><li><a href=/js/iterations/for-await-of/>for-await-of</a></li><li><a href=/js/iterations/for-in/>for-in</a></li><li><a href=/js/iterations/for-of/>for-of</a></li><li><a href=/js/iterations/while/>while</a></li></ul></div><h2>Location</h2><div><ul><li><a href=/js/location/ancestororigins/>ancestorOrigins</a></li></ul></div><h2>MutationObserver</h2><div><ul><li><a href=/js/mutationobserver/disconnect/>disconnect</a></li><li><a href=/js/mutationobserver/mutationobserver/>MutationObserver</a></li><li><a href=/js/mutationobserver/observe/>observe</a></li><li><a href=/js/mutationobserver/takerecords/>takeRecords</a></li></ul></div><h2>MutationRecord</h2><div><ul><li><a href=/js/mutationrecord/addednodes/>addedNodes</a></li><li><a href=/js/mutationrecord/attributename/>attributeName</a></li><li><a href=/js/mutationrecord/attributenamespace/>attributeNamespace</a></li><li><a href=/js/mutationrecord/nextsibling/>nextSibling</a></li><li><a href=/js/mutationrecord/oldvalue/>oldValue</a></li><li><a href=/js/mutationrecord/previoussibling/>previousSibling</a></li><li><a href=/js/mutationrecord/removednodes/>removedNodes</a></li><li><a href=/js/mutationrecord/target/>target</a></li><li><a href=/js/mutationrecord/type/>type</a></li></ul></div><h2>Node</h2><div><ul><li><a href=/js/node/baseuri/>baseURI</a></li><li><a href=/js/node/childnodes/>childNodes</a></li><li><a href=/js/node/clonenode/>cloneNode</a></li><li><a href=/js/node/comparedocumentposition/>compareDocumentPosition</a></li><li><a href=/js/node/contains/>contains</a></li><li><a href=/js/node/firstchild/>firstChild</a></li><li><a href=/js/node/getrootnode/>getRootNode</a></li><li><a href=/js/node/haschildnodes/>hasChildNodes</a></li><li><a href=/js/node/isconnected/>isConnected</a></li><li><a href=/js/node/isequalnode/>isEqualNode</a></li><li><a href=/js/node/lastchild/>lastChild</a></li><li><a href=/js/node/nextsibling/>nextSibling</a></li><li><a href=/js/node/nodename/>nodeName</a></li><li><a href=/js/node/nodetype/>nodeType</a></li><li><a href=/js/node/normalize/>normalize</a></li><li><a href=/js/node/ownerdocument/>ownerDocument</a></li><li><a href=/js/node/parentelement/>parentElement</a></li><li><a href=/js/node/parentnode/>parentNode</a></li><li><a href=/js/node/previoussibling/>previousSibling</a></li></ul></div><h2>NodeList</h2><div><ul><li><a href=/js/nodelist/item/>item</a></li><li><a href=/js/nodelist/length/>length</a></li></ul></div><h2>NonDocumentTypeChildNode</h2><div><ul><li><a href=/js/nondocumenttypechildnode/nextelementsibling/>nextElementSibling</a></li><li><a href=/js/nondocumenttypechildnode/previouselementsibling/>previousElementSibling</a></li></ul></div><h2>NonElementParentNode</h2><div><ul><li><a href=/js/nonelementparentnode/getelementbyid/>getElementById</a></li></ul></div><h2>ParentNode</h2><div><ul><li><a href=/js/parentnode/append/>append</a></li><li><a href=/js/parentnode/children/>children</a></li><li><a href=/js/parentnode/firstelementchild/>firstElementChild</a></li><li><a href=/js/parentnode/lastelementchild/>lastElementChild</a></li><li><a href=/js/parentnode/prepend/>prepend</a></li><li><a href=/js/parentnode/queryselector/>querySelector</a></li><li><a href=/js/parentnode/queryselectorall/>querySelectorAll</a></li><li><a href=/js/parentnode/replacechildren/>replaceChildren</a></li></ul></div><h2>Prompts</h2><div><ul><li><a href=/js/prompts/alert/>alert</a></li><li><a href=/js/prompts/confirm/>confirm</a></li><li><a href=/js/prompts/prompt/>prompt</a></li></ul></div><h2>RadioNodeList</h2><div><ul><li><a href=/js/radionodelist/value/>value</a></li></ul></div><h2>Range</h2><div><ul><li><a href=/js/range/commonancestorcontainer/>commonAncestorContainer</a></li><li><a href=/js/range/comparepoint/>comparePoint</a></li><li><a href=/js/range/createcontextualfragment/>createContextualFragment</a></li><li><a href=/js/range/intersectsnode/>intersectsNode</a></li><li><a href=/js/range/range/>Range</a></li></ul></div><h2>Slottable</h2><div><ul><li><a href=/js/slottable/assignedslot/>assignedSlot</a></li></ul></div><h2>Statements</h2><div><ul><li><a href=/js/statements/if/>if</a></li><li><a href=/js/statements/switch/>switch</a></li><li><a href=/js/statements/try/>try</a></li></ul></div><h2>StaticRange</h2><div><ul><li><a href=/js/staticrange/staticrange/>StaticRange</a></li></ul></div><h2>Text</h2><div><ul><li><a href=/js/text/splittext/>splitText</a></li><li><a href=/js/text/text/>Text</a></li><li><a href=/js/text/wholetext/>wholeText</a></li></ul></div><h2>Window</h2><div><ul><li><a href=/js/window/location/>location</a></li></ul></div><h2>WindowOrWorkerGlobalScope</h2><div><ul><li><a href=/js/windoworworkerglobalscope/atob/>atob</a></li><li><a href=/js/windoworworkerglobalscope/btoa/>btoa</a></li><li><a href=/js/windoworworkerglobalscope/clearinterval/>clearInterval</a></li><li><a href=/js/windoworworkerglobalscope/cleartimeout/>clearTimeout</a></li><li><a href=/js/windoworworkerglobalscope/createimagebitmap/>createImageBitmap</a></li><li><a href=/js/windoworworkerglobalscope/crossoriginisolated/>crossOriginIsolated</a></li><li><a href=/js/windoworworkerglobalscope/issecurecontext/>isSecureContext</a></li><li><a href=/js/windoworworkerglobalscope/origin/>origin</a></li><li><a href=/js/windoworworkerglobalscope/queuemicrotask/>queueMicrotask</a></li><li><a href=/js/windoworworkerglobalscope/reporterror/>reportError</a></li><li><a href=/js/windoworworkerglobalscope/setinterval/>setInterval</a></li><li><a href=/js/windoworworkerglobalscope/settimeout/>setTimeout</a></li><li><a href=/js/windoworworkerglobalscope/structuredclone/>structuredClone</a></li></ul></div><h2>Other</h2><div><ul><li><a href=/js/array/>Array</a></li><li><a href=/js/comments/>Comments</a></li><li><a href=/js/date/>Date</a></li><li><a href=/js/enable/>Enable</a></li><li><a href=/js/functions/>Functions</a></li><li><a href=/js/infinity/>Infinity</a></li><li><a href=/js/print/>print</a></li></ul></div></div><div class=h1><a id=switch-php>PHP</a></div><div id=list-php><h2>Overview</h2><div><ul><li><a href=/php/>Overview</a></li></ul></div><h2>Array</h2><div><ul><li><a href=/php/array/array/>array</a></li><li><a href=/php/array/array_all/>array_all</a></li><li><a href=/php/array/array_any/>array_any</a></li><li><a href=/php/array/array_change_key_case/>array_change_key_case</a></li><li><a href=/php/array/array_chunk/>array_chunk</a></li><li><a href=/php/array/array_column/>array_column</a></li><li><a href=/php/array/array_combine/>array_combine</a></li><li><a href=/php/array/array_count_values/>array_count_values</a></li><li><a href=/php/array/array_diff/>array_diff</a></li><li><a href=/php/array/array_diff_assoc/>array_diff_assoc</a></li><li><a href=/php/array/array_diff_key/>array_diff_key</a></li><li><a href=/php/array/array_diff_uassoc/>array_diff_uassoc</a></li><li><a href=/php/array/array_diff_ukey/>array_diff_ukey</a></li><li><a href=/php/array/array_fill/>array_fill</a></li><li><a href=/php/array/array_fill_keys/>array_fill_keys</a></li><li><a href=/php/array/array_filter/>array_filter</a></li><li><a href=/php/array/array_find/>array_find</a></li><li><a href=/php/array/array_find_key/>array_find_key</a></li><li><a href=/php/array/array_first/>array_first</a></li><li><a href=/php/array/array_flip/>array_flip</a></li><li><a href=/php/array/array_intersect/>array_intersect</a></li><li><a href=/php/array/array_intersect_assoc/>array_intersect_assoc</a></li><li><a href=/php/array/array_intersect_key/>array_intersect_key</a></li><li><a href=/php/array/array_intersect_uassoc/>array_intersect_uassoc</a></li><li><a href=/php/array/array_intersect_ukey/>array_intersect_ukey</a></li><li><a href=/php/array/array_key_exists/>array_key_exists</a></li><li><a href=/php/array/array_key_first/>array_key_first</a></li><li><a href=/php/array/array_key_last/>array_key_last</a></li><li><a href=/php/array/array_keys/>array_keys</a></li><li><a href=/php/array/array_last/>array_last</a></li><li><a href=/php/array/array_map/>array_map</a></li><li><a href=/php/array/array_merge/>array_merge</a></li><li><a href=/php/array/array_merge_recursive/>array_merge_recursive</a></li><li><a href=/php/array/array_multisort/>array_multisort</a></li><li><a href=/php/array/array_pad/>array_pad</a></li><li><a href=/php/array/array_pop/>array_pop</a></li><li><a href=/php/array/array_product/>array_product</a></li><li><a href=/php/array/array_push/>array_push</a></li><li><a href=/php/array/array_rand/>array_rand</a></li><li><a href=/php/array/array_reduce/>array_reduce</a></li><li><a href=/php/array/array_replace/>array_replace</a></li><li><a href=/php/array/array_replace_recursive/>array_replace_recursive</a></li><li><a href=/php/array/array_reverse/>array_reverse</a></li><li><a href=/php/array/array_search/>array_search</a></li><li><a href=/php/array/array_shift/>array_shift</a></li><li><a href=/php/array/array_slice/>array_slice</a></li><li><a href=/php/array/array_splice/>array_splice</a></li><li><a href=/php/array/array_sum/>array_sum</a></li><li><a href=/php/array/array_udiff/>array_udiff</a></li><li><a href=/php/array/array_udiff_assoc/>array_udiff_assoc</a></li><li><a href=/php/array/array_udiff_uassoc/>array_udiff_uassoc</a></li><li><a href=/php/array/array_uintersect/>array_uintersect</a></li><li><a href=/php/array/array_uintersect_assoc/>array_uintersect_assoc</a></li><li><a href=/php/array/array_uintersect_uassoc/>array_uintersect_uassoc</a></li><li><a href=/php/array/array_unique/>array_unique</a></li><li><a href=/php/array/array_unshift/>array_unshift</a></li><li><a href=/php/array/array_values/>array_values</a></li><li><a href=/php/array/array_walk/>array_walk</a></li><li><a href=/php/array/array_walk_recursive/>array_walk_recursive</a></li><li><a href=/php/array/arsort/>arsort</a></li><li><a href=/php/array/asort/>asort</a></li><li><a href=/php/array/compact/>compact</a></li><li><a href=/php/array/count/>count</a></li><li><a href=/php/array/current/>current</a></li><li><a href=/php/array/end/>end</a></li><li><a href=/php/array/extract/>extract</a></li><li><a href=/php/array/in_array/>in_array</a></li><li><a href=/php/array/key/>key</a></li><li><a href=/php/array/key_exists/>key_exists</a></li><li><a href=/php/array/krsort/>krsort</a></li><li><a href=/php/array/ksort/>ksort</a></li><li><a href=/php/array/list/>list</a></li><li><a href=/php/array/natcasesort/>natcasesort</a></li><li><a href=/php/array/natsort/>natsort</a></li><li><a href=/php/array/next/>next</a></li><li><a href=/php/array/pos/>pos</a></li><li><a href=/php/array/prev/>prev</a></li><li><a href=/php/array/range/>range</a></li><li><a href=/php/array/reset/>reset</a></li><li><a href=/php/array/rsort/>rsort</a></li><li><a href=/php/array/shuffle/>shuffle</a></li><li><a href=/php/array/sizeof/>sizeof</a></li><li><a href=/php/array/sort/>sort</a></li><li><a href=/php/array/uasort/>uasort</a></li><li><a href=/php/array/uksort/>uksort</a></li><li><a href=/php/array/usort/>usort</a></li></ul></div><h2>BCMath</h2><div><ul><li><a href=/php/bcmath/bcadd/>bcadd</a></li><li><a href=/php/bcmath/bcceil/>bcceil</a></li><li><a href=/php/bcmath/bccomp/>bccomp</a></li><li><a href=/php/bcmath/bcdiv/>bcdiv</a></li><li><a href=/php/bcmath/bcdivmod/>bcdivmod</a></li><li><a href=/php/bcmath/bcfloor/>bcfloor</a></li><li><a href=/php/bcmath/bcmod/>bcmod</a></li><li><a href=/php/bcmath/bcmul/>bcmul</a></li><li><a href=/php/bcmath/bcpow/>bcpow</a></li><li><a href=/php/bcmath/bcpowmod/>bcpowmod</a></li><li><a href=/php/bcmath/bcround/>bcround</a></li><li><a href=/php/bcmath/bcscale/>bcscale</a></li><li><a href=/php/bcmath/bcsqrt/>bcsqrt</a></li><li><a href=/php/bcmath/bcsub/>bcsub</a></li></ul></div><h2>bzip2</h2><div><ul><li><a href=/php/bzip2/bzclose/>bzclose</a></li><li><a href=/php/bzip2/bzcompress/>bzcompress</a></li><li><a href=/php/bzip2/bzdecompress/>bzdecompress</a></li><li><a href=/php/bzip2/bzerrno/>bzerrno</a></li><li><a href=/php/bzip2/bzerror/>bzerror</a></li><li><a href=/php/bzip2/bzerrstr/>bzerrstr</a></li><li><a href=/php/bzip2/bzflush/>bzflush</a></li><li><a href=/php/bzip2/bzopen/>bzopen</a></li><li><a href=/php/bzip2/bzread/>bzread</a></li><li><a href=/php/bzip2/bzwrite/>bzwrite</a></li></ul></div><h2>Calendar</h2><div><ul><li><a href=/php/calendar/cal_days_in_month/>cal_days_in_month</a></li><li><a href=/php/calendar/cal_from_jd/>cal_from_jd</a></li><li><a href=/php/calendar/cal_info/>cal_info</a></li><li><a href=/php/calendar/cal_to_jd/>cal_to_jd</a></li><li><a href=/php/calendar/easter_date/>easter_date</a></li><li><a href=/php/calendar/easter_days/>easter_days</a></li><li><a href=/php/calendar/frenchtojd/>frenchtojd</a></li><li><a href=/php/calendar/gregoriantojd/>gregoriantojd</a></li><li><a href=/php/calendar/jddayofweek/>jddayofweek</a></li><li><a href=/php/calendar/jdmonthname/>jdmonthname</a></li><li><a href=/php/calendar/jdtofrench/>jdtofrench</a></li><li><a href=/php/calendar/jdtogregorian/>jdtogregorian</a></li><li><a href=/php/calendar/jdtojewish/>jdtojewish</a></li><li><a href=/php/calendar/jdtojulian/>jdtojulian</a></li><li><a href=/php/calendar/jdtounix/>jdtounix</a></li><li><a href=/php/calendar/jewishtojd/>jewishtojd</a></li><li><a href=/php/calendar/juliantojd/>juliantojd</a></li><li><a href=/php/calendar/unixtojd/>unixtojd</a></li></ul></div><h2>Class / Object</h2><div><ul><li><a href=/php/class-object/class_alias/>class_alias</a></li><li><a href=/php/class-object/class_exists/>class_exists</a></li><li><a href=/php/class-object/get_called_class/>get_called_class</a></li><li><a href=/php/class-object/get_class/>get_class</a></li><li><a href=/php/class-object/get_class_methods/>get_class_methods</a></li><li><a href=/php/class-object/get_class_vars/>get_class_vars</a></li><li><a href=/php/class-object/get_declared_classes/>get_declared_classes</a></li><li><a href=/php/class-object/get_declared_interfaces/>get_declared_interfaces</a></li><li><a href=/php/class-object/get_declared_traits/>get_declared_traits</a></li><li><a href=/php/class-object/get_object_vars/>get_object_vars</a></li><li><a href=/php/class-object/get_parent_class/>get_parent_class</a></li><li><a href=/php/class-object/interface_exists/>interface_exists</a></li><li><a href=/php/class-object/is_a/>is_a</a></li><li><a href=/php/class-object/is_subclass_of/>is_subclass_of</a></li><li><a href=/php/class-object/method_exists/>method_exists</a></li><li><a href=/php/class-object/property_exists/>property_exists</a></li><li><a href=/php/class-object/trait_exists/>trait_exists</a></li></ul></div><h2>Ctype</h2><div><ul><li><a href=/php/ctype/ctype_alnum/>ctype_alnum</a></li><li><a href=/php/ctype/ctype_alpha/>ctype_alpha</a></li><li><a href=/php/ctype/ctype_cntrl/>ctype_cntrl</a></li><li><a href=/php/ctype/ctype_digit/>ctype_digit</a></li><li><a href=/php/ctype/ctype_graph/>ctype_graph</a></li><li><a href=/php/ctype/ctype_lower/>ctype_lower</a></li><li><a href=/php/ctype/ctype_print/>ctype_print</a></li><li><a href=/php/ctype/ctype_punct/>ctype_punct</a></li><li><a href=/php/ctype/ctype_space/>ctype_space</a></li><li><a href=/php/ctype/ctype_upper/>ctype_upper</a></li><li><a href=/php/ctype/ctype_xdigit/>ctype_xdigit</a></li></ul></div><h2>cURL</h2><div><ul><li><a href=/php/curl/curl_close/>curl_close</a></li><li><a href=/php/curl/curl_copy_handle/>curl_copy_handle</a></li><li><a href=/php/curl/curl_errno/>curl_errno</a></li><li><a href=/php/curl/curl_error/>curl_error</a></li><li><a href=/php/curl/curl_escape/>curl_escape</a></li><li><a href=/php/curl/curl_exec/>curl_exec</a></li><li><a href=/php/curl/curl_getinfo/>curl_getinfo</a></li><li><a href=/php/curl/curl_init/>curl_init</a></li><li><a href=/php/curl/curl_multi_add_handle/>curl_multi_add_handle</a></li><li><a href=/php/curl/curl_multi_close/>curl_multi_close</a></li><li><a href=/php/curl/curl_multi_errno/>curl_multi_errno</a></li><li><a href=/php/curl/curl_multi_exec/>curl_multi_exec</a></li><li><a href=/php/curl/curl_multi_getcontent/>curl_multi_getcontent</a></li><li><a href=/php/curl/curl_multi_info_read/>curl_multi_info_read</a></li><li><a href=/php/curl/curl_multi_init/>curl_multi_init</a></li><li><a href=/php/curl/curl_multi_remove_handle/>curl_multi_remove_handle</a></li><li><a href=/php/curl/curl_multi_select/>curl_multi_select</a></li><li><a href=/php/curl/curl_multi_setopt/>curl_multi_setopt</a></li><li><a href=/php/curl/curl_multi_strerror/>curl_multi_strerror</a></li><li><a href=/php/curl/curl_pause/>curl_pause</a></li><li><a href=/php/curl/curl_reset/>curl_reset</a></li><li><a href=/php/curl/curl_setopt/>curl_setopt</a></li><li><a href=/php/curl/curl_setopt_array/>curl_setopt_array</a></li><li><a href=/php/curl/curl_share_close/>curl_share_close</a></li><li><a href=/php/curl/curl_share_errno/>curl_share_errno</a></li><li><a href=/php/curl/curl_share_init/>curl_share_init</a></li><li><a href=/php/curl/curl_share_init_persistent/>curl_share_init_persistent</a></li><li><a href=/php/curl/curl_share_setopt/>curl_share_setopt</a></li><li><a href=/php/curl/curl_share_strerror/>curl_share_strerror</a></li><li><a href=/php/curl/curl_strerror/>curl_strerror</a></li><li><a href=/php/curl/curl_unescape/>curl_unescape</a></li><li><a href=/php/curl/curl_upkeep/>curl_upkeep</a></li><li><a href=/php/curl/curl_version/>curl_version</a></li></ul></div><h2>Date / Time</h2><div><ul><li><a href=/php/date-time/checkdate/>checkdate</a></li><li><a href=/php/date-time/date/>date</a></li><li><a href=/php/date-time/date_add/>date_add</a></li><li><a href=/php/date-time/date_create/>date_create</a></li><li><a href=/php/date-time/date_create_from_format/>date_create_from_format</a></li><li><a href=/php/date-time/date_create_immutable/>date_create_immutable</a></li><li><a href=/php/date-time/date_create_immutable_from_format/>date_create_immutable_from_format</a></li><li><a href=/php/date-time/date_date_set/>date_date_set</a></li><li><a href=/php/date-time/date_default_timezone_get/>date_default_timezone_get</a></li><li><a href=/php/date-time/date_default_timezone_set/>date_default_timezone_set</a></li><li><a href=/php/date-time/date_diff/>date_diff</a></li><li><a href=/php/date-time/date_format/>date_format</a></li><li><a href=/php/date-time/date_get_last_errors/>date_get_last_errors</a></li><li><a href=/php/date-time/date_interval_create_from_date_string/>date_interval_create_from_date_string</a></li><li><a href=/php/date-time/date_interval_format/>date_interval_format</a></li><li><a href=/php/date-time/date_isodate_set/>date_isodate_set</a></li><li><a href=/php/date-time/date_modify/>date_modify</a></li><li><a href=/php/date-time/date_offset_get/>date_offset_get</a></li><li><a href=/php/date-time/date_parse/>date_parse</a></li><li><a href=/php/date-time/date_parse_from_format/>date_parse_from_format</a></li><li><a href=/php/date-time/date_sub/>date_sub</a></li><li><a href=/php/date-time/date_sun_info/>date_sun_info</a></li><li><a href=/php/date-time/date_sunrise/>date_sunrise</a></li><li><a href=/php/date-time/date_sunset/>date_sunset</a></li><li><a href=/php/date-time/date_time_set/>date_time_set</a></li><li><a href=/php/date-time/date_timestamp_get/>date_timestamp_get</a></li><li><a href=/php/date-time/date_timestamp_set/>date_timestamp_set</a></li><li><a href=/php/date-time/date_timezone_get/>date_timezone_get</a></li><li><a href=/php/date-time/date_timezone_set/>date_timezone_set</a></li><li><a href=/php/date-time/getdate/>getdate</a></li><li><a href=/php/date-time/gettimeofday/>gettimeofday</a></li><li><a href=/php/date-time/gmdate/>gmdate</a></li><li><a href=/php/date-time/gmmktime/>gmmktime</a></li><li><a href=/php/date-time/gmstrftime/>gmstrftime</a></li><li><a href=/php/date-time/idate/>idate</a></li><li><a href=/php/date-time/localtime/>localtime</a></li><li><a href=/php/date-time/microtime/>microtime</a></li><li><a href=/php/date-time/mktime/>mktime</a></li><li><a href=/php/date-time/strftime/>strftime</a></li><li><a href=/php/date-time/strptime/>strptime</a></li><li><a href=/php/date-time/strtotime/>strtotime</a></li><li><a href=/php/date-time/time/>time</a></li><li><a href=/php/date-time/timezone_abbreviations_list/>timezone_abbreviations_list</a></li><li><a href=/php/date-time/timezone_identifiers_list/>timezone_identifiers_list</a></li><li><a href=/php/date-time/timezone_location_get/>timezone_location_get</a></li><li><a href=/php/date-time/timezone_name_from_abbr/>timezone_name_from_abbr</a></li><li><a href=/php/date-time/timezone_name_get/>timezone_name_get</a></li><li><a href=/php/date-time/timezone_offset_get/>timezone_offset_get</a></li><li><a href=/php/date-time/timezone_open/>timezone_open</a></li><li><a href=/php/date-time/timezone_transitions_get/>timezone_transitions_get</a></li><li><a href=/php/date-time/timezone_version_get/>timezone_version_get</a></li></ul></div><h2>Directory</h2><div><ul><li><a href=/php/directory/chdir/>chdir</a></li><li><a href=/php/directory/chroot/>chroot</a></li><li><a href=/php/directory/closedir/>closedir</a></li><li><a href=/php/directory/dir/>dir</a></li><li><a href=/php/directory/getcwd/>getcwd</a></li><li><a href=/php/directory/opendir/>opendir</a></li><li><a href=/php/directory/readdir/>readdir</a></li><li><a href=/php/directory/rewinddir/>rewinddir</a></li><li><a href=/php/directory/scandir/>scandir</a></li></ul></div><h2>DOM</h2><div><ul><li><a href=/php/dom/dom_import_simplexml/>dom_import_simplexml</a></li></ul></div><h2>Error Handling</h2><div><ul><li><a href=/php/error-handling/debug_backtrace/>debug_backtrace</a></li><li><a href=/php/error-handling/debug_print_backtrace/>debug_print_backtrace</a></li><li><a href=/php/error-handling/error_clear_last/>error_clear_last</a></li><li><a href=/php/error-handling/error_get_last/>error_get_last</a></li><li><a href=/php/error-handling/error_log/>error_log</a></li><li><a href=/php/error-handling/error_reporting/>error_reporting</a></li><li><a href=/php/error-handling/get_error_handler/>get_error_handler</a></li><li><a href=/php/error-handling/get_exception_handler/>get_exception_handler</a></li><li><a href=/php/error-handling/restore_error_handler/>restore_error_handler</a></li><li><a href=/php/error-handling/restore_exception_handler/>restore_exception_handler</a></li><li><a href=/php/error-handling/set_error_handler/>set_error_handler</a></li><li><a href=/php/error-handling/set_exception_handler/>set_exception_handler</a></li><li><a href=/php/error-handling/trigger_error/>trigger_error</a></li><li><a href=/php/error-handling/user_error/>user_error</a></li></ul></div><h2>Exif</h2><div><ul><li><a href=/php/exif/exif_imagetype/>exif_imagetype</a></li><li><a href=/php/exif/exif_read_data/>exif_read_data</a></li><li><a href=/php/exif/exif_tagname/>exif_tagname</a></li><li><a href=/php/exif/exif_thumbnail/>exif_thumbnail</a></li></ul></div><h2>Fileinfo</h2><div><ul><li><a href=/php/fileinfo/finfo_buffer/>finfo_buffer</a></li><li><a href=/php/fileinfo/finfo_close/>finfo_close</a></li><li><a href=/php/fileinfo/finfo_file/>finfo_file</a></li><li><a href=/php/fileinfo/finfo_open/>finfo_open</a></li><li><a href=/php/fileinfo/finfo_set_flags/>finfo_set_flags</a></li><li><a href=/php/fileinfo/mime_content_type/>mime_content_type</a></li></ul></div><h2>Filesystem</h2><div><ul><li><a href=/php/filesystem/basename/>basename</a></li><li><a href=/php/filesystem/chgrp/>chgrp</a></li><li><a href=/php/filesystem/chmod/>chmod</a></li><li><a href=/php/filesystem/chown/>chown</a></li><li><a href=/php/filesystem/clearstatcache/>clearstatcache</a></li><li><a href=/php/filesystem/copy/>copy</a></li><li><a href=/php/filesystem/dirname/>dirname</a></li><li><a href=/php/filesystem/disk_free_space/>disk_free_space</a></li><li><a href=/php/filesystem/disk_total_space/>disk_total_space</a></li><li><a href=/php/filesystem/diskfreespace/>diskfreespace</a></li><li><a href=/php/filesystem/fclose/>fclose</a></li><li><a href=/php/filesystem/feof/>feof</a></li><li><a href=/php/filesystem/fflush/>fflush</a></li><li><a href=/php/filesystem/fgetc/>fgetc</a></li><li><a href=/php/filesystem/fgetcsv/>fgetcsv</a></li><li><a href=/php/filesystem/fgets/>fgets</a></li><li><a href=/php/filesystem/file/>file</a></li><li><a href=/php/filesystem/file_exists/>file_exists</a></li><li><a href=/php/filesystem/file_get_contents/>file_get_contents</a></li><li><a href=/php/filesystem/file_put_contents/>file_put_contents</a></li><li><a href=/php/filesystem/fileatime/>fileatime</a></li><li><a href=/php/filesystem/filectime/>filectime</a></li><li><a href=/php/filesystem/filegroup/>filegroup</a></li><li><a href=/php/filesystem/fileinode/>fileinode</a></li><li><a href=/php/filesystem/filemtime/>filemtime</a></li><li><a href=/php/filesystem/fileowner/>fileowner</a></li><li><a href=/php/filesystem/fileperms/>fileperms</a></li><li><a href=/php/filesystem/filesize/>filesize</a></li><li><a href=/php/filesystem/filetype/>filetype</a></li><li><a href=/php/filesystem/flock/>flock</a></li><li><a href=/php/filesystem/fnmatch/>fnmatch</a></li><li><a href=/php/filesystem/fopen/>fopen</a></li><li><a href=/php/filesystem/fpassthru/>fpassthru</a></li><li><a href=/php/filesystem/fputcsv/>fputcsv</a></li><li><a href=/php/filesystem/fputs/>fputs</a></li><li><a href=/php/filesystem/fread/>fread</a></li><li><a href=/php/filesystem/fscanf/>fscanf</a></li><li><a href=/php/filesystem/fseek/>fseek</a></li><li><a href=/php/filesystem/fstat/>fstat</a></li><li><a href=/php/filesystem/ftell/>ftell</a></li><li><a href=/php/filesystem/ftruncate/>ftruncate</a></li><li><a href=/php/filesystem/fwrite/>fwrite</a></li><li><a href=/php/filesystem/glob/>glob</a></li><li><a href=/php/filesystem/is_dir/>is_dir</a></li><li><a href=/php/filesystem/is_executable/>is_executable</a></li><li><a href=/php/filesystem/is_file/>is_file</a></li><li><a href=/php/filesystem/is_link/>is_link</a></li><li><a href=/php/filesystem/is_readable/>is_readable</a></li><li><a href=/php/filesystem/is_uploaded_file/>is_uploaded_file</a></li><li><a href=/php/filesystem/is_writable/>is_writable</a></li><li><a href=/php/filesystem/is_writeable/>is_writeable</a></li><li><a href=/php/filesystem/lchgrp/>lchgrp</a></li><li><a href=/php/filesystem/lchown/>lchown</a></li><li><a href=/php/filesystem/link/>link</a></li><li><a href=/php/filesystem/linkinfo/>linkinfo</a></li><li><a href=/php/filesystem/lstat/>lstat</a></li><li><a href=/php/filesystem/mkdir/>mkdir</a></li><li><a href=/php/filesystem/move_uploaded_file/>move_uploaded_file</a></li><li><a href=/php/filesystem/pathinfo/>pathinfo</a></li><li><a href=/php/filesystem/pclose/>pclose</a></li><li><a href=/php/filesystem/popen/>popen</a></li><li><a href=/php/filesystem/readfile/>readfile</a></li><li><a href=/php/filesystem/readlink/>readlink</a></li><li><a href=/php/filesystem/realpath/>realpath</a></li><li><a href=/php/filesystem/realpath_cache_get/>realpath_cache_get</a></li><li><a href=/php/filesystem/realpath_cache_size/>realpath_cache_size</a></li><li><a href=/php/filesystem/rename/>rename</a></li><li><a href=/php/filesystem/rewind/>rewind</a></li><li><a href=/php/filesystem/rmdir/>rmdir</a></li><li><a href=/php/filesystem/set_file_buffer/>set_file_buffer</a></li><li><a href=/php/filesystem/stat/>stat</a></li><li><a href=/php/filesystem/symlink/>symlink</a></li><li><a href=/php/filesystem/tempnam/>tempnam</a></li><li><a href=/php/filesystem/tmpfile/>tmpfile</a></li><li><a href=/php/filesystem/touch/>touch</a></li><li><a href=/php/filesystem/umask/>umask</a></li><li><a href=/php/filesystem/unlink/>unlink</a></li></ul></div><h2>Filter</h2><div><ul><li><a href=/php/filter/filter_has_var/>filter_has_var</a></li><li><a href=/php/filter/filter_id/>filter_id</a></li><li><a href=/php/filter/filter_input/>filter_input</a></li><li><a href=/php/filter/filter_input_array/>filter_input_array</a></li><li><a href=/php/filter/filter_list/>filter_list</a></li><li><a href=/php/filter/filter_var/>filter_var</a></li><li><a href=/php/filter/filter_var_array/>filter_var_array</a></li></ul></div><h2>Function Handling</h2><div><ul><li><a href=/php/function-handling/call_user_func/>call_user_func</a></li><li><a href=/php/function-handling/call_user_func_array/>call_user_func_array</a></li><li><a href=/php/function-handling/forward_static_call/>forward_static_call</a></li><li><a href=/php/function-handling/forward_static_call_array/>forward_static_call_array</a></li><li><a href=/php/function-handling/func_get_arg/>func_get_arg</a></li><li><a href=/php/function-handling/func_get_args/>func_get_args</a></li><li><a href=/php/function-handling/func_num_args/>func_num_args</a></li><li><a href=/php/function-handling/function_exists/>function_exists</a></li><li><a href=/php/function-handling/get_defined_functions/>get_defined_functions</a></li><li><a href=/php/function-handling/register_shutdown_function/>register_shutdown_function</a></li><li><a href=/php/function-handling/register_tick_function/>register_tick_function</a></li><li><a href=/php/function-handling/unregister_tick_function/>unregister_tick_function</a></li></ul></div><h2>GMP</h2><div><ul><li><a href=/php/gmp/gmp_abs/>gmp_abs</a></li><li><a href=/php/gmp/gmp_add/>gmp_add</a></li><li><a href=/php/gmp/gmp_and/>gmp_and</a></li><li><a href=/php/gmp/gmp_binomial/>gmp_binomial</a></li><li><a href=/php/gmp/gmp_clrbit/>gmp_clrbit</a></li><li><a href=/php/gmp/gmp_cmp/>gmp_cmp</a></li><li><a href=/php/gmp/gmp_com/>gmp_com</a></li><li><a href=/php/gmp/gmp_div/>gmp_div</a></li><li><a href=/php/gmp/gmp_div_q/>gmp_div_q</a></li><li><a href=/php/gmp/gmp_div_qr/>gmp_div_qr</a></li><li><a href=/php/gmp/gmp_div_r/>gmp_div_r</a></li><li><a href=/php/gmp/gmp_divexact/>gmp_divexact</a></li><li><a href=/php/gmp/gmp_export/>gmp_export</a></li><li><a href=/php/gmp/gmp_fact/>gmp_fact</a></li><li><a href=/php/gmp/gmp_gcd/>gmp_gcd</a></li><li><a href=/php/gmp/gmp_gcdext/>gmp_gcdext</a></li><li><a href=/php/gmp/gmp_hamdist/>gmp_hamdist</a></li><li><a href=/php/gmp/gmp_import/>gmp_import</a></li><li><a href=/php/gmp/gmp_init/>gmp_init</a></li><li><a href=/php/gmp/gmp_intval/>gmp_intval</a></li><li><a href=/php/gmp/gmp_invert/>gmp_invert</a></li><li><a href=/php/gmp/gmp_jacobi/>gmp_jacobi</a></li><li><a href=/php/gmp/gmp_kronecker/>gmp_kronecker</a></li><li><a href=/php/gmp/gmp_lcm/>gmp_lcm</a></li><li><a href=/php/gmp/gmp_legendre/>gmp_legendre</a></li><li><a href=/php/gmp/gmp_mod/>gmp_mod</a></li><li><a href=/php/gmp/gmp_mul/>gmp_mul</a></li><li><a href=/php/gmp/gmp_neg/>gmp_neg</a></li><li><a href=/php/gmp/gmp_nextprime/>gmp_nextprime</a></li><li><a href=/php/gmp/gmp_or/>gmp_or</a></li><li><a href=/php/gmp/gmp_perfect_power/>gmp_perfect_power</a></li><li><a href=/php/gmp/gmp_perfect_square/>gmp_perfect_square</a></li><li><a href=/php/gmp/gmp_popcount/>gmp_popcount</a></li><li><a href=/php/gmp/gmp_pow/>gmp_pow</a></li><li><a href=/php/gmp/gmp_powm/>gmp_powm</a></li><li><a href=/php/gmp/gmp_prob_prime/>gmp_prob_prime</a></li><li><a href=/php/gmp/gmp_random_bits/>gmp_random_bits</a></li><li><a href=/php/gmp/gmp_random_range/>gmp_random_range</a></li><li><a href=/php/gmp/gmp_random_seed/>gmp_random_seed</a></li><li><a href=/php/gmp/gmp_root/>gmp_root</a></li><li><a href=/php/gmp/gmp_rootrem/>gmp_rootrem</a></li><li><a href=/php/gmp/gmp_scan0/>gmp_scan0</a></li><li><a href=/php/gmp/gmp_scan1/>gmp_scan1</a></li><li><a href=/php/gmp/gmp_setbit/>gmp_setbit</a></li><li><a href=/php/gmp/gmp_sign/>gmp_sign</a></li><li><a href=/php/gmp/gmp_sqrt/>gmp_sqrt</a></li><li><a href=/php/gmp/gmp_sqrtrem/>gmp_sqrtrem</a></li><li><a href=/php/gmp/gmp_strval/>gmp_strval</a></li><li><a href=/php/gmp/gmp_sub/>gmp_sub</a></li><li><a href=/php/gmp/gmp_testbit/>gmp_testbit</a></li><li><a href=/php/gmp/gmp_xor/>gmp_xor</a></li></ul></div><h2>Hash</h2><div><ul><li><a href=/php/hash/hash/>hash</a></li><li><a href=/php/hash/hash_algos/>hash_algos</a></li><li><a href=/php/hash/hash_copy/>hash_copy</a></li><li><a href=/php/hash/hash_equals/>hash_equals</a></li><li><a href=/php/hash/hash_file/>hash_file</a></li><li><a href=/php/hash/hash_final/>hash_final</a></li><li><a href=/php/hash/hash_hkdf/>hash_hkdf</a></li><li><a href=/php/hash/hash_hmac/>hash_hmac</a></li><li><a href=/php/hash/hash_hmac_algos/>hash_hmac_algos</a></li><li><a href=/php/hash/hash_hmac_file/>hash_hmac_file</a></li><li><a href=/php/hash/hash_init/>hash_init</a></li><li><a href=/php/hash/hash_pbkdf2/>hash_pbkdf2</a></li><li><a href=/php/hash/hash_update/>hash_update</a></li><li><a href=/php/hash/hash_update_file/>hash_update_file</a></li><li><a href=/php/hash/hash_update_stream/>hash_update_stream</a></li></ul></div><h2>iconv</h2><div><ul><li><a href=/php/iconv/iconv/>iconv</a></li><li><a href=/php/iconv/iconv_get_encoding/>iconv_get_encoding</a></li><li><a href=/php/iconv/iconv_mime_decode/>iconv_mime_decode</a></li><li><a href=/php/iconv/iconv_mime_decode_headers/>iconv_mime_decode_headers</a></li><li><a href=/php/iconv/iconv_mime_encode/>iconv_mime_encode</a></li><li><a href=/php/iconv/iconv_set_encoding/>iconv_set_encoding</a></li><li><a href=/php/iconv/iconv_strlen/>iconv_strlen</a></li><li><a href=/php/iconv/iconv_strpos/>iconv_strpos</a></li><li><a href=/php/iconv/iconv_strrpos/>iconv_strrpos</a></li><li><a href=/php/iconv/iconv_substr/>iconv_substr</a></li><li><a href=/php/iconv/ob_iconv_handler/>ob_iconv_handler</a></li></ul></div><h2>Image</h2><div><ul><li><a href=/php/image/gd_info/>gd_info</a></li><li><a href=/php/image/getimagesize/>getimagesize</a></li><li><a href=/php/image/getimagesizefromstring/>getimagesizefromstring</a></li><li><a href=/php/image/image_type_to_extension/>image_type_to_extension</a></li><li><a href=/php/image/image_type_to_mime_type/>image_type_to_mime_type</a></li><li><a href=/php/image/imageaffine/>imageaffine</a></li><li><a href=/php/image/imageaffinematrixconcat/>imageaffinematrixconcat</a></li><li><a href=/php/image/imageaffinematrixget/>imageaffinematrixget</a></li><li><a href=/php/image/imagealphablending/>imagealphablending</a></li><li><a href=/php/image/imageantialias/>imageantialias</a></li><li><a href=/php/image/imagearc/>imagearc</a></li><li><a href=/php/image/imageavif/>imageavif</a></li><li><a href=/php/image/imagebmp/>imagebmp</a></li><li><a href=/php/image/imagechar/>imagechar</a></li><li><a href=/php/image/imagecharup/>imagecharup</a></li><li><a href=/php/image/imagecolorallocate/>imagecolorallocate</a></li><li><a href=/php/image/imagecolorallocatealpha/>imagecolorallocatealpha</a></li><li><a href=/php/image/imagecolorat/>imagecolorat</a></li><li><a href=/php/image/imagecolorclosest/>imagecolorclosest</a></li><li><a href=/php/image/imagecolorclosestalpha/>imagecolorclosestalpha</a></li><li><a href=/php/image/imagecolorclosesthwb/>imagecolorclosesthwb</a></li><li><a href=/php/image/imagecolordeallocate/>imagecolordeallocate</a></li><li><a href=/php/image/imagecolorexact/>imagecolorexact</a></li><li><a href=/php/image/imagecolorexactalpha/>imagecolorexactalpha</a></li><li><a href=/php/image/imagecolormatch/>imagecolormatch</a></li><li><a href=/php/image/imagecolorresolve/>imagecolorresolve</a></li><li><a href=/php/image/imagecolorresolvealpha/>imagecolorresolvealpha</a></li><li><a href=/php/image/imagecolorset/>imagecolorset</a></li><li><a href=/php/image/imagecolorsforindex/>imagecolorsforindex</a></li><li><a href=/php/image/imagecolorstotal/>imagecolorstotal</a></li><li><a href=/php/image/imagecolortransparent/>imagecolortransparent</a></li><li><a href=/php/image/imageconvolution/>imageconvolution</a></li><li><a href=/php/image/imagecopy/>imagecopy</a></li><li><a href=/php/image/imagecopymerge/>imagecopymerge</a></li><li><a href=/php/image/imagecopymergegray/>imagecopymergegray</a></li><li><a href=/php/image/imagecopyresampled/>imagecopyresampled</a></li><li><a href=/php/image/imagecopyresized/>imagecopyresized</a></li><li><a href=/php/image/imagecreate/>imagecreate</a></li><li><a href=/php/image/imagecreatefromavif/>imagecreatefromavif</a></li><li><a href=/php/image/imagecreatefrombmp/>imagecreatefrombmp</a></li><li><a href=/php/image/imagecreatefromgif/>imagecreatefromgif</a></li><li><a href=/php/image/imagecreatefromjpeg/>imagecreatefromjpeg</a></li><li><a href=/php/image/imagecreatefrompng/>imagecreatefrompng</a></li><li><a href=/php/image/imagecreatefromstring/>imagecreatefromstring</a></li><li><a href=/php/image/imagecreatefromtga/>imagecreatefromtga</a></li><li><a href=/php/image/imagecreatefromwbmp/>imagecreatefromwbmp</a></li><li><a href=/php/image/imagecreatefromwebp/>imagecreatefromwebp</a></li><li><a href=/php/image/imagecreatefromxbm/>imagecreatefromxbm</a></li><li><a href=/php/image/imagecreatefromxpm/>imagecreatefromxpm</a></li><li><a href=/php/image/imagecreatetruecolor/>imagecreatetruecolor</a></li><li><a href=/php/image/imagecrop/>imagecrop</a></li><li><a href=/php/image/imagecropauto/>imagecropauto</a></li><li><a href=/php/image/imagedashedline/>imagedashedline</a></li><li><a href=/php/image/imagedestroy/>imagedestroy</a></li><li><a href=/php/image/imageellipse/>imageellipse</a></li><li><a href=/php/image/imagefill/>imagefill</a></li><li><a href=/php/image/imagefilledarc/>imagefilledarc</a></li><li><a href=/php/image/imagefilledellipse/>imagefilledellipse</a></li><li><a href=/php/image/imagefilledpolygon/>imagefilledpolygon</a></li><li><a href=/php/image/imagefilledrectangle/>imagefilledrectangle</a></li><li><a href=/php/image/imagefilltoborder/>imagefilltoborder</a></li><li><a href=/php/image/imagefilter/>imagefilter</a></li><li><a href=/php/image/imageflip/>imageflip</a></li><li><a href=/php/image/imagefontheight/>imagefontheight</a></li><li><a href=/php/image/imagefontwidth/>imagefontwidth</a></li><li><a href=/php/image/imageftbbox/>imageftbbox</a></li><li><a href=/php/image/imagefttext/>imagefttext</a></li><li><a href=/php/image/imagegammacorrect/>imagegammacorrect</a></li><li><a href=/php/image/imagegetclip/>imagegetclip</a></li><li><a href=/php/image/imagegetinterpolation/>imagegetinterpolation</a></li><li><a href=/php/image/imagegif/>imagegif</a></li><li><a href=/php/image/imageinterlace/>imageinterlace</a></li><li><a href=/php/image/imageistruecolor/>imageistruecolor</a></li><li><a href=/php/image/imagejpeg/>imagejpeg</a></li><li><a href=/php/image/imagelayereffect/>imagelayereffect</a></li><li><a href=/php/image/imageline/>imageline</a></li><li><a href=/php/image/imageloadfont/>imageloadfont</a></li><li><a href=/php/image/imageopenpolygon/>imageopenpolygon</a></li><li><a href=/php/image/imagepalettecopy/>imagepalettecopy</a></li><li><a href=/php/image/imagepalettetotruecolor/>imagepalettetotruecolor</a></li><li><a href=/php/image/imagepng/>imagepng</a></li><li><a href=/php/image/imagepolygon/>imagepolygon</a></li><li><a href=/php/image/imagerectangle/>imagerectangle</a></li><li><a href=/php/image/imageresolution/>imageresolution</a></li><li><a href=/php/image/imagerotate/>imagerotate</a></li><li><a href=/php/image/imagesavealpha/>imagesavealpha</a></li><li><a href=/php/image/imagescale/>imagescale</a></li><li><a href=/php/image/imagesetbrush/>imagesetbrush</a></li><li><a href=/php/image/imagesetclip/>imagesetclip</a></li><li><a href=/php/image/imagesetinterpolation/>imagesetinterpolation</a></li><li><a href=/php/image/imagesetpixel/>imagesetpixel</a></li><li><a href=/php/image/imagesetstyle/>imagesetstyle</a></li><li><a href=/php/image/imagesetthickness/>imagesetthickness</a></li><li><a href=/php/image/imagesettile/>imagesettile</a></li><li><a href=/php/image/imagestring/>imagestring</a></li><li><a href=/php/image/imagestringup/>imagestringup</a></li><li><a href=/php/image/imagesx/>imagesx</a></li><li><a href=/php/image/imagesy/>imagesy</a></li><li><a href=/php/image/imagetruecolortopalette/>imagetruecolortopalette</a></li><li><a href=/php/image/imagettfbbox/>imagettfbbox</a></li><li><a href=/php/image/imagettftext/>imagettftext</a></li><li><a href=/php/image/imagetypes/>imagetypes</a></li><li><a href=/php/image/imagewbmp/>imagewbmp</a></li><li><a href=/php/image/imagewebp/>imagewebp</a></li><li><a href=/php/image/imagexbm/>imagexbm</a></li><li><a href=/php/image/iptcembed/>iptcembed</a></li><li><a href=/php/image/iptcparse/>iptcparse</a></li></ul></div><h2>JSON</h2><div><ul><li><a href=/php/json/json_decode/>json_decode</a></li><li><a href=/php/json/json_encode/>json_encode</a></li><li><a href=/php/json/json_last_error/>json_last_error</a></li><li><a href=/php/json/json_last_error_msg/>json_last_error_msg</a></li><li><a href=/php/json/json_validate/>json_validate</a></li></ul></div><h2>libxml</h2><div><ul><li><a href=/php/libxml/libxml_clear_errors/>libxml_clear_errors</a></li><li><a href=/php/libxml/libxml_get_errors/>libxml_get_errors</a></li><li><a href=/php/libxml/libxml_get_external_entity_loader/>libxml_get_external_entity_loader</a></li><li><a href=/php/libxml/libxml_get_last_error/>libxml_get_last_error</a></li><li><a href=/php/libxml/libxml_set_external_entity_loader/>libxml_set_external_entity_loader</a></li><li><a href=/php/libxml/libxml_set_streams_context/>libxml_set_streams_context</a></li><li><a href=/php/libxml/libxml_use_internal_errors/>libxml_use_internal_errors</a></li></ul></div><h2>Mail</h2><div><ul><li><a href=/php/mail/mail/>mail</a></li></ul></div><h2>Math</h2><div><ul><li><a href=/php/math/abs/>abs</a></li><li><a href=/php/math/acos/>acos</a></li><li><a href=/php/math/acosh/>acosh</a></li><li><a href=/php/math/asin/>asin</a></li><li><a href=/php/math/asinh/>asinh</a></li><li><a href=/php/math/atan/>atan</a></li><li><a href=/php/math/atan2/>atan2</a></li><li><a href=/php/math/atanh/>atanh</a></li><li><a href=/php/math/base_convert/>base_convert</a></li><li><a href=/php/math/bindec/>bindec</a></li><li><a href=/php/math/ceil/>ceil</a></li><li><a href=/php/math/cos/>cos</a></li><li><a href=/php/math/cosh/>cosh</a></li><li><a href=/php/math/decbin/>decbin</a></li><li><a href=/php/math/dechex/>dechex</a></li><li><a href=/php/math/decoct/>decoct</a></li><li><a href=/php/math/deg2rad/>deg2rad</a></li><li><a href=/php/math/exp/>exp</a></li><li><a href=/php/math/expm1/>expm1</a></li><li><a href=/php/math/fdiv/>fdiv</a></li><li><a href=/php/math/floor/>floor</a></li><li><a href=/php/math/fmod/>fmod</a></li><li><a href=/php/math/fpow/>fpow</a></li><li><a href=/php/math/hexdec/>hexdec</a></li><li><a href=/php/math/hypot/>hypot</a></li><li><a href=/php/math/intdiv/>intdiv</a></li><li><a href=/php/math/is_finite/>is_finite</a></li><li><a href=/php/math/is_infinite/>is_infinite</a></li><li><a href=/php/math/is_nan/>is_nan</a></li><li><a href=/php/math/log/>log</a></li><li><a href=/php/math/log10/>log10</a></li><li><a href=/php/math/log1p/>log1p</a></li><li><a href=/php/math/max/>max</a></li><li><a href=/php/math/min/>min</a></li><li><a href=/php/math/octdec/>octdec</a></li><li><a href=/php/math/pi/>pi</a></li><li><a href=/php/math/pow/>pow</a></li><li><a href=/php/math/rad2deg/>rad2deg</a></li><li><a href=/php/math/round/>round</a></li><li><a href=/php/math/sin/>sin</a></li><li><a href=/php/math/sinh/>sinh</a></li><li><a href=/php/math/sqrt/>sqrt</a></li><li><a href=/php/math/tan/>tan</a></li><li><a href=/php/math/tanh/>tanh</a></li></ul></div><h2>Miscellaneous</h2><div><ul><li><a href=/php/miscellaneous/__halt_compiler/>__halt_compiler</a></li><li><a href=/php/miscellaneous/connection_aborted/>connection_aborted</a></li><li><a href=/php/miscellaneous/connection_status/>connection_status</a></li><li><a href=/php/miscellaneous/constant/>constant</a></li><li><a href=/php/miscellaneous/define/>define</a></li><li><a href=/php/miscellaneous/defined/>defined</a></li><li><a href=/php/miscellaneous/die/>die</a></li><li><a href=/php/miscellaneous/eval/>eval</a></li><li><a href=/php/miscellaneous/exit/>exit</a></li><li><a href=/php/miscellaneous/highlight_file/>highlight_file</a></li><li><a href=/php/miscellaneous/highlight_string/>highlight_string</a></li><li><a href=/php/miscellaneous/hrtime/>hrtime</a></li><li><a href=/php/miscellaneous/ignore_user_abort/>ignore_user_abort</a></li><li><a href=/php/miscellaneous/pack/>pack</a></li><li><a href=/php/miscellaneous/php_strip_whitespace/>php_strip_whitespace</a></li><li><a href=/php/miscellaneous/show_source/>show_source</a></li><li><a href=/php/miscellaneous/sleep/>sleep</a></li><li><a href=/php/miscellaneous/sys_getloadavg/>sys_getloadavg</a></li><li><a href=/php/miscellaneous/time_nanosleep/>time_nanosleep</a></li><li><a href=/php/miscellaneous/time_sleep_until/>time_sleep_until</a></li><li><a href=/php/miscellaneous/uniqid/>uniqid</a></li><li><a href=/php/miscellaneous/unpack/>unpack</a></li><li><a href=/php/miscellaneous/usleep/>usleep</a></li></ul></div><h2>Multibyte String</h2><div><ul><li><a href=/php/multibyte-string/mb_check_encoding/>mb_check_encoding</a></li><li><a href=/php/multibyte-string/mb_chr/>mb_chr</a></li><li><a href=/php/multibyte-string/mb_convert_case/>mb_convert_case</a></li><li><a href=/php/multibyte-string/mb_convert_encoding/>mb_convert_encoding</a></li><li><a href=/php/multibyte-string/mb_convert_kana/>mb_convert_kana</a></li><li><a href=/php/multibyte-string/mb_convert_variables/>mb_convert_variables</a></li><li><a href=/php/multibyte-string/mb_decode_mimeheader/>mb_decode_mimeheader</a></li><li><a href=/php/multibyte-string/mb_decode_numericentity/>mb_decode_numericentity</a></li><li><a href=/php/multibyte-string/mb_detect_encoding/>mb_detect_encoding</a></li><li><a href=/php/multibyte-string/mb_detect_order/>mb_detect_order</a></li><li><a href=/php/multibyte-string/mb_encode_mimeheader/>mb_encode_mimeheader</a></li><li><a href=/php/multibyte-string/mb_encode_numericentity/>mb_encode_numericentity</a></li><li><a href=/php/multibyte-string/mb_encoding_aliases/>mb_encoding_aliases</a></li><li><a href=/php/multibyte-string/mb_ereg/>mb_ereg</a></li><li><a href=/php/multibyte-string/mb_ereg_match/>mb_ereg_match</a></li><li><a href=/php/multibyte-string/mb_ereg_replace/>mb_ereg_replace</a></li><li><a href=/php/multibyte-string/mb_ereg_replace_callback/>mb_ereg_replace_callback</a></li><li><a href=/php/multibyte-string/mb_ereg_search/>mb_ereg_search</a></li><li><a href=/php/multibyte-string/mb_ereg_search_getpos/>mb_ereg_search_getpos</a></li><li><a href=/php/multibyte-string/mb_ereg_search_getregs/>mb_ereg_search_getregs</a></li><li><a href=/php/multibyte-string/mb_ereg_search_init/>mb_ereg_search_init</a></li><li><a href=/php/multibyte-string/mb_ereg_search_pos/>mb_ereg_search_pos</a></li><li><a href=/php/multibyte-string/mb_ereg_search_regs/>mb_ereg_search_regs</a></li><li><a href=/php/multibyte-string/mb_ereg_search_setpos/>mb_ereg_search_setpos</a></li><li><a href=/php/multibyte-string/mb_eregi/>mb_eregi</a></li><li><a href=/php/multibyte-string/mb_eregi_replace/>mb_eregi_replace</a></li><li><a href=/php/multibyte-string/mb_get_info/>mb_get_info</a></li><li><a href=/php/multibyte-string/mb_http_input/>mb_http_input</a></li><li><a href=/php/multibyte-string/mb_http_output/>mb_http_output</a></li><li><a href=/php/multibyte-string/mb_internal_encoding/>mb_internal_encoding</a></li><li><a href=/php/multibyte-string/mb_language/>mb_language</a></li><li><a href=/php/multibyte-string/mb_lcfirst/>mb_lcfirst</a></li><li><a href=/php/multibyte-string/mb_list_encodings/>mb_list_encodings</a></li><li><a href=/php/multibyte-string/mb_ltrim/>mb_ltrim</a></li><li><a href=/php/multibyte-string/mb_ord/>mb_ord</a></li><li><a href=/php/multibyte-string/mb_output_handler/>mb_output_handler</a></li><li><a href=/php/multibyte-string/mb_parse_str/>mb_parse_str</a></li><li><a href=/php/multibyte-string/mb_preferred_mime_name/>mb_preferred_mime_name</a></li><li><a href=/php/multibyte-string/mb_regex_encoding/>mb_regex_encoding</a></li><li><a href=/php/multibyte-string/mb_regex_set_options/>mb_regex_set_options</a></li><li><a href=/php/multibyte-string/mb_rtrim/>mb_rtrim</a></li><li><a href=/php/multibyte-string/mb_scrub/>mb_scrub</a></li><li><a href=/php/multibyte-string/mb_send_mail/>mb_send_mail</a></li><li><a href=/php/multibyte-string/mb_split/>mb_split</a></li><li><a href=/php/multibyte-string/mb_str_pad/>mb_str_pad</a></li><li><a href=/php/multibyte-string/mb_str_split/>mb_str_split</a></li><li><a href=/php/multibyte-string/mb_strcut/>mb_strcut</a></li><li><a href=/php/multibyte-string/mb_strimwidth/>mb_strimwidth</a></li><li><a href=/php/multibyte-string/mb_stripos/>mb_stripos</a></li><li><a href=/php/multibyte-string/mb_stristr/>mb_stristr</a></li><li><a href=/php/multibyte-string/mb_strlen/>mb_strlen</a></li><li><a href=/php/multibyte-string/mb_strpos/>mb_strpos</a></li><li><a href=/php/multibyte-string/mb_strrchr/>mb_strrchr</a></li><li><a href=/php/multibyte-string/mb_strrichr/>mb_strrichr</a></li><li><a href=/php/multibyte-string/mb_strripos/>mb_strripos</a></li><li><a href=/php/multibyte-string/mb_strrpos/>mb_strrpos</a></li><li><a href=/php/multibyte-string/mb_strstr/>mb_strstr</a></li><li><a href=/php/multibyte-string/mb_strtolower/>mb_strtolower</a></li><li><a href=/php/multibyte-string/mb_strtoupper/>mb_strtoupper</a></li><li><a href=/php/multibyte-string/mb_strwidth/>mb_strwidth</a></li><li><a href=/php/multibyte-string/mb_substitute_character/>mb_substitute_character</a></li><li><a href=/php/multibyte-string/mb_substr/>mb_substr</a></li><li><a href=/php/multibyte-string/mb_substr_count/>mb_substr_count</a></li><li><a href=/php/multibyte-string/mb_trim/>mb_trim</a></li><li><a href=/php/multibyte-string/mb_ucfirst/>mb_ucfirst</a></li></ul></div><h2>Network</h2><div><ul><li><a href=/php/network/checkdnsrr/>checkdnsrr</a></li><li><a href=/php/network/closelog/>closelog</a></li><li><a href=/php/network/dns_check_record/>dns_check_record</a></li><li><a href=/php/network/dns_get_mx/>dns_get_mx</a></li><li><a href=/php/network/dns_get_record/>dns_get_record</a></li><li><a href=/php/network/fsockopen/>fsockopen</a></li><li><a href=/php/network/gethostbyaddr/>gethostbyaddr</a></li><li><a href=/php/network/gethostbyname/>gethostbyname</a></li><li><a href=/php/network/gethostbynamel/>gethostbynamel</a></li><li><a href=/php/network/gethostname/>gethostname</a></li><li><a href=/php/network/getmxrr/>getmxrr</a></li><li><a href=/php/network/getprotobyname/>getprotobyname</a></li><li><a href=/php/network/getprotobynumber/>getprotobynumber</a></li><li><a href=/php/network/getservbyname/>getservbyname</a></li><li><a href=/php/network/getservbyport/>getservbyport</a></li><li><a href=/php/network/header/>header</a></li><li><a href=/php/network/header_register_callback/>header_register_callback</a></li><li><a href=/php/network/header_remove/>header_remove</a></li><li><a href=/php/network/headers_list/>headers_list</a></li><li><a href=/php/network/headers_sent/>headers_sent</a></li><li><a href=/php/network/http_clear_last_response_headers/>http_clear_last_response_headers</a></li><li><a href=/php/network/http_get_last_response_headers/>http_get_last_response_headers</a></li><li><a href=/php/network/http_response_code/>http_response_code</a></li><li><a href=/php/network/inet_ntop/>inet_ntop</a></li><li><a href=/php/network/inet_pton/>inet_pton</a></li><li><a href=/php/network/ip2long/>ip2long</a></li><li><a href=/php/network/long2ip/>long2ip</a></li><li><a href=/php/network/openlog/>openlog</a></li><li><a href=/php/network/pfsockopen/>pfsockopen</a></li><li><a href=/php/network/setcookie/>setcookie</a></li><li><a href=/php/network/setrawcookie/>setrawcookie</a></li><li><a href=/php/network/socket_get_status/>socket_get_status</a></li><li><a href=/php/network/socket_set_blocking/>socket_set_blocking</a></li><li><a href=/php/network/socket_set_timeout/>socket_set_timeout</a></li><li><a href=/php/network/syslog/>syslog</a></li></ul></div><h2>Options / Information</h2><div><ul><li><a href=/php/options-information/assert/>assert</a></li><li><a href=/php/options-information/assert_options/>assert_options</a></li><li><a href=/php/options-information/cli_get_process_title/>cli_get_process_title</a></li><li><a href=/php/options-information/cli_set_process_title/>cli_set_process_title</a></li><li><a href=/php/options-information/dl/>dl</a></li><li><a href=/php/options-information/extension_loaded/>extension_loaded</a></li><li><a href=/php/options-information/gc_collect_cycles/>gc_collect_cycles</a></li><li><a href=/php/options-information/gc_disable/>gc_disable</a></li><li><a href=/php/options-information/gc_enable/>gc_enable</a></li><li><a href=/php/options-information/gc_enabled/>gc_enabled</a></li><li><a href=/php/options-information/gc_mem_caches/>gc_mem_caches</a></li><li><a href=/php/options-information/gc_status/>gc_status</a></li><li><a href=/php/options-information/get_cfg_var/>get_cfg_var</a></li><li><a href=/php/options-information/get_current_user/>get_current_user</a></li><li><a href=/php/options-information/get_defined_constants/>get_defined_constants</a></li><li><a href=/php/options-information/get_extension_funcs/>get_extension_funcs</a></li><li><a href=/php/options-information/get_include_path/>get_include_path</a></li><li><a href=/php/options-information/get_included_files/>get_included_files</a></li><li><a href=/php/options-information/get_load
e8d4
ed_extensions/>get_loaded_extensions</a></li><li><a href=/php/options-information/get_required_files/>get_required_files</a></li><li><a href=/php/options-information/get_resources/>get_resources</a></li><li><a href=/php/options-information/getenv/>getenv</a></li><li><a href=/php/options-information/getlastmod/>getlastmod</a></li><li><a href=/php/options-information/getmygid/>getmygid</a></li><li><a href=/php/options-information/getmyinode/>getmyinode</a></li><li><a href=/php/options-information/getmypid/>getmypid</a></li><li><a href=/php/options-information/getmyuid/>getmyuid</a></li><li><a href=/php/options-information/getopt/>getopt</a></li><li><a href=/php/options-information/getrusage/>getrusage</a></li><li><a href=/php/options-information/ini_alter/>ini_alter</a></li><li><a href=/php/options-information/ini_get/>ini_get</a></li><li><a href=/php/options-information/ini_get_all/>ini_get_all</a></li><li><a href=/php/options-information/ini_parse_quantity/>ini_parse_quantity</a></li><li><a href=/php/options-information/ini_restore/>ini_restore</a></li><li><a href=/php/options-information/ini_set/>ini_set</a></li><li><a href=/php/options-information/memory_get_peak_usage/>memory_get_peak_usage</a></li><li><a href=/php/options-information/memory_get_usage/>memory_get_usage</a></li><li><a href=/php/options-information/memory_reset_peak_usage/>memory_reset_peak_usage</a></li><li><a href=/php/options-information/php_ini_loaded_file/>php_ini_loaded_file</a></li><li><a href=/php/options-information/php_ini_scanned_files/>php_ini_scanned_files</a></li><li><a href=/php/options-information/php_sapi_name/>php_sapi_name</a></li><li><a href=/php/options-information/php_uname/>php_uname</a></li><li><a href=/php/options-information/phpcredits/>phpcredits</a></li><li><a href=/php/options-information/phpinfo/>phpinfo</a></li><li><a href=/php/options-information/phpversion/>phpversion</a></li><li><a href=/php/options-information/putenv/>putenv</a></li><li><a href=/php/options-information/set_include_path/>set_include_path</a></li><li><a href=/php/options-information/set_time_limit/>set_time_limit</a></li><li><a href=/php/options-information/sys_get_temp_dir/>sys_get_temp_dir</a></li><li><a href=/php/options-information/version_compare/>version_compare</a></li><li><a href=/php/options-information/zend_thread_id/>zend_thread_id</a></li><li><a href=/php/options-information/zend_version/>zend_version</a></li></ul></div><h2>Output Control</h2><div><ul><li><a href=/php/output-control/flush/>flush</a></li><li><a href=/php/output-control/ob_clean/>ob_clean</a></li><li><a href=/php/output-control/ob_end_clean/>ob_end_clean</a></li><li><a href=/php/output-control/ob_end_flush/>ob_end_flush</a></li><li><a href=/php/output-control/ob_flush/>ob_flush</a></li><li><a href=/php/output-control/ob_get_clean/>ob_get_clean</a></li><li><a href=/php/output-control/ob_get_contents/>ob_get_contents</a></li><li><a href=/php/output-control/ob_get_flush/>ob_get_flush</a></li><li><a href=/php/output-control/ob_get_length/>ob_get_length</a></li><li><a href=/php/output-control/ob_get_level/>ob_get_level</a></li><li><a href=/php/output-control/ob_get_status/>ob_get_status</a></li><li><a href=/php/output-control/ob_gzhandler/>ob_gzhandler</a></li><li><a href=/php/output-control/ob_implicit_flush/>ob_implicit_flush</a></li><li><a href=/php/output-control/ob_list_handlers/>ob_list_handlers</a></li><li><a href=/php/output-control/ob_start/>ob_start</a></li><li><a href=/php/output-control/output_add_rewrite_var/>output_add_rewrite_var</a></li><li><a href=/php/output-control/output_reset_rewrite_vars/>output_reset_rewrite_vars</a></li></ul></div><h2>PCNTL</h2><div><ul><li><a href=/php/pcntl/pcntl_alarm/>pcntl_alarm</a></li><li><a href=/php/pcntl/pcntl_async_signals/>pcntl_async_signals</a></li><li><a href=/php/pcntl/pcntl_errno/>pcntl_errno</a></li><li><a href=/php/pcntl/pcntl_exec/>pcntl_exec</a></li><li><a href=/php/pcntl/pcntl_fork/>pcntl_fork</a></li><li><a href=/php/pcntl/pcntl_get_last_error/>pcntl_get_last_error</a></li><li><a href=/php/pcntl/pcntl_getpriority/>pcntl_getpriority</a></li><li><a href=/php/pcntl/pcntl_rfork/>pcntl_rfork</a></li><li><a href=/php/pcntl/pcntl_setpriority/>pcntl_setpriority</a></li><li><a href=/php/pcntl/pcntl_signal/>pcntl_signal</a></li><li><a href=/php/pcntl/pcntl_signal_dispatch/>pcntl_signal_dispatch</a></li><li><a href=/php/pcntl/pcntl_signal_get_handler/>pcntl_signal_get_handler</a></li><li><a href=/php/pcntl/pcntl_sigprocmask/>pcntl_sigprocmask</a></li><li><a href=/php/pcntl/pcntl_sigtimedwait/>pcntl_sigtimedwait</a></li><li><a href=/php/pcntl/pcntl_sigwaitinfo/>pcntl_sigwaitinfo</a></li><li><a href=/php/pcntl/pcntl_strerror/>pcntl_strerror</a></li><li><a href=/php/pcntl/pcntl_unshare/>pcntl_unshare</a></li><li><a href=/php/pcntl/pcntl_wait/>pcntl_wait</a></li><li><a href=/php/pcntl/pcntl_waitpid/>pcntl_waitpid</a></li><li><a href=/php/pcntl/pcntl_wexitstatus/>pcntl_wexitstatus</a></li><li><a href=/php/pcntl/pcntl_wifexited/>pcntl_wifexited</a></li><li><a href=/php/pcntl/pcntl_wifsignaled/>pcntl_wifsignaled</a></li><li><a href=/php/pcntl/pcntl_wifstopped/>pcntl_wifstopped</a></li><li><a href=/php/pcntl/pcntl_wstopsig/>pcntl_wstopsig</a></li><li><a href=/php/pcntl/pcntl_wtermsig/>pcntl_wtermsig</a></li></ul></div><h2>PCRE</h2><div><ul><li><a href=/php/pcre/preg_filter/>preg_filter</a></li><li><a href=/php/pcre/preg_grep/>preg_grep</a></li><li><a href=/php/pcre/preg_last_error/>preg_last_error</a></li><li><a href=/php/pcre/preg_match/>preg_match</a></li><li><a href=/php/pcre/preg_match_all/>preg_match_all</a></li><li><a href=/php/pcre/preg_quote/>preg_quote</a></li><li><a href=/php/pcre/preg_replace/>preg_replace</a></li><li><a href=/php/pcre/preg_replace_callback/>preg_replace_callback</a></li><li><a href=/php/pcre/preg_replace_callback_array/>preg_replace_callback_array</a></li><li><a href=/php/pcre/preg_split/>preg_split</a></li></ul></div><h2>POSIX</h2><div><ul><li><a href=/php/posix/posix_access/>posix_access</a></li><li><a href=/php/posix/posix_ctermid/>posix_ctermid</a></li><li><a href=/php/posix/posix_eaccess/>posix_eaccess</a></li><li><a href=/php/posix/posix_errno/>posix_errno</a></li><li><a href=/php/posix/posix_fpathconf/>posix_fpathconf</a></li><li><a href=/php/posix/posix_get_last_error/>posix_get_last_error</a></li><li><a href=/php/posix/posix_getcwd/>posix_getcwd</a></li><li><a href=/php/posix/posix_getegid/>posix_getegid</a></li><li><a href=/php/posix/posix_geteuid/>posix_geteuid</a></li><li><a href=/php/posix/posix_getgid/>posix_getgid</a></li><li><a href=/php/posix/posix_getgrgid/>posix_getgrgid</a></li><li><a href=/php/posix/posix_getgrnam/>posix_getgrnam</a></li><li><a href=/php/posix/posix_getgroups/>posix_getgroups</a></li><li><a href=/php/posix/posix_getlogin/>posix_getlogin</a></li><li><a href=/php/posix/posix_getpgid/>posix_getpgid</a></li><li><a href=/php/posix/posix_getpgrp/>posix_getpgrp</a></li><li><a href=/php/posix/posix_getpid/>posix_getpid</a></li><li><a href=/php/posix/posix_getppid/>posix_getppid</a></li><li><a href=/php/posix/posix_getpwnam/>posix_getpwnam</a></li><li><a href=/php/posix/posix_getpwuid/>posix_getpwuid</a></li><li><a href=/php/posix/posix_getrlimit/>posix_getrlimit</a></li><li><a href=/php/posix/posix_getsid/>posix_getsid</a></li><li><a href=/php/posix/posix_getuid/>posix_getuid</a></li><li><a href=/php/posix/posix_initgroups/>posix_initgroups</a></li><li><a href=/php/posix/posix_isatty/>posix_isatty</a></li><li><a href=/php/posix/posix_kill/>posix_kill</a></li><li><a href=/php/posix/posix_mkfifo/>posix_mkfifo</a></li><li><a href=/php/posix/posix_mknod/>posix_mknod</a></li><li><a href=/php/posix/posix_pathconf/>posix_pathconf</a></li><li><a href=/php/posix/posix_setegid/>posix_setegid</a></li><li><a href=/php/posix/posix_seteuid/>posix_seteuid</a></li><li><a href=/php/posix/posix_setgid/>posix_setgid</a></li><li><a href=/php/posix/posix_setpgid/>posix_setpgid</a></li><li><a href=/php/posix/posix_setrlimit/>posix_setrlimit</a></li><li><a href=/php/posix/posix_setsid/>posix_setsid</a></li><li><a href=/php/posix/posix_setuid/>posix_setuid</a></li><li><a href=/php/posix/posix_strerror/>posix_strerror</a></li><li><a href=/php/posix/posix_sysconf/>posix_sysconf</a></li><li><a href=/php/posix/posix_times/>posix_times</a></li><li><a href=/php/posix/posix_ttyname/>posix_ttyname</a></li><li><a href=/php/posix/posix_uname/>posix_uname</a></li></ul></div><h2>Random</h2><div><ul><li><a href=/php/random/getrandmax/>getrandmax</a></li><li><a href=/php/random/lcg_value/>lcg_value</a></li><li><a href=/php/random/mt_getrandmax/>mt_getrandmax</a></li><li><a href=/php/random/mt_rand/>mt_rand</a></li><li><a href=/php/random/mt_srand/>mt_srand</a></li><li><a href=/php/random/rand/>rand</a></li><li><a href=/php/random/random_bytes/>random_bytes</a></li><li><a href=/php/random/random_int/>random_int</a></li><li><a href=/php/random/srand/>srand</a></li></ul></div><h2>Readline</h2><div><ul><li><a href=/php/readline/readline/>readline</a></li><li><a href=/php/readline/readline_add_history/>readline_add_history</a></li><li><a href=/php/readline/readline_callback_handler_install/>readline_callback_handler_install</a></li><li><a href=/php/readline/readline_callback_handler_remove/>readline_callback_handler_remove</a></li><li><a href=/php/readline/readline_callback_read_char/>readline_callback_read_char</a></li><li><a href=/php/readline/readline_clear_history/>readline_clear_history</a></li><li><a href=/php/readline/readline_completion_function/>readline_completion_function</a></li><li><a href=/php/readline/readline_info/>readline_info</a></li><li><a href=/php/readline/readline_list_history/>readline_list_history</a></li><li><a href=/php/readline/readline_on_new_line/>readline_on_new_line</a></li><li><a href=/php/readline/readline_read_history/>readline_read_history</a></li><li><a href=/php/readline/readline_redisplay/>readline_redisplay</a></li><li><a href=/php/readline/readline_write_history/>readline_write_history</a></li></ul></div><h2>ReflectionConstant</h2><div><ul><li><a href=/php/reflectionconstant/getname/>getName</a></li><li><a href=/php/reflectionconstant/getnamespacename/>getNamespaceName</a></li><li><a href=/php/reflectionconstant/getshortname/>getShortName</a></li><li><a href=/php/reflectionconstant/getvalue/>getValue</a></li><li><a href=/php/reflectionconstant/isdeprecated/>isDeprecated</a></li></ul></div><h2>Session</h2><div><ul><li><a href=/php/session/session_abort/>session_abort</a></li><li><a href=/php/session/session_cache_expire/>session_cache_expire</a></li><li><a href=/php/session/session_cache_limiter/>session_cache_limiter</a></li><li><a href=/php/session/session_commit/>session_commit</a></li><li><a href=/php/session/session_create_id/>session_create_id</a></li><li><a href=/php/session/session_decode/>session_decode</a></li><li><a href=/php/session/session_destroy/>session_destroy</a></li><li><a href=/php/session/session_encode/>session_encode</a></li><li><a href=/php/session/session_gc/>session_gc</a></li><li><a href=/php/session/session_get_cookie_params/>session_get_cookie_params</a></li><li><a href=/php/session/session_id/>session_id</a></li><li><a href=/php/session/session_module_name/>session_module_name</a></li><li><a href=/php/session/session_name/>session_name</a></li><li><a href=/php/session/session_regenerate_id/>session_regenerate_id</a></li><li><a href=/php/session/session_register_shutdown/>session_register_shutdown</a></li><li><a href=/php/session/session_reset/>session_reset</a></li><li><a href=/php/session/session_save_path/>session_save_path</a></li><li><a href=/php/session/session_set_cookie_params/>session_set_cookie_params</a></li><li><a href=/php/session/session_set_save_handler/>session_set_save_handler</a></li><li><a href=/php/session/session_start/>session_start</a></li><li><a href=/php/session/session_status/>session_status</a></li><li><a href=/php/session/session_unset/>session_unset</a></li><li><a href=/php/session/session_write_close/>session_write_close</a></li></ul></div><h2>Shmop</h2><div><ul><li><a href=/php/shmop/shmop_delete/>shmop_delete</a></li><li><a href=/php/shmop/shmop_open/>shmop_open</a></li><li><a href=/php/shmop/shmop_read/>shmop_read</a></li><li><a href=/php/shmop/shmop_size/>shmop_size</a></li><li><a href=/php/shmop/shmop_write/>shmop_write</a></li></ul></div><h2>SimpleXML</h2><div><ul><li><a href=/php/simplexml/simplexml_import_dom/>simplexml_import_dom</a></li><li><a href=/php/simplexml/simplexml_load_file/>simplexml_load_file</a></li><li><a href=/php/simplexml/simplexml_load_string/>simplexml_load_string</a></li></ul></div><h2>SNMP</h2><div><ul><li><a href=/php/snmp/snmp_get_quick_print/>snmp_get_quick_print</a></li><li><a href=/php/snmp/snmp_get_valueretrieval/>snmp_get_valueretrieval</a></li><li><a href=/php/snmp/snmp_read_mib/>snmp_read_mib</a></li><li><a href=/php/snmp/snmp_set_enum_print/>snmp_set_enum_print</a></li><li><a href=/php/snmp/snmp_set_oid_numeric_print/>snmp_set_oid_numeric_print</a></li><li><a href=/php/snmp/snmp_set_oid_output_format/>snmp_set_oid_output_format</a></li><li><a href=/php/snmp/snmp_set_quick_print/>snmp_set_quick_print</a></li><li><a href=/php/snmp/snmp_set_valueretrieval/>snmp_set_valueretrieval</a></li><li><a href=/php/snmp/snmp2_get/>snmp2_get</a></li><li><a href=/php/snmp/snmp2_getnext/>snmp2_getnext</a></li><li><a href=/php/snmp/snmp2_real_walk/>snmp2_real_walk</a></li><li><a href=/php/snmp/snmp2_set/>snmp2_set</a></li><li><a href=/php/snmp/snmp2_walk/>snmp2_walk</a></li><li><a href=/php/snmp/snmp3_get/>snmp3_get</a></li><li><a href=/php/snmp/snmp3_getnext/>snmp3_getnext</a></li><li><a href=/php/snmp/snmp3_real_walk/>snmp3_real_walk</a></li><li><a href=/php/snmp/snmp3_set/>snmp3_set</a></li><li><a href=/php/snmp/snmp3_walk/>snmp3_walk</a></li><li><a href=/php/snmp/snmpget/>snmpget</a></li><li><a href=/php/snmp/snmpgetnext/>snmpgetnext</a></li><li><a href=/php/snmp/snmprealwalk/>snmprealwalk</a></li><li><a href=/php/snmp/snmpset/>snmpset</a></li><li><a href=/php/snmp/snmpwalk/>snmpwalk</a></li><li><a href=/php/snmp/snmpwalkoid/>snmpwalkoid</a></li></ul></div><h2>Sockets</h2><div><ul><li><a href=/php/sockets/socket_accept/>socket_accept</a></li><li><a href=/php/sockets/socket_addrinfo_bind/>socket_addrinfo_bind</a></li><li><a href=/php/sockets/socket_addrinfo_connect/>socket_addrinfo_connect</a></li><li><a href=/php/sockets/socket_addrinfo_explain/>socket_addrinfo_explain</a></li><li><a href=/php/sockets/socket_addrinfo_lookup/>socket_addrinfo_lookup</a></li><li><a href=/php/sockets/socket_atmark/>socket_atmark</a></li><li><a href=/php/sockets/socket_bind/>socket_bind</a></li><li><a href=/php/sockets/socket_clear_error/>socket_clear_error</a></li><li><a href=/php/sockets/socket_close/>socket_close</a></li><li><a href=/php/sockets/socket_cmsg_space/>socket_cmsg_space</a></li><li><a href=/php/sockets/socket_connect/>socket_connect</a></li><li><a href=/php/sockets/socket_create/>socket_create</a></li><li><a href=/php/sockets/socket_create_listen/>socket_create_listen</a></li><li><a href=/php/sockets/socket_create_pair/>socket_create_pair</a></li><li><a href=/php/sockets/socket_export_stream/>socket_export_stream</a></li><li><a href=/php/sockets/socket_get_option/>socket_get_option</a></li><li><a href=/php/sockets/socket_getopt/>socket_getopt</a></li><li><a href=/php/sockets/socket_getpeername/>socket_getpeername</a></li><li><a href=/php/sockets/socket_getsockname/>socket_getsockname</a></li><li><a href=/php/sockets/socket_import_stream/>socket_import_stream</a></li><li><a href=/php/sockets/socket_last_error/>socket_last_error</a></li><li><a href=/php/sockets/socket_listen/>socket_listen</a></li><li><a href=/php/sockets/socket_read/>socket_read</a></li><li><a href=/php/sockets/socket_recv/>socket_recv</a></li><li><a href=/php/sockets/socket_recvfrom/>socket_recvfrom</a></li><li><a href=/php/sockets/socket_recvmsg/>socket_recvmsg</a></li><li><a href=/php/sockets/socket_select/>socket_select</a></li><li><a href=/php/sockets/socket_send/>socket_send</a></li><li><a href=/php/sockets/socket_sendmsg/>socket_sendmsg</a></li><li><a href=/php/sockets/socket_sendto/>socket_sendto</a></li><li><a href=/php/sockets/socket_set_block/>socket_set_block</a></li><li><a href=/php/sockets/socket_set_nonblock/>socket_set_nonblock</a></li><li><a href=/php/sockets/socket_set_option/>socket_set_option</a></li><li><a href=/php/sockets/socket_setopt/>socket_setopt</a></li><li><a href=/php/sockets/socket_shutdown/>socket_shutdown</a></li><li><a href=/php/sockets/socket_strerror/>socket_strerror</a></li><li><a href=/php/sockets/socket_write/>socket_write</a></li><li><a href=/php/sockets/socket_wsaprotocol_info_export/>socket_wsaprotocol_info_export</a></li><li><a href=/php/sockets/socket_wsaprotocol_info_import/>socket_wsaprotocol_info_import</a></li><li><a href=/php/sockets/socket_wsaprotocol_info_release/>socket_wsaprotocol_info_release</a></li></ul></div><h2>SPL</h2><div><ul><li><a href=/php/spl/class_implements/>class_implements</a></li><li><a href=/php/spl/class_parents/>class_parents</a></li><li><a href=/php/spl/class_uses/>class_uses</a></li><li><a href=/php/spl/iterator_apply/>iterator_apply</a></li><li><a href=/php/spl/iterator_count/>iterator_count</a></li><li><a href=/php/spl/iterator_to_array/>iterator_to_array</a></li><li><a href=/php/spl/spl_autoload/>spl_autoload</a></li><li><a href=/php/spl/spl_autoload_call/>spl_autoload_call</a></li><li><a href=/php/spl/spl_autoload_extensions/>spl_autoload_extensions</a></li><li><a href=/php/spl/spl_autoload_functions/>spl_autoload_functions</a></li><li><a href=/php/spl/spl_autoload_register/>spl_autoload_register</a></li><li><a href=/php/spl/spl_autoload_unregister/>spl_autoload_unregister</a></li><li><a href=/php/spl/spl_classes/>spl_classes</a></li><li><a href=/php/spl/spl_object_hash/>spl_object_hash</a></li><li><a href=/php/spl/spl_object_id/>spl_object_id</a></li></ul></div><h2>Stream</h2><div><ul><li><a href=/php/stream/stream_bucket_append/>stream_bucket_append</a></li><li><a href=/php/stream/stream_bucket_make_writeable/>stream_bucket_make_writeable</a></li><li><a href=/php/stream/stream_bucket_new/>stream_bucket_new</a></li><li><a href=/php/stream/stream_bucket_prepend/>stream_bucket_prepend</a></li><li><a href=/php/stream/stream_context_create/>stream_context_create</a></li><li><a href=/php/stream/stream_context_get_default/>stream_context_get_default</a></li><li><a href=/php/stream/stream_context_get_options/>stream_context_get_options</a></li><li><a href=/php/stream/stream_context_get_params/>stream_context_get_params</a></li><li><a href=/php/stream/stream_context_set_default/>stream_context_set_default</a></li><li><a href=/php/stream/stream_context_set_option/>stream_context_set_option</a></li><li><a href=/php/stream/stream_context_set_options/>stream_context_set_options</a></li><li><a href=/php/stream/stream_context_set_params/>stream_context_set_params</a></li><li><a href=/php/stream/stream_copy_to_stream/>stream_copy_to_stream</a></li><li><a href=/php/stream/stream_filter_append/>stream_filter_append</a></li><li><a href=/php/stream/stream_filter_prepend/>stream_filter_prepend</a></li><li><a href=/php/stream/stream_filter_register/>stream_filter_register</a></li><li><a href=/php/stream/stream_filter_remove/>stream_filter_remove</a></li><li><a href=/php/stream/stream_get_contents/>stream_get_contents</a></li><li><a href=/php/stream/stream_get_filters/>stream_get_filters</a></li><li><a href=/php/stream/stream_get_line/>stream_get_line</a></li><li><a href=/php/stream/stream_get_meta_data/>stream_get_meta_data</a></li><li><a href=/php/stream/stream_get_transports/>stream_get_transports</a></li><li><a href=/php/stream/stream_get_wrappers/>stream_get_wrappers</a></li><li><a href=/php/stream/stream_is_local/>stream_is_local</a></li><li><a href=/php/stream/stream_isatty/>stream_isatty</a></li><li><a href=/php/stream/stream_notification_callback/>stream_notification_callback</a></li><li><a href=/php/stream/stream_register_wrapper/>stream_register_wrapper</a></li><li><a href=/php/stream/stream_resolve_include_path/>stream_resolve_include_path</a></li><li><a href=/php/stream/stream_select/>stream_select</a></li><li><a href=/php/stream/stream_set_blocking/>stream_set_blocking</a></li><li><a href=/php/stream/stream_set_chunk_size/>stream_set_chunk_size</a></li><li><a href=/php/stream/stream_set_read_buffer/>stream_set_read_buffer</a></li><li><a href=/php/stream/stream_set_timeout/>stream_set_timeout</a></li><li><a href=/php/stream/stream_set_write_buffer/>stream_set_write_buffer</a></li><li><a href=/php/stream/stream_socket_accept/>stream_socket_accept</a></li><li><a href=/php/stream/stream_socket_client/>stream_socket_client</a></li><li><a href=/php/stream/stream_socket_enable_crypto/>stream_socket_enable_crypto</a></li><li><a href=/php/stream/stream_socket_get_name/>stream_socket_get_name</a></li><li><a href=/php/stream/stream_socket_pair/>stream_socket_pair</a></li><li><a href=/php/stream/stream_socket_recvfrom/>stream_socket_recvfrom</a></li><li><a href=/php/stream/stream_socket_sendto/>stream_socket_sendto</a></li><li><a href=/php/stream/stream_socket_server/>stream_socket_server</a></li><li><a href=/php/stream/stream_socket_shutdown/>stream_socket_shutdown</a></li><li><a href=/php/stream/stream_supports_lock/>stream_supports_lock</a></li><li><a href=/php/stream/stream_wrapper_register/>stream_wrapper_register</a></li><li><a href=/php/stream/stream_wrapper_restore/>stream_wrapper_restore</a></li><li><a href=/php/stream/stream_wrapper_unregister/>stream_wrapper_unregister</a></li></ul></div><h2>String</h2><div><ul><li><a href=/php/string/addcslashes/>addcslashes</a></li><li><a href=/php/string/addslashes/>addslashes</a></li><li><a href=/php/string/bin2hex/>bin2hex</a></li><li><a href=/php/string/chop/>chop</a></li><li><a href=/php/string/chr/>chr</a></li><li><a href=/php/string/chunk_split/>chunk_split</a></li><li><a href=/php/string/convert_uudecode/>convert_uudecode</a></li><li><a href=/php/string/convert_uuencode/>convert_uuencode</a></li><li><a href=/php/string/count_chars/>count_chars</a></li><li><a href=/php/string/crc32/>crc32</a></li><li><a href=/php/string/crypt/>crypt</a></li><li><a href=/php/string/echo/>echo</a></li><li><a href=/php/string/explode/>explode</a></li><li><a href=/php/string/fprintf/>fprintf</a></li><li><a href=/php/string/get_html_translation_table/>get_html_translation_table</a></li><li><a href=/php/string/hebrev/>hebrev</a></li><li><a href=/php/string/hebrevc/>hebrevc</a></li><li><a href=/php/string/hex2bin/>hex2bin</a></li><li><a href=/php/string/html_entity_decode/>html_entity_decode</a></li><li><a href=/php/string/htmlentities/>htmlentities</a></li><li><a href=/php/string/htmlspecialchars/>htmlspecialchars</a></li><li><a href=/php/string/htmlspecialchars_decode/>htmlspecialchars_decode</a></li><li><a href=/php/string/implode/>implode</a></li><li><a href=/php/string/join/>join</a></li><li><a href=/php/string/lcfirst/>lcfirst</a></li><li><a href=/php/string/levenshtein/>levenshtein</a></li><li><a href=/php/string/localeconv/>localeconv</a></li><li><a href=/php/string/ltrim/>ltrim</a></li><li><a href=/php/string/md5/>md5</a></li><li><a href=/php/string/md5_file/>md5_file</a></li><li><a href=/php/string/metaphone/>metaphone</a></li><li><a href=/php/string/nl_langinfo/>nl_langinfo</a></li><li><a href=/php/string/nl2br/>nl2br</a></li><li><a href=/php/string/number_format/>number_format</a></li><li><a href=/php/string/ord/>ord</a></li><li><a href=/php/string/parse_str/>parse_str</a></li><li><a href=/php/string/print/>print</a></li><li><a href=/php/string/printf/>printf</a></li><li><a href=/php/string/quoted_printable_decode/>quoted_printable_decode</a></li><li><a href=/php/string/quoted_printable_encode/>quoted_printable_encode</a></li><li><a href=/php/string/quotemeta/>quotemeta</a></li><li><a href=/php/string/rtrim/>rtrim</a></li><li><a href=/php/string/setlocale/>setlocale</a></li><li><a href=/php/string/sha1/>sha1</a></li><li><a href=/php/string/sha1_file/>sha1_file</a></li><li><a href=/php/string/similar_text/>similar_text</a></li><li><a href=/php/string/soundex/>soundex</a></li><li><a href=/php/string/sprintf/>sprintf</a></li><li><a href=/php/string/sscanf/>sscanf</a></li><li><a href=/php/string/str_contains/>str_contains</a></li><li><a href=/php/string/str_decrement/>str_decrement</a></li><li><a href=/php/string/str_ends_with/>str_ends_with</a></li><li><a href=/php/string/str_getcsv/>str_getcsv</a></li><li><a href=/php/string/str_increment/>str_increment</a></li><li><a href=/php/string/str_ireplace/>str_ireplace</a></li><li><a href=/php/string/str_pad/>str_pad</a></li><li><a href=/php/string/str_repeat/>str_repeat</a></li><li><a href=/php/string/str_replace/>str_replace</a></li><li><a href=/php/string/str_rot13/>str_rot13</a></li><li><a href=/php/string/str_shuffle/>str_shuffle</a></li><li><a href=/php/string/str_split/>str_split</a></li><li><a href=/php/string/str_starts_with/>str_starts_with</a></li><li><a href=/php/string/str_word_count/>str_word_count</a></li><li><a href=/php/string/strcasecmp/>strcasecmp</a></li><li><a href=/php/string/strchr/>strchr</a></li><li><a href=/php/string/strcmp/>strcmp</a></li><li><a href=/php/string/strcoll/>strcoll</a></li><li><a href=/php/string/strcspn/>strcspn</a></li><li><a href=/php/string/strip_tags/>strip_tags</a></li><li><a href=/php/string/stripcslashes/>stripcslashes</a></li><li><a href=/php/string/stripos/>stripos</a></li><li><a href=/php/string/stripslashes/>stripslashes</a></li><li><a href=/php/string/stristr/>stristr</a></li><li><a href=/php/string/strlen/>strlen</a></li><li><a href=/php/string/strnatcasecmp/>strnatcasecmp</a></li><li><a href=/php/string/strnatcmp/>strnatcmp</a></li><li><a href=/php/string/strncasecmp/>strncasecmp</a></li><li><a href=/php/string/strncmp/>strncmp</a></li><li><a href=/php/string/strpbrk/>strpbrk</a></li><li><a href=/php/string/strpos/>strpos</a></li><li><a href=/php/string/strrchr/>strrchr</a></li><li><a href=/php/string/strrev/>strrev</a></li><li><a href=/php/string/strripos/>strripos</a></li><li><a href=/php/string/strrpos/>strrpos</a></li><li><a href=/php/string/strspn/>strspn</a></li><li><a href=/php/string/strstr/>strstr</a></li><li><a href=/php/string/strtok/>strtok</a></li><li><a href=/php/string/strtolower/>strtolower</a></li><li><a href=/php/string/strtoupper/>strtoupper</a></li><li><a href=/php/string/strtr/>strtr</a></li><li><a href=/php/string/substr/>substr</a></li><li><a href=/php/string/substr_compare/>substr_compare</a></li><li><a href=/php/string/substr_count/>substr_count</a></li><li><a href=/php/string/substr_replace/>substr_replace</a></li><li><a href=/php/string/trim/>trim</a></li><li><a href=/php/string/ucfirst/>ucfirst</a></li><li><a href=/php/string/ucwords/>ucwords</a></li><li><a href=/php/string/vfprintf/>vfprintf</a></li><li><a href=/php/string/vprintf/>vprintf</a></li><li><a href=/php/string/vsprintf/>vsprintf</a></li><li><a href=/php/string/wordwrap/>wordwrap</a></li></ul></div><h2>Tokenizer</h2><div><ul><li><a href=/php/tokenizer/token_get_all/>token_get_all</a></li><li><a href=/php/tokenizer/token_name/>token_name</a></li></ul></div><h2>URL</h2><div><ul><li><a href=/php/url/base64_decode/>base64_decode</a></li><li><a href=/php/url/base64_encode/>base64_encode</a></li><li><a href=/php/url/get_headers/>get_headers</a></li><li><a href=/php/url/get_meta_tags/>get_meta_tags</a></li><li><a href=/php/url/http_build_query/>http_build_query</a></li><li><a href=/php/url/parse_url/>parse_url</a></li><li><a href=/php/url/rawurldecode/>rawurldecode</a></li><li><a href=/php/url/rawurlencode/>rawurlencode</a></li><li><a href=/php/url/urldecode/>urldecode</a></li><li><a href=/php/url/urlencode/>urlencode</a></li></ul></div><h2>Variable Handling</h2><div><ul><li><a href=/php/variable-handling/boolval/>boolval</a></li><li><a href=/php/variable-handling/debug_zval_dump/>debug_zval_dump</a></li><li><a href=/php/variable-handling/doubleval/>doubleval</a></li><li><a href=/php/variable-handling/empty/>empty</a></li><li><a href=/php/variable-handling/floatval/>floatval</a></li><li><a href=/php/variable-handling/get_debug_type/>get_debug_type</a></li><li><a href=/php/variable-handling/get_defined_vars/>get_defined_vars</a></li><li><a href=/php/variable-handling/get_resource_id/>get_resource_id</a></li><li><a href=/php/variable-handling/get_resource_type/>get_resource_type</a></li><li><a href=/php/variable-handling/gettype/>gettype</a></li><li><a href=/php/variable-handling/intval/>intval</a></li><li><a href=/php/variable-handling/is_array/>is_array</a></li><li><a href=/php/variable-handling/is_bool/>is_bool</a></li><li><a href=/php/variable-handling/is_callable/>is_callable</a></li><li><a href=/php/variable-handling/is_countable/>is_countable</a></li><li><a href=/php/variable-handling/is_double/>is_double</a></li><li><a href=/php/variable-handling/is_float/>is_float</a></li><li><a href=/php/variable-handling/is_int/>is_int</a></li><li><a href=/php/variable-handling/is_integer/>is_integer</a></li><li><a href=/php/variable-handling/is_iterable/>is_iterable</a></li><li><a href=/php/variable-handling/is_long/>is_long</a></li><li><a href=/php/variable-handling/is_null/>is_null</a></li><li><a href=/php/variable-handling/is_numeric/>is_numeric</a></li><li><a href=/php/variable-handling/is_object/>is_object</a></li><li><a href=/php/variable-handling/is_real/>is_real</a></li><li><a href=/php/variable-handling/is_resource/>is_resource</a></li><li><a href=/php/variable-handling/is_scalar/>is_scalar</a></li><li><a href=/php/variable-handling/is_string/>is_string</a></li><li><a href=/php/variable-handling/isset/>isset</a></li><li><a href=/php/variable-handling/print_r/>print_r</a></li><li><a href=/php/variable-handling/serialize/>serialize</a></li><li><a href=/php/variable-handling/settype/>settype</a></li><li><a href=/php/variable-handling/strval/>strval</a></li><li><a href=/php/variable-handling/unserialize/>unserialize</a></li><li><a href=/php/variable-handling/unset/>unset</a></li><li><a href=/php/variable-handling/var_dump/>var_dump</a></li><li><a href=/php/variable-handling/var_export/>var_export</a></li></ul></div><h2>zlib</h2><div><ul><li><a href=/php/zlib/deflate_add/>deflate_add</a></li><li><a href=/php/zlib/deflate_init/>deflate_init</a></li><li><a href=/php/zlib/gzclose/>gzclose</a></li><li><a href=/php/zlib/gzcompress/>gzcompress</a></li><li><a href=/php/zlib/gzdecode/>gzdecode</a></li><li><a href=/php/zlib/gzdeflate/>gzdeflate</a></li><li><a href=/php/zlib/gzencode/>gzencode</a></li><li><a href=/php/zlib/gzeof/>gzeof</a></li><li><a href=/php/zlib/gzfile/>gzfile</a></li><li><a href=/php/zlib/gzgetc/>gzgetc</a></li><li><a href=/php/zlib/gzgets/>gzgets</a></li><li><a href=/php/zlib/gzinflate/>gzinflate</a></li><li><a href=/php/zlib/gzopen/>gzopen</a></li><li><a href=/php/zlib/gzpassthru/>gzpassthru</a></li><li><a href=/php/zlib/gzputs/>gzputs</a></li><li><a href=/php/zlib/gzread/>gzread</a></li><li><a href=/php/zlib/gzrewind/>gzrewind</a></li><li><a href=/php/zlib/gzseek/>gzseek</a></li><li><a href=/php/zlib/gztell/>gztell</a></li><li><a href=/php/zlib/gzuncompress/>gzuncompress</a></li><li><a href=/php/zlib/gzwrite/>gzwrite</a></li><li><a href=/php/zlib/inflate_add/>inflate_add</a></li><li><a href=/php/zlib/inflate_get_read_len/>inflate_get_read_len</a></li><li><a href=/php/zlib/inflate_get_status/>inflate_get_status</a></li><li><a href=/php/zlib/inflate_init/>inflate_init</a></li><li><a href=/php/zlib/ob_gzhandler/>ob_gzhandler</a></li><li><a href=/php/zlib/readgzfile/>readgzfile</a></li><li><a href=/php/zlib/zlib_decode/>zlib_decode</a></li><li><a href=/php/zlib/zlib_encode/>zlib_encode</a></li><li><a href=/php/zlib/zlib_get_coding_type/>zlib_get_coding_type</a></li></ul></div></div><div class=h1><a id=switch-svg>SVG</a></div><div id=list-svg><h2>Overview</h2><div><ul><li><a href=/svg/>Overview</a></li></ul></div><h2>Attributes</h2><div><ul><li><a href=/svg/attributes/accumulate/>accumulate</a></li><li><a href=/svg/attributes/additive/>additive</a></li><li><a href=/svg/attributes/amplitude/>amplitude</a></li><li><a href=/svg/attributes/attributename/>attributeName</a></li><li><a href=/svg/attributes/azimuth/>azimuth</a></li><li><a href=/svg/attributes/basefrequency/>baseFrequency</a></li><li><a href=/svg/attributes/begin/>begin</a></li><li><a href=/svg/attributes/bias/>bias</a></li><li><a href=/svg/attributes/by/>by</a></li><li><a href=/svg/attributes/calcmode/>calcMode</a></li><li><a href=/svg/attributes/clippathunits/>clipPathUnits</a></li><li><a href=/svg/attributes/crossorigin/>crossorigin</a></li><li><a href=/svg/attributes/cx/>cx</a></li><li><a href=/svg/attributes/cy/>cy</a></li><li><a href=/svg/attributes/d/>d</a></li><li><a href=/svg/attributes/diffuseconstant/>diffuseConstant</a></li><li><a href=/svg/attributes/divisor/>divisor</a></li><li><a href=/svg/attributes/download/>download</a></li><li><a href=/svg/attributes/dur/>dur</a></li><li><a href=/svg/attributes/dx/>dx</a></li><li><a href=/svg/attributes/dy/>dy</a></li><li><a href=/svg/attributes/edgemode/>edgeMode</a></li><li><a href=/svg/attributes/elevation/>elevation</a></li><li><a href=/svg/attributes/end/>end</a></li><li><a href=/svg/attributes/exponent/>exponent</a></li><li><a href=/svg/attributes/fill/>fill</a></li><li><a href=/svg/attributes/filterunits/>filterUnits</a></li><li><a href=/svg/attributes/flood-color/>flood-color</a></li><li><a href=/svg/attributes/flood-opacity/>flood-opacity</a></li><li><a href=/svg/attributes/fr/>fr</a></li><li><a href=/svg/attributes/from/>from</a></li><li><a href=/svg/attributes/fx/>fx</a></li><li><a href=/svg/attributes/fy/>fy</a></li><li><a href=/svg/attributes/gradienttransform/>gradientTransform</a></li><li><a href=/svg/attributes/gradientunits/>gradientUnits</a></li><li><a href=/svg/attributes/height/>height</a></li><li><a href=/svg/attributes/href/>href</a></li><li><a href=/svg/attributes/hreflang/>hreflang</a></li><li><a href=/svg/attributes/id/>id</a></li><li><a href=/svg/attributes/in/>in</a></li><li><a href=/svg/attributes/in2/>in2</a></li><li><a href=/svg/attributes/intercept/>intercept</a></li><li><a href=/svg/attributes/k1/>k1</a></li><li><a href=/svg/attributes/k2/>k2</a></li><li><a href=/svg/attributes/k3/>k3</a></li><li><a href=/svg/attributes/k4/>k4</a></li><li><a href=/svg/attributes/kernelmatrix/>kernelMatrix</a></li><li><a href=/svg/attributes/keypoints/>keyPoints</a></li><li><a href=/svg/attributes/keysplines/>keySplines</a></li><li><a href=/svg/attributes/keytimes/>keyTimes</a></li><li><a href=/svg/attributes/lengthadjust/>lengthAdjust</a></li><li><a href=/svg/attributes/limitingconeangle/>limitingConeAngle</a></li><li><a href=/svg/attributes/markerheight/>markerHeight</a></li><li><a href=/svg/attributes/markerunits/>markerUnits</a></li><li><a href=/svg/attributes/markerwidth/>markerWidth</a></li><li><a href=/svg/attributes/maskcontentunits/>maskContentUnits</a></li><li><a href=/svg/attributes/maskunits/>maskUnits</a></li><li><a href=/svg/attributes/max/>max</a></li><li><a href=/svg/attributes/media/>media</a></li><li><a href=/svg/attributes/method/>method</a></li><li><a href=/svg/attributes/min/>min</a></li><li><a href=/svg/attributes/mode/>mode</a></li><li><a href=/svg/attributes/no-composite/>no-composite</a></li><li><a href=/svg/attributes/numoctaves/>numOctaves</a></li><li><a href=/svg/attributes/offset/>offset</a></li><li><a href=/svg/attributes/onbegin/>onbegin</a></li><li><a href=/svg/attributes/onend/>onend</a></li><li><a href=/svg/attributes/onrepeat/>onrepeat</a></li><li><a href=/svg/attributes/operator/>operator</a></li><li><a href=/svg/attributes/order/>order</a></li><li><a href=/svg/attributes/orient/>orient</a></li><li><a href=/svg/attributes/origin/>origin</a></li><li><a href=/svg/attributes/path/>path</a></li><li><a href=/svg/attributes/pathlength/>pathLength</a></li><li><a href=/svg/attributes/patterncontentunits/>patternContentUnits</a></li><li><a href=/svg/attributes/patterntransform/>patternTransform</a></li><li><a href=/svg/attributes/patternunits/>patternUnits</a></li><li><a href=/svg/attributes/ping/>ping</a></li><li><a href=/svg/attributes/points/>points</a></li><li><a href=/svg/attributes/pointsatx/>pointsAtX</a></li><li><a href=/svg/attributes/pointsaty/>pointsAtY</a></li><li><a href=/svg/attributes/pointsatz/>pointsAtZ</a></li><li><a href=/svg/attributes/preservealpha/>preserveAlpha</a></li><li><a href=/svg/attributes/preserveaspectratio/>preserveAspectRatio</a></li><li><a href=/svg/attributes/primitiveunits/>primitiveUnits</a></li><li><a href=/svg/attributes/r/>r</a></li><li><a href=/svg/attributes/radius/>radius</a></li><li><a href=/svg/attributes/referrerpolicy/>referrerPolicy</a></li><li><a href=/svg/attributes/refx/>refx</a></li><li><a href=/svg/attributes/refy/>refy</a></li><li><a href=/svg/attributes/rel/>rel</a></li><li><a href=/svg/attributes/repeatcount/>repeatCount</a></li><li><a href=/svg/attributes/repeatdur/>repeatDur</a></li><li><a href=/svg/attributes/requiredextensions/>requiredExtensions</a></li><li><a href=/svg/attributes/restart/>restart</a></li><li><a href=/svg/attributes/rotate/>rotate</a></li><li><a href=/svg/attributes/rx/>rx</a></li><li><a href=/svg/attributes/ry/>ry</a></li><li><a href=/svg/attributes/scale/>scale</a></li><li><a href=/svg/attributes/seed/>seed</a></li><li><a href=/svg/attributes/side/>side</a></li><li><a href=/svg/attributes/slope/>slope</a></li><li><a href=/svg/attributes/spacing/>spacing</a></li><li><a href=/svg/attributes/specularconstant/>specularConstant</a></li><li><a href=/svg/attributes/specularexponent/>specularExponent</a></li><li><a href=/svg/attributes/spreadmethod/>spreadMethod</a></li><li><a href=/svg/attributes/startoffset/>startoffset</a></li><li><a href=/svg/attributes/stddeviation/>stdDeviation</a></li><li><a href=/svg/attributes/stitchtiles/>stitchTiles</a></li><li><a href=/svg/attributes/stop-color/>stop-color</a></li><li><a href=/svg/attributes/stop-opacity/>stop-opacity</a></li><li><a href=/svg/attributes/surfacescale/>surfaceScale</a></li><li><a href=/svg/attributes/systemlanguage/>systemLanguage</a></li><li><a href=/svg/attributes/tabindex/>tabindex</a></li><li><a href=/svg/attributes/tablevalues/>tableValues</a></li><li><a href=/svg/attributes/target/>target</a></li><li><a href=/svg/attributes/targetx/>targetX</a></li><li><a href=/svg/attributes/targety/>targetY</a></li><li><a href=/svg/attributes/textlength/>textLength</a></li><li><a href=/svg/attributes/title/>title</a></li><li><a href=/svg/attributes/to/>to</a></li><li><a href=/svg/attributes/transform/>transform</a></li><li><a href=/svg/attributes/type/>type</a></li><li><a href=/svg/attributes/values/>values</a></li><li><a href=/svg/attributes/viewbox/>viewBox</a></li><li><a href=/svg/attributes/width/>width</a></li><li><a href=/svg/attributes/x/>x</a></li><li><a href=/svg/attributes/x1/>x1</a></li><li><a href=/svg/attributes/x2/>x2</a></li><li><a href=/svg/attributes/xchannelselector/>xChannelSelector</a></li><li><a href=/svg/attributes/y/>y</a></li><li><a href=/svg/attributes/y1/>y1</a></li><li><a href=/svg/attributes/y2/>y2</a></li><li><a href=/svg/attributes/ychannelselector/>yChannelSelector</a></li><li><a href=/svg/attributes/z/>z</a></li><li><a href=/svg/attributes/zoomandpan/>zoomAndPan</a></li></ul></div><h2>Elements</h2><div><ul><li><a href=/svg/elements/a/>a</a></li><li><a href=/svg/elements/animate/>animate</a></li><li><a href=/svg/elements/animatemotion/>animateMotion</a></li><li><a href=/svg/elements/animatetransform/>animateTransform</a></li><li><a href=/svg/elements/circle/>circle</a></li><li><a href=/svg/elements/clippath/>clipPath</a></li><li><a href=/svg/elements/defs/>defs</a></li><li><a href=/svg/elements/desc/>desc</a></li><li><a href=/svg/elements/discard/>discard</a></li><li><a href=/svg/elements/ellipse/>ellipse</a></li><li><a href=/svg/elements/feblend/>feBlend</a></li><li><a href=/svg/elements/fecolormatrix/>feColorMatrix</a></li><li><a href=/svg/elements/fecomponenttransfer/>feComponentTransfer</a></li><li><a href=/svg/elements/fecomposite/>feComposite</a></li><li><a href=/svg/elements/feconvolvematrix/>feConvolveMatrix</a></li><li><a href=/svg/elements/fediffuselighting/>feDiffuseLighting</a></li><li><a href=/svg/elements/fedisplacementmap/>feDisplacementMap</a></li><li><a href=/svg/elements/fedistantlight/>feDistantLight</a></li><li><a href=/svg/elements/fedropshadow/>feDropShadow</a></li><li><a href=/svg/elements/feflood/>feFlood</a></li><li><a href=/svg/elements/fefunca/>feFuncA</a></li><li><a href=/svg/elements/fefuncb/>feFuncB</a></li><li><a href=/svg/elements/fefuncg/>feFuncG</a></li><li><a href=/svg/elements/fefuncr/>feFuncR</a></li><li><a href=/svg/elements/fegaussianblur/>feGaussianBlur</a></li><li><a href=/svg/elements/feimage/>feImage</a></li><li><a href=/svg/elements/femerge/>feMerge</a></li><li><a href=/svg/elements/femergenode/>feMergeNode</a></li><li><a href=/svg/elements/femorphology/>feMorphology</a></li><li><a href=/svg/elements/feoffset/>feOffset</a></li><li><a href=/svg/elements/fepointlight/>fePointLight</a></li><li><a href=/svg/elements/fespecularlighting/>feSpecularLighting</a></li><li><a href=/svg/elements/fespotlight/>feSpotLight</a></li><li><a href=/svg/elements/fetile/>feTile</a></li><li><a href=/svg/elements/feturbulence/>feTurbulence</a></li><li><a href=/svg/elements/filter/>filter</a></li><li><a href=/svg/elements/foreignobject/>foreignObject</a></li><li><a href=/svg/elements/g/>g</a></li><li><a href=/svg/elements/image/>image</a></li><li><a href=/svg/elements/line/>line</a></li><li><a href=/svg/elements/lineargradient/>linearGradient</a></li><li><a href=/svg/elements/marker/>marker</a></li><li><a href=/svg/elements/mask/>mask</a></li><li><a href=/svg/elements/metadata/>metadata</a></li><li><a href=/svg/elements/mpath/>mpath</a></li><li><a href=/svg/elements/path/>path</a></li><li><a href=/svg/elements/pattern/>pattern</a></li><li><a href=/svg/elements/polygon/>polygon</a></li><li><a href=/svg/elements/polyline/>polyline</a></li><li><a href=/svg/elements/radialgradient/>radialGradient</a></li><li><a href=/svg/elements/rect/>rect</a></li><li><a href=/svg/elements/script/>script</a></li><li><a href=/svg/elements/set/>set</a></li><li><a href=/svg/elements/stop/>stop</a></li><li><a href=/svg/elements/style/>style</a></li><li><a href=/svg/elements/svg/>svg</a></li><li><a href=/svg/elements/switch/>switch</a></li><li><a href=/svg/elements/symbol/>symbol</a></li><li><a href=/svg/elements/text/>text</a></li><li><a href=/svg/elements/textpath/>textPath</a></li><li><a href=/svg/elements/title/>title</a></li><li><a href=/svg/elements/tspan/>tspan</a></li><li><a href=/svg/elements/unknown/>unknown</a></li><li><a href=/svg/elements/use/>use</a></li><li><a href=/svg/elements/view/>view</a></li></ul></div><h2>Values</h2><div><ul><li><a href=/svg/values/_blank/>_blank</a></li><li><a href=/svg/values/_parent/>_parent</a></li><li><a href=/svg/values/_self/>_self</a></li><li><a href=/svg/values/_top/>_top</a></li><li><a href=/svg/values/a/>A</a></li><li><a href=/svg/values/align/>align</a></li><li><a href=/svg/values/alpha-value/>alpha-value</a></li><li><a href=/svg/values/always/>always</a></li><li><a href=/svg/values/angle/>angle</a></li><li><a href=/svg/values/anonymous/>anonymous</a></li><li><a href=/svg/values/arithmetic/>arithmetic</a></li><li><a href=/svg/values/atop/>atop</a></li><li><a href=/svg/values/auto/>auto</a></li><li><a href=/svg/values/auto-start-reverse/>auto-start-reverse</a></li><li><a href=/svg/values/auto-reverse/>auto-reverse</a></li><li><a href=/svg/values/b/>B</a></li><li><a href=/svg/values/backgroundalpha/>BackgroundAlpha</a></li><li><a href=/svg/values/backgroundimage/>BackgroundImage</a></li><li><a href=/svg/values/begin-value-list/>begin-value-list</a></li><li><a href=/svg/values/blend-mode/>blend-mode</a></li><li><a href=/svg/values/bottom/>bottom</a></li><li><a href=/svg/values/center/>center</a></li><li><a href=/svg/values/clock-value/>clock-value</a></li><li><a href=/svg/values/color/>color</a></li><li><a href=/svg/values/control-point/>control-point</a></li><li><a href=/svg/values/currentcolor/>currentColor</a></li><li><a href=/svg/values/default/>default</a></li><li><a href=/svg/values/dilate/>dilate</a></li><li><a href=/svg/values/disable/>disable</a></li><li><a href=/svg/values/discrete/>discrete</a></li><li><a href=/svg/values/duplicate/>duplicate</a></li><li><a href=/svg/values/empty-string/>empty-string</a></li><li><a href=/svg/values/end-value-list/>end-value-list</a></li><li><a href=/svg/values/erode/>erode</a></li><li><a href=/svg/values/exact/>exact</a></li><li><a href=/svg/values/false/>false</a></li><li><a href=/svg/values/fillpaint/>FillPaint</a></li><li><a href=/svg/values/filter-primitive-reference/>filter-primitive-reference</a></li><li><a href=/svg/values/fractalnoise/>fractalNoise</a></li><li><a href=/svg/values/freeze/>freeze</a></li><li><a href=/svg/values/g/>G</a></li><li><a href=/svg/values/gamma/>gamma</a></li><li><a href=/svg/values/height/>height</a></li><li><a href=/svg/values/huerotate/>hueRotate</a></li><li><a href=/svg/values/icccolor/>icccolor</a></li><li><a href=/svg/values/id/>id</a></li><li><a href=/svg/values/identity/>identity</a></li><li><a href=/svg/values/in/>in</a></li><li><a href=/svg/values/indefinite/>indefinite</a></li><li><a href=/svg/values/integer/>integer</a></li><li><a href=/svg/values/left/>left</a></li><li><a href=/svg/values/length/>length</a></li><li><a href=/svg/values/length-percentage/>length-percentage</a></li><li><a href=/svg/values/lighter/>lighter</a></li><li><a href=/svg/values/linear/>linear</a></li><li><a href=/svg/values/list/>list</a></li><li><a href=/svg/values/list-of-numbers/>list-of-numbers</a></li><li><a href=/svg/values/luminancetoalpha/>luminanceToAlpha</a></li><li><a href=/svg/values/magnify/>magnify</a></li><li><a href=/svg/values/matrix/>matrix</a></li><li><a href=/svg/values/media/>media</a></li><li><a href=/svg/values/meetorslice/>meetOrSlice</a></li><li><a href=/svg/values/min-x/>min-x</a></li><li><a href=/svg/values/min-y/>min-y</a></li><li><a href=/svg/values/name/>name</a></li><li><a href=/svg/values/never/>never</a></li><li><a href=/svg/values/no-composite/>no-composite</a></li><li><a href=/svg/values/no-referrer/>no-referrer</a></li><li><a href=/svg/values/no-referrer-when-downgrade/>no-referrer-when-downgrade</a></li><li><a href=/svg/values/none/>none</a></li><li><a href=/svg/values/nostitch/>noStitch</a></li><li><a href=/svg/values/number/>number</a></li><li><a href=/svg/values/number-optional-number/>number-optional-number</a></li><li><a href=/svg/values/objectboundingbox/>objectBoundingBox</a></li><li><a href=/svg/values/origin/>origin</a></li><li><a href=/svg/values/origin-when-cross-origin/>origin-when-cross-origin</a></li><li><a href=/svg/values/out/>out</a></li><li><a href=/svg/values/over/>over</a></li><li><a href=/svg/values/paced/>paced</a></li><li><a href=/svg/values/pad/>pad</a></li><li><a href=/svg/values/path-data/>path-data</a></li><li><a href=/svg/values/percentage/>percentage</a></li><li><a href=/svg/values/points/>points</a></li><li><a href=/svg/values/r/>R</a></li><li><a href=/svg/values/reflect/>reflect</a></li><li><a href=/svg/values/remove/>remove</a></li><li><a href=/svg/values/repeat/>repeat</a></li><li><a href=/svg/values/replace/>replace</a></li><li><a href=/svg/values/right/>right</a></li><li><a href=/svg/values/rotate/>rotate</a></li><li><a href=/svg/values/same-origin/>same-origin</a></li><li><a href=/svg/values/saturate/>saturate</a></li><li><a href=/svg/values/scale/>scale</a></li><li><a href=/svg/values/script/>script</a></li><li><a href=/svg/values/set-of-comma-separated-tokens/>set-of-comma-separated-tokens</a></li><li><a href=/svg/values/set-of-space-separated-tokens/>set-of-space-separated-tokens</a></li><li><a href=/svg/values/skewx/>skewx</a></li><li><a href=/svg/values/skewy/>skewy</a></li><li><a href=/svg/values/sourcealpha/>SourceAlpha</a></li><li><a href=/svg/values/sourcegraphic/>SourceGraphic</a></li><li><a href=/svg/values/spacing/>spacing</a></li><li><a href=/svg/values/spacingandglyphs/>spacingAndGlyphs</a></li><li><a href=/svg/values/spline/>spline</a></li><li><a href=/svg/values/stitch/>stitch</a></li><li><a href=/svg/values/stretch/>stretch</a></li><li><a href=/svg/values/strict-origin/>strict-origin</a></li><li><a href=/svg/values/strict-origin-when-cross-origin/>strict-origin-when-cross-origin</a></li><li><a href=/svg/values/string/>string</a></li><li><a href=/svg/values/strokepaint/>StrokePaint</a></li><li><a href=/svg/values/strokewidth/>strokeWidth</a></li><li><a href=/svg/values/sum/>sum</a></li><li><a href=/svg/values/table/>table</a></li><li><a href=/svg/values/tokens/>tokens</a></li><li><a href=/svg/values/top/>top</a></li><li><a href=/svg/values/transform-list/>transform-list</a></li><li><a href=/svg/values/translate/>translate</a></li><li><a href=/svg/values/true/>true</a></li><li><a href=/svg/values/turbulence/>turbulence</a></li><li><a href=/svg/values/unsafe-url/>unsafe-url</a></li><li><a href=/svg/values/url/>url</a></li><li><a href=/svg/values/use-credentials/>use-credentials</a></li><li><a href=/svg/values/userspaceonuse/>userSpaceOnUse</a></li><li><a href=/svg/values/valid-integer/>valid-integer</a></li><li><a href=/svg/values/value/>value</a></li><li><a href=/svg/values/whennotactive/>whenNotActive</a></li><li><a href=/svg/values/width/>width</a></li><li><a href=/svg/values/wrap/>wrap</a></li><li><a href=/svg/values/xml-name/>XML-Name</a></li><li><a href=/svg/values/xor/>xor</a></li></ul></div></div><div class=h1><a id=switch-applications>APPLICATIONS</a></div><div id=list-applications><h2>Overview</h2><div><ul><li><a href=/applications/>Overview</a></li></ul></div><h2>Bible</h2><div><ul><li><a href=/applications/Bible-passages/>Bible Passages</a></li><li><a href=/applications/Bible-pictures/>Bible Pictures</a></li><li><a href=/applications/Jesus-loves-the-little-children/>Jesus Loves the Little Children</a></li><li><a href=/applications/merry-Christmas/>Merry Christmas</a></li><li><a href=/applications/one-man-one-woman-one-lifetime/>One Man. One Woman. One Lifetime.</a></li><li><a href=/applications/The-Armor-of-God/>The Armor of God</a></li></ul></div><h2>Cards</h2><div><ul><li><a href=/applications/euchre/>Euchre</a></li><li><a href=/applications/sevens/>Sevens</a></li><li><a href=/applications/solitaire/>Solitaire</a></li></ul></div><h2>LEGO</h2><div><ul><li><a href=/applications/lego-cannonball-bingo/>LEGO Cannonball Bingo</a></li><li><a href=/applications/lego-pandamonium/>LEGO Pandamonium</a></li><li><a href=/applications/lego-pirate-plunder/>LEGO Pirate Plunder</a></li><li><a href=/applications/lego-the-machine/>LEGO The Machine</a></li></ul></div><h2>Other</h2><div><ul><li><a href=/applications/miniature-golf/>Miniature Golf</a></li><li><a href=/applications/space-station/>Space Station</a></li></ul></div></div><div class=h1><a href=/editor/>EDITOR</a></div><div class=h1><a href=/favicon/>FAVICON</a></div><div class=h1><a href=/htaccess/>.HTACCESS</a></div><div class=h1><a href=/acme.sh/>ACME.SH</a></div><div class=h1><a id=switch-flash>FLASH</a></div><div id=list-flash><div class=h2><a href=/flash/detect/>DETECT</a></div><div class=h2><a id=switch-flash-actionscript>ACTIONSCRIPT</a></div><div id=list-flash-actionscript><h3>Overview</h3><div><ul><li><a href=/flash/actionscript/>Overview</a></li></ul></div><h3>Assets</h3><div><ul><li><a href=/flash/actionscript/embed/>Embed</a></li><li><a href=/flash/actionscript/load/>Load</a></li></ul></div></div><div class=h2><a id=switch-flash-as3dmod>AS3DMOD</a></div><div id=list-flash-as3dmod><h3>Overview</h3><div><ul><li><a href=/flash/as3dmod/>Overview</a></li></ul></div><h3>Modifiers</h3><div><ul><li><a href=/flash/as3dmod/bend/>Bend</a></li><li><a href=/flash/as3dmod/bloat/>Bloat</a></li><li><a href=/flash/as3dmod/cloth/>Cloth</a></li><li><a href=/flash/as3dmod/noise/>Noise</a></li><li><a href=/flash/as3dmod/perlin/>Perlin</a></li><li><a href=/flash/as3dmod/pivot/>Pivot</a></li><li><a href=/flash/as3dmod/skew/>Skew</a></li><li><a href=/flash/as3dmod/taper/>Taper</a></li><li><a href=/flash/as3dmod/twist/>Twist</a></li></ul></div><h3>Other</h3><div><ul><li><a href=/flash/as3dmod/flag/>Flag</a></li></ul></div></div><div class=h2><a href=/flash/flartoolkit/>FLARTOOLKIT</a></div><div class=h2><a id=switch-flash-jiglibflash>JIGLIBFLASH</a></div><div id=list-flash-jiglibflash><h3>Overview</h3><div><ul><li><a href=/flash/jiglibflash/>Overview</a></li></ul></div><h3>Objects</h3><div><ul><li><a href=/flash/jiglibflash/jbox/>JBox</a></li><li><a href=/flash/jiglibflash/jcapsule/>JCapsule</a></li><li><a href=/flash/jiglibflash/jplane/>JPlane</a></li><li><a href=/flash/jiglibflash/jsphere/>JSphere</a></li></ul></div><h3>Other</h3><div><ul><li><a href=/flash/jiglibflash/physics/>Physics</a></li></ul></div></div><div class=h2><a id=switch-flash-papervision3d>PAPERVISION3D</a></div><div id=list-flash-papervision3d><h3>Overview</h3><div><ul><li><a href=/flash/papervision3d/>Overview</a></li></ul></div><h3>Install</h3><div><ul><li><a href=/flash/papervision3d/install/>Install</a></li></ul></div><h3>Example</h3><div><ul><li><a href=/flash/papervision3d/1/>1</a></li><li><a href=/flash/papervision3d/2/>2</a></li><li><a href=/flash/papervision3d/3/>3</a></li><li><a href=/flash/papervision3d/4/>4</a></li><li><a href=/flash/papervision3d/5/>5</a></li></ul></div><h3>Cameras</h3><div><ul><li><a href=/flash/papervision3d/camera3d/>Camera3D</a></li><li><a href=/flash/papervision3d/debugcamera3d/>DebugCamera3D</a></li><li><a href=/flash/papervision3d/springcamera3d/>SpringCamera3D</a></li></ul></div><h3>Core</h3><div><ul><li><a href=/flash/papervision3d/lines3d/>Lines3D</a></li><li><a href=/flash/papervision3d/fogfilter/>FogFilter</a></li></ul></div><h3>Light</h3><div><ul><li><a href=/flash/papervision3d/pointlight3d/>PointLight3D</a></li></ul></div><h3>Materials</h3><div><ul><li><a href=/flash/papervision3d/bitmapfilematerial/>BitmapFileMaterial</a></li><li><a href=/flash/papervision3d/bitmapmaterial/>BitmapMaterial</a></li><li><a href=/flash/papervision3d/bitmapviewportmaterial/>BitmapViewportMaterial</a></li><li><a href=/flash/papervision3d/colormaterial/>ColorMaterial</a></li><li><a href=/flash/papervision3d/compositematerial/>CompositeMaterial</a></li><li><a href=/flash/papervision3d/moviematerial/>MovieMaterial</a></li><li><a href=/flash/papervision3d/wireframematerial/>WireframeMaterial</a></li></ul></div><h3>Shade Materials</h3><div><ul><li><a href=/flash/papervision3d/cellmaterial/>CellMaterial</a></li><li><a href=/flash/papervision3d/envmapmaterial/>EnvMapMaterial</a></li><li><a href=/flash/papervision3d/flatshadematerial/>FlatShadeMaterial</a></li><li><a href=/flash/papervision3d/gouraudmaterial/>GouraudMaterial</a></li><li><a href=/flash/papervision3d/phongmaterial/>PhongMaterial</a></li></ul></div><h3>Special Material</h3><div><ul><li><a href=/flash/papervision3d/particlematerial/>ParticleMaterial</a></li></ul></div><h3>Parser Objects</h3><div><ul><li><a href=/flash/papervision3d/dae/>DAE</a></li><li><a href=/flash/papervision3d/kmz/>KMZ</a></li></ul></div><h3>Primitive Objects</h3><div><ul><li><a href=/flash/papervision3d/arrow/>Arrow</a></li><li><a href=/flash/papervision3d/cone/>Cone</a></li><li><a href=/flash/papervision3d/cube/>Cube</a></li><li><a href=/flash/papervision3d/cylinder/>Cylinder</a></li><li><a href=/flash/papervision3d/paperplane/>PaperPlane</a></li><li><a href=/flash/papervision3d/plane/>Plane</a></li><li><a href=/flash/papervision3d/sphere/>Sphere</a></li></ul></div><h3>Special Objects</h3><div><ul><li><a href=/flash/papervision3d/particlefield/>ParticleField</a></li><li><a href=/flash/papervision3d/ucs/>UCS</a></li></ul></div><h3>Render</h3><div><ul><li><a href=/flash/papervision3d/basicrenderengine/>BasicRenderEngine</a></li><li><a href=/flash/papervision3d/lazyrenderengine/>LazyRenderEngine</a></li><li><a href=/flash/papervision3d/quadrantrenderengine/>QuadrantRenderEngine</a></li></ul></div><h3>Scene</h3><div><ul><li><a href=/flash/papervision3d/scene3d/>Scene3D</a></li></ul></div><h3>Typography</h3><div><ul><li><a href=/flash/papervision3d/text3d/>Text3D</a></li></ul></div><h3>Views</h3><div><ul><li><a href=/flash/papervision3d/basicview/>BasicView</a></li><li><a href=/flash/papervision3d/reflectionview/>ReflectionView</a></li><li><a href=/flash/papervision3d/statsview/>StatsView</a></li><li><a href=/flash/papervision3d/viewport3d/>Viewport3D</a></li></ul></div><h3>View Layers</h3><div><ul><li><a href=/flash/papervision3d/bitmapeffectlayer/>BitmapEffectLayer</a></li><li><a href=/flash/papervision3d/viewportlayer/>ViewportLayer</a></li></ul></div><h3>Other</h3><div><ul><li><a href=/flash/papervision3d/anaglyph/>Anaglyph</a></li><li><a href=/flash/papervision3d/camera-move/>Camera Move</a></li><li><a href=/flash/papervision3d/camera-rotate/>Camera Rotate</a></li><li><a href=/flash/papervision3d/camera-target-move/>Camera Target Move</a></li><li><a href=/flash/papervision3d/object-move/>Object Move</a></li><li><a href=/flash/papervision3d/object-rotate/>Object Rotate</a></li><li><a href=/flash/papervision3d/object-scale/>Object Scale</a></li><li><a href=/flash/papervision3d/panorama/>Panorama</a></li></ul></div></div></div><div class=h1><a id=switch-sketchup>SKETCHUP</a></div><div id=list-sketchup><h2>Overview</h2><div><ul><li><a href=/sketchup/>Overview</a></li></ul></div><h2>Plugins</h2><div><ul><li><a href=/sketchup/papervision3d/>Papervision3D</a></li><li><a href=/sketchup/triangulate/>Triangulate</a></li></ul></div></div><div class=h1><a id=switch-unity>UNITY</a></div><div id=list-unity><h2>Overview</h2><div><ul><li><a href=/unity/>Overview</a></li></ul></div><h2>Detect</h2><div><ul><li><a href=/unity/detect/>Detect</a></li></ul></div><h2>Games</h2><div><ul><li><a href=/unity/air-hockey/>Air Hockey</a></li><li><a href=/unity/foosball/>Foosball</a></li><li><a href=/unity/pool/>Pool</a></li></ul></div><h2>Unity</h2><div><ul><li><a href=/unity/car/>Car</a></li><li><a href=/unity/lerpz-escapes/>Lerpz Escapes</a></li><li><a href=/unity/mecanim/>Mecanim</a></li></ul></div></div><div class=h1><a id=switch-xcode>XCODE</a></div><div id=list-xcode><h2>Overview</h2><div><ul><li><a href=/xcode/>Overview</a></li></ul></div><h2>Example</h2><div><ul><li><a href=/xcode/1/>1</a></li><li><a href=/xcode/2/>2</a></li><li><a href=/xcode/3/>3</a></li><li><a href=/xcode/4/>4</a></li><li><a href=/xcode/5/>5</a></li><li><a href=/xcode/6/>6</a></li></ul></div><h2>CSV2Plist</h2><div><ul><li><a href=/xcode/csv2plist/>CSV2Plist</a></li></ul></div><h2>UI</h2><div><ul><li><a href=/xcode/uiactivityindicatorview/>UIActivityIndicatorView</a></li><li><a href=/xcode/uibutton/>UIButton</a></li><li><a href=/xcode/uiimageview/>UIImageView</a></li><li><a href=/xcode/uilabel/>UILabel</a></li><li><a href=/xcode/uipagecontrol/>UIPageControl</a></li><li><a href=/xcode/uiprogressview/>UIProgressView</a></li><li><a href=/xcode/uisegmentedcontrol/>UISegmentedControl</a></li><li><a href=/xcode/uislider/>UISlider</a></li><li><a href=/xcode/uistepper/>UIStepper</a></li><li><a href=/xcode/uiswitch/>UISwitch</a></li><li><a href=/xcode/uitextfield/>UITextField</a></li></ul></div></div><div class=h1><a href=/about/>ABOUT</a></div><div class=h1><a href=/terms/>TERMS</a></div></div></div><div id=background><video loop muted src=/assets/mp4/1/23.mp4></video></div></body></html>
0

2 · error_code

<?

$transport = "tls";
$host = "error.osbo.com";
$port = "443";

$address = $transport . "://" . $host . ":" . $port;

$return = stream_socket_client($address, $error_code);

    if(!$return)
    {
        exit("$error_code");
    }

    $string = "GET / HTTP/1.1\r\n";
    $string .= "Host: $host\r\n";
    $string .= "Connection: close\r\n\r\n";

    fwrite($return, $string);

    $length = 1024;

    while(!feof($return))
    {
        echo fgets($return, $length);
    }

fclose($return);

3 · error_message

<?

$transport = "tls";
$host = "error.osbo.com";
$port = "443";

$address = $transport . "://" . $host . ":" . $port;

$return = stream_socket_client($address, $error_code, $error_message);

    if(!$return)
    {
        exit("$error_message($error_code)");
    }

    $string = "GET / HTTP/1.1\r\n";
    $string .= "Host: $host\r\n";
    $string .= "Connection: close\r\n\r\n";

    fwrite($return, $string);

    $length = 1024;

    while(!feof($return))
    {
        echo fgets($return, $length);
    }

fclose($return);

php_network_getaddresses: getaddrinfo failed: Name or service not known(0)

4 · timeout

<?

$transport = "tls";
$host = "osbo.com";
$port = "443";

$address = $transport . "://" . $host . ":" . $port;
$timeout = 30;

$return = stream_socket_client($address, $error_code, $error_message, $timeout);

    if(!$return)
    {
        exit("$error_message($error_code)");
    }

    $string = "GET / HTTP/1.1\r\n";
    $string .= "Host: $host\r\n";
    $string .= "Connection: close\r\n\r\n";

    fwrite($return, $string);

    $length = 1024;

    while(!feof($return))
    {
        echo fgets($return, $length);
    }

fclose($return);

HTTP/1.1 200 OK
Connection: close
Cache-Control: no-store,no-transform
link: <https://osbo.com/>;rel="canonical"
x-robots-tag: noarchive,noimageindex
Content-Type: text/html; charset=UTF-8
Transfer-Encoding: chunked
Date: Fri, 23 Jan 2026 04:02:29 GMT
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
X-Content-Type-Options: nosniff

10000
<!doctype html><html lang=en><head><meta charset=utf-8><meta content=width=device-width name=viewport><meta content=osbo.com name=description><title>osbo.com</title><link defer href=/assets/css/ rel=stylesheet><link defer href=/assets/svg/ rel=icon><script defer src=/assets/js/></script><script>var _mtm = window._mtm = window._mtm || [];_mtm.push({"mtm.startTime": (new Date().getTime()), "event": "mtm.Start"});(function(){var d=document, g=d.createElement("script"), s=d.querySelector("script");g.async=true; g.src="/matomo/js/container_Gm7CI6wt.js"; s.parentNode.insertBefore(g,s);})();</script></head><body><div id=foreground><header><a href=/><img alt=Home id=home src=/assets/svg/Home.svg title=Home></a><img alt=Menu id=menu src=/assets/svg/Menu.svg title=Menu><form action=/search/><input id=search-site name=search-site title=Search type=search></form></header><footer><a href=#><img alt=Top id=top src=/assets/svg/Top.svg title=Top></a></footer></div><div id=zeroground><div id=content><header><div id=topnav><a href=/Jesus/>Jesus</a> · <a href=/Bible/>Bible</a> · <a href=/html/>HTML</a> · <a href=/css/>CSS</a> · <a href=/js/>JS</a> · <a href=/php/>PHP</a> · <a href=/svg/>SVG</a> · <a href=/applications/>Applications</a></div></header><div class=banner><script defer src=https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4239362730750625 crossorigin=anonymous></script><ins class=adsbygoogle data-ad-client=ca-pub-4239362730750625 data-ad-slot=5564639719><a href=https://samaritanspurse.org/occ/ target=_blank><img alt="Samaritan's Purse Operation Christmas Child" src=/assets/svg/SamaritansPurseOperationChristmasChild3.svg title="Samaritan's Purse Operation Christmas Child"></a></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><main><h1><a href>Bible Image Editor</a></h1><div id=myid style=height:100vh><script>const Bibleversionarray =
        [
            [
                "العربية",
                [
                    ["ASVD", "الكتاب المقدس ترجمة فانديك وسميث (ASVD)"],
                ],
            ],
            [
                "česky",
                [
                    ["CSBKR", "Bible Kralická 1613 (CSBKR)"],
                ],
            ],
            [
                "Dansk",
                [
                    ["DA1871", "Danske Bibel 1871 (DA1871)"],
                ],
            ],
            [
                "Deutsch",
                [
                    ["DELUT", "Luther Bible 1912 (DELUT)"],
                    ["ELB", "Elberfelder 1905 (ELB)"],
                    ["ELB71", "Elberfelder 1871 (ELB71)"],
                ],
            ],
            [
                "English",
                [
                    ["ASV", "American Standard Version (ASV)"],
                    ["KJV", "King James Version (KJV)"],
                    ["WEB", "World English Bible (WEB)"],
                ],
            ],
            [
                "Español",
                [
                    ["RVES", "Reina-Valera Antigua (RVES)"],
                ],
            ],
            [
                "Suomi",
                [
                    ["FI1776", "Finnish 1776 (FI1776)"],
                    ["FINPR", "Finnish 1938 (FINPR)"],
                ],
            ],
            [
                "Français",
                [
                    ["FMAR", "Martin 1744 (FMAR)"],
                    ["FRDBY", "Bible Darby en français (FRDBY)"],
                    ["LSG", "Louis Segond 1910 (LSG)"],
                    ["OST", "Ostervald (OST)"],
                ],
            ],
            [
                "Magyar",
                [
                    ["KAR", "Károli 1590 (KAR)"],
                ],
            ],
            [
                "Bahasa Indonesia",
                [
                    ["IDBAR", "Terjemahan Baru (IDBAR)"],
                ],
            ],
            [
                "Italiano",
                [
                    ["IGD", "Giovanni Diodati Bibbia (IGD)"],
                    ["ITRIV", "Italian Riveduta 1927 (ITRIV)"],
                ],
            ],
            [
                "日本語",
                [
                    ["JA1955", "Colloquial Japanese 1955 (JA1955)"],
                ],
            ],
            [
                "Malagasy",
                [
                    ["MG1865", "Malagasy Bible (MG1865)"],
                ],
            ],
            [
                "te reo Māori",
                [
                    ["MAOR", "Maori Bible (MAOR)"],
                ],
            ],
            [
                "한국어",
                [
                    ["KORVB", "개역한글 (KORVB)"],
                ],
            ],
            [
                "Nederlands",
                [
                    ["SV1750", "Statenvertaling (SV1750)"],
                ],
            ],
            [
                "Norsk",
                [
                    ["NORSK", "Det Norsk Bibelselskap 1930 (NORSK)"],
                ],
            ],
            [
                "Polski",
                [
                    ["PBG", "Biblia Gdańska (PBG)"],
                ],
            ],
            [
                "Português",
                [
                    ["AA", "Almeida Atualizada (AA)"],
                ],
            ],
            [
                "Română",
                [
                    ["RMNN", "Romanian Cornilescu 1928 (RMNN)"],
                    ["VDC", "Versiunea Dumitru Cornilescu (VDC)"],
                    ["VDCC", "Versiunea Dumitru Cornilescu Corectată (VDCC)"],
                ],
            ],
            [
                "Pyccкий",
                [
                    ["RURSV", "Синодальный перевод (RURSV)"],
                ],
            ],
            [
                "Shqip",
                [
                    ["ALBB", "Albanian Bible (ALBB)"],
                ],
            ],
            [
                "Svenska",
                [
                    ["SK73", "Karl XII 1873 (SK73)"],
                    ["SVEN", "Svenska 1917 (SVEN)"],
                ],
            ],
            [
                "Wikang Tagalog",
                [
                    ["TLAB", "Ang Biblia (TLAB)"],
                ],
            ],
            [
                "українська",
                [
                    ["UBIO", "Біблія в пер. Івана Огієнка 1962 (UBIO)"],
                    ["UKRK", "Біблія в пер. П.Куліша та І.Пулюя 1905 (UKRK)"],
                ],
            ],
            [
                "Tiếng Việt",
                [
                    ["VI1934", "Vietnamese Bible 1934 (VI1934)"],
                ],
            ],
            [
                "简体中文",
                [
                    ["CUVS", "简体和合本 (CUVS)"],
                ],
            ],
            [
                "繁體中文",
                [
                    ["CUV", "和合本 (CUV)"],
                ],
            ],
        ];
        const Biblebookarray =
        [
            //"Genesis",
            //"John",
        ];
        const Bibleversearray =
        [
            //"In the beginning God created the heaven and the earth.",
            //"For God so loved the world, that he gave his only begotten Son, that whosoever believeth in him should not perish, but have everlasting life.",
        ];
        const tabarray =
        [
            "canvas",
            "image",
            "message",
            "reference",
            "passage",
            "save",
        ];
        const borderstylearray =
        [
            "none",
            "dashed",
            "dotted",
            "double",
            "groove",
            //"hidden",
            "inset",
            "outset",
            "ridge",
            "solid",
        ];
        const horizontalarray =
        [
            "left",
            "center",
            "right",
            "justify",
        ];
        const verticalarray =
        [
            "start",
            "center",
            "end",
        ];
        const writingmodearray =
        [
            "horizontal-tb",
            "vertical-lr",
            "vertical-rl",
            "sideways-lr",
            "sideways-rl",
        ];
        const fontfamilyarray =
        [
            //generic family
            "cursive",
            "fantasy",
            "monospace",
            "sans-serif",
            "serif",

            //web safe
            //"arial",//sans-serif
            //"brush script",//serif
            "courier",
            //"garamond",//serif
            "georgia",
            "tahoma",
            //"times new roman",//serif
            "trebuchet ms",
            "verdana",

            //popular
            //"avenir",//serif
            //"bodoni",//serif
            "franklin gothic",
            //"frutiger",//serif
            //"futura",//serif
            //"helvetica",//sans-serif
            //"rockwell",//serif
            //"univers",//serif
        ];
        const fontstylearray =
        [
            "normal",
            "italic",
            //"oblique",
        ];
        const fontvariantarray =
        [
            "normal",
            "small-caps",
        ];
        const fontweightarray =
        [
            "normal",
            "bold",
            //"bolder",
            //"lighter",
        ];
        const maxheight = 10000;
        const maxwidth = 10000;
        const image = document.createElement("img");
        const text = document.createElement("img");

        function bodyload()
        {
            //const body = document.body;
            //body.id = "myid";

            const style = myid.style;
            //style.height = "100vh";
            style.overflow = "hidden";
        }
        addEventListener("load", bodyload);

        function window1load()
        {
            const div = document.createElement("div");
            div.id = "window1";
            myid.append(div);

            const style = div.style;
            style.height = "50vh";
            style.margin = "0";
        }
        addEventListener("load", window1load);

        function window2load()
        {
            const div = document.createElement("div");
            div.id = "window2";
            myid.append(div);

            const style = div.style;
            style.height = "32px";
            style.margin = "16px 0 0";
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", window2load);

        function window3load()
        {
            const div = document.createElement("div");
            div.id = "window3";
            myid.append(div);

            const style = div.style;
            style.height = "calc(50vh - 48px)";
            style.margin = "0";
            style.overflowX = "hidden";
        }
        addEventListener("load", window3load);

        function canvasload()
        {
            const canvas = document.createElement("canvas");
            canvas.height = 1080;
            canvas.id = "canvas";
            canvas.width = 1920;
            window1.append(canvas);

            const style = canvas.style;
            style.position = "relative";
        }
        addEventListener("load", canvasload);

        function canvasupdate()
        {
            //console.log("canup");
            const ww = innerWidth - 96;
            const wh = innerHeight * 0.5;
            const cw = canvas.width;
            const ch = canvas.height;
            const x = (ww - cw) * 0.5;
            const y = (wh - ch) * 0.5;
            const sw = ww / cw;
            const sh = wh / ch;
            const s = Math.min(sw, sh);

            const style = canvas.style;
            style.left = `${x}px`;
            style.top = `${y}px`;
            style.transform = `scale(${s})`;
        }
        addEventListener("load", canvasupdate);

        function resize()
        {
            canvasupdate();
        }
        addEventListener("resize", resize);

        function svgupdate()
        {
            //console.log("svgup");
            const svg =
`<svg height="${canvas.height}" width="${canvas.width}" xmlns="http://www.w3.org/2000/svg">
    <style>
        div
        {
            background-color: ${canvas.backgroundcolor};
            height: 100%;
        }
        img
        {
            box-sizing: border-box;
            position: absolute;

            background-color: ${image.backgroundcolor};
            filter: blur(${image.filterblur}px) brightness(${image.filterbrightness}%) contrast(${image.filtercontrast}%) grayscale(${image.filtergrayscale}%) hue-rotate(${image.filterhuerotate}deg) invert(${image.filterinvert}%) opacity(${image.filteropacity}%) saturate(${image.filtersaturate}%) sepia(${image.filtersepia}%);
            height: ${image.height}px;
            left: ${image.myx}px;
            margin: ${image.margintop}px ${image.marginright}px ${image.marginbottom}px ${image.marginleft}px;
            padding: ${image.paddingtop}px ${image.paddingright}px ${image.paddingbottom}px ${image.paddingleft}px;
            object-fit: ${image.objectfit};
            //opacity: ${image.opacity};
            top: ${image.myy}px;
            width: ${image.width}px;
        }
        text
        {
            box-sizing: border-box;
            display: grid;
            overflow: hidden;
            position: absolute;
        }
        text:nth-of-type(1)
        {
            white-space: pre;

            align-items: ${text.messagevertical};
            backdrop-filter: blur(${text.messagebackdropfilterblur}px) brightness(${text.messagebackdropfilterbrightness}%) contrast(${text.messagebackdropfiltercontrast}%) grayscale(${text.messagebackdropfiltergrayscale}%) hue-rotate(${text.messagebackdropfilterhuerotate}deg) invert(${text.messagebackdropfilterinvert}%) saturate(${text.messagebackdropfiltersaturate}%) sepia(${text.messagebackdropfiltersepia}%);
            background-color: ${text.messagebackgroundcolor};
            border-color: ${text.messagebordercolor};
            border-radius: ${text.messageborderradius}px;
            border-style: ${text.messageborderstyle};
            border-width: ${text.messageborderwidth}px;
            color: ${text.messagecolor};
            font-family: ${text.messagefontfamily};
            font-size: ${text.messagefontsize}px;
            font-style: ${text.messagefontstyle};
            font-variant: ${text.messagefontvariant};
            font-weight: ${text.messagefontweight};
            height: ${text.messageheight}px;
            left: ${text.messagex}px;
            margin: ${text.messagemargintop}px ${text.messagemarginright}px ${text.messagemarginbottom}px ${text.messagemarginleft}px;
            padding: ${text.messagepaddingtop}px ${text.messagepaddingright}px ${text.messagepaddingbottom}px ${text.messagepaddingleft}px;
            text-align: ${text.messagehorizontal};
            top: ${text.messagey}px;
            width: ${text.messagewidth}px;
            writing-mode: ${text.messagewritingmode};
        }
        text:nth-of-type(2)
        {
            align-items: ${text.referencevertical};
            background-color: ${text.referencebackgroundcolor};
            border-color: ${text.referencebordercolor};
            border-radius: ${text.referenceborderradius}px;
            border-style: ${text.referenceborderstyle};
            border-width: ${text.referenceborderwidth}px;
            color: ${text.referencecolor};
            font-family: ${text.referencefontfamily};
            font-size: ${text.referencefontsize}px;
            font-style: ${text.referencefontstyle};
            font-variant: ${text.referencefontvariant};
            font-weight: ${text.referencefontweight};
            height: ${text.referenceheight}px;
            left: ${text.referencex}px;
            margin: ${text.referencemargintop}px ${text.referencemarginright}px ${text.referencemarginbottom}px ${text.referencemarginleft}px;
            padding: ${text.referencepaddingtop}px ${text.referencepaddingright}px ${text.referencepaddingbottom}px ${text.referencepaddingleft}px;
            text-align: ${text.referencehorizontal};
            top: ${text.referencey}px;
            width: ${text.referencewidth}px;
            writing-mode: ${text.referencewritingmode};
        }
        text:nth-of-type(3)
        {
            align-items: ${text.passagevertical};
            background-color: ${text.passagebackgroundcolor};
            border-color: ${text.passagebordercolor};
            border-radius: ${text.passageborderradius}px;
            border-style: ${text.passageborderstyle};
            border-width: ${text.passageborderwidth}px;
            color: ${text.passagecolor};
            font-family: ${text.passagefontfamily};
            font-size: ${text.passagefontsize}px;
            font-style: ${text.passagefontstyle};
            font-variant: ${text.passagefontvariant};
            font-weight: ${text.passagefontweight};
            height: ${text.passageheight}px;
            left: ${text.passagex}px;
            margin: ${text.passagemargintop}px ${text.passagemarginright}px ${text.passagemarginbottom}px ${text.passagemarginleft}px;
            padding: ${text.passagepaddingtop}px ${text.passagepaddingright}px ${text.passagepaddingbottom}px ${text.passagepaddingleft}px;
            text-align: ${text.passagehorizontal};
            top: ${text.passagey}px;
            width: ${text.passagewidth}px;
            writing-mode: ${text.passagewritingmode};
        }
    </style>
    <foreignObject height="100%" width="100%">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <img src="${image.dataurl}"/>
            <text>${text.messagetext}</text>
            <text>${text.referencetextbook}${text.referencetextchapter}${text.referencetextverse}${text.referencetextverseend}${text.referencetextversion}</text>
            <text>${text.passagetextverse}${text.passagetextverseend}</text>
        </div>
    </foreignObject>
</svg>`;
            text.src = `data:image/svg+xml,${svg}`;
        }

        function textupdate()
        {
            const context = canvas.getContext("2d");
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.drawImage(text, 0, 0);
        }
        text.addEventListener("load", textupdate);






        function tabload()
        {
            for(const [key, value] of tabarray.entries())
            {
                const button = document.createElement("button");
                button.className = "tab";
                if(value == "save")
                {
                    button.className = "tab current";
                }
                button.id = "tab" + tabarray[key];
                //button.innerHTML = `${key + 1}) ${tabarray[key]}`;
                button.innerHTML = tabarray[key];
                button.value = "tabcontent" + tabarray[key];
                button.addEventListener("click", tabupdate);
                window2.append(button);

                /*
                const style = button.style;
                style.backgroundColor = "#000";
                style.color = "#fff";
                style.border = "none";
                style.fontSize = "16px";
                style.padding = "16px";
                style.transition = "0.5s";
                //*/
            }
        }
        addEventListener("load", tabload);


        function tabupdate(m)
        {
            const mytarget = m.target;

            //*
            for(const t of document.querySelectorAll(".tab"))
            {
                //const style = t.style;
                //style.backgroundColor = "#000";
                //style.color = "#fff";
                t.className = t.className.replace(" current", "");
            }
            //const style = document.querySelector("#"+mytarget.id).style;
            //style.backgroundColor = "#fff";
            //style.color = "#000";
            mytarget.className += " current";
            //*/

            for(const t of document.querySelectorAll(".tabcontent"))
            {
                const style = t.style;
                style.contentVisibility = "hidden";
            }
            document.querySelector("#"+mytarget.value).style.contentVisibility = "visible";
        }

        function tabcontentload()
        {
            for(const [key, value] of tabarray.entries())
            {
                const div = document.createElement("div");
                div.className = "tabcontent";
                div.id = "tabcontent" + tabarray[key];
                window3.append(div);

                //*
                const style = div.style;
                if(value != "save")
                {
                    style.contentVisibility = "hidden";
                }
                style.margin = "0";
                //style.transitionDuration = "0.5s";
                //*/
            }
        }
        addEventListener("load", tabcontentload);






        function canvaswidthload()
        {
            const div = document.createElement("div");
            div.id = "canvaswidth";
            div.innerHTML = "width";
            tabcontentcanvas.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", canvaswidthload);

        function canvaswidthnumberload()
        {
            const br = document.createElement("br");
            canvaswidth.append(br);

            const input = document.createElement("input");
            input.id = "canvaswidthnumber";
            input.max = maxwidth;
            input.min = 0;
            input.type = "number";
            input.value = canvas.width;
            input.addEventListener("input", canvaswidthnumberupdate);
            canvaswidth.append(input);

            //canvaswidthnumberupdate();
        }
        addEventListener("load", canvaswidthnumberload);

        function canvaswidthnumberupdate()
        {
            const v = canvaswidthnumber.value;

            canvaswidthrange.value = v;
            canvas.width = v;

            canvasupdate();
            svgupdate();
        }

        function canvaswidthrangeload()
        {
            //const br = document.createElement("br");
            //canvaswidth.append(br);

            const input = document.createElement("input");
            input.id = "canvaswidthrange";
            input.max = canvaswidthnumber.max;
            input.min = canvaswidthnumber.min;
            input.type = "range";
            input.value = canvaswidthnumber.value;
            input.addEventListener("input", canvaswidthrangeupdate);
            canvaswidth.append(input);

            canvaswidthrangeupdate();
        }
        addEventListener("load", canvaswidthrangeload);

        function canvaswidthrangeupdate()
        {
            const v = canvaswidthrange.value;

            canvaswidthnumber.value = v;
            canvas.width = v;

            canvasupdate();
            svgupdate();
        }

        function canvaswidthnaturalload()
        {
            const br = document.createElement("br");
            canvaswidth.append(br);

            const button = document.createElement("button");
            button.innerHTML = "image";
            button.addEventListener("click", canvaswidthnaturalupdate);
            canvaswidth.append(button);
        }
        addEventListener("load", canvaswidthnaturalload);

        function canvaswidthnaturalupdate()
        {
            canvaswidthnumber.value = image.naturalWidth;

            canvaswidthnumberupdate();
        }

        function canvaswidthexactload()
        {
            const br = document.createElement("br");
            canvaswidth.append(br);

            const array =
            [
                ["800",800],
                ["1280",1280],
                ["1366",1366],
                ["1536",1536],
                ["1600",1600],
                ["1920",1920],
                ["2304",2304],
                ["2560",2560],
                ["3840",3840],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvaswidthexactupdate);
                canvaswidth.append(button);
            }
        }
        addEventListener("load", canvaswidthexactload);

        function canvaswidthexactupdate(e)
        {
            canvaswidthnumber.value = Number(e.target.value);

            canvaswidthnumberupdate();
        }

        function canvaswidthincrementload()
        {
            const br = document.createElement("br");
            canvaswidth.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvaswidthincrementupdate);
                canvaswidth.append(button);
            }
        }
        addEventListener("load", canvaswidthincrementload);

        function canvaswidthincrementupdate(e)
        {
            const v = Number(canvaswidthnumber.value) + Number(e.target.value);

            if((canvaswidthnumber.min <= v) && (v <= canvaswidthnumber.max))
            {
                canvaswidthnumber.value = v;

                canvaswidthnumberupdate();
            }
        }



        function canvasheightload()
        {
            const div = document.createElement("div");
            div.id = "canvasheight";
            div.innerHTML = "height";
            tabcontentcanvas.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", canvasheightload);

        function canvasheightnumberload()
        {
            const br = document.createElement("br");
            canvasheight.append(br);

            const input = document.createElement("input");
            input.id = "canvasheightnumber";
            input.max = maxheight;
            input.min = 0;
            input.type = "number";
            input.value = canvas.height;
            input.addEventListener("input", canvasheightnumberupdate);
            canvasheight.append(input);

            //canvasheightnumberupdate();
        }
        addEventListener("load", canvasheightnumberload);

        function canvasheightnumberupdate()
        {
            const v = canvasheightnumber.value;

            canvasheightrange.value = v;
            canvas.height = v;

            canvasupdate();
            svgupdate();
        }

        function canvasheightrangeload()
        {
            //const br = document.createElement("br");
            //canvasheight.append(br);

            const input = document.createElement("input");
            input.id = "canvasheightrange";
            input.max = canvasheightnumber.max;
            input.min = canvasheightnumber.min;
            input.type = "range";
            input.value = canvasheightnumber.value;
            input.addEventListener("input", canvasheightrangeupdate);
            canvasheight.append(input);

            canvasheightrangeupdate();
        }
        addEventListener("load", canvasheightrangeload);

        function canvasheightrangeupdate()
        {
            const v = canvasheightrange.value;

            canvasheightnumber.value = v;
            canvas.height = v;

            canvasupdate();
            svgupdate();
        }

        function canvasheightnaturalload()
        {
            const br = document.createElement("br");
            canvasheight.append(br);

            const button = document.createElement("button");
            button.innerHTML = "image";
            button.addEventListener("click", canvasheightnaturalupdate);
            canvasheight.append(button);
        }
        addEventListener("load", canvasheightnaturalload);

        function canvasheightnaturalupdate()
        {
            canvasheightnumber.value = image.naturalHeight;

            canvasheightnumberupdate();
        }

        function canvasheightexactload()
        {
            const br = document.createElement("br");
            canvasheight.append(br);

            const array =
            [
                ["600",600],
                ["720",720],
                ["768",768],
                ["864",864],
                ["900",900],
                ["1080",1080],
                ["1296",1296],
                ["1440",1440],
                ["2160",2160],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvasheightexactupdate);
                canvasheight.append(button);
            }
        }
        addEventListener("load", canvasheightexactload);

        function canvasheightexactupdate(e)
        {
            canvasheightnumber.value = Number(e.target.value);

            canvasheightnumberupdate();
        }

        function canvasheightincrementload()
        {
            const br = document.createElement("br");
            canvasheight.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvasheightincrementupdate);
                canvasheight.append(button);
            }
        }
        addEventListener("load", canvasheightincrementload);

        function canvasheightincrementupdate(e)
        {
            const v = Number(canvasheightnumber.value) + Number(e.target.value);

            if((canvasheightnumber.min <= v) && (v <= canvasheightnumber.max))
            {
                canvasheightnumber.value = v;

                canvasheightnumberupdate();
            }
        }



        function canvasbackgroundcolorload()
        {
            const div = document.createElement("div");
            div.id = "canvasbackgroundcolor";
            div.innerHTML = "background-color";
            tabcontentcanvas.append(div);
        }
        addEventListener("load", canvasbackgroundcolorload);

        function canvasbackgroundcolorcolorload()
        {
            const br = document.createElement("br");
            canvasbackgroundcolor.append(br);

            const input = document.createElement("input");
            input.id = "canvasbackgroundcolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", canvasbackgroundcolorcolorupdate);
            canvasbackgroundcolor.append(input);

            //canvasbackgroundcolorcolorset();
        }
        addEventListener("load", canvasbackgroundcolorcolorload);

        function canvasbackgroundcolorcolorset()
        {
            const c = canvasbackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = canvasbackgroundalphanumber.value;

            canvas.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function canvasbackgroundcolorcolorupdate()
        {
            canvasbackgroundcolorcolorset();
            svgupdate();
        }

        function canvasbackgroundcolorexactload()
        {
            const br = document.createElement("br");
            canvasbackgroundcolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvasbackgroundcolorexactupdate);
                canvasbackgroundcolor.append(button);
            }
        }
        addEventListener("load", canvasbackgroundcolorexactload);

        function canvasbackgroundcolorexactupdate(e)
        {
            canvasbackgroundcolorcolor.value = e.target.value;

            canvasbackgroundcolorcolorupdate();
        }



        function canvasbackgroundalphaload()
        {
            const div = document.createElement("div");
            div.id = "canvasbackgroundalpha";
            div.innerHTML = "background-alpha";
            tabcontentcanvas.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", canvasbackgroundalphaload);

        function canvasbackgroundalphanumberload()
        {
            const br = document.createElement("br");
            canvasbackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "canvasbackgroundalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", canvasbackgroundalphanumberupdate);
            canvasbackgroundalpha.append(input);

            //canvasbackgroundalphanumberset();
        }
        addEventListener("load", canvasbackgroundalphanumberload);

        function canvasbackgroundalphanumberset()
        {
            const c = canvasbackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = canvasbackgroundalphanumber.value;

            canvasbackgroundalpharange.value = a;
            canvas.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function canvasbackgroundalphanumberupdate()
        {
            canvasbackgroundalphanumberset();
            svgupdate();
        }

        function canvasbackgroundalpharangeload()
        {
            //const br = document.createElement("br");
            //canvasbackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "canvasbackgroundalpharange";
            input.max = canvasbackgroundalphanumber.max;
            input.min = canvasbackgroundalphanumber.min;
            input.step = canvasbackgroundalphanumber.step;
            input.type = "range";
            input.value = canvasbackgroundalphanumber.value;
            input.addEventListener("input", canvasbackgroundalpharangeupdate);
            canvasbackgroundalpha.append(input);

            canvasbackgroundalpharangeset();
        }
        addEventListener("load", canvasbackgroundalpharangeload);

        function canvasbackgroundalpharangeset()
        {
            const c = canvasbackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = canvasbackgroundalpharange.value;

            canvasbackgroundalphanumber.value = a;
            canvas.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function canvasbackgroundalpharangeupdate()
        {
            canvasbackgroundalpharangeset();
            svgupdate();
        }

        function canvasbackgroundalphaexactload()
        {
            const br = document.createElement("br");
            canvasbackgroundalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvasbackgroundalphaexactupdate);
                canvasbackgroundalpha.append(button);
            }
        }
        addEventListener("load", canvasbackgroundalphaexactload);

        function canvasbackgroundalphaexactupdate(e)
        {
            canvasbackgroundalphanumber.value = Number(e.target.value);

            canvasbackgroundalphanumberupdate();
        }

        function canvasbackgroundalphaincrementload()
        {
            const br = document.createElement("br");
            canvasbackgroundalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvasbackgroundalphaincrementupdate);
                canvasbackgroundalpha.append(button);
            }
        }
        addEventListener("load", canvasbackgroundalphaincrementload);

        function canvasbackgroundalphaincrementupdate(e)
        {
            let v = Number(canvasbackgroundalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((canvasbackgroundalphanumber.min <= v) && (v <= canvasbackgroundalphanumber.max))
            {
                canvasbackgroundalphanumber.value = v;

                canvasbackgroundalphanumberupdate();
            }
        }






        function myfunction1(e)
        {
            //console.log(myvideo.duration);
            const myvideo = e.target;

            myvideo.currentTime = 0;
        }

        function myfunction2(e)
        {
            //console.log(myvideo.currentTime);
            const myvideo = e.target;

            const mycanvas = document.createElement("canvas");
            mycanvas.height = myvideo.videoHeight;
            mycanvas.width = myvideo.videoWidth;

            const mycontext = mycanvas.getContext("2d");
            mycontext.drawImage(myvideo, 0, 0, mycanvas.width, mycanvas.height);

            //const myimg = new Image();
            //myimg.src = mycanvas.toDataURL();

            image.src = mycanvas.toDataURL();
        }

        function imageload2()
        {
            //image.src = "/assets/svg/Happy.svg";

            const date  = new Date();
            const month = date.getUTCMonth() + 1;
            const day   = date.getUTCDate();

            const myvideo = document.createElement("video");
            myvideo.addEventListener("loadedmetadata", myfunction1);
            myvideo.addEventListener("seeked", myfunction2);
            myvideo.src = `/assets/mp4/${month}/${day}.mp4`;
        }
        addEventListener("load", imageload2);

        function imageload3()
        {
            fetch(image.src)
            .then(r => r.blob())
            .then(b =>
            {
                const reader = new FileReader();
                reader.readAsDataURL(b);
                reader.onloadend = () =>
                {
                    //console.log("imageload3");
                    image.dataurl = reader.result;
                    svgupdate();
                };
            });
        }
        image.addEventListener("load", imageload3);



        function imagefileload()
        {
            const div = document.createElement("div");
            div.id = "imagefile";
            div.innerHTML = "file";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagefileload);

        function imagefilefileload()
        {
            const br = document.createElement("br");
            imagefile.append(br);

            const input = document.createElement("input");
            input.id = "imagefilefile";
            input.type = "file";
            input.addEventListener("change", imagefilefileupdate);
            imagefile.append(input);
        }
        addEventListener("load", imagefilefileload);

        function imagefilefileupdate()
        {
            const f = imagefilefile.files[0];

            image.src = URL.createObjectURL(f);
        }



        function imagefitload()
        {
            const div = document.createElement("div");
            div.id = "imagefit";
            div.innerHTML = "fit";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagefitload);

        function imagefitselectload()
        {
            const br = document.createElement("br");
            imagefit.append(br);

            const select = document.createElement("select");
            select.id = "imagefitselect";
            select.addEventListener("input", imagefitselectupdate);
            imagefit.append(select);

            const array =
            [
                "contain",
                "cover",
            ];

            for(const value of array)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            imagefitselect.value = array[1];

            imagefitselectset();
        }
        addEventListener("load", imagefitselectload);

        function imagefitselectset()
        {
            image.objectfit = imagefitselect.value;
        }

        function imagefitselectupdate()
        {
            imagefitselectset();
            svgupdate();
        }



        function imagewidthload()
        {
            const div = document.createElement("div");
            div.id = "imagewidth";
            div.innerHTML = "width";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagewidthload);

        function imagewidthnumberload()
        {
            const br = document.createElement("br");
            imagewidth.append(br);

            const input = document.createElement("input");
            input.id = "imagewidthnumber";
            input.max = maxwidth;
            input.min = 0;
            input.type = "number";
            input.value = canvas.width;
            input.addEventListener("input", imagewidthnumberupdate);
            imagewidth.append(input);

            //imagewidthnumberset();
        }
        addEventListener("load", imagewidthnumberload);

        function imagewidthnumberset()
        {
            const v = imagewidthnumber.value;

            imagewidthrange.value = v;
            image.width = v;
        }

        function imagewidthnumberupdate()
        {
            imagewidthnumberset();
            svgupdate();
        }

        function imagewidthrangeload()
        {
            //const br = document.createElement("br");
            //imagewidth.append(br);

            const input = document.createElement("input");
            input.id = "imagewidthrange";
            input.max = imagewidthnumber.max;
            input.min = imagewidthnumber.min;
            input.type = "range";
            input.value = imagewidthnumber.value;
            input.addEventListener("input", imagewidthrangeupdate);
            imagewidth.append(input);

            imagewidthrangeset();
        }
        addEventListener("load", imagewidthrangeload);

        function imagewidthrangeset()
        {
            const v = imagewidthrange.value;

            imagewidthnumber.value = v;
            image.width = v;
        }

        function imagewidthrangeupdate()
        {
            imagewidthrangeset();
            svgupdate();
        }
/*
        function imagewidthnaturalload()
        {
            const br = document.createElement("br");
            imagewidth.append(br);

            const button = document.createElement("button");
            button.innerHTML = "image";
            button.addEventListener("click", imagewidthnaturalupdate);
            imagewidth.append(button);
        }
        addEventListener("load", imagewidthnaturalload);

        function imagewidthnaturalupdate()
        {
            imagewidthnumber.value = image.naturalWidth;

            imagewidthnumberupdate();
        }
//*/
        function imagewidthexactload()
        {
            const br = document.createElement("br");
            imagewidth.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagewidthexactupdate);
                imagewidth.append(button);
            }
        }
        addEventListener("load", imagewidthexactload);

        function imagewidthexactupdate(e)
        {
            imagewidthnumber.value = canvas.width * Number(e.target.value);

            imagewidthnumberupdate();
        }

        function imagewidthincrementload()
        {
            const br = document.createElement("br");
            imagewidth.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagewidthincrementupdate);
                imagewidth.append(button);
            }
        }
        addEventListener("load", imagewidthincrementload);

        function imagewidthincrementupdate(e)
        {
            const v = Number(imagewidthnumber.value) + Number(e.target.value);

            if((imagewidthnumber.min <= v) && (v <= imagewidthnumber.max))
            {
                imagewidthnumber.value = v;

                imagewidthnumberupdate();
            }
        }



        function imageheightload()
        {
            const div = document.createElement("div");
            div.id = "imageheight";
            div.innerHTML = "height";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imageheightload);

        function imageheightnumberload()
        {
            const br = document.createElement("br");
            imageheight.append(br);

            const input = document.createElement("input");
            input.id = "imageheightnumber";
            input.max = maxheight;
            input.min = 0;
            input.type = "number";
            input.value = canvas.height;
            input.addEventListener("input", imageheightnumberupdate);
            imageheight.append(input);

            //imageheightnumberset();
        }
        addEventListener("load", imageheightnumberload);

        function imageheightnumberset()
        {
            const v = imageheightnumber.value;

            imageheightrange.value = v;
            image.height = v;
        }

        function imageheightnumberupdate()
        {
            imageheightnumberset();
            svgupdate();
        }

        function imageheightrangeload()
        {
            //const br = document.createElement("br");
            //imageheight.append(br);

            const input = document.createElement("input");
            input.id = "imageheightrange";
            input.max = imageheightnumber.max;
            input.min = imageheightnumber.min;
            input.type = "range";
            input.value = imageheightnumber.value;
            input.addEventListener("input", imageheightrangeupdate);
            imageheight.append(input);

            imageheightrangeset();
        }
        addEventListener("load", imageheightrangeload);

        function imageheightrangeset()
        {
            const v = imageheightrange.value;

            imageheightnumber.value = v;
            image.height = v;
        }

        function imageheightrangeupdate()
        {
            imageheightrangeset();
            svgupdate();
        }
/*
        function imageheightnaturalload()
        {
            const br = document.createElement("br");
            imageheight.append(br);

            const button = document.createElement("button");
            button.innerHTML = "image";
            button.addEventListener("click", imageheightnaturalupdate);
            imageheight.append(button);
        }
        addEventListener("load", imageheightnaturalload);

        function imageheightnaturalupdate()
        {
            imageheightnumber.value = image.naturalHeight;

            imageheightnumberupdate();
        }
//*/
        function imageheightexactload()
        {
            const br = document.createElement("br");
            imageheight.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageheightexactupdate);
                imageheight.append(button);
            }
        }
        addEventListener("load", imageheightexactload);

        function imageheightexactupdate(e)
        {
            imageheightnumber.value = canvas.height * Number(e.target.value);

            imageheightnumberupdate();
        }

        function imageheightincrementload()
        {
            const br = document.createElement("br");
            imageheight.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageheightincrementupdate);
                imageheight.append(button);
            }
        }
        addEventListener("load", imageheightincrementload);

        function imageheightincrementupdate(e)
        {
            const v = Number(imageheightnumber.value) + Number(e.target.value);

            if((imageheightnumber.min <= v) && (v <= imageheightnumber.max))
            {
                imageheightnumber.value = v;

                imageheightnumberupdate();
            }
        }



        function imagexload()
        {
            const div = document.createElement("div");
            div.id = "imagex";
            div.innerHTML = "x";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagexload);

        function imagexnumberload()
        {
            const br = document.createElement("br");
            imagex.append(br);

            const input = document.createElement("input");
            input.id = "imagexnumber";
            input.max = maxwidth;
            input.min = -maxwidth;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagexnumberupdate);
            imagex.append(input);

            //imagexnumberset();
        }
        addEventListener("load", imagexnumberload);

        function imagexnumberset()
        {
            const v = imagexnumber.value;

            imagexrange.value = v;
            image.myx = v;
        }

        function imagexnumberupdate()
        {
            imagexnumberset();
            svgupdate();
        }

        function imagexrangeload()
        {
            //const br = document.createElement("br");
            //imagex.append(br);

            const input = document.createElement("input");
            input.id = "imagexrange";
            input.max = imagexnumber.max;
            input.min = imagexnumber.min;
            input.type = "range";
            input.value = imagexnumber.value;
            input.addEventListener("input", imagexrangeupdate);
            imagex.append(input);

            imagexrangeset();
        }
        addEventListener("load", imagexrangeload);

        function imagexrangeset()
        {
            const v = imagexrange.value;

            imagexnumber.value = v;
            image.myx = v;
        }

        function imagexrangeupdate()
        {
            imagexrangeset();
            svgupdate();
        }

        function imagexexactload()
        {
            const br = document.createElement("br");
            imagex.append(br);

            const array =
            [
                ["left",0],
                ["center",0.5],
                ["right",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagexexactupdate);
                imagex.append(button);
            }
        }
        addEventListener("load", imagexexactload);

        function imagexexactupdate(e)
        {
            imagexnumber.value = (canvas.width - image.width) * Number(e.target.value);

            imagexnumberupdate();
        }

        function imagexincrementload()
        {
            const br = document.createElement("br");
            imagex.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagexincrementupdate);
                imagex.append(button);
            }
        }
        addEventListener("load", imagexincrementload);

        function imagexincrementupdate(e)
        {
            const v = Number(imagexnumber.value) + Number(e.target.value);

            if((imagexnumber.min <= v) && (v <= imagexnumber.max))
            {
                imagexnumber.value = v;

                imagexnumberupdate();
            }
        }



        function imageyload()
        {
            const div = document.createElement("div");
            div.id = "imagey";
            div.innerHTML = "y";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imageyload);

        function imageynumberload()
        {
            const br = document.createElement("br");
            imagey.append(br);

            const input = document.createElement("input");
            input.id = "imageynumber";
            input.max = maxheight;
            input.min = -maxheight;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imageynumberupdate);
            imagey.append(input);

            //imageynumberset();
        }
        addEventListener("load", imageynumberload);

        function imageynumberset()
        {
            const v = imageynumber.value;

            imageyrange.value = v;
            image.myy = v;
        }

        function imageynumberupdate()
        {
            imageynumberset();
            svgupdate();
        }

        function imageyrangeload()
        {
            //const br = document.createElement("br");
            //imagey.append(br);

            const input = document.createElement("input");
            input.id = "imageyrange";
            input.max = imageynumber.max;
            input.min = imageynumber.min;
            input.type = "range";
            input.value = imageynumber.value;
            input.addEventListener("input", imageyrangeupdate);
            imagey.append(input);

            imageyrangeset();
        }
        addEventListener("load", imageyrangeload);

        function imageyrangeset()
        {
            const v = imageyrange.value;

            imageynumber.value = v;
            image.myy = v;
        }

        function imageyrangeupdate()
        {
            imageyrangeset();
            svgupdate();
        }

        function imageyexactload()
        {
            const br = document.createElement("br");
            imagey.append(br);

            const array =
            [
                ["top",0],
                ["center",0.5],
                ["bottom",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageyexactupdate);
                imagey.append(button);
            }
        }
        addEventListener("load", imageyexactload);

        function imageyexactupdate(e)
        {
            imageynumber.value = (canvas.height - image.height) * Number(e.target.value);

            imageynumberupdate();
        }

        function imageyincrementload()
        {
            const br = document.createElement("br");
            imagey.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageyincrementupdate);
                imagey.append(button);
            }
        }
        addEventListener("load", imageyincrementload);

        function imageyincrementupdate(e)
        {
            const v = Number(imageynumber.value) + Number(e.target.value);

            if((imageynumber.min <= v) && (v <= imageynumber.max))
            {
                imageynumber.value = v;

                imageynumberupdate();
            }
        }



        function imagebackgroundcolorload()
        {
            const div = document.createElement("div");
            div.id = "imagebackgroundcolor";
            div.innerHTML = "background-color";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagebackgroundcolorload);

        function imagebackgroundcolorcolorload()
        {
            const br = document.createElement("br");
            imagebackgroundcolor.append(br);

            const input = document.createElement("input");
            input.id = "imagebackgroundcolorcolor";
            input.type = "color";
            input.value = "#ffffff";
            input.addEventListener("input", imagebackgroundcolorcolorupdate);
            imagebackgroundcolor.append(input);

            //imagebackgroundcolorcolorset();
        }
        addEventListener("load", imagebackgroundcolorcolorload);

        function imagebackgroundcolorcolorset()
        {
            const c = imagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = imagebackgroundalphanumber.value;

            image.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function imagebackgroundcolorcolorupdate()
        {
            imagebackgroundcolorcolorset();
            svgupdate();
        }

        function imagebackgroundcolorexactload()
        {
            const br = document.createElement("br");
            imagebackgroundcolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagebackgroundcolorexactupdate);
                imagebackgroundcolor.append(button);
            }
        }
        addEventListener("load", imagebackgroundcolorexactload);

        function imagebackgroundcolorexactupdate(e)
        {
            imagebackgroundcolorcolor.value = e.target.value;

            imagebackgroundcolorcolorupdate();
        }



        function imagebackgroundalphaload()
        {
            const div = document.createElement("div");
            div.id = "imagebackgroundalpha";
            div.innerHTML = "background-alpha";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagebackgroundalphaload);

        function imagebackgroundalphanumberload()
        {
            const br = document.createElement("br");
            imagebackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "imagebackgroundalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagebackgroundalphanumberupdate);
            imagebackgroundalpha.append(input);

            //imagebackgroundalphanumberset();
        }
        addEventListener("load", imagebackgroundalphanumberload);

        function imagebackgroundalphanumberset()
        {
            const c = imagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = imagebackgroundalphanumber.value;

            imagebackgroundalpharange.value = a;
            image.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function imagebackgroundalphanumberupdate()
        {
            imagebackgroundalphanumberset();
            svgupdate();
        }

        function imagebackgroundalpharangeload()
        {
            //const br = document.createElement("br");
            //imagebackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "imagebackgroundalpharange";
            input.max = imagebackgroundalphanumber.max;
            input.min = imagebackgroundalphanumber.min;
            input.step = imagebackgroundalphanumber.step;
            input.type = "range";
            input.value = imagebackgroundalphanumber.value;
            input.addEventListener("input", imagebackgroundalpharangeupdate);
            imagebackgroundalpha.append(input);

            imagebackgroundalpharangeset();
        }
        addEventListener("load", imagebackgroundalpharangeload);

        function imagebackgroundalpharangeset()
        {
            const c = imagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = imagebackgroundalpharange.value;

            imagebackgroundalphanumber.value = a;
            image.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function imagebackgroundalpharangeupdate()
        {
            imagebackgroundalpharangeset();
            svgupdate();
        }

        function imagebackgroundalphaexactload()
        {
            const br = document.createElement("br");
            imagebackgroundalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagebackgroundalphaexactupdate);
                imagebackgroundalpha.append(button);
            }
        }
        addEventListener("load", imagebackgroundalphaexactload);

        function imagebackgroundalphaexactupdate(e)
        {
            imagebackgroundalphanumber.value = Number(e.target.value);

            imagebackgroundalphanumberupdate();
        }

        function imagebackgroundalphaincrementload()
        {
            const br = document.createElement("br");
            imagebackgroundalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagebackgroundalphaincrementupdate);
                imagebackgroundalpha.append(button);
            }
        }
        addEventListener("load", imagebackgroundalphaincrementload);

        function imagebackgroundalphaincrementupdate(e)
        {
            let v = Number(imagebackgroundalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((imagebackgroundalphanumber.min <= v) && (v <= imagebackgroundalphanumber.max))
            {
                imagebackgroundalphanumber.value = v;

                imagebackgroundalphanumberupdate();
            }
        }



/*
        function imageopacityload()
        {
            const div = document.createElement("div");
            div.id = "imageopacity";
            div.innerHTML = "opacity";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imageopacityload);

        function imageopacitynumberload()
        {
            const br = document.createElement("br");
            imageopacity.append(br);

            const input = document.createElement("input");
            input.id = "imageopacitynumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", imageopacitynumberupdate);
            imageopacity.append(input);

            //imageopacitynumberset();
        }
        addEventListener("load", imageopacitynumberload);

        function imageopacitynumberset()
        {
            const v = imageopacitynumber.value;

            imageopacityrange.value = v;
            image.opacity = v;
        }

        function imageopacitynumberupdate()
        {
            imageopacitynumberset();
            svgupdate();
        }

        function imageopacityrangeload()
        {
            const input = document.createElement("input");
            input.id = "imageopacityrange";
            input.max = imageopacitynumber.max;
            input.min = imageopacitynumber.min;
            input.step = imageopacitynumber.step;
            input.type = "range";
            input.value = imageopacitynumber.value;
            input.addEventListener("input", imageopacityrangeupdate);
            imageopacity.append(input);

            imageopacityrangeset();
        }
        addEventListener("load", imageopacityrangeload);

        function imageopacityrangeset()
        {
            const v = imageopacityrange.value;

            imageopacitynumber.value = v;
            image.opacity = v;
        }

        function imageopacityrangeupdate()
        {
            imageopacityrangeset();
            svgupdate();
        }

        function imageopacityexactload()
        {
            const br = document.createElement("br");
            imageopacity.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageopacityexactupdate);
                imageopacity.append(button);
            }
        }
        addEventListener("load", imageopacityexactload);

        function imageopacityexactupdate(e)
        {
            imageopacitynumber.value = Number(e.target.value);

            imageopacitynumberupdate();
        }

        function imageopacityincrementload()
        {
            const br = document.createElement("br");
            imageopacity.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageopacityincrementupdate);
                imageopacity.append(button);
            }
        }
        addEventListener("load", imageopacityincrementload);

        function imageopacityincrementupdate(e)
        {
            let v = Number(imageopacitynumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((imageopacitynumber.min <= v) && (v <= imageopacitynumber.max))
            {
                imageopacitynumber.value = v;

                imageopacitynumberupdate();
            }
        }
//*/



        function imagefilterblurload()
        {
            const div = document.createElement("div");
            div.id = "imagefilterblur";
            div.innerHTML = "filter-blur";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefilterblurload);

        function imagefilterblurnumberload()
        {
            const br = document.createElement("br");
            imagefilterblur.append(br);

            const input = document.createElement("input");
            input.id = "imagefilterblurnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagefilterblurnumberupdate);
            imagefilterblur.append(input);

            //imagefilterblurnumberset();
        }
        addEventListener("load", imagefilterblurnumberload);

        function imagefilterblurnumberset()
        {
            const v = imagefilterblurnumber.value;

            imagefilterblurrange.value = v;
            image.filterblur = v;
        }

        function imagefilterblurnumberupdate()
        {
            imagefilterblurnumberset();
            svgupdate();
        }

        function imagefilterblurrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefilterblurrange";
            input.max = imagefilterblurnumber.max;
            input.min = imagefilterblurnumber.min;
            input.step = imagefilterblurnumber.step;
            input.type = "range";
            input.value = imagefilterblurnumber.value;
            input.addEventListener("input", imagefilterblurrangeupdate);
            imagefilterblur.append(input);

            imagefilterblurrangeset();
        }
        addEventListener("load", imagefilterblurrangeload);

        function imagefilterblurrangeset()
        {
            const v = imagefilterblurrange.value;

            imagefilterblurnumber.value = v;
            image.filterblur = v;
        }

        function imagefilterblurrangeupdate()
        {
            imagefilterblurrangeset();
            svgupdate();
        }

        function imagefilterblurexactload()
        {
            const br = document.createElement("br");
            imagefilterblur.append(br);

            const array =
            [
                ["0",0],
                ["2",2],
                ["4",4],
                ["8",8],
                ["16",16],
                ["32",32],
                ["64",64],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterblurexactupdate);
                imagefilterblur.append(button);
            }
        }
        addEventListener("load", imagefilterblurexactload);

        function imagefilterblurexactupdate(e)
        {
            imagefilterblurnumber.value = Number(e.target.value);

            imagefilterblurnumberupdate();
        }

        function imagefilterblurincrementload()
        {
            const br = document.createElement("br");
            imagefilterblur.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterblurincrementupdate);
                imagefilterblur.append(button);
            }
        }
        addEventListener("load", imagefilterblurincrementload);

        function imagefilterblurincrementupdate(e)
        {
            const v = Number(imagefilterblurnumber.value) + Number(e.target.value);

            if((imagefilterblurnumber.min <= v) && (v <= imagefilterblurnumber.max))
            {
                imagefilterblurnumber.value = v;

                imagefilterblurnumberupdate();
            }
        }



        function imagefilterbrightnessload()
        {
            const div = document.createElement("div");
            div.id = "imagefilterbrightness";
            div.innerHTML = "filter-brightness";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefilterbrightnessload);

        function imagefilterbrightnessnumberload()
        {
            const br = document.createElement("br");
            imagefilterbrightness.append(br);

            const input = document.createElement("input");
            input.id = "imagefilterbrightnessnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", imagefilterbrightnessnumberupdate);
            imagefilterbrightness.append(input);

            //imagefilterbrightnessnumberset();
        }
        addEventListener("load", imagefilterbrightnessnumberload);

        function imagefilterbrightnessnumberset()
        {
            const v = imagefilterbrightnessnumber.value;

            imagefilterbrightnessrange.value = v;
            image.filterbrightness = v;
        }

        function imagefilterbrightnessnumberupdate()
        {
            imagefilterbrightnessnumberset();
            svgupdate();
        }

        function imagefilterbrightnessrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefilterbrightnessrange";
            input.max = imagefilterbrightnessnumber.max;
            input.min = imagefilterbrightnessnumber.min;
            input.step = imagefilterbrightnessnumber.step;
            input.type = "range";
            input.value = imagefilterbrightnessnumber.value;
            input.addEventListener("input", imagefilterbrightnessrangeupdate);
            imagefilterbrightness.append(input);

            imagefilterbrightnessrangeset();
        }
        addEventListener("load", imagefilterbrightnessrangeload);

        function imagefilterbrightnessrangeset()
        {
            const v = imagefilterbrightnessrange.value;

            imagefilterbrightnessnumber.value = v;
            image.filterbrightness = v;
        }

        function imagefilterbrightnessrangeupdate()
        {
            imagefilterbrightnessrangeset();
            svgupdate();
        }

        function imagefilterbrightnessexactload()
        {
            const br = document.createElement("br");
            imagefilterbrightness.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterbrightnessexactupdate);
                imagefilterbrightness.append(button);
            }
        }
        addEventListener("load", imagefilterbrightnessexactload);

        function imagefilterbrightnessexactupdate(e)
        {
            imagefilterbrightnessnumber.value = Number(e.target.value);

            imagefilterbrightnessnumberupdate();
        }

        function imagefilterbrightnessincrementload()
        {
            const br = document.createElement("br");
            imagefilterbrightness.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterbrightnessincrementupdate);
                imagefilterbrightness.append(button);
            }
        }
        addEventListener("load", imagefilterbrightnessincrementload);

        function imagefilterbrightnessincrementupdate(e)
        {
            const v = Number(imagefilterbrightnessnumber.value) + Number(e.target.value);

            if((imagefilterbrightnessnumber.min <= v) && (v <= imagefilterbrightnessnumber.max))
            {
                imagefilterbrightnessnumber.value = v;

                imagefilterbrightnessnumberupdate();
            }
        }



        function imagefiltercontrastload()
        {
            const div = document.createElement("div");
            div.id = "imagefiltercontrast";
            div.innerHTML = "filter-contrast";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefiltercontrastload);

        function imagefiltercontrastnumberload()
        {
            const br = document.createElement("br");
            imagefiltercontrast.append(br);

            const input = document.createElement("input");
            input.id = "imagefiltercontrastnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", imagefiltercontrastnumberupdate);
            imagefiltercontrast.append(input);

            //imagefiltercontrastnumberset();
        }
        addEventListener("load", imagefiltercontrastnumberload);

        function imagefiltercontrastnumberset()
        {
            const v = imagefiltercontrastnumber.value;

            imagefiltercontrastrange.value = v;
            image.filtercontrast = v;
        }

        function imagefiltercontrastnumberupdate()
        {
            imagefiltercontrastnumberset();
            svgupdate();
        }

        function imagefiltercontrastrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefiltercontrastrange";
            input.max = imagefiltercontrastnumber.max;
            input.min = imagefiltercontrastnumber.min;
            input.step = imagefiltercontrastnumber.step;
            input.type = "range";
            input.value = imagefiltercontrastnumber.value;
            input.addEventListener("input", imagefiltercontrastrangeupdate);
            imagefiltercontrast.append(input);

            imagefiltercontrastrangeset();
        }
        addEventListener("load", imagefiltercontrastrangeload);

        function imagefiltercontrastrangeset()
        {
            const v = imagefiltercontrastrange.value;

            imagefiltercontrastnumber.value = v;
            image.filtercontrast = v;
        }

        function imagefiltercontrastrangeupdate()
        {
            imagefiltercontrastrangeset();
            svgupdate();
        }

        function imagefiltercontrastexactload()
        {
            const br = document.createElement("br");
            imagefiltercontrast.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltercontrastexactupdate);
                imagefiltercontrast.append(button);
            }
        }
        addEventListener("load", imagefiltercontrastexactload);

        function imagefiltercontrastexactupdate(e)
        {
            imagefiltercontrastnumber.value = Number(e.target.value);

            imagefiltercontrastnumberupdate();
        }

        function imagefiltercontrastincrementload()
        {
            const br = document.createElement("br");
            imagefiltercontrast.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventList
10000
ener("click", imagefiltercontrastincrementupdate);
                imagefiltercontrast.append(button);
            }
        }
        addEventListener("load", imagefiltercontrastincrementload);

        function imagefiltercontrastincrementupdate(e)
        {
            const v = Number(imagefiltercontrastnumber.value) + Number(e.target.value);

            if((imagefiltercontrastnumber.min <= v) && (v <= imagefiltercontrastnumber.max))
            {
                imagefiltercontrastnumber.value = v;

                imagefiltercontrastnumberupdate();
            }
        }



        function imagefiltergrayscaleload()
        {
            const div = document.createElement("div");
            div.id = "imagefiltergrayscale";
            div.innerHTML = "filter-grayscale";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefiltergrayscaleload);

        function imagefiltergrayscalenumberload()
        {
            const br = document.createElement("br");
            imagefiltergrayscale.append(br);

            const input = document.createElement("input");
            input.id = "imagefiltergrayscalenumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagefiltergrayscalenumberupdate);
            imagefiltergrayscale.append(input);

            //imagefiltergrayscalenumberset();
        }
        addEventListener("load", imagefiltergrayscalenumberload);

        function imagefiltergrayscalenumberset()
        {
            const v = imagefiltergrayscalenumber.value;

            imagefiltergrayscalerange.value = v;
            image.filtergrayscale = v;
        }

        function imagefiltergrayscalenumberupdate()
        {
            imagefiltergrayscalenumberset();
            svgupdate();
        }

        function imagefiltergrayscalerangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefiltergrayscalerange";
            input.max = imagefiltergrayscalenumber.max;
            input.min = imagefiltergrayscalenumber.min;
            input.step = imagefiltergrayscalenumber.step;
            input.type = "range";
            input.value = imagefiltergrayscalenumber.value;
            input.addEventListener("input", imagefiltergrayscalerangeupdate);
            imagefiltergrayscale.append(input);

            imagefiltergrayscalerangeset();
        }
        addEventListener("load", imagefiltergrayscalerangeload);

        function imagefiltergrayscalerangeset()
        {
            const v = imagefiltergrayscalerange.value;

            imagefiltergrayscalenumber.value = v;
            image.filtergrayscale = v;
        }

        function imagefiltergrayscalerangeupdate()
        {
            imagefiltergrayscalerangeset();
            svgupdate();
        }

        function imagefiltergrayscaleexactload()
        {
            const br = document.createElement("br");
            imagefiltergrayscale.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltergrayscaleexactupdate);
                imagefiltergrayscale.append(button);
            }
        }
        addEventListener("load", imagefiltergrayscaleexactload);

        function imagefiltergrayscaleexactupdate(e)
        {
            imagefiltergrayscalenumber.value = Number(e.target.value);

            imagefiltergrayscalenumberupdate();
        }

        function imagefiltergrayscaleincrementload()
        {
            const br = document.createElement("br");
            imagefiltergrayscale.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltergrayscaleincrementupdate);
                imagefiltergrayscale.append(button);
            }
        }
        addEventListener("load", imagefiltergrayscaleincrementload);

        function imagefiltergrayscaleincrementupdate(e)
        {
            const v = Number(imagefiltergrayscalenumber.value) + Number(e.target.value);

            if((imagefiltergrayscalenumber.min <= v) && (v <= imagefiltergrayscalenumber.max))
            {
                imagefiltergrayscalenumber.value = v;

                imagefiltergrayscalenumberupdate();
            }
        }



        function imagefilterhuerotateload()
        {
            const div = document.createElement("div");
            div.id = "imagefilterhuerotate";
            div.innerHTML = "filter-hue-rotate";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefilterhuerotateload);

        function imagefilterhuerotatenumberload()
        {
            const br = document.createElement("br");
            imagefilterhuerotate.append(br);

            const input = document.createElement("input");
            input.id = "imagefilterhuerotatenumber";
            input.max = 360;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagefilterhuerotatenumberupdate);
            imagefilterhuerotate.append(input);

            //imagefilterhuerotatenumberset();
        }
        addEventListener("load", imagefilterhuerotatenumberload);

        function imagefilterhuerotatenumberset()
        {
            const v = imagefilterhuerotatenumber.value;

            imagefilterhuerotaterange.value = v;
            image.filterhuerotate = v;
        }

        function imagefilterhuerotatenumberupdate()
        {
            imagefilterhuerotatenumberset();
            svgupdate();
        }

        function imagefilterhuerotaterangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefilterhuerotaterange";
            input.max = imagefilterhuerotatenumber.max;
            input.min = imagefilterhuerotatenumber.min;
            input.step = imagefilterhuerotatenumber.step;
            input.type = "range";
            input.value = imagefilterhuerotatenumber.value;
            input.addEventListener("input", imagefilterhuerotaterangeupdate);
            imagefilterhuerotate.append(input);

            imagefilterhuerotaterangeset();
        }
        addEventListener("load", imagefilterhuerotaterangeload);

        function imagefilterhuerotaterangeset()
        {
            const v = imagefilterhuerotaterange.value;

            imagefilterhuerotatenumber.value = v;
            image.filterhuerotate = v;
        }

        function imagefilterhuerotaterangeupdate()
        {
            imagefilterhuerotaterangeset();
            svgupdate();
        }

        function imagefilterhuerotateexactload()
        {
            const br = document.createElement("br");
            imagefilterhuerotate.append(br);

            const array =
            [
                ["0",0],
                ["90",90],
                ["180",180],
                ["270",270],
                ["360",360],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterhuerotateexactupdate);
                imagefilterhuerotate.append(button);
            }
        }
        addEventListener("load", imagefilterhuerotateexactload);

        function imagefilterhuerotateexactupdate(e)
        {
            imagefilterhuerotatenumber.value = Number(e.target.value);

            imagefilterhuerotatenumberupdate();
        }

        function imagefilterhuerotateincrementload()
        {
            const br = document.createElement("br");
            imagefilterhuerotate.append(br);

            const array =
            [
                //["-90",-90],
                ["-45",-45],
                ["-15",-15],
                ["-1",-1],
                ["+1",1],
                ["+15",15],
                ["+45",45],
                //["+90",90],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterhuerotateincrementupdate);
                imagefilterhuerotate.append(button);
            }
        }
        addEventListener("load", imagefilterhuerotateincrementload);

        function imagefilterhuerotateincrementupdate(e)
        {
            const v = Number(imagefilterhuerotatenumber.value) + Number(e.target.value);

            if((imagefilterhuerotatenumber.min <= v) && (v <= imagefilterhuerotatenumber.max))
            {
                imagefilterhuerotatenumber.value = v;

                imagefilterhuerotatenumberupdate();
            }
        }



        function imagefilterinvertload()
        {
            const div = document.createElement("div");
            div.id = "imagefilterinvert";
            div.innerHTML = "filter-invert";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefilterinvertload);

        function imagefilterinvertnumberload()
        {
            const br = document.createElement("br");
            imagefilterinvert.append(br);

            const input = document.createElement("input");
            input.id = "imagefilterinvertnumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagefilterinvertnumberupdate);
            imagefilterinvert.append(input);

            //imagefilterinvertnumberset();
        }
        addEventListener("load", imagefilterinvertnumberload);

        function imagefilterinvertnumberset()
        {
            const v = imagefilterinvertnumber.value;

            imagefilterinvertrange.value = v;
            image.filterinvert = v;
        }

        function imagefilterinvertnumberupdate()
        {
            imagefilterinvertnumberset();
            svgupdate();
        }

        function imagefilterinvertrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefilterinvertrange";
            input.max = imagefilterinvertnumber.max;
            input.min = imagefilterinvertnumber.min;
            input.step = imagefilterinvertnumber.step;
            input.type = "range";
            input.value = imagefilterinvertnumber.value;
            input.addEventListener("input", imagefilterinvertrangeupdate);
            imagefilterinvert.append(input);

            imagefilterinvertrangeset();
        }
        addEventListener("load", imagefilterinvertrangeload);

        function imagefilterinvertrangeset()
        {
            const v = imagefilterinvertrange.value;

            imagefilterinvertnumber.value = v;
            image.filterinvert = v;
        }

        function imagefilterinvertrangeupdate()
        {
            imagefilterinvertrangeset();
            svgupdate();
        }

        function imagefilterinvertexactload()
        {
            const br = document.createElement("br");
            imagefilterinvert.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterinvertexactupdate);
                imagefilterinvert.append(button);
            }
        }
        addEventListener("load", imagefilterinvertexactload);

        function imagefilterinvertexactupdate(e)
        {
            imagefilterinvertnumber.value = Number(e.target.value);

            imagefilterinvertnumberupdate();
        }

        function imagefilterinvertincrementload()
        {
            const br = document.createElement("br");
            imagefilterinvert.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterinvertincrementupdate);
                imagefilterinvert.append(button);
            }
        }
        addEventListener("load", imagefilterinvertincrementload);

        function imagefilterinvertincrementupdate(e)
        {
            const v = Number(imagefilterinvertnumber.value) + Number(e.target.value);

            if((imagefilterinvertnumber.min <= v) && (v <= imagefilterinvertnumber.max))
            {
                imagefilterinvertnumber.value = v;

                imagefilterinvertnumberupdate();
            }
        }



        function imagefilteropacityload()
        {
            const div = document.createElement("div");
            div.id = "imagefilteropacity";
            div.innerHTML = "filter-opacity";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefilteropacityload);

        function imagefilteropacitynumberload()
        {
            const br = document.createElement("br");
            imagefilteropacity.append(br);

            const input = document.createElement("input");
            input.id = "imagefilteropacitynumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", imagefilteropacitynumberupdate);
            imagefilteropacity.append(input);

            //imagefilteropacitynumberset();
        }
        addEventListener("load", imagefilteropacitynumberload);

        function imagefilteropacitynumberset()
        {
            const v = imagefilteropacitynumber.value;

            imagefilteropacityrange.value = v;
            image.filteropacity = v;
        }

        function imagefilteropacitynumberupdate()
        {
            imagefilteropacitynumberset();
            svgupdate();
        }

        function imagefilteropacityrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefilteropacityrange";
            input.max = imagefilteropacitynumber.max;
            input.min = imagefilteropacitynumber.min;
            input.step = imagefilteropacitynumber.step;
            input.type = "range";
            input.value = imagefilteropacitynumber.value;
            input.addEventListener("input", imagefilteropacityrangeupdate);
            imagefilteropacity.append(input);

            imagefilteropacityrangeset();
        }
        addEventListener("load", imagefilteropacityrangeload);

        function imagefilteropacityrangeset()
        {
            const v = imagefilteropacityrange.value;

            imagefilteropacitynumber.value = v;
            image.filteropacity = v;
        }

        function imagefilteropacityrangeupdate()
        {
            imagefilteropacityrangeset();
            svgupdate();
        }

        function imagefilteropacityexactload()
        {
            const br = document.createElement("br");
            imagefilteropacity.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100 (initial)",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilteropacityexactupdate);
                imagefilteropacity.append(button);
            }
        }
        addEventListener("load", imagefilteropacityexactload);

        function imagefilteropacityexactupdate(e)
        {
            imagefilteropacitynumber.value = Number(e.target.value);

            imagefilteropacitynumberupdate();
        }

        function imagefilteropacityincrementload()
        {
            const br = document.createElement("br");
            imagefilteropacity.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilteropacityincrementupdate);
                imagefilteropacity.append(button);
            }
        }
        addEventListener("load", imagefilteropacityincrementload);

        function imagefilteropacityincrementupdate(e)
        {
            const v = Number(imagefilteropacitynumber.value) + Number(e.target.value);

            if((imagefilteropacitynumber.min <= v) && (v <= imagefilteropacitynumber.max))
            {
                imagefilteropacitynumber.value = v;

                imagefilteropacitynumberupdate();
            }
        }



        function imagefiltersaturateload()
        {
            const div = document.createElement("div");
            div.id = "imagefiltersaturate";
            div.innerHTML = "filter-saturate";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefiltersaturateload);

        function imagefiltersaturatenumberload()
        {
            const br = document.createElement("br");
            imagefiltersaturate.append(br);

            const input = document.createElement("input");
            input.id = "imagefiltersaturatenumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", imagefiltersaturatenumberupdate);
            imagefiltersaturate.append(input);

            //imagefiltersaturatenumberset();
        }
        addEventListener("load", imagefiltersaturatenumberload);

        function imagefiltersaturatenumberset()
        {
            const v = imagefiltersaturatenumber.value;

            imagefiltersaturaterange.value = v;
            image.filtersaturate = v;
        }

        function imagefiltersaturatenumberupdate()
        {
            imagefiltersaturatenumberset();
            svgupdate();
        }

        function imagefiltersaturaterangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefiltersaturaterange";
            input.max = imagefiltersaturatenumber.max;
            input.min = imagefiltersaturatenumber.min;
            input.step = imagefiltersaturatenumber.step;
            input.type = "range";
            input.value = imagefiltersaturatenumber.value;
            input.addEventListener("input", imagefiltersaturaterangeupdate);
            imagefiltersaturate.append(input);

            imagefiltersaturaterangeset();
        }
        addEventListener("load", imagefiltersaturaterangeload);

        function imagefiltersaturaterangeset()
        {
            const v = imagefiltersaturaterange.value;

            imagefiltersaturatenumber.value = v;
            image.filtersaturate = v;
        }

        function imagefiltersaturaterangeupdate()
        {
            imagefiltersaturaterangeset();
            svgupdate();
        }

        function imagefiltersaturateexactload()
        {
            const br = document.createElement("br");
            imagefiltersaturate.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltersaturateexactupdate);
                imagefiltersaturate.append(button);
            }
        }
        addEventListener("load", imagefiltersaturateexactload);

        function imagefiltersaturateexactupdate(e)
        {
            imagefiltersaturatenumber.value = Number(e.target.value);

            imagefiltersaturatenumberupdate();
        }

        function imagefiltersaturateincrementload()
        {
            const br = document.createElement("br");
            imagefiltersaturate.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltersaturateincrementupdate);
                imagefiltersaturate.append(button);
            }
        }
        addEventListener("load", imagefiltersaturateincrementload);

        function imagefiltersaturateincrementupdate(e)
        {
            const v = Number(imagefiltersaturatenumber.value) + Number(e.target.value);

            if((imagefiltersaturatenumber.min <= v) && (v <= imagefiltersaturatenumber.max))
            {
                imagefiltersaturatenumber.value = v;

                imagefiltersaturatenumberupdate();
            }
        }



        function imagefiltersepiaload()
        {
            const div = document.createElement("div");
            div.id = "imagefiltersepia";
            div.innerHTML = "filter-sepia";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefiltersepiaload);

        function imagefiltersepianumberload()
        {
            const br = document.createElement("br");
            imagefiltersepia.append(br);

            const input = document.createElement("input");
            input.id = "imagefiltersepianumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagefiltersepianumberupdate);
            imagefiltersepia.append(input);

            //imagefiltersepianumberset();
        }
        addEventListener("load", imagefiltersepianumberload);

        function imagefiltersepianumberset()
        {
            const v = imagefiltersepianumber.value;

            imagefiltersepiarange.value = v;
            image.filtersepia = v;
        }

        function imagefiltersepianumberupdate()
        {
            imagefiltersepianumberset();
            svgupdate();
        }

        function imagefiltersepiarangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefiltersepiarange";
            input.max = imagefiltersepianumber.max;
            input.min = imagefiltersepianumber.min;
            input.step = imagefiltersepianumber.step;
            input.type = "range";
            input.value = imagefiltersepianumber.value;
            input.addEventListener("input", imagefiltersepiarangeupdate);
            imagefiltersepia.append(input);

            imagefiltersepiarangeset();
        }
        addEventListener("load", imagefiltersepiarangeload);

        function imagefiltersepiarangeset()
        {
            const v = imagefiltersepiarange.value;

            imagefiltersepianumber.value = v;
            image.filtersepia = v;
        }

        function imagefiltersepiarangeupdate()
        {
            imagefiltersepiarangeset();
            svgupdate();
        }

        function imagefiltersepiaexactload()
        {
            const br = document.createElement("br");
            imagefiltersepia.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltersepiaexactupdate);
                imagefiltersepia.append(button);
            }
        }
        addEventListener("load", imagefiltersepiaexactload);

        function imagefiltersepiaexactupdate(e)
        {
            imagefiltersepianumber.value = Number(e.target.value);

            imagefiltersepianumberupdate();
        }

        function imagefiltersepiaincrementload()
        {
            const br = document.createElement("br");
            imagefiltersepia.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltersepiaincrementupdate);
                imagefiltersepia.append(button);
            }
        }
        addEventListener("load", imagefiltersepiaincrementload);

        function imagefiltersepiaincrementupdate(e)
        {
            const v = Number(imagefiltersepianumber.value) + Number(e.target.value);

            if((imagefiltersepianumber.min <= v) && (v <= imagefiltersepianumber.max))
            {
                imagefiltersepianumber.value = v;

                imagefiltersepianumberupdate();
            }
        }



/*
        function imagemargintopload()
        {
            const div = document.createElement("div");
            div.id = "imagemargintop";
            div.innerHTML = "margin-top";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagemargintopload);

        function imagemargintopnumberload()
        {
            const br = document.createElement("br");
            imagemargintop.append(br);

            const input = document.createElement("input");
            input.id = "imagemargintopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagemargintopnumberupdate);
            imagemargintop.append(input);

            //imagemargintopnumberset();
        }
        addEventListener("load", imagemargintopnumberload);

        function imagemargintopnumberset()
        {
            const v = Number(imagemargintopnumber.value);

            imagemargintoprange.value = v;
            image.margintop = v;
        }

        function imagemargintopnumberupdate()
        {
            imagemargintopnumberset();

            svgupdate();
        }

        function imagemargintoprangeload()
        {
            const input = document.createElement("input");
            input.id = "imagemargintoprange";
            input.max = imagemargintopnumber.max;
            input.min = imagemargintopnumber.min;
            input.type = "range";
            input.value = imagemargintopnumber.value;
            input.addEventListener("input", imagemargintoprangeupdate);
            imagemargintop.append(input);

            imagemargintoprangeset();
        }
        addEventListener("load", imagemargintoprangeload);

        function imagemargintoprangeset()
        {
            const v = Number(imagemargintoprange.value);

            imagemargintopnumber.value = v;
            image.margintop = v;
        }

        function imagemargintoprangeupdate()
        {
            imagemargintoprangeset();

            svgupdate();
        }



        function imagemarginbottomload()
        {
            const div = document.createElement("div");
            div.id = "imagemarginbottom";
            div.innerHTML = "margin-bottom";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagemarginbottomload);

        function imagemarginbottomnumberload()
        {
            const br = document.createElement("br");
            imagemarginbottom.append(br);

            const input = document.createElement("input");
            input.id = "imagemarginbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagemarginbottomnumberupdate);
            imagemarginbottom.append(input);

            //imagemarginbottomnumberset();
        }
        addEventListener("load", imagemarginbottomnumberload);

        function imagemarginbottomnumberset()
        {
            const v = Number(imagemarginbottomnumber.value);

            imagemarginbottomrange.value = v;
            image.marginbottom = v;
        }

        function imagemarginbottomnumberupdate()
        {
            imagemarginbottomnumberset();

            svgupdate();
        }

        function imagemarginbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagemarginbottomrange";
            input.max = imagemarginbottomnumber.max;
            input.min = imagemarginbottomnumber.min;
            input.type = "range";
            input.value = imagemarginbottomnumber.value;
            input.addEventListener("input", imagemarginbottomrangeupdate);
            imagemarginbottom.append(input);

            imagemarginbottomrangeset();
        }
        addEventListener("load", imagemarginbottomrangeload);

        function imagemarginbottomrangeset()
        {
            const v = Number(imagemarginbottomrange.value);

            imagemarginbottomnumber.value = v;
            image.marginbottom = v;
        }

        function imagemarginbottomrangeupdate()
        {
            imagemarginbottomrangeset();

            svgupdate();
        }



        function imagemarginleftload()
        {
            const div = document.createElement("div");
            div.id = "imagemarginleft";
            div.innerHTML = "margin-left";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagemarginleftload);

        function imagemarginleftnumberload()
        {
            const br = document.createElement("br");
            imagemarginleft.append(br);

            const input = document.createElement("input");
            input.id = "imagemarginleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagemarginleftnumberupdate);
            imagemarginleft.append(input);

            //imagemarginleftnumberset();
        }
        addEventListener("load", imagemarginleftnumberload);

        function imagemarginleftnumberset()
        {
            const v = Number(imagemarginleftnumber.value);

            imagemarginleftrange.value = v;
            image.marginleft = v;
        }

        function imagemarginleftnumberupdate()
        {
            imagemarginleftnumberset();

            svgupdate();
        }

        function imagemarginleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagemarginleftrange";
            input.max = imagemarginleftnumber.max;
            input.min = imagemarginleftnumber.min;
            input.type = "range";
            input.value = imagemarginleftnumber.value;
            input.addEventListener("input", imagemarginleftrangeupdate);
            imagemarginleft.append(input);

            imagemarginleftrangeset();
        }
        addEventListener("load", imagemarginleftrangeload);

        function imagemarginleftrangeset()
        {
            const v = Number(imagemarginleftrange.value);

            imagemarginleftnumber.value = v;
            image.marginleft = v;
        }

        function imagemarginleftrangeupdate()
        {
            imagemarginleftrangeset();

            svgupdate();
        }



        function imagemarginrightload()
        {
            const div = document.createElement("div");
            div.id = "imagemarginright";
            div.innerHTML = "margin-right";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagemarginrightload);

        function imagemarginrightnumberload()
        {
            const br = document.createElement("br");
            imagemarginright.append(br);

            const input = document.createElement("input");
            input.id = "imagemarginrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagemarginrightnumberupdate);
            imagemarginright.append(input);

            //imagemarginrightnumberset();
        }
        addEventListener("load", imagemarginrightnumberload);

        function imagemarginrightnumberset()
        {
            const v = Number(imagemarginrightnumber.value);

            imagemarginrightrange.value = v;
            image.marginright = v;
        }

        function imagemarginrightnumberupdate()
        {
            imagemarginrightnumberset();

            svgupdate();
        }

        function imagemarginrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagemarginrightrange";
            input.max = imagemarginrightnumber.max;
            input.min = imagemarginrightnumber.min;
            input.type = "range";
            input.value = imagemarginrightnumber.value;

            input.addEventListener("input", imagemarginrightrangeupdate);
            imagemarginright.append(input);

            imagemarginrightrangeset();
        }
        addEventListener("load", imagemarginrightrangeload);

        function imagemarginrightrangeset()
        {
            const v = Number(imagemarginrightrange.value);

            imagemarginrightnumber.value = v;
            image.marginright = v;
        }

        function imagemarginrightrangeupdate()
        {
            imagemarginrightrangeset();

            svgupdate();
        }



        function imagepaddingtopload()
        {
            const div = document.createElement("div");
            div.id = "imagepaddingtop";
            div.innerHTML = "padding-top";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagepaddingtopload);

        function imagepaddingtopnumberload()
        {
            const br = document.createElement("br");
            imagepaddingtop.append(br);

            const input = document.createElement("input");
            input.id = "imagepaddingtopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagepaddingtopnumberupdate);
            imagepaddingtop.append(input);

            //imagepaddingtopnumberset();
        }
        addEventListener("load", imagepaddingtopnumberload);

        function imagepaddingtopnumberset()
        {
            const v = Number(imagepaddingtopnumber.value);

            imagepaddingtoprange.value = v;
            image.paddingtop = v;
        }

        function imagepaddingtopnumberupdate()
        {
            imagepaddingtopnumberset();

            svgupdate();
        }

        function imagepaddingtoprangeload()
        {
            const input = document.createElement("input");
            input.id = "imagepaddingtoprange";
            input.max = imagepaddingtopnumber.max;
            input.min = imagepaddingtopnumber.min;
            input.type = "range";
            input.value = imagepaddingtopnumber.value;
            input.addEventListener("input", imagepaddingtoprangeupdate);
            imagepaddingtop.append(input);

            imagepaddingtoprangeset();
        }
        addEventListener("load", imagepaddingtoprangeload);

        function imagepaddingtoprangeset()
        {
            const v = Number(imagepaddingtoprange.value);

            imagepaddingtopnumber.value = v;
            image.paddingtop = v;
        }

        function imagepaddingtoprangeupdate()
        {
            imagepaddingtoprangeset();

            svgupdate();
        }



        function imagepaddingbottomload()
        {
            const div = document.createElement("div");
            div.id = "imagepaddingbottom";
            div.innerHTML = "padding-bottom";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagepaddingbottomload);

        function imagepaddingbottomnumberload()
        {
            const br = document.createElement("br");
            imagepaddingbottom.append(br);

            const input = document.createElement("input");
            input.id = "imagepaddingbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagepaddingbottomnumberupdate);
            imagepaddingbottom.append(input);

            //imagepaddingbottomnumberset();
        }
        addEventListener("load", imagepaddingbottomnumberload);

        function imagepaddingbottomnumberset()
        {
            const v = Number(imagepaddingbottomnumber.value);

            imagepaddingbottomrange.value = v;
            image.paddingbottom = v;
        }

        function imagepaddingbottomnumberupdate()
        {
            imagepaddingbottomnumberset();

            svgupdate();
        }

        function imagepaddingbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagepaddingbottomrange";
            input.max = imagepaddingbottomnumber.max;
            input.min = imagepaddingbottomnumber.min;
            input.type = "range";
            input.value = imagepaddingbottomnumber.value;
            input.addEventListener("input", imagepaddingbottomrangeupdate);
            imagepaddingbottom.append(input);

            imagepaddingbottomrangeset();
        }
        addEventListener("load", imagepaddingbottomrangeload);

        function imagepaddingbottomrangeset()
        {
            const v = Number(imagepaddingbottomrange.value);

            imagepaddingbottomnumber.value = v;
            image.paddingbottom = v;
        }

        function imagepaddingbottomrangeupdate()
        {
            imagepaddingbottomrangeset();

            svgupdate();
        }



        function imagepaddingleftload()
        {
            const div = document.createElement("div");
            div.id = "imagepaddingleft";
            div.innerHTML = "padding-left";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagepaddingleftload);

        function imagepaddingleftnumberload()
        {
            const br = document.createElement("br");
            imagepaddingleft.append(br);

            const input = document.createElement("input");
            input.id = "imagepaddingleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagepaddingleftnumberupdate);
            imagepaddingleft.append(input);

            //imagepaddingleftnumberset();
        }
        addEventListener("load", imagepaddingleftnumberload);

        function imagepaddingleftnumberset()
        {
            const v = Number(imagepaddingleftnumber.value);

            imagepaddingleftrange.value = v;
            image.paddingleft = v;
        }

        function imagepaddingleftnumberupdate()
        {
            imagepaddingleftnumberset();

            svgupdate();
        }

        function imagepaddingleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagepaddingleftrange";
            input.max = imagepaddingleftnumber.max;
            input.min = imagepaddingleftnumber.min;
            input.type = "range";
            input.value = imagepaddingleftnumber.value;
            input.addEventListener("input", imagepaddingleftrangeupdate);
            imagepaddingleft.append(input);

            imagepaddingleftrangeset();
        }
        addEventListener("load", imagepaddingleftrangeload);

        function imagepaddingleftrangeset()
        {
            const v = Number(imagepaddingleftrange.value);

            imagepaddingleftnumber.value = v;
            image.paddingleft = v;
        }

        function imagepaddingleftrangeupdate()
        {
            imagepaddingleftrangeset();

            svgupdate();
        }



        function imagepaddingrightload()
        {
            const div = document.createElement("div");
            div.id = "imagepaddingright";
            div.innerHTML = "padding-right";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagepaddingrightload);

        function imagepaddingrightnumberload()
        {
            const br = document.createElement("br");
            imagepaddingright.append(br);

            const input = document.createElement("input");
            input.id = "imagepaddingrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagepaddingrightnumberupdate);
            imagepaddingright.append(input);

            //imagepaddingrightnumberset();
        }
        addEventListener("load", imagepaddingrightnumberload);

        function imagepaddingrightnumberset()
        {
            const v = Number(imagepaddingrightnumber.value);

            imagepaddingrightrange.value = v;
            image.paddingright = v;
        }

        function imagepaddingrightnumberupdate()
        {
            imagepaddingrightnumberset();

            svgupdate();
        }

        function imagepaddingrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagepaddingrightrange";
            input.max = imagepaddingrightnumber.max;
            input.min = imagepaddingrightnumber.min;
            input.type = "range";
            input.value = imagepaddingrightnumber.value;
            input.addEventListener("input", imagepaddingrightrangeupdate);
            imagepaddingright.append(input);

            imagepaddingrightrangeset();
        }
        addEventListener("load", imagepaddingrightrangeload);

        function imagepaddingrightrangeset()
        {
            const v = Number(imagepaddingrightrange.value);

            imagepaddingrightnumber.value = v;
            image.paddingright = v;
        }

        function imagepaddingrightrangeupdate()
        {
            imagepaddingrightrangeset();

            svgupdate();
        }
//*/






        function messagetextload()
        {
            const div = document.createElement("div");
            div.id = "messagetext";
            div.innerHTML = "text";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagetextload);

        function messagetexttextareaload()
        {
            const br = document.createElement("br");
            messagetext.append(br);

            const textarea = document.createElement("textarea");
            textarea.id = "messagetexttextarea";
            textarea.addEventListener("input", messagetexttextareaupdate);
            messagetext.append(textarea);

            textarea.value = "Jesus loves you!";

            messagetexttextareaset();
        }
        addEventListener("load", messagetexttextareaload);

        function messagetexttextareaset()
        {
            text.messagetext = messagetexttextarea.value;
        }

        function messagetexttextareaupdate()
        {
            messagetexttextareaset();
            svgupdate();
        }



        function messagewidthload()
        {
            const div = document.createElement("div");
            div.id = "messagewidth";
            div.innerHTML = "width";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagewidthload);

        function messagewidthnumberload()
        {
            const br = document.createElement("br");
            messagewidth.append(br);

            const input = document.createElement("input");
            input.id = "messagewidthnumber";
            input.max = maxwidth;
            input.min = 0;
            input.type = "number";
            input.value = canvas.width - 100;
            input.addEventListener("input", messagewidthnumberupdate);
            messagewidth.append(input);

            //messagewidthnumberset();
        }
        addEventListener("load", messagewidthnumberload);

        function messagewidthnumberset()
        {
            const v = Number(messagewidthnumber.value);

            messagewidthrange.value = v;
            text.messagewidth = v;
        }

        function messagewidthnumberupdate()
        {
            messagewidthnumberset();
            svgupdate();
        }

        function messagewidthrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagewidthrange";
            input.max = messagewidthnumber.max;
            input.min = messagewidthnumber.min;
            input.type = "range";
            input.value = messagewidthnumber.value;
            input.addEventListener("input", messagewidthrangeupdate);
            messagewidth.append(input);

            messagewidthrangeset();
        }
        addEventListener("load", messagewidthrangeload);

        function messagewidthrangeset()
        {
            const v = Number(messagewidthrange.value);

            messagewidthnumber.value = v;
            text.messagewidth = v;
        }

        function messagewidthrangeupdate()
        {
            messagewidthrangeset();
            svgupdate();
        }

        function messagewidthexactload()
        {
            const br = document.createElement("br");
            messagewidth.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagewidthexactupdate);
                messagewidth.append(button);
            }
        }
        addEventListener("load", messagewidthexactload);

        function messagewidthexactupdate(e)
        {
            messagewidthnumber.value = canvas.width * Number(e.target.value);

            messagewidthnumberupdate();
        }

        function messagewidthincrementload()
        {
            const br = document.createElement("br");
            messagewidth.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagewidthincrementupdate);
                messagewidth.append(button);
            }
        }
        addEventListener("load", messagewidthincrementload);

        function messagewidthincrementupdate(e)
        {
            const v = Number(messagewidthnumber.value) + Number(e.target.value);

            if((messagewidthnumber.min <= v) && (v <= messagewidthnumber.max))
            {
                messagewidthnumber.value = v;

                messagewidthnumberupdate();
            }
        }



        function messageheightload()
        {
            const div = document.createElement("div");
            div.id = "messageheight";
            div.innerHTML = "height";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messageheightload);

        function messageheightnumberload()
        {
            const br = document.createElement("br");
            messageheight.append(br);

            const input = document.createElement("input");
            input.id = "messageheightnumber";
            input.max = maxheight;
            input.min = 0;
            input.type = "number";
            input.value = 300;
            input.addEventListener("input", messageheightnumberupdate);
            messageheight.append(input);

            //messageheightnumberset();
        }
        addEventListener("load", messageheightnumberload);

        function messageheightnumberset()
        {
            const v = Number(messageheightnumber.value);

            messageheightrange.value = v;
            text.messageheight = v;
        }

        function messageheightnumberupdate()
        {
            messageheightnumberset();
            svgupdate();
        }

        function messageheightrangeload()
        {
            const input = document.createElement("input");
            input.id = "messageheightrange";
            input.max = messageheightnumber.max;
            input.min = messageheightnumber.min;
            input.type = "range";
            input.value = messageheightnumber.value;
            input.addEventListener("input", messageheightrangeupdate);
            messageheight.append(input);

            messageheightrangeset();
        }
        addEventListener("load", messageheightrangeload);

        function messageheightrangeset()
        {
            const v = Number(messageheightrange.value);

            messageheightnumber.value = v;
            text.messageheight = v;
        }

        function messageheightrangeupdate()
        {
            messageheightrangeset();
            svgupdate();
        }

        function messageheightexactload()
        {
            const br = document.createElement("br");
            messageheight.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageheightexactupdate);
                messageheight.append(button);
            }
        }
        addEventListener("load", messageheightexactload);

        function messageheightexactupdate(e)
        {
            messageheightnumber.value = canvas.height * Number(e.target.value);

            messageheightnumberupdate();
        }

        function messageheightincrementload()
        {
            const br = document.createElement("br");
            messageheight.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageheightincrementupdate);
                messageheight.append(button);
            }
        }
        addEventListener("load", messageheightincrementload);

        function messageheightincrementupdate(e)
        {
            const v = Number(messageheightnumber.value) + Number(e.target.value);

            if((messageheightnumber.min <= v) && (v <= messageheightnumber.max))
            {
                messageheightnumber.value = v;

                messageheightnumberupdate();
            }
        }



        function messagexload()
        {
            const div = document.createElement("div");
            div.id = "messagex";
            div.innerHTML = "x";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagexload);

        function messagexnumberload()
        {
            const br = document.createElement("br");
            messagex.append(br);

            const input = document.createElement("input");
            input.id = "messagexnumber";
            input.max = maxwidth;
            input.min = -maxwidth;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", messagexnumberupdate);
            messagex.append(input);

            //messagexnumberset();
        }
        addEventListener("load", messagexnumberload);

        function messagexnumberset()
        {
            const v = Number(messagexnumber.value);

            messagexrange.value = v;
            text.messagex = v;
        }

        function messagexnumberupdate()
        {
            messagexnumberset();
            svgupdate();
        }

        function messagexrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagexrange";
            input.max = messagexnumber.max;
            input.min = messagexnumber.min;
            input.type = "range";
            input.value = messagexnumber.value;
            input.addEventListener("input", messagexrangeupdate);
            messagex.append(input);

            messagexrangeset();
        }
        addEventListener("load", messagexrangeload);

        function messagexrangeset()
        {
            const v = Number(messagexrange.value);

            messagexnumber.value = v;
            text.messagex = v;
        }

        function messagexrangeupdate()
        {
            messagexrangeset();
            svgupdate();
        }

        function messagexexactload()
        {
            const br = document.createElement("br");
            messagex.append(br);

            const array =
            [
                ["left",0],
                ["center",0.5],
                ["right",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagexexactupdate);
                messagex.append(button);
            }
        }
        addEventListener("load", messagexexactload);

        function messagexexactupdate(e)
        {
            //messagexnumber.value = (canvas.width - text.messagewidth - text.messagepaddingleft - text.messagepaddingright) * Number(e.target.value);
            messagexnumber.value = (canvas.width - text.messagewidth) * Number(e.target.value);

            messagexnumberupdate();
        }

        function messagexincrementload()
        {
            const br = document.createElement("br");
            messagex.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagexincrementupdate);
                messagex.append(button);
            }
        }
        addEventListener("load", messagexincrementload);

        function messagexincrementupdate(e)
        {
            const v = Number(messagexnumber.value) + Number(e.target.value);

            if((messagexnumber.min <= v) && (v <= messagexnumber.max))
            {
                messagexnumber.value = v;

                messagexnumberupdate();
            }
        }



        function messageyload()
        {
            const div = document.createElement("div");
            div.id = "messagey";
            div.innerHTML = "y";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messageyload);

        function messageynumberload()
        {
            const br = document.createElement("br");
            messagey.append(br);

            const input = document.createElement("input");
            input.id = "messageynumber";
            input.max = maxheight;
            input.min = -maxheight;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", messageynumberupdate);
            messagey.append(input);

            //messageynumberset();
        }
        addEventListener("load", messageynumberload);

        function messageynumberset()
        {
            const v = Number(messageynumber.value);

            messageyrange.value = v;
            text.messagey = v;
        }

        function messageynumberupdate()
        {
            messageynumberset();
            svgupdate();
        }

        function messageyrangeload()
        {
            const input = document.createElement("input");
            input.id = "messageyrange";
            input.max = messageynumber.max;
            input.min = messageynumber.min;
            input.type = "range";
            input.value = messageynumber.value;
            input.addEventListener("input", messageyrangeupdate);
            messagey.append(input);

            messageyrangeset();
        }
        addEventListener("load", messageyrangeload);

        function messageyrangeset()
        {
            const v = Number(messageyrange.value);

            messageynumber.value = v;
            text.messagey = v;
        }

        function messageyrangeupdate()
        {
            messageyrangeset();
            svgupdate();
        }

        function messageyexactload()
        {
            const br = document.createElement("br");
            messagey.append(br);

            const array =
            [
                ["top",0],
                ["center",0.5],
                ["bottom",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageyexactupdate);
                messagey.append(button);
            }
        }
        addEventListener("load", messageyexactload);

        function messageyexactupdate(e)
        {
            //messageynumber.value = (canvas.height - text.messageheight - text.messagepaddingtop - text.messagepaddingbottom) * Number(e.target.value);
            messageynumber.value = (canvas.height - text.messageheight) * Number(e.target.value);

            messageynumberupdate();
        }

        function messageyincrementload()
        {
            const br = document.createElement("br");
            messagey.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageyincrementupdate);
                messagey.append(button);
            }
        }
        addEventListener("load", messageyincrementload);

        function messageyincrementupdate(e)
        {
            const v = Number(messageynumber.value) + Number(e.target.value);

            if((messageynumber.min <= v) && (v <= messageynumber.max))
            {
                messageynumber.value = v;

                messageynumberupdate();
            }
        }



        function messagebackgroundcolorload()
        {
            const div = document.createElement("div");
            div.id = "messagebackgroundcolor";
            div.innerHTML = "background-color";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagebackgroundcolorload);

        function messagebackgroundcolorcolorload()
        {
            const br = document.createElement("br");
            messagebackgroundcolor.append(br);

            const input = document.createElement("input");
            input.id = "messagebackgroundcolorcolor";
            input.type = "color";
            input.value = "#ffffff";
            input.addEventListener("input", messagebackgroundcolorcolorupdate);
            messagebackgroundcolor.append(input);

            //messagebackgroundcolorcolorset();
        }
        addEventListener("load", messagebackgroundcolorcolorload);

        function messagebackgroundcolorcolorset()
        {
            const c = messagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagebackgroundalphanumber.value;

            text.messagebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagebackgroundcolorcolorupdate()
        {
            messagebackgroundcolorcolorset();
            svgupdate();
        }

        function messagebackgroundcolorexactload()
        {
            const br = document.createElement("br");
            messagebackgroundcolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagebackgroundcolorexactupdate);
                messagebackgroundcolor.append(button);
            }
        }
        addEventListener("load", messagebackgroundcolorexactload);

        function messagebackgroundcolorexactupdate(e)
        {
            messagebackgroundcolorcolor.value = e.target.value;

            messagebackgroundcolorcolorupdate();
        }



        function messagebackgroundalphaload()
        {
            const div = document.createElement("div");
            div.id = "messagebackgroundalpha";
            div.innerHTML = "background-alpha";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagebackgroundalphaload);

        function messagebackgroundalphanumberload()
        {
            const br = document.createElement("br");
            messagebackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "messagebackgroundalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 0.5;
            input.addEventListener("input", messagebackgroundalphanumberupdate);
            messagebackgroundalpha.append(input);

            //messagebackgroundalphanumberset();
        }
        addEventListener("load", messagebackgroundalphanumberload);

        function messagebackgroundalphanumberset()
        {
            const c = messagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagebackgroundalphanumber.value;

            messagebackgroundalpharange.value = a;
            text.messagebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagebackgroundalphanumberupdate()
        {
            messagebackgroundalphanumberset();
            svgupdate();
        }

        function messagebackgroundalpharangeload()
        {
            const input = document.createElement("input");
            input.id = "messagebackgroundalpharange";
            input.max = messagebackgroundalphanumber.max;
            input.min = messagebackgroundalphanumber.min;
            input.step = messagebackgroundalphanumber.step;
            input.type = "range";
            input.value = messagebackgroundalphanumber.value;
            input.addEventListener("input", messagebackgroundalpharangeupdate);
            messagebackgroundalpha.append(input);

            messagebackgroundalpharangeset();
        }
        addEventListener("load", messagebackgroundalpharangeload);

        function messagebackgroundalpharangeset()
        {
            const c = messagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagebackgroundalpharange.value;

            messagebackgroundalphanumber.value = a;
            text.messagebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagebackgroundalpharangeupdate()
        {
            messagebackgroundalpharangeset();
            svgupdate();
        }

        function messagebackgroundalphaexactload()
        {
            const br = document.createElement("br");
            messagebackgroundalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagebackgroundalphaexactupdate);
                messagebackgroundalpha.append(button);
            }
        }
        addEventListener("load", messagebackgroundalphaexactload);

        function messagebackgroundalphaexactupdate(e)
        {
            messagebackgroundalphanumber.value = Number(e.target.value);

            messagebackgroundalphanumberupdate();
        }

        function messagebackgroundalphaincrementload()
        {
            const br = document.createElement("br");
            messagebackgroundalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagebackgroundalphaincrementupdate);
                messagebackgroundalpha.append(button);
            }
        }
        addEventListener("load", messagebackgroundalphaincrementload);

        function messagebackgroundalphaincrementupdate(e)
        {
            let v = Number(messagebackgroundalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((messagebackgroundalphanumber.min <= v) && (v <= messagebackgroundalphanumber.max))
            {
                messagebackgroundalphanumber.value = v;

                messagebackgroundalphanumberupdate();
            }
        }



        function messagebordercolorload()
        {
            const div = document.createElement("div");
            div.id = "messagebordercolor";
            div.innerHTML = "border-color";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagebordercolorload);

        function messagebordercolorcolorload()
        {
            const br = document.createElement("br");
            messagebordercolor.append(br);

            const input = document.createElement("input");
            input.id = "messagebordercolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", messagebordercolorcolorupdate);
            messagebordercolor.append(input);

            //messagebordercolorcolorset();
        }
        addEventListener("load", messagebordercolorcolorload);

        function messagebordercolorcolorset()
        {
            const c = messagebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messageborderalphanumber.value;

            text.messagebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagebordercolorcolorupdate()
        {
            messagebordercolorcolorset();
            svgupdate();
        }

        function messagebordercolorexactload()
        {
            const br = document.createElement("br");
            messagebordercolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagebordercolorexactupdate);
                messagebordercolor.append(button);
            }
        }
        addEventListener("load", messagebordercolorexactload);

        function messagebordercolorexactupdate(e)
        {
            messagebordercolorcolor.value = e.target.value;

            messagebordercolorcolorupdate();
        }



        function messageborderalphaload()
        {
            const div = document.createElement("div");
            div.id = "messageborderalpha";
            div.innerHTML = "border-alpha";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messageborderalphaload);

        function messageborderalphanumberload()
        {
            const br = document.createElement("br");
            messageborderalpha.append(br);

            const input = document.createElement("input");
            input.id = "messageborderalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", messageborderalphanumberupdate);
            messageborderalpha.append(input);

            //messageborderalphanumberset();
        }
        addEventListener("load", messageborderalphanumberload);

        function messageborderalphanumberset()
        {
            const c = messagebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messageborderalphanumber.value;

            messageborderalpharange.value = a;
            text.messagebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messageborderalphanumberupdate()
        {
            messageborderalphanumberset();
            svgupdate();
        }

        function messageborderalpharangeload()
        {
            const input = document.createElement("input");
            input.id = "messageborderalpharange";
            input.max = messageborderalphanumber.max;
            input.min = messageborderalphanumber.min;
            input.step = messageborderalphanumber.step;
            input.type = "range";
            input.value = messageborderalphanumber.value;
            input.addEventListener("input", messageborderalpharangeupdate);
            messageborderalpha.append(input);

            messageborderalpharangeset();
        }
        addEventListener("load", messageborderalpharangeload);

        function messageborderalpharangeset()
        {
            const c = messagebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messageborderalpharange.value;

            messageborderalphanumber.value = a;
            text.messagebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messageborderalpharangeupdate()
        {
            messageborderalpharangeset();
            svgupdate();
        }

        function messageborderalphaexactload()
        {
            const br = document.createElement("br");
            messageborderalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderalphaexactupdate);
                messageborderalpha.append(button);
            }
        }
        addEventListener("load", messageborderalphaexactload);

        function messageborderalphaexactupdate(e)
        {
            messageborderalphanumber.value = Number(e.target.value);

            messageborderalphanumberupdate();
        }

        function messageborderalphaincrementload()
        {
            const br = document.createElement("br");
            messageborderalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderalphaincrementupdate);
                messageborderalpha.append(button);
            }
        }
        addEventListener("load", messageborderalphaincrementload);

        function messageborderalphaincrementupdate(e)
        {
            let v = Number(messageborderalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((messageborderalphanumber.min <= v) && (v <= messageborderalphanumber.max))
            {
                messageborderalphanumber.value = v;

                messageborderalphanumberupdate();
            }
        }



        function messageborderradiusload()
        {
            const div = document.createElement("div");
            div.id = "messageborderradius";
            div.innerHTML = "border-radius";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messageborderradiusload);

        function messageborderradiusnumberload()
        {
            const br = document.createElement("br");
            messageborderradius.append(br);

            const input = document.createElement("input");
            input.id = "messageborderradiusnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", messageborderradiusnumberupdate);
            messageborderradius.append(input);

            //messageborderradiusnumberset();
        }
        addEventListener("load", messageborderradiusnumberload);

        function messageborderradiusnumberset()
        {
            const v = Number(messageborderradiusnumber.value);

            messageborderradiusrange.value = v;
            text.messageborderradius = v;
        }

        function messageborderradiusnumberupdate()
        {
            messageborderradiusnumberset();
            svgupdate();
        }

        function messageborderradiusrangeload()
        {
            const input = document.createElement("input");
            input.id = "messageborderradiusrange";
            input.max = messageborderradiusnumber.max;
            input.min = messageborderradiusnumber.min;
            input.type = "range";
            input.value = messageborderradiusnumber.value;
            input.addEventListener("input", messageborderradiusrangeupdate);
            messageborderradius.append(input);

            messageborderradiusrangeset();
        }
        addEventListener("load", messageborderradiusrangeload);

        function messageborderradiusrangeset()
        {
            const v = Number(messageborderradiusrange.value);

            messageborderradiusnumber.value = v;
            text.messageborderradius = v;
        }

        function messageborderradiusrangeupdate()
        {
            messageborderradiusrangeset();
            svgupdate();
        }

        function messageborderradiusexactload()
        {
            const br = document.createElement("br");
            messageborderradius.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderradiusexactupdate);
                messageborderradius.append(button);
            }
        }
        addEventListener("load", messageborderradiusexactload);

        function messageborderradiusexactupdate(e)
        {
            messageborderradiusnumber.value = Number(e.target.value);

            messageborderradiusnumberupdate();
        }

        function messageborderradiusincrementload()
        {
            const br = document.createElement("br");
            messageborderradius.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderradiusincrementupdate);
                messageborderradius.append(button);
            }
        }
        addEventListener("load", messageborderradiusincrementload);

        function messageborderradiusincrementupdate(e)
        {
            const v = Number(messageborderradiusnumber.value) + Number(e.target.value);

            if((messageborderradiusnumber.min <= v) && (v <= messageborderradiusnumber.max))
            {
                messageborderradiusnumber.value = v;

                messageborderradiusnumberupdate();
            }
        }



        function messageborderstyleload()
        {
            const div = document.createElement("div");
            div.id = "messageborderstyle";
            div.innerHTML = "border-style";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messageborderstyleload);

        function messageborderstyleselectload()
        {
            const br = document.createElement("br");
            messageborderstyle.append(br);

            const select = document.createElement("select");
            select.id = "messageborderstyleselect";
            select.addEventListener("input", messageborderstyleselectupdate);
            messageborderstyle.append(select);

            for(const value of borderstylearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
    
10000
        }

            //select.value = borderstylearray[8];

            messageborderstyleselectset();
        }
        addEventListener("load", messageborderstyleselectload);

        function messageborderstyleselectset()
        {
            text.messageborderstyle = messageborderstyleselect.value;
        }

        function messageborderstyleselectupdate()
        {
            messageborderstyleselectset();
            svgupdate();
        }



        function messageborderwidthload()
        {
            const div = document.createElement("div");
            div.id = "messageborderwidth";
            div.innerHTML = "border-width";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messageborderwidthload);

        function messageborderwidthnumberload()
        {
            const br = document.createElement("br");
            messageborderwidth.append(br);

            const input = document.createElement("input");
            input.id = "messageborderwidthnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 25;
            input.addEventListener("input", messageborderwidthnumberupdate);
            messageborderwidth.append(input);

            //messageborderwidthnumberset();
        }
        addEventListener("load", messageborderwidthnumberload);

        function messageborderwidthnumberset()
        {
            const v = Number(messageborderwidthnumber.value);

            messageborderwidthrange.value = v;
            text.messageborderwidth = v;
        }

        function messageborderwidthnumberupdate()
        {
            messageborderwidthnumberset();
            svgupdate();
        }

        function messageborderwidthrangeload()
        {
            const input = document.createElement("input");
            input.id = "messageborderwidthrange";
            input.max = messageborderwidthnumber.max;
            input.min = messageborderwidthnumber.min;
            input.type = "range";
            input.value = messageborderwidthnumber.value;
            input.addEventListener("input", messageborderwidthrangeupdate);
            messageborderwidth.append(input);

            messageborderwidthrangeset();
        }
        addEventListener("load", messageborderwidthrangeload);

        function messageborderwidthrangeset()
        {
            const v = Number(messageborderwidthrange.value);

            messageborderwidthnumber.value = v;
            text.messageborderwidth = v;
        }

        function messageborderwidthrangeupdate()
        {
            messageborderwidthrangeset();
            svgupdate();
        }

        function messageborderwidthexactload()
        {
            const br = document.createElement("br");
            messageborderwidth.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderwidthexactupdate);
                messageborderwidth.append(button);
            }
        }
        addEventListener("load", messageborderwidthexactload);

        function messageborderwidthexactupdate(e)
        {
            messageborderwidthnumber.value = Number(e.target.value);

            messageborderwidthnumberupdate();
        }

        function messageborderwidthincrementload()
        {
            const br = document.createElement("br");
            messageborderwidth.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderwidthincrementupdate);
                messageborderwidth.append(button);
            }
        }
        addEventListener("load", messageborderwidthincrementload);

        function messageborderwidthincrementupdate(e)
        {
            const v = Number(messageborderwidthnumber.value) + Number(e.target.value);

            if((messageborderwidthnumber.min <= v) && (v <= messageborderwidthnumber.max))
            {
                messageborderwidthnumber.value = v;

                messageborderwidthnumberupdate();
            }
        }



        function messagehorizontalload()
        {
            const div = document.createElement("div");
            div.id = "messagehorizontal";
            div.innerHTML = "horizontal";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagehorizontalload);

        function messagehorizontalselectload()
        {
            const br = document.createElement("br");
            messagehorizontal.append(br);

            const select = document.createElement("select");
            select.id = "messagehorizontalselect";
            select.addEventListener("input", messagehorizontalselectupdate);
            messagehorizontal.append(select);

            for(const value of horizontalarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            select.value = horizontalarray[1];

            messagehorizontalselectset();
        }
        addEventListener("load", messagehorizontalselectload);

        function messagehorizontalselectset()
        {
            text.messagehorizontal = messagehorizontalselect.value;
        }

        function messagehorizontalselectupdate()
        {
            messagehorizontalselectset();
            svgupdate();
        }



        function messageverticalload()
        {
            const div = document.createElement("div");
            div.id = "messagevertical";
            div.innerHTML = "vertical";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messageverticalload);

        function messageverticalselectload()
        {
            const br = document.createElement("br");
            messagevertical.append(br);

            const select = document.createElement("select");
            select.id = "messageverticalselect";
            select.addEventListener("input", messageverticalselectupdate);
            messagevertical.append(select);

            for(const value of verticalarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            select.value = verticalarray[1];

            messageverticalselectset();
        }
        addEventListener("load", messageverticalselectload);

        function messageverticalselectset()
        {
            text.messagevertical = messageverticalselect.value;
        }

        function messageverticalselectupdate()
        {
            messageverticalselectset();
            svgupdate();
        }



        function messagewritingmodeload()
        {
            const div = document.createElement("div");
            div.id = "messagewritingmode";
            div.innerHTML = "writing-mode";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagewritingmodeload);

        function messagewritingmodeselectload()
        {
            const br = document.createElement("br");
            messagewritingmode.append(br);

            const select = document.createElement("select");
            select.id = "messagewritingmodeselect";
            select.addEventListener("input", messagewritingmodeselectupdate);
            messagewritingmode.append(select);

            for(const value of writingmodearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            messagewritingmodeselectset();
        }
        addEventListener("load", messagewritingmodeselectload);

        function messagewritingmodeselectset()
        {
            text.messagewritingmode = messagewritingmodeselect.value;
        }

        function messagewritingmodeselectupdate()
        {
            messagewritingmodeselectset();
            svgupdate();
        }



        function messagefontfamilyload()
        {
            const div = document.createElement("div");
            div.id = "messagefontfamily";
            div.innerHTML = "font-family";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagefontfamilyload);

        function messagefontfamilyselectload()
        {
            const br = document.createElement("br");
            messagefontfamily.append(br);

            const select = document.createElement("select");
            select.id = "messagefontfamilyselect";
            select.addEventListener("input", messagefontfamilyselectupdate);
            messagefontfamily.append(select);

            for(const value of fontfamilyarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            messagefontfamilyselectset();
        }
        addEventListener("load", messagefontfamilyselectload);

        function messagefontfamilyselectset()
        {
            text.messagefontfamily = messagefontfamilyselect.value;
        }

        function messagefontfamilyselectupdate()
        {
            messagefontfamilyselectset();
            svgupdate();
        }




function messagefontsizeload()
        {
            const div = document.createElement("div");
            div.id = "messagefontsize";
            div.innerHTML = "font-size";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagefontsizeload);

        function messagefontsizenumberload()
        {
            const br = document.createElement("br");
            messagefontsize.append(br);

            const input = document.createElement("input");
            input.id = "messagefontsizenumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 140;
            input.addEventListener("input", messagefontsizenumberupdate);
            messagefontsize.append(input);

            //messagefontsizenumberset();
        }
        addEventListener("load", messagefontsizenumberload);

        function messagefontsizenumberset()
        {
            const v = Number(messagefontsizenumber.value);

            messagefontsizerange.value = v;
            text.messagefontsize = v;
        }

        function messagefontsizenumberupdate()
        {
            messagefontsizenumberset();
            svgupdate();
        }

        function messagefontsizerangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefontsizerange";
            input.max = messagefontsizenumber.max;
            input.min = messagefontsizenumber.min;
            input.type = "range";
            input.value = messagefontsizenumber.value;
            input.addEventListener("input", messagefontsizerangeupdate);
            messagefontsize.append(input);

            messagefontsizerangeset();
        }
        addEventListener("load", messagefontsizerangeload);

        function messagefontsizerangeset()
        {
            const v = Number(messagefontsizerange.value);

            messagefontsizenumber.value = v;
            text.messagefontsize = v;
        }

        function messagefontsizerangeupdate()
        {
            messagefontsizerangeset();
            svgupdate();
        }

        function messagefontsizeexactload()
        {
            const br = document.createElement("br");
            messagefontsize.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefontsizeexactupdate);
                messagefontsize.append(button);
            }
        }
        addEventListener("load", messagefontsizeexactload);

        function messagefontsizeexactupdate(e)
        {
            messagefontsizenumber.value = Number(e.target.value);

            messagefontsizenumberupdate();
        }

        function messagefontsizeincrementload()
        {
            const br = document.createElement("br");
            messagefontsize.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefontsizeincrementupdate);
                messagefontsize.append(button);
            }
        }
        addEventListener("load", messagefontsizeincrementload);

        function messagefontsizeincrementupdate(e)
        {
            const v = Number(messagefontsizenumber.value) + Number(e.target.value);

            if((messagefontsizenumber.min <= v) && (v <= messagefontsizenumber.max))
            {
                messagefontsizenumber.value = v;

                messagefontsizenumberupdate();
            }
        }

/*
        function messagefontsizefitload()
        {
            const button = document.createElement("button");
            button.innerHTML = "fit";
            button.addEventListener("click", messagefontsizefitupdate);
            messagefontsize.append(button);
        }
        addEventListener("load", messagefontsizefitload);

        function messagefontsizefitupdate()
        {
            const t = document.createElement("div");
            messagefontsize.append(t);
            t.innerHTML = text.bookname;
            t.style.fontSize = `${messagefontsizenumber.value}px`;

            const h1 = text.messagewidth;
            const h2 = text.messageheight;
            const h3 = t.offsetWidth;
            const h4 = t.offsetHeight;
            const h5 = messagefontsizenumber.value;

            //const h4 = t.offsetParent;//t.style.fontSize;
            //const h5 = t.clientHeight;//text.style.height;
            //const h6 = text.height;
            //const h7 = text.getBoundingClientRect().height;
            //const h8 = text.style.lineHeight;
            //const h9 = canvas.getBoundingClientRect().height;
            console.log(h1, h2, h3, h4, h5);
            //t.hidden = true;

            if(h2 < h4)
            {
                messagefontsizenumber.value -= 1;
                messagefit();
            }

            messagefontsizenumberupdate();
        }
//*/



        function messagefontstyleload()
        {
            const div = document.createElement("div");
            div.id = "messagefontstyle";
            div.innerHTML = "font-style";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagefontstyleload);

        function messagefontstyleselectload()
        {
            const br = document.createElement("br");
            messagefontstyle.append(br);

            const select = document.createElement("select");
            select.id = "messagefontstyleselect";
            select.addEventListener("input", messagefontstyleselectupdate);
            messagefontstyle.append(select);

            for(const value of fontstylearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            messagefontstyleselectset();
        }
        addEventListener("load", messagefontstyleselectload);

        function messagefontstyleselectset()
        {
            text.messagefontstyle = messagefontstyleselect.value;
        }

        function messagefontstyleselectupdate()
        {
            messagefontstyleselectset();
            svgupdate();
        }



        function messagefontvariantload()
        {
            const div = document.createElement("div");
            div.id = "messagefontvariant";
            div.innerHTML = "font-variant";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagefontvariantload);

        function messagefontvariantselectload()
        {
            const br = document.createElement("br");
            messagefontvariant.append(br);

            const select = document.createElement("select");
            select.id = "messagefontvariantselect";
            select.addEventListener("input", messagefontvariantselectupdate);
            messagefontvariant.append(select);

            for(const value of fontvariantarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            messagefontvariantselectset();
        }
        addEventListener("load", messagefontvariantselectload);

        function messagefontvariantselectset()
        {
            text.messagefontvariant = messagefontvariantselect.value;
        }

        function messagefontvariantselectupdate()
        {
            messagefontvariantselectset();
            svgupdate();
        }



        function messagefontweightload()
        {
            const div = document.createElement("div");
            div.id = "messagefontweight";
            div.innerHTML = "font-weight";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagefontweightload);

        function messagefontweightselectload()
        {
            const br = document.createElement("br");
            messagefontweight.append(br);

            const select = document.createElement("select");
            select.id = "messagefontweightselect";
            select.addEventListener("input", messagefontweightselectupdate);
            messagefontweight.append(select);

            for(const value of fontweightarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            messagefontweightselectset();
        }
        addEventListener("load", messagefontweightselectload);

        function messagefontweightselectset()
        {
            text.messagefontweight = messagefontweightselect.value;
        }

        function messagefontweightselectupdate()
        {
            messagefontweightselectset();
            svgupdate();
        }



        function messagecolorload()
        {
            const div = document.createElement("div");
            div.id = "messagecolor";
            div.innerHTML = "color";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagecolorload);

        function messagecolorcolorload()
        {
            const br = document.createElement("br");
            messagecolor.append(br);

            const input = document.createElement("input");
            input.id = "messagecolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", messagecolorcolorupdate);
            messagecolor.append(input);

            //messagecolorcolorset();
        }
        addEventListener("load", messagecolorcolorload);

        function messagecolorcolorset()
        {
            const c = messagecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagealphanumber.value;

            text.messagecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagecolorcolorupdate()
        {
            messagecolorcolorset();
            svgupdate();
        }

        function messagecolorexactload()
        {
            const br = document.createElement("br");
            messagecolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagecolorexactupdate);
                messagecolor.append(button);
            }
        }
        addEventListener("load", messagecolorexactload);

        function messagecolorexactupdate(e)
        {
            messagecolorcolor.value = e.target.value;

            messagecolorcolorupdate();
        }



        function messagealphaload()
        {
            const div = document.createElement("div");
            div.id = "messagealpha";
            div.innerHTML = "alpha";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagealphaload);

        function messagealphanumberload()
        {
            const br = document.createElement("br");
            messagealpha.append(br);

            const input = document.createElement("input");
            input.id = "messagealphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", messagealphanumberupdate);
            messagealpha.append(input);

            //messagealphanumberset();
        }
        addEventListener("load", messagealphanumberload);

        function messagealphanumberset()
        {
            const c = messagecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagealphanumber.value;

            messagealpharange.value = a;
            text.messagecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagealphanumberupdate()
        {
            messagealphanumberset();
            svgupdate();
        }

        function messagealpharangeload()
        {
            const input = document.createElement("input");
            input.id = "messagealpharange";
            input.max = messagealphanumber.max;
            input.min = messagealphanumber.min;
            input.step = messagealphanumber.step;
            input.type = "range";
            input.value = messagealphanumber.value;
            input.addEventListener("input", messagealpharangeupdate);
            messagealpha.append(input);

            messagealpharangeset();
        }
        addEventListener("load", messagealpharangeload);

        function messagealpharangeset()
        {
            const c = messagecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagealpharange.value;

            messagealphanumber.value = a;
            text.messagecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagealpharangeupdate()
        {
            messagealpharangeset();
            svgupdate();
        }

        function messagealphaexactload()
        {
            const br = document.createElement("br");
            messagealpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagealphaexactupdate);
                messagealpha.append(button);
            }
        }
        addEventListener("load", messagealphaexactload);

        function messagealphaexactupdate(e)
        {
            messagealphanumber.value = Number(e.target.value);

            messagealphanumberupdate();
        }

        function messagealphaincrementload()
        {
            const br = document.createElement("br");
            messagealpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagealphaincrementupdate);
                messagealpha.append(button);
            }
        }
        addEventListener("load", messagealphaincrementload);

        function messagealphaincrementupdate(e)
        {
            let v = Number(messagealphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((messagealphanumber.min <= v) && (v <= messagealphanumber.max))
            {
                messagealphanumber.value = v;

                messagealphanumberupdate();
            }
        }



/*leftoff
        function messagefilterblurload()
        {
            const div = document.createElement("div");
            div.id = "messagefilterblur";
            div.innerHTML = "filter-blur";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefilterblurload);

        function messagefilterblurnumberload()
        {
            const br = document.createElement("br");
            messagefilterblur.append(br);

            const input = document.createElement("input");
            input.id = "messagefilterblurnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagefilterblurnumberupdate);
            messagefilterblur.append(input);

            //messagefilterblurnumberset();
        }
        addEventListener("load", messagefilterblurnumberload);

        function messagefilterblurnumberset()
        {
            const v = messagefilterblurnumber.value;

            messagefilterblurrange.value = v;
            text.messagebackdropfilterblur = v;
        }

        function messagefilterblurnumberupdate()
        {
            messagefilterblurnumberset();
            svgupdate();
        }

        function messagefilterblurrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefilterblurrange";
            input.max = messagefilterblurnumber.max;
            input.min = messagefilterblurnumber.min;
            input.step = messagefilterblurnumber.step;
            input.type = "range";
            input.value = messagefilterblurnumber.value;
            input.addEventListener("input", messagefilterblurrangeupdate);
            messagefilterblur.append(input);

            messagefilterblurrangeset();
        }
        addEventListener("load", messagefilterblurrangeload);

        function messagefilterblurrangeset()
        {
            const v = messagefilterblurrange.value;

            messagefilterblurnumber.value = v;
            text.messagebackdropfilterblur = v;
        }

        function messagefilterblurrangeupdate()
        {
            messagefilterblurrangeset();
            svgupdate();
        }

        function messagefilterblurexactload()
        {
            const br = document.createElement("br");
            messagefilterblur.append(br);

            const array =
            [
                ["0",0],
                ["2",2],
                ["4",4],
                ["8",8],
                ["16",16],
                ["32",32],
                ["64",64],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterblurexactupdate);
                messagefilterblur.append(button);
            }
        }
        addEventListener("load", messagefilterblurexactload);

        function messagefilterblurexactupdate(e)
        {
            messagefilterblurnumber.value = Number(e.target.value);

            messagefilterblurnumberupdate();
        }

        function messagefilterblurincrementload()
        {
            const br = document.createElement("br");
            messagefilterblur.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterblurincrementupdate);
                messagefilterblur.append(button);
            }
        }
        addEventListener("load", messagefilterblurincrementload);

        function messagefilterblurincrementupdate(e)
        {
            const v = Number(messagefilterblurnumber.value) + Number(e.target.value);

            if((messagefilterblurnumber.min <= v) && (v <= messagefilterblurnumber.max))
            {
                messagefilterblurnumber.value = v;

                messagefilterblurnumberupdate();
            }
        }



        function messagefilterbrightnessload()
        {
            const div = document.createElement("div");
            div.id = "messagefilterbrightness";
            div.innerHTML = "filter-brightness";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefilterbrightnessload);

        function messagefilterbrightnessnumberload()
        {
            const br = document.createElement("br");
            messagefilterbrightness.append(br);

            const input = document.createElement("input");
            input.id = "messagefilterbrightnessnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", messagefilterbrightnessnumberupdate);
            messagefilterbrightness.append(input);

            //messagefilterbrightnessnumberset();
        }
        addEventListener("load", messagefilterbrightnessnumberload);

        function messagefilterbrightnessnumberset()
        {
            const v = messagefilterbrightnessnumber.value;

            messagefilterbrightnessrange.value = v;
            text.messagebackdropfilterbrightness = v;
        }

        function messagefilterbrightnessnumberupdate()
        {
            messagefilterbrightnessnumberset();
            svgupdate();
        }

        function messagefilterbrightnessrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefilterbrightnessrange";
            input.max = messagefilterbrightnessnumber.max;
            input.min = messagefilterbrightnessnumber.min;
            input.step = messagefilterbrightnessnumber.step;
            input.type = "range";
            input.value = messagefilterbrightnessnumber.value;
            input.addEventListener("input", messagefilterbrightnessrangeupdate);
            messagefilterbrightness.append(input);

            messagefilterbrightnessrangeset();
        }
        addEventListener("load", messagefilterbrightnessrangeload);

        function messagefilterbrightnessrangeset()
        {
            const v = messagefilterbrightnessrange.value;

            messagefilterbrightnessnumber.value = v;
            text.messagebackdropfilterbrightness = v;
        }

        function messagefilterbrightnessrangeupdate()
        {
            messagefilterbrightnessrangeset();
            svgupdate();
        }

        function messagefilterbrightnessexactload()
        {
            const br = document.createElement("br");
            messagefilterbrightness.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterbrightnessexactupdate);
                messagefilterbrightness.append(button);
            }
        }
        addEventListener("load", messagefilterbrightnessexactload);

        function messagefilterbrightnessexactupdate(e)
        {
            messagefilterbrightnessnumber.value = Number(e.target.value);

            messagefilterbrightnessnumberupdate();
        }

        function messagefilterbrightnessincrementload()
        {
            const br = document.createElement("br");
            messagefilterbrightness.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterbrightnessincrementupdate);
                messagefilterbrightness.append(button);
            }
        }
        addEventListener("load", messagefilterbrightnessincrementload);

        function messagefilterbrightnessincrementupdate(e)
        {
            const v = Number(messagefilterbrightnessnumber.value) + Number(e.target.value);

            if((messagefilterbrightnessnumber.min <= v) && (v <= messagefilterbrightnessnumber.max))
            {
                messagefilterbrightnessnumber.value = v;

                messagefilterbrightnessnumberupdate();
            }
        }



        function messagefiltercontrastload()
        {
            const div = document.createElement("div");
            div.id = "messagefiltercontrast";
            div.innerHTML = "filter-contrast";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefiltercontrastload);

        function messagefiltercontrastnumberload()
        {
            const br = document.createElement("br");
            messagefiltercontrast.append(br);

            const input = document.createElement("input");
            input.id = "messagefiltercontrastnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", messagefiltercontrastnumberupdate);
            messagefiltercontrast.append(input);

            //messagefiltercontrastnumberset();
        }
        addEventListener("load", messagefiltercontrastnumberload);

        function messagefiltercontrastnumberset()
        {
            const v = messagefiltercontrastnumber.value;

            messagefiltercontrastrange.value = v;
            text.messagebackdropfiltercontrast = v;
        }

        function messagefiltercontrastnumberupdate()
        {
            messagefiltercontrastnumberset();
            svgupdate();
        }

        function messagefiltercontrastrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefiltercontrastrange";
            input.max = messagefiltercontrastnumber.max;
            input.min = messagefiltercontrastnumber.min;
            input.step = messagefiltercontrastnumber.step;
            input.type = "range";
            input.value = messagefiltercontrastnumber.value;
            input.addEventListener("input", messagefiltercontrastrangeupdate);
            messagefiltercontrast.append(input);

            messagefiltercontrastrangeset();
        }
        addEventListener("load", messagefiltercontrastrangeload);

        function messagefiltercontrastrangeset()
        {
            const v = messagefiltercontrastrange.value;

            messagefiltercontrastnumber.value = v;
            text.messagebackdropfiltercontrast = v;
        }

        function messagefiltercontrastrangeupdate()
        {
            messagefiltercontrastrangeset();
            svgupdate();
        }

        function messagefiltercontrastexactload()
        {
            const br = document.createElement("br");
            messagefiltercontrast.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltercontrastexactupdate);
                messagefiltercontrast.append(button);
            }
        }
        addEventListener("load", messagefiltercontrastexactload);

        function messagefiltercontrastexactupdate(e)
        {
            messagefiltercontrastnumber.value = Number(e.target.value);

            messagefiltercontrastnumberupdate();
        }

        function messagefiltercontrastincrementload()
        {
            const br = document.createElement("br");
            messagefiltercontrast.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltercontrastincrementupdate);
                messagefiltercontrast.append(button);
            }
        }
        addEventListener("load", messagefiltercontrastincrementload);

        function messagefiltercontrastincrementupdate(e)
        {
            const v = Number(messagefiltercontrastnumber.value) + Number(e.target.value);

            if((messagefiltercontrastnumber.min <= v) && (v <= messagefiltercontrastnumber.max))
            {
                messagefiltercontrastnumber.value = v;

                messagefiltercontrastnumberupdate();
            }
        }



        function messagefiltergrayscaleload()
        {
            const div = document.createElement("div");
            div.id = "messagefiltergrayscale";
            div.innerHTML = "filter-grayscale";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefiltergrayscaleload);

        function messagefiltergrayscalenumberload()
        {
            const br = document.createElement("br");
            messagefiltergrayscale.append(br);

            const input = document.createElement("input");
            input.id = "messagefiltergrayscalenumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagefiltergrayscalenumberupdate);
            messagefiltergrayscale.append(input);

            //messagefiltergrayscalenumberset();
        }
        addEventListener("load", messagefiltergrayscalenumberload);

        function messagefiltergrayscalenumberset()
        {
            const v = messagefiltergrayscalenumber.value;

            messagefiltergrayscalerange.value = v;
            text.messagebackdropfiltergrayscale = v;
        }

        function messagefiltergrayscalenumberupdate()
        {
            messagefiltergrayscalenumberset();
            svgupdate();
        }

        function messagefiltergrayscalerangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefiltergrayscalerange";
            input.max = messagefiltergrayscalenumber.max;
            input.min = messagefiltergrayscalenumber.min;
            input.step = messagefiltergrayscalenumber.step;
            input.type = "range";
            input.value = messagefiltergrayscalenumber.value;
            input.addEventListener("input", messagefiltergrayscalerangeupdate);
            messagefiltergrayscale.append(input);

            messagefiltergrayscalerangeset();
        }
        addEventListener("load", messagefiltergrayscalerangeload);

        function messagefiltergrayscalerangeset()
        {
            const v = messagefiltergrayscalerange.value;

            messagefiltergrayscalenumber.value = v;
            text.messagebackdropfiltergrayscale = v;
        }

        function messagefiltergrayscalerangeupdate()
        {
            messagefiltergrayscalerangeset();
            svgupdate();
        }

        function messagefiltergrayscaleexactload()
        {
            const br = document.createElement("br");
            messagefiltergrayscale.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltergrayscaleexactupdate);
                messagefiltergrayscale.append(button);
            }
        }
        addEventListener("load", messagefiltergrayscaleexactload);

        function messagefiltergrayscaleexactupdate(e)
        {
            messagefiltergrayscalenumber.value = Number(e.target.value);

            messagefiltergrayscalenumberupdate();
        }

        function messagefiltergrayscaleincrementload()
        {
            const br = document.createElement("br");
            messagefiltergrayscale.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltergrayscaleincrementupdate);
                messagefiltergrayscale.append(button);
            }
        }
        addEventListener("load", messagefiltergrayscaleincrementload);

        function messagefiltergrayscaleincrementupdate(e)
        {
            const v = Number(messagefiltergrayscalenumber.value) + Number(e.target.value);

            if((messagefiltergrayscalenumber.min <= v) && (v <= messagefiltergrayscalenumber.max))
            {
                messagefiltergrayscalenumber.value = v;

                messagefiltergrayscalenumberupdate();
            }
        }



        function messagefilterhuerotateload()
        {
            const div = document.createElement("div");
            div.id = "messagefilterhuerotate";
            div.innerHTML = "filter-hue-rotate";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefilterhuerotateload);

        function messagefilterhuerotatenumberload()
        {
            const br = document.createElement("br");
            messagefilterhuerotate.append(br);

            const input = document.createElement("input");
            input.id = "messagefilterhuerotatenumber";
            input.max = 360;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagefilterhuerotatenumberupdate);
            messagefilterhuerotate.append(input);

            //messagefilterhuerotatenumberset();
        }
        addEventListener("load", messagefilterhuerotatenumberload);

        function messagefilterhuerotatenumberset()
        {
            const v = messagefilterhuerotatenumber.value;

            messagefilterhuerotaterange.value = v;
            text.messagebackdropfilterhuerotate = v;
        }

        function messagefilterhuerotatenumberupdate()
        {
            messagefilterhuerotatenumberset();
            svgupdate();
        }

        function messagefilterhuerotaterangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefilterhuerotaterange";
            input.max = messagefilterhuerotatenumber.max;
            input.min = messagefilterhuerotatenumber.min;
            input.step = messagefilterhuerotatenumber.step;
            input.type = "range";
            input.value = messagefilterhuerotatenumber.value;
            input.addEventListener("input", messagefilterhuerotaterangeupdate);
            messagefilterhuerotate.append(input);

            messagefilterhuerotaterangeset();
        }
        addEventListener("load", messagefilterhuerotaterangeload);

        function messagefilterhuerotaterangeset()
        {
            const v = messagefilterhuerotaterange.value;

            messagefilterhuerotatenumber.value = v;
            text.messagebackdropfilterhuerotate = v;
        }

        function messagefilterhuerotaterangeupdate()
        {
            messagefilterhuerotaterangeset();
            svgupdate();
        }

        function messagefilterhuerotateexactload()
        {
            const br = document.createElement("br");
            messagefilterhuerotate.append(br);

            const array =
            [
                ["0",0],
                ["90",90],
                ["180",180],
                ["270",270],
                ["360",360],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterhuerotateexactupdate);
                messagefilterhuerotate.append(button);
            }
        }
        addEventListener("load", messagefilterhuerotateexactload);

        function messagefilterhuerotateexactupdate(e)
        {
            messagefilterhuerotatenumber.value = Number(e.target.value);

            messagefilterhuerotatenumberupdate();
        }

        function messagefilterhuerotateincrementload()
        {
            const br = document.createElement("br");
            messagefilterhuerotate.append(br);

            const array =
            [
                //["-90",-90],
                ["-45",-45],
                ["-15",-15],
                ["-1",-1],
                ["+1",1],
                ["+15",15],
                ["+45",45],
                //["+90",90],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterhuerotateincrementupdate);
                messagefilterhuerotate.append(button);
            }
        }
        addEventListener("load", messagefilterhuerotateincrementload);

        function messagefilterhuerotateincrementupdate(e)
        {
            const v = Number(messagefilterhuerotatenumber.value) + Number(e.target.value);

            if((messagefilterhuerotatenumber.min <= v) && (v <= messagefilterhuerotatenumber.max))
            {
                messagefilterhuerotatenumber.value = v;

                messagefilterhuerotatenumberupdate();
            }
        }



        function messagefilterinvertload()
        {
            const div = document.createElement("div");
            div.id = "messagefilterinvert";
            div.innerHTML = "filter-invert";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefilterinvertload);

        function messagefilterinvertnumberload()
        {
            const br = document.createElement("br");
            messagefilterinvert.append(br);

            const input = document.createElement("input");
            input.id = "messagefilterinvertnumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagefilterinvertnumberupdate);
            messagefilterinvert.append(input);

            //messagefilterinvertnumberset();
        }
        addEventListener("load", messagefilterinvertnumberload);

        function messagefilterinvertnumberset()
        {
            const v = messagefilterinvertnumber.value;

            messagefilterinvertrange.value = v;
            text.messagebackdropfilterinvert = v;
        }

        function messagefilterinvertnumberupdate()
        {
            messagefilterinvertnumberset();
            svgupdate();
        }

        function messagefilterinvertrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefilterinvertrange";
            input.max = messagefilterinvertnumber.max;
            input.min = messagefilterinvertnumber.min;
            input.step = messagefilterinvertnumber.step;
            input.type = "range";
            input.value = messagefilterinvertnumber.value;
            input.addEventListener("input", messagefilterinvertrangeupdate);
            messagefilterinvert.append(input);

            messagefilterinvertrangeset();
        }
        addEventListener("load", messagefilterinvertrangeload);

        function messagefilterinvertrangeset()
        {
            const v = messagefilterinvertrange.value;

            messagefilterinvertnumber.value = v;
            text.messagebackdropfilterinvert = v;
        }

        function messagefilterinvertrangeupdate()
        {
            messagefilterinvertrangeset();
            svgupdate();
        }

        function messagefilterinvertexactload()
        {
            const br = document.createElement("br");
            messagefilterinvert.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterinvertexactupdate);
                messagefilterinvert.append(button);
            }
        }
        addEventListener("load", messagefilterinvertexactload);

        function messagefilterinvertexactupdate(e)
        {
            messagefilterinvertnumber.value = Number(e.target.value);

            messagefilterinvertnumberupdate();
        }

        function messagefilterinvertincrementload()
        {
            const br = document.createElement("br");
            messagefilterinvert.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterinvertincrementupdate);
                messagefilterinvert.append(button);
            }
        }
        addEventListener("load", messagefilterinvertincrementload);

        function messagefilterinvertincrementupdate(e)
        {
            const v = Number(messagefilterinvertnumber.value) + Number(e.target.value);

            if((messagefilterinvertnumber.min <= v) && (v <= messagefilterinvertnumber.max))
            {
                messagefilterinvertnumber.value = v;

                messagefilterinvertnumberupdate();
            }
        }



        function messagefiltersaturateload()
        {
            const div = document.createElement("div");
            div.id = "messagefiltersaturate";
            div.innerHTML = "filter-saturate";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefiltersaturateload);

        function messagefiltersaturatenumberload()
        {
            const br = document.createElement("br");
            messagefiltersaturate.append(br);

            const input = document.createElement("input");
            input.id = "messagefiltersaturatenumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", messagefiltersaturatenumberupdate);
            messagefiltersaturate.append(input);

            //messagefiltersaturatenumberset();
        }
        addEventListener("load", messagefiltersaturatenumberload);

        function messagefiltersaturatenumberset()
        {
            const v = messagefiltersaturatenumber.value;

            messagefiltersaturaterange.value = v;
            text.messagebackdropfiltersaturate = v;
        }

        function messagefiltersaturatenumberupdate()
        {
            messagefiltersaturatenumberset();
            svgupdate();
        }

        function messagefiltersaturaterangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefiltersaturaterange";
            input.max = messagefiltersaturatenumber.max;
            input.min = messagefiltersaturatenumber.min;
            input.step = messagefiltersaturatenumber.step;
            input.type = "range";
            input.value = messagefiltersaturatenumber.value;
            input.addEventListener("input", messagefiltersaturaterangeupdate);
            messagefiltersaturate.append(input);

            messagefiltersaturaterangeset();
        }
        addEventListener("load", messagefiltersaturaterangeload);

        function messagefiltersaturaterangeset()
        {
            const v = messagefiltersaturaterange.value;

            messagefiltersaturatenumber.value = v;
            text.messagebackdropfiltersaturate = v;
        }

        function messagefiltersaturaterangeupdate()
        {
            messagefiltersaturaterangeset();
            svgupdate();
        }

        function messagefiltersaturateexactload()
        {
            const br = document.createElement("br");
            messagefiltersaturate.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltersaturateexactupdate);
                messagefiltersaturate.append(button);
            }
        }
        addEventListener("load", messagefiltersaturateexactload);

        function messagefiltersaturateexactupdate(e)
        {
            messagefiltersaturatenumber.value = Number(e.target.value);

            messagefiltersaturatenumberupdate();
        }

        function messagefiltersaturateincrementload()
        {
            const br = document.createElement("br");
            messagefiltersaturate.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltersaturateincrementupdate);
                messagefiltersaturate.append(button);
            }
        }
        addEventListener("load", messagefiltersaturateincrementload);

        function messagefiltersaturateincrementupdate(e)
        {
            const v = Number(messagefiltersaturatenumber.value) + Number(e.target.value);

            if((messagefiltersaturatenumber.min <= v) && (v <= messagefiltersaturatenumber.max))
            {
                messagefiltersaturatenumber.value = v;

                messagefiltersaturatenumberupdate();
            }
        }



        function messagefiltersepiaload()
        {
            const div = document.createElement("div");
            div.id = "messagefiltersepia";
            div.innerHTML = "filter-sepia";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefiltersepiaload);

        function messagefiltersepianumberload()
        {
            const br = document.createElement("br");
            messagefiltersepia.append(br);

            const input = document.createElement("input");
            input.id = "messagefiltersepianumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagefiltersepianumberupdate);
            messagefiltersepia.append(input);

            //messagefiltersepianumberset();
        }
        addEventListener("load", messagefiltersepianumberload);

        function messagefiltersepianumberset()
        {
            const v = messagefiltersepianumber.value;

            messagefiltersepiarange.value = v;
            text.messagebackdropfiltersepia = v;
        }

        function messagefiltersepianumberupdate()
        {
            messagefiltersepianumberset();
            svgupdate();
        }

        function messagefiltersepiarangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefiltersepiarange";
            input.max = messagefiltersepianumber.max;
            input.min = messagefiltersepianumber.min;
            input.step = messagefiltersepianumber.step;
            input.type = "range";
            input.value = messagefiltersepianumber.value;
            input.addEventListener("input", messagefiltersepiarangeupdate);
            messagefiltersepia.append(input);

            messagefiltersepiarangeset();
        }
        addEventListener("load", messagefiltersepiarangeload);

        function messagefiltersepiarangeset()
        {
            const v = messagefiltersepiarange.value;

            messagefiltersepianumber.value = v;
            text.messagebackdropfiltersepia = v;
        }

        function messagefiltersepiarangeupdate()
        {
            messagefiltersepiarangeset();
            svgupdate();
        }

        function messagefiltersepiaexactload()
        {
            const br = document.createElement("br");
            messagefiltersepia.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltersepiaexactupdate);
                messagefiltersepia.append(button);
            }
        }
        addEventListener("load", messagefiltersepiaexactload);

        function messagefiltersepiaexactupdate(e)
        {
            messagefiltersepianumber.value = Number(e.target.value);

            messagefiltersepianumberupdate();
        }

        function messagefiltersepiaincrementload()
        {
            const br = document.createElement("br");
            messagefiltersepia.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltersepiaincrementupdate);
                messagefiltersepia.append(button);
            }
        }
        addEventListener("load", messagefiltersepiaincrementload);

        function messagefiltersepiaincrementupdate(e)
        {
            const v = Number(messagefiltersepianumber.value) + Number(e.target.value);

            if((messagefiltersepianumber.min <= v) && (v <= messagefiltersepianumber.max))
            {
                messagefiltersepianumber.value = v;

                messagefiltersepianumberupdate();
            }
        }
//*/



/*
        function messagemargintopload()
        {
            const div = document.createElement("div");
            div.id = "messagemargintop";
            div.innerHTML = "margin-top";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagemargintopload);

        function messagemargintopnumberload()
        {
            const br = document.createElement("br");
            messagemargintop.append(br);

            const input = document.createElement("input");
            input.id = "messagemargintopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagemargintopnumberupdate);
            messagemargintop.append(input);

            //messagemargintopnumberset();
        }
        addEventListener("load", messagemargintopnumberload);

        function messagemargintopnumberset()
        {
            const v = Number(messagemargintopnumber.value);

            messagemargintoprange.value = v;
            text.messagemargintop = v;
        }

        function messagemargintopnumberupdate()
        {
            messagemargintopnumberset();

            svgupdate();
        }

        function messagemargintoprangeload()
        {
            const input = document.createElement("input");
            input.id = "messagemargintoprange";
            input.max = messagemargintopnumber.max;
            input.min = messagemargintopnumber.min;
            input.type = "range";
            input.value = messagemargintopnumber.value;
            input.addEventListener("input", messagemargintoprangeupdate);
            messagemargintop.append(input);

            messagemargintoprangeset();
        }
        addEventListener("load", messagemargintoprangeload);

        function messagemargintoprangeset()
        {
            const v = Number(messagemargintoprange.value);

            messagemargintopnumber.value = v;
            text.messagemargintop = v;
        }

        function messagemargintoprangeupdate()
        {
            messagemargintoprangeset();

            svgupdate();
        }



        function messagemarginbottomload()
        {
            const div = document.createElement("div");
            div.id = "messagemarginbottom";
            div.innerHTML = "margin-bottom";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagemarginbottomload);

        function messagemarginbottomnumberload()
        {
            const br = document.createElement("br");
            messagemarginbottom.append(br);

            const input = document.createElement("input");
            input.id = "messagemarginbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagemarginbottomnumberupdate);
            messagemarginbottom.append(input);

            //messagemarginbottomnumberset();
        }
        addEventListener("load", messagemarginbottomnumberload);

        function messagemarginbottomnumberset()
        {
            const v = Number(messagemarginbottomnumber.value);

            messagemarginbottomrange.value = v;
            text.messagemarginbottom = v;
        }

        function messagemarginbottomnumberupdate()
        {
            messagemarginbottomnumberset();

            svgupdate();
        }

        function messagemarginbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagemarginbottomrange";
            input.max = messagemarginbottomnumber.max;
            input.min = messagemarginbottomnumber.min;
            input.type = "range";
            input.value = messagemarginbottomnumber.value;
            input.addEventListener("input", messagemarginbottomrangeupdate);
            messagemarginbottom.append(input);

            messagemarginbottomrangeset();
        }
        addEventListener("load", messagemarginbottomrangeload);

        function messagemarginbottomrangeset()
        {
            const v = Number(messagemarginbottomrange.value);

            messagemarginbottomnumber.value = v;
            text.messagemarginbottom = v;
        }

        function messagemarginbottomrangeupdate()
        {
            messagemarginbottomrangeset();

            svgupdate();
        }



        function messagemarginleftload()
        {
            const div = document.createElement("div");
            div.id = "messagemarginleft";
            div.innerHTML = "margin-left";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagemarginleftload);

        function messagemarginleftnumberload()
        {
            const br = document.createElement("br");
            messagemarginleft.append(br);

            const input = document.createElement("input");
            input.id = "messagemarginleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagemarginleftnumberupdate);
            messagemarginleft.append(input);

            //messagemarginleftnumberset();
        }
        addEventListener("load", messagemarginleftnumberload);

        function messagemarginleftnumberset()
        {
            const v = Number(messagemarginleftnumber.value);

            messagemarginleftrange.value = v;
            text.messagemarginleft = v;
        }

        function messagemarginleftnumberupdate()
        {
            messagemarginleftnumberset();

            svgupdate();
        }

        function messagemarginleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagemarginleftrange";
            input.max = messagemarginleftnumber.max;
            input.min = messagemarginleftnumber.min;
            input.type = "range";
            input.value = messagemarginleftnumber.value;
            input.addEventListener("input", messagemarginleftrangeupdate);
            messagemarginleft.append(input);

            messagemarginleftrangeset();
        }
        addEventListener("load", messagemarginleftrangeload);

        function messagemarginleftrangeset()
        {
            const v = Number(messagemarginleftrange.value);

            messagemarginleftnumber.value = v;
            text.messagemarginleft = v;
        }

        function messagemarginleftrangeupdate()
        {
            messagemarginleftrangeset();

            svgupdate();
        }



        function messagemarginrightload()
        {
            const div = document.createElement("div");
            div.id = "messagemarginright";
            div.innerHTML = "margin-right";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagemarginrightload);

        function messagemarginrightnumberload()
        {
            const br = document.createElement("br");
            messagemarginright.append(br);

            const input = document.createElement("input");
            input.id = "messagemarginrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagemarginrightnumberupdate);
            messagemarginright.append(input);

            //messagemarginrightnumberset();
        }
        addEventListener("load", messagemarginrightnumberload);

        function messagemarginrightnumberset()
        {
            const v = Number(messagemarginrightnumber.value);

            messagemarginrightrange.value = v;
            text.messagemarginright = v;
        }

        function messagemarginrightnumberupdate()
        {
            messagemarginrightnumberset();

            svgupdate();
        }

        function messagemarginrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagemarginrightrange";
            input.max = messagemarginrightnumber.max;
            input.min = messagemarginrightnumber.min;
            input.type = "range";
            input.value = messagemarginrightnumber.value;
            input.addEventListener("input", messagemarginrightrangeupdate);
            messagemarginright.append(input);

            messagemarginrightrangeset();
        }
        addEventListener("load", messagemarginrightrangeload);

        function messagemarginrightrangeset()
        {
            const v = Number(messagemarginrightrange.value);

            messagemarginrightnumber.value = v;
            text.messagemarginright = v;
        }

        function messagemarginrightrangeupdate()
        {
            messagemarginrightrangeset();

            svgupdate();
        }



        function messagepaddingtopload()
        {
            const div = document.createElement("div");
            div.id = "messagepaddingtop";
            div.innerHTML = "padding-top";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagepaddingtopload);

        function messagepaddingtopnumberload()
        {
            const br = document.createElement("br");
            messagepaddingtop.append(br);

            const input = document.createElement("input");
            input.id = "messagepaddingtopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagepaddingtopnumberupdate);
            messagepaddingtop.append(input);

            //messagepaddingtopnumberset();
        }
        addEventListener("load", messagepaddingtopnumberload);

        function messagepaddingtopnumberset()
        {
            const v = Number(messagepaddingtopnumber.value);

            messagepaddingtoprange.value = v;
            text.messagepaddingtop = v;
        }

        function messagepaddingtopnumberupdate()
        {
            messagepaddingtopnumberset();

            svgupdate();
        }

        function messagepaddingtoprangeload()
        {
            const input = document.createElement("input");
            input.id = "messagepaddingtoprange";
            input.max = messagepaddingtopnumber.max;
            input.min = messagepaddingtopnumber.min;
            input.type = "range";
            input.value = messagepaddingtopnumber.value;
            input.addEventListener("input", messagepaddingtoprangeupdate);
            messagepaddingtop.append(input);

            messagepaddingtoprangeset();
        }
        addEventListener("load", messagepaddingtoprangeload);

        function messagepaddingtoprangeset()
        {
            const v = Number(messagepaddingtoprange.value);

            messagepaddingtopnumber.value = v;
            text.messagepaddingtop = v;
        }

        function messagepaddingtoprangeupdate()
        {
            messagepaddingtoprangeset();

            svgupdate();
        }



        function messagepaddingbottomload()
        {
            const div = document.createElement("div");
            div.id = "messagepaddingbottom";
            div.innerHTML = "padding-bottom";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagepaddingbottomload);

        function messagepaddingbottomnumberload()
        {
            const br = document.createElement("br");
            messagepaddingbottom.append(br);

            const input = document.createElement("input");
            input.id = "messagepaddingbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagepaddingbottomnumberupdate);
            messagepaddingbottom.append(input);

            //messagepaddingbottomnumberset();
        }
        addEventListener("load", messagepaddingbottomnumberload);

        function messagepaddingbottomnumberset()
        {
            const v = Number(messagepaddingbottomnumber.value);

            messagepaddingbottomrange.value = v;
            text.messagepaddingbottom = v;
        }

        function messagepaddingbottomnumberupdate()
        {
            messagepaddingbottomnumberset();

            svgupdate();
        }

        function messagepaddingbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagepaddingbottomrange";
            input.max = messagepaddingbottomnumber.max;
            input.min = messagepaddingbottomnumber.min;
            input.type = "range";
            input.value = messagepaddingbottomnumber.value;
            input.addEventListener("input", messagepaddingbottomrangeupdate);
            messagepaddingbottom.append(input);

            messagepaddingbottomrangeset();
        }
        addEventListener("load", messagepaddingbottomrangeload);

        function messagepaddingbottomrangeset()
        {
            const v = Number(messagepaddingbottomrange.value);

            messagepaddingbottomnumber.value = v;
            text.messagepaddingbottom = v;
        }

        function messagepaddingbottomrangeupdate()
        {
            messagepaddingbottomrangeset();

            svgupdate();
        }



        function messagepaddingleftload()
        {
            const div = document.createElement("div");
            div.id = "messagepaddingleft";
            div.innerHTML = "padding-left";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagepaddingleftload);

        function messagepaddingleftnumberload()
        {
            const br = document.createElement("br");
            messagepaddingleft.append(br);

            const input = document.createElement("input");
            input.id = "messagepaddingleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagepaddingleftnumberupdate);
            messagepaddingleft.append(input);

            //messagepaddingleftnumberset();
        }
        addEventListener("load", messagepaddingleftnumberload);

        function messagepaddingleftnumberset()
        {
            const v = Number(messagepaddingleftnumber.value);

            messagepaddingleftrange.value = v;
            text.messagepaddingleft = v;
        }

        function messagepaddingleftnumberupdate()
        {
            messagepaddingleftnumberset();

            svgupdate();
        }

        function messagepaddingleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagepaddingleftrange";
            input.max = messagepaddingleftnumber.max;
            input.min = messagepaddingleftnumber.min;
            input.type = "range";
            input.value = messagepaddingleftnumber.value;
            input.addEventListener("input", messagepaddingleftrangeupdate);
            messagepaddingleft.append(input);

            messagepaddingleftrangeset();
        }
        addEventListener("load", messagepaddingleftrangeload);


        function messagepaddingleftrangeset()
        {
            const v = Number(messagepaddingleftrange.value);

            messagepaddingleftnumber.value = v;
            text.messagepaddingleft = v;
        }

        function messagepaddingleftrangeupdate()
        {
            messagepaddingleftrangeset();

            svgupdate();
        }



        function messagepaddingrightload()
        {
            const div = document.createElement("div");
            div.id = "messagepaddingright";
            div.innerHTML = "padding-right";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagepaddingrightload);

        function messagepaddingrightnumberload()
        {
            const br = document.createElement("br");
            messagepaddingright.append(br);

            const input = document.createElement("input");
            input.id = "messagepaddingrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagepaddingrightnumberupdate);
            messagepaddingright.append(input);

            //messagepaddingrightnumberset();
        }
        addEventListener("load", messagepaddingrightnumberload);

        function messagepaddingrightnumberset()
        {
            const v = Number(messagepaddingrightnumber.value);

            messagepaddingrightrange.value = v;
            text.messagepaddingright = v;
        }

        function messagepaddingrightnumberupdate()
        {
            messagepaddingrightnumberset();

            svgupdate();
        }

        function messagepaddingrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagepaddingrightrange";
            input.max = messagepaddingrightnumber.max;
            input.min = messagepaddingrightnumber.min;
            input.type = "range";
            input.value = messagepaddingrightnumber.value;
            input.addEventListener("input", messagepaddingrightrangeupdate);
            messagepaddingright.append(input);

            messagepaddingrightrangeset();
        }
        addEventListener("load", messagepaddingrightrangeload);

        function messagepaddingrightrangeset()
        {
            const v = Number(messagepaddingrightrange.value);

            messagepaddingrightnumber.value = v;
            text.messagepaddingright = v;
        }

        function messagepaddingrightrangeupdate()
        {
            messagepaddingrightrangeset();

            svgupdate();
        }
//*/






        function referenceversionload()
        {
            const div = document.createElement("div");
            div.id = "referenceversion";
            div.innerHTML = "version";
            tabcontentreference.append(div);
        }
        addEventListener("load", referenceversionload);

        function referenceversionselectload()
        {
            const br = document.createElement("br");
            referenceversion.append(br);

            const select = document.createElement("select");
            select.id = "referenceversionselect";
            select.addEventListener("input", referenceversionselectupdate);
            referenceversion.append(select);

            referenceversionselectload2();
        }
        addEventListener("load", referenceversionselectload);

        function referenceversionselectload2()
        {
            for(const value of Bibleversionarray)
            {
                const optgroup = docum
10000
ent.createElement("optgroup");
                optgroup.label = value[0];
                referenceversionselect.append(optgroup);

                for(const v of value[1])
                {
                    const option = document.createElement("option");
                    option.innerHTML = v[1];
                    option.value = v[0];
                    optgroup.append(option);
                }
            }

            referenceversionselect.value = Bibleversionarray[4][1][1][0];

            referenceversionselectset();
        }

        function referenceversionselectset()
        {
            text.version = referenceversionselect.options.selectedIndex + 1;
            text.versionname = referenceversionselect.value;

            text.referencetextversion = "";
            if(text.versionbool)
            {
                text.referencetextversion = ` ${text.versionname}`;
            }
        }

        function referenceversionselectupdate()
        {
            referenceversionselectset();
            /*
            referencebookselectload2();
            referencechapterselectload2();
            referenceverseselectload2();
            referenceverseendselectload2();
            svgupdate();
            //*/
            Bibleload();
        }

        function referenceversioncheckboxload()
        {
            const input = document.createElement("input");
            input.type = "checkbox";
            input.addEventListener("click", referenceversioncheckboxupdate);
            referenceversion.append(input);
        }
        addEventListener("load", referenceversioncheckboxload);

        function referenceversioncheckboxupdate()
        {
            text.versionbool = !text.versionbool;

            //referenceversionselectupdate();
            referenceversionselectset();
            svgupdate();
        }



        function Bibleload()
        {
            //console.log("Bibleload");
            fetch(`/assets/txt/new/${text.versionname}.txt`)
            .then(r => r.text())
            .then(t =>
            {
                const split = t.split("@");
                //console.log(split);

                const b = split[1].trim();
                //console.log(b);
                const c = b.split("\n");
                //console.log(c);
                for(const [key, value] of c.entries())
                {
                    const split = value.split("#");
                    const b = split[1];
                    Biblebookarray[key] = b;
                    //console.log(Biblebookarray[key]);
                }

                const v = split[2].trim();
                //console.log(v);
                const w = v.split("\n");
                //console.log(w);
                for(const value of w)
                {
                    const split = value.split("#");
                    const b = Number(split[0]);
                    const c = Number(split[1]);
                    const v = Number(split[2]);
                    const t = split[3];
                    if(!Array.isArray(Bibleversearray[b]))
                    {
                        Bibleversearray[b] = [];
                    }
                    if(!Array.isArray(Bibleversearray[b][c]))
                    {
                        Bibleversearray[b][c] = [];
                    }
                    Bibleversearray[b][c][v] = t;
                    //console.log(b, c, v, t);
                }

                //imageload2();
                //referenceversionselectload2();
                //*
                referencebookselectload2();
                referencechapterselectload2()
                referenceverseselectload2();
                referenceverseendselectload2();
                //*/
                //canvasupdate();
                svgupdate();
            });
        }
        addEventListener("load", Bibleload);

        function referencebookload()
        {
            const div = document.createElement("div");
            div.id = "referencebook";
            div.innerHTML = "book";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencebookload);

        function referencebookselectload()
        {
            const br = document.createElement("br");
            referencebook.append(br);

            const select = document.createElement("select");
            select.id = "referencebookselect";
            select.addEventListener("input", referencebookselectupdate);
            referencebook.append(select);

            text.referencetextbook = "Genesis";

            //referencebookselectload2();
        }
        addEventListener("load", referencebookselectload);

        function referencebookselectload2()
        {
            for(let i = referencebookselect.options.length - 1; i >= 0; --i)
            {
                referencebookselect.remove(i);
            }

            for(const value of Biblebookarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                referencebookselect.add(option);
            }

            //referencebookselect.value = Biblebookarray[42];

            referencebookselectset();
        }

        function referencebookselectset()
        {
            text.book = referencebookselect.options.selectedIndex + 1;
            text.bookname = referencebookselect.value;

            text.referencetextbook = text.bookname;
        }

        function referencebookselectupdate()
        {
            referencebookselectset();
            referencechapterselectload2();
            referenceverseselectload2();
            referenceverseendselectload2();
            svgupdate();
        }



        function referencechapterload()
        {
            const div = document.createElement("div");
            div.id = "referencechapter";
            div.innerHTML = "chapter";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencechapterload);

        function referencechapterselectload()
        {
            const br = document.createElement("br");
            referencechapter.append(br);

            const select = document.createElement("select");
            select.id = "referencechapterselect";
            select.addEventListener("input", referencechapterselectupdate);
            referencechapter.append(select);

            text.referencetextchapter = " 1";

            //referencechapterselectload2();
        }
        addEventListener("load", referencechapterselectload);

        function referencechapterselectload2()
        {
            for(let i = referencechapterselect.options.length - 1; i >= 0; --i)
            {
                referencechapterselect.remove(i);
            }

            for(let i = 1; i < Bibleversearray[text.book].length; ++i)
            {
                const option = document.createElement("option");
                option.innerHTML = i;
                referencechapterselect.add(option);
            }

            referencechapterselect.value = 1;

            referencechapterselectset();
        }

        function referencechapterselectset()
        {
            text.chapter = referencechapterselect.value;

            text.referencetextchapter = ` ${text.chapter}`;
        }

        function referencechapterselectupdate()
        {
            referencechapterselectset();
            referenceverseselectload2();
            referenceverseendselectload2();
            svgupdate();
        }



        function referenceverseload()
        {
            const div = document.createElement("div");
            div.id = "referenceverse";
            div.innerHTML = "verse-start";
            tabcontentreference.append(div);
        }
        addEventListener("load", referenceverseload);

        function referenceverseselectload()
        {
            const br = document.createElement("br");
            referenceverse.append(br);

            const select = document.createElement("select");
            select.id = "referenceverseselect";
            select.addEventListener("input", referenceverseselectupdate);
            referenceverse.append(select);

            text.referencetextverse = ":1";
            text.passagetextverse = "In the beginning God created the heaven and the earth.";

            //referenceverseselectload2();
        }
        addEventListener("load", referenceverseselectload);

        function referenceverseselectload2()
        {
            for(let i = referenceverseselect.options.length - 1; i >= 0; --i)
            {
                referenceverseselect.remove(i);
            }

            for(let i = 1; i < Bibleversearray[text.book][text.chapter].length; ++i)
            {
                const option = document.createElement("option");
                option.innerHTML = i;
                referenceverseselect.add(option);
            }

            referenceverseselect.value = 1;

            referenceverseselectset();
        }

        function referenceverseselectset()
        {
            text.verse = referenceverseselect.value;

            text.referencetextverse = `:${text.verse}`;
            text.passagetextverse = Bibleversearray[text.book][text.chapter][text.verse];
        }

        function referenceverseselectupdate()
        {
            referenceverseselectset();
            referenceverseendselectload2();
            svgupdate();
        }



        function referenceverseendload()
        {
            const div = document.createElement("div");
            div.id = "referenceverseend";
            div.innerHTML = "verse-end";
            tabcontentreference.append(div);
        }
        addEventListener("load", referenceverseendload);

        function referenceverseendselectload()
        {
            const br = document.createElement("br");
            referenceverseend.append(br);

            const select = document.createElement("select");
            select.id = "referenceverseendselect";
            select.addEventListener("input", referenceverseendselectupdate);
            referenceverseend.append(select);

            text.referencetextverseend = "";
            text.passagetextverseend = "";

            //referenceverseendselectload2();
        }
        addEventListener("load", referenceverseendselectload);

        function referenceverseendselectload2()
        {
            for(let i = referenceverseendselect.options.length - 1; i >= 0; --i)
            {
                referenceverseendselect.remove(i);
            }

            for(let i = referenceverseselect.value; i < Bibleversearray[text.book][text.chapter].length; ++i)
            {
                const option = document.createElement("option");
                option.innerHTML = i;
                referenceverseendselect.add(option);
            }

            referenceverseendselect.value = referenceverseselect.value;

            referenceverseendselectset();
        }

        function referenceverseendselectset()
        {
            text.verseend = referenceverseendselect.value;

            //text.referencetext = `${text.bookname} ${text.chapter}:${text.verse}`;
            //text.passagetext = `${Bibleversearray[text.book][text.chapter][text.verse]}`;
            text.referencetextverseend = "";
            text.passagetextverseend = "";

            if(text.verse != text.verseend)
            {
                //text.referencetext += `-${text.verseend}`;
                text.referencetextverseend = `-${text.verseend}`;

                for(let i = Number(text.verse) + 1; i <= text.verseend; ++i)
                {
                    //text.passagetext += ` ${Bibleversearray[text.book][text.chapter][i]}`;
                    text.passagetextverseend += ` ${Bibleversearray[text.book][text.chapter][i]}`;
                }
            }

            //if(text.versionbool)
            //{
            //    text.referencetext += ` ${text.versionname}`;
            //}
            //console.log(text.referencetext);
            //console.log(text.passagetext);
        }

        function referenceverseendselectupdate()
        {
            referenceverseendselectset();
            svgupdate();
        }



        function referencewidthload()
        {
            const div = document.createElement("div");
            div.id = "referencewidth";
            div.innerHTML = "width";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencewidthload);

        function referencewidthnumberload()
        {
            const br = document.createElement("br");
            referencewidth.append(br);

            const input = document.createElement("input");
            input.id = "referencewidthnumber";
            input.max = maxwidth;
            input.min = 0;
            input.type = "number";
            input.value = canvas.width - 100;
            input.addEventListener("input", referencewidthnumberupdate);
            referencewidth.append(input);

            //referencewidthnumberset();
        }
        addEventListener("load", referencewidthnumberload);

        function referencewidthnumberset()
        {
            const v = Number(referencewidthnumber.value);

            referencewidthrange.value = v;
            text.referencewidth = v;
        }

        function referencewidthnumberupdate()
        {
            referencewidthnumberset();
            svgupdate();
        }

        function referencewidthrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencewidthrange";
            input.max = referencewidthnumber.max;
            input.min = referencewidthnumber.min;
            input.type = "range";
            input.value = referencewidthnumber.value;
            input.addEventListener("input", referencewidthrangeupdate);
            referencewidth.append(input);

            referencewidthrangeset();
        }
        addEventListener("load", referencewidthrangeload);

        function referencewidthrangeset()
        {
            const v = Number(referencewidthrange.value);

            referencewidthnumber.value = v;
            text.referencewidth = v;
        }

        function referencewidthrangeupdate()
        {
            referencewidthrangeset();
            svgupdate();
        }

        function referencewidthexactload()
        {
            const br = document.createElement("br");
            referencewidth.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencewidthexactupdate);
                referencewidth.append(button);
            }
        }
        addEventListener("load", referencewidthexactload);

        function referencewidthexactupdate(e)
        {
            referencewidthnumber.value = canvas.width * Number(e.target.value);

            referencewidthnumberupdate();
        }

        function referencewidthincrementload()
        {
            const br = document.createElement("br");
            referencewidth.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencewidthincrementupdate);
                referencewidth.append(button);
            }
        }
        addEventListener("load", referencewidthincrementload);

        function referencewidthincrementupdate(e)
        {
            const v = Number(referencewidthnumber.value) + Number(e.target.value);

            if((referencewidthnumber.min <= v) && (v <= referencewidthnumber.max))
            {
                referencewidthnumber.value = v;

                referencewidthnumberupdate();
            }
        }



        function referenceheightload()
        {
            const div = document.createElement("div");
            div.id = "referenceheight";
            div.innerHTML = "height";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referenceheightload);

        function referenceheightnumberload()
        {
            const br = document.createElement("br");
            referenceheight.append(br);

            const input = document.createElement("input");
            input.id = "referenceheightnumber";
            input.max = maxheight;
            input.min = 0;
            input.type = "number";
            input.value = 280;
            input.addEventListener("input", referenceheightnumberupdate);
            referenceheight.append(input);

            //referenceheightnumberset();
        }
        addEventListener("load", referenceheightnumberload);

        function referenceheightnumberset()
        {
            const v = Number(referenceheightnumber.value);

            referenceheightrange.value = v;
            text.referenceheight = v;
        }

        function referenceheightnumberupdate()
        {
            referenceheightnumberset();
            svgupdate();
        }

        function referenceheightrangeload()
        {
            const input = document.createElement("input");
            input.id = "referenceheightrange";
            input.max = referenceheightnumber.max;
            input.min = referenceheightnumber.min;
            input.type = "range";
            input.value = referenceheightnumber.value;
            input.addEventListener("input", referenceheightrangeupdate);
            referenceheight.append(input);

            referenceheightrangeset();
        }
        addEventListener("load", referenceheightrangeload);

        function referenceheightrangeset()
        {
            const v = Number(referenceheightrange.value);

            referenceheightnumber.value = v;
            text.referenceheight = v;
        }

        function referenceheightrangeupdate()
        {
            referenceheightrangeset();
            svgupdate();
        }

        function referenceheightexactload()
        {
            const br = document.createElement("br");
            referenceheight.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceheightexactupdate);
                referenceheight.append(button);
            }
        }
        addEventListener("load", referenceheightexactload);

        function referenceheightexactupdate(e)
        {
            referenceheightnumber.value = canvas.height * Number(e.target.value);

            referenceheightnumberupdate();
        }

        function referenceheightincrementload()
        {
            const br = document.createElement("br");
            referenceheight.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceheightincrementupdate);
                referenceheight.append(button);
            }
        }
        addEventListener("load", referenceheightincrementload);

        function referenceheightincrementupdate(e)
        {
            const v = Number(referenceheightnumber.value) + Number(e.target.value);

            if((referenceheightnumber.min <= v) && (v <= referenceheightnumber.max))
            {
                referenceheightnumber.value = v;

                referenceheightnumberupdate();
            }
        }



        function referencexload()
        {
            const div = document.createElement("div");
            div.id = "referencex";
            div.innerHTML = "x";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencexload);

        function referencexnumberload()
        {
            const br = document.createElement("br");
            referencex.append(br);

            const input = document.createElement("input");
            input.id = "referencexnumber";
            input.max = maxwidth;
            input.min = -maxwidth;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", referencexnumberupdate);
            referencex.append(input);

            //referencexnumberset();
        }
        addEventListener("load", referencexnumberload);

        function referencexnumberset()
        {
            const v = Number(referencexnumber.value);

            referencexrange.value = v;
            text.referencex = v;
        }

        function referencexnumberupdate()
        {
            referencexnumberset();
            svgupdate();
        }

        function referencexrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencexrange";
            input.max = referencexnumber.max;
            input.min = referencexnumber.min;
            input.type = "range";
            input.value = referencexnumber.value;
            input.addEventListener("input", referencexrangeupdate);
            referencex.append(input);

            referencexrangeset();
        }
        addEventListener("load", referencexrangeload);

        function referencexrangeset()
        {
            const v = Number(referencexrange.value);

            referencexnumber.value = v;
            text.referencex = v;
        }

        function referencexrangeupdate()
        {
            referencexrangeset();
            svgupdate();
        }

        function referencexexactload()
        {
            const br = document.createElement("br");
            referencex.append(br);

            const array =
            [
                ["left",0],
                ["center",0.5],
                ["right",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencexexactupdate);
                referencex.append(button);
            }
        }
        addEventListener("load", referencexexactload);

        function referencexexactupdate(e)
        {
            //referencexnumber.value = (canvas.width - text.referencewidth - text.referencepaddingleft - text.referencepaddingright) * Number(e.target.value);
            referencexnumber.value = (canvas.width - text.referencewidth) * Number(e.target.value);

            referencexnumberupdate();
        }

        function referencexincrementload()
        {
            const br = document.createElement("br");
            referencex.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencexincrementupdate);
                referencex.append(button);
            }
        }
        addEventListener("load", referencexincrementload);

        function referencexincrementupdate(e)
        {
            const v = Number(referencexnumber.value) + Number(e.target.value);

            if((referencexnumber.min <= v) && (v <= referencexnumber.max))
            {
                referencexnumber.value = v;

                referencexnumberupdate();
            }
        }



        function referenceyload()
        {
            const div = document.createElement("div");
            div.id = "referencey";
            div.innerHTML = "y";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referenceyload);

        function referenceynumberload()
        {
            const br = document.createElement("br");
            referencey.append(br);

            const input = document.createElement("input");
            input.id = "referenceynumber";
            input.max = maxheight;
            input.min = -maxheight;
            input.type = "number";
            input.value = 400;
            input.addEventListener("input", referenceynumberupdate);
            referencey.append(input);

            //referenceynumberset();
        }
        addEventListener("load", referenceynumberload);

        function referenceynumberset()
        {
            const v = Number(referenceynumber.value);

            referenceyrange.value = v;
            text.referencey = v;
        }

        function referenceynumberupdate()
        {
            referenceynumberset();
            svgupdate();
        }

        function referenceyrangeload()
        {
            const input = document.createElement("input");
            input.id = "referenceyrange";
            input.max = referenceynumber.max;
            input.min = referenceynumber.min;
            input.type = "range";
            input.value = referenceynumber.value;
            input.addEventListener("input", referenceyrangeupdate);
            referencey.append(input);

            referenceyrangeset();
        }
        addEventListener("load", referenceyrangeload);

        function referenceyrangeset()
        {
            const v = Number(referenceyrange.value);

            referenceynumber.value = v;
            text.referencey = v;
        }

        function referenceyrangeupdate()
        {
            referenceyrangeset();
            svgupdate();
        }

        function referenceyexactload()
        {
            const br = document.createElement("br");
            referencey.append(br);

            const array =
            [
                ["top",0],
                ["center",0.5],
                ["bottom",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceyexactupdate);
                referencey.append(button);
            }
        }
        addEventListener("load", referenceyexactload);

        function referenceyexactupdate(e)
        {
            //referenceynumber.value = (canvas.height - text.referenceheight - text.referencepaddingtop - text.referencepaddingbottom) * Number(e.target.value);
            referenceynumber.value = (canvas.height - text.referenceheight) * Number(e.target.value);

            referenceynumberupdate();
        }

        function referenceyincrementload()
        {
            const br = document.createElement("br");
            referencey.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceyincrementupdate);
                referencey.append(button);
            }
        }
        addEventListener("load", referenceyincrementload);

        function referenceyincrementupdate(e)
        {
            const v = Number(referenceynumber.value) + Number(e.target.value);

            if((referenceynumber.min <= v) && (v <= referenceynumber.max))
            {
                referenceynumber.value = v;

                referenceynumberupdate();
            }
        }



        function referencebackgroundcolorload()
        {
            const div = document.createElement("div");
            div.id = "referencebackgroundcolor";
            div.innerHTML = "background-color";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencebackgroundcolorload);

        function referencebackgroundcolorcolorload()
        {
            const br = document.createElement("br");
            referencebackgroundcolor.append(br);

            const input = document.createElement("input");
            input.id = "referencebackgroundcolorcolor";
            input.type = "color";
            input.value = "#ffffff";
            input.addEventListener("input", referencebackgroundcolorcolorupdate);
            referencebackgroundcolor.append(input);

            //referencebackgroundcolorcolorset();
        }
        addEventListener("load", referencebackgroundcolorcolorload);

        function referencebackgroundcolorcolorset()
        {
            const c = referencebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referencebackgroundalphanumber.value;

            text.referencebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencebackgroundcolorcolorupdate()
        {
            referencebackgroundcolorcolorset();
            svgupdate();
        }

        function referencebackgroundcolorexactload()
        {
            const br = document.createElement("br");
            referencebackgroundcolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencebackgroundcolorexactupdate);
                referencebackgroundcolor.append(button);
            }
        }
        addEventListener("load", referencebackgroundcolorexactload);

        function referencebackgroundcolorexactupdate(e)
        {
            referencebackgroundcolorcolor.value = e.target.value;

            referencebackgroundcolorcolorupdate();
        }



        function referencebackgroundalphaload()
        {
            const div = document.createElement("div");
            div.id = "referencebackgroundalpha";
            div.innerHTML = "background-alpha";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencebackgroundalphaload);

        function referencebackgroundalphanumberload()
        {
            const br = document.createElement("br");
            referencebackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "referencebackgroundalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 0.5;
            input.addEventListener("input", referencebackgroundalphanumberupdate);
            referencebackgroundalpha.append(input);

            //referencebackgroundalphanumberset();
        }
        addEventListener("load", referencebackgroundalphanumberload);

        function referencebackgroundalphanumberset()
        {
            const c = referencebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referencebackgroundalphanumber.value;

            referencebackgroundalpharange.value = a;
            text.referencebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencebackgroundalphanumberupdate()
        {
            referencebackgroundalphanumberset();
            svgupdate();
        }

        function referencebackgroundalpharangeload()
        {
            const input = document.createElement("input");
            input.id = "referencebackgroundalpharange";
            input.max = referencebackgroundalphanumber.max;
            input.min = referencebackgroundalphanumber.min;
            input.step = referencebackgroundalphanumber.step;
            input.type = "range";
            input.value = referencebackgroundalphanumber.value;
            input.addEventListener("input", referencebackgroundalpharangeupdate);
            referencebackgroundalpha.append(input);

            referencebackgroundalpharangeset();
        }
        addEventListener("load", referencebackgroundalpharangeload);

        function referencebackgroundalpharangeset()
        {
            const c = referencebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referencebackgroundalpharange.value;

            referencebackgroundalphanumber.value = a;
            text.referencebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencebackgroundalpharangeupdate()
        {
            referencebackgroundalpharangeset();
            svgupdate();
        }

        function referencebackgroundalphaexactload()
        {
            const br = document.createElement("br");
            referencebackgroundalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencebackgroundalphaexactupdate);
                referencebackgroundalpha.append(button);
            }
        }
        addEventListener("load", referencebackgroundalphaexactload);

        function referencebackgroundalphaexactupdate(e)
        {
            referencebackgroundalphanumber.value = Number(e.target.value);

            referencebackgroundalphanumberupdate();
        }

        function referencebackgroundalphaincrementload()
        {
            const br = document.createElement("br");
            referencebackgroundalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencebackgroundalphaincrementupdate);
                referencebackgroundalpha.append(button);
            }
        }
        addEventListener("load", referencebackgroundalphaincrementload);

        function referencebackgroundalphaincrementupdate(e)
        {
            let v = Number(referencebackgroundalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((referencebackgroundalphanumber.min <= v) && (v <= referencebackgroundalphanumber.max))
            {
                referencebackgroundalphanumber.value = v;

                referencebackgroundalphanumberupdate();
            }
        }



        function referencebordercolorload()
        {
            const div = document.createElement("div");
            div.id = "referencebordercolor";
            div.innerHTML = "border-color";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencebordercolorload);

        function referencebordercolorcolorload()
        {
            const br = document.createElement("br");
            referencebordercolor.append(br);

            const input = document.createElement("input");
            input.id = "referencebordercolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", referencebordercolorcolorupdate);
            referencebordercolor.append(input);

            //referencebordercolorcolorset();
        }
        addEventListener("load", referencebordercolorcolorload);

        function referencebordercolorcolorset()
        {
            const c = referencebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referenceborderalphanumber.value;

            text.referencebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencebordercolorcolorupdate()
        {
            referencebordercolorcolorset();
            svgupdate();
        }

        function referencebordercolorexactload()
        {
            const br = document.createElement("br");
            referencebordercolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencebordercolorexactupdate);
                referencebordercolor.append(button);
            }
        }
        addEventListener("load", referencebordercolorexactload);

        function referencebordercolorexactupdate(e)
        {
            referencebordercolorcolor.value = e.target.value;

            referencebordercolorcolorupdate();
        }



        function referenceborderalphaload()
        {
            const div = document.createElement("div");
            div.id = "referenceborderalpha";
            div.innerHTML = "border-alpha";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referenceborderalphaload);

        function referenceborderalphanumberload()
        {
            const br = document.createElement("br");
            referenceborderalpha.append(br);

            const input = document.createElement("input");
            input.id = "referenceborderalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", referenceborderalphanumberupdate);
            referenceborderalpha.append(input);

            //referenceborderalphanumberset();
        }
        addEventListener("load", referenceborderalphanumberload);

        function referenceborderalphanumberset()
        {
            const c = referencebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referenceborderalphanumber.value;

            referenceborderalpharange.value = a;
            text.referencebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referenceborderalphanumberupdate()
        {
            referenceborderalphanumberset();
            svgupdate();
        }

        function referenceborderalpharangeload()
        {
            const input = document.createElement("input");
            input.id = "referenceborderalpharange";
            input.max = referenceborderalphanumber.max;
            input.min = referenceborderalphanumber.min;
            input.step = referenceborderalphanumber.step;
            input.type = "range";
            input.value = referenceborderalphanumber.value;
            input.addEventListener("input", referenceborderalpharangeupdate);
            referenceborderalpha.append(input);

            referenceborderalpharangeset();
        }
        addEventListener("load", referenceborderalpharangeload);

        function referenceborderalpharangeset()
        {
            const c = referencebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referenceborderalpharange.value;

            referenceborderalphanumber.value = a;
            text.referencebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referenceborderalpharangeupdate()
        {
            referenceborderalpharangeset();
            svgupdate();
        }

        function referenceborderalphaexactload()
        {
            const br = document.createElement("br");
            referenceborderalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceborderalphaexactupdate);
                referenceborderalpha.append(button);
            }
        }
        addEventListener("load", referenceborderalphaexactload);

        function referenceborderalphaexactupdate(e)
        {
            referenceborderalphanumber.value = Number(e.target.value);

            referenceborderalphanumberupdate();
        }

        function referenceborderalphaincrementload()
        {
            const br = document.createElement("br");
            referenceborderalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceborderalphaincrementupdate);
                referenceborderalpha.append(button);
            }
        }
        addEventListener("load", referenceborderalphaincrementload);

        function referenceborderalphaincrementupdate(e)
        {
            let v = Number(referenceborderalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((referenceborderalphanumber.min <= v) && (v <= referenceborderalphanumber.max))
            {
                referenceborderalphanumber.value = v;

                referenceborderalphanumberupdate();
            }
        }



        function referenceborderradiusload()
        {
            const div = document.createElement("div");
            div.id = "referenceborderradius";
            div.innerHTML = "border-radius";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referenceborderradiusload);

        function referenceborderradiusnumberload()
        {
            const br = document.createElement("br");
            referenceborderradius.append(br);

            const input = document.createElement("input");
            input.id = "referenceborderradiusnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", referenceborderradiusnumberupdate);
            referenceborderradius.append(input);

            //referenceborderradiusnumberset();
        }
        addEventListener("load", referenceborderradiusnumberload);

        function referenceborderradiusnumberset()
        {
            const v = Number(referenceborderradiusnumber.value);

            referenceborderradiusrange.value = v;
            text.referenceborderradius = v;
        }

        function referenceborderradiusnumberupdate()
        {
            referenceborderradiusnumberset();
            svgupdate();
        }

        function referenceborderradiusrangeload()
        {
            const input = document.createElement("input");
            input.id = "referenceborderradiusrange";
            input.max = referenceborderradiusnumber.max;
            input.min = referenceborderradiusnumber.min;
            input.type = "range";
            input.value = referenceborderradiusnumber.value;
            input.addEventListener("input", referenceborderradiusrangeupdate);
            referenceborderradius.append(input);

            referenceborderradiusrangeset();
        }
        addEventListener("load", referenceborderradiusrangeload);

        function referenceborderradiusrangeset()
        {
            const v = Number(referenceborderradiusrange.value);

            referenceborderradiusnumber.value = v;
            text.referenceborderradius = v;
        }

        function referenceborderradiusrangeupdate()
        {
            referenceborderradiusrangeset();
            svgupdate();
        }

        function referenceborderradiusexactload()
        {
            const br = document.createElement("br");
            referenceborderradius.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceborderradiusexactupdate);
                referenceborderradius.append(button);
            }
        }
        addEventListener("load", referenceborderradiusexactload);

        function referenceborderradiusexactupdate(e)
        {
            referenceborderradiusnumber.value = Number(e.target.value);

            referenceborderradiusnumberupdate();
        }

        function referenceborderradiusincrementload()
        {
            const br = document.createElement("br");
            referenceborderradius.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceborderradiusincrementupdate);
                referenceborderradius.append(button);
            }
        }
        addEventListener("load", referenceborderradiusincrementload);

        function referenceborderradiusincrementupdate(e)
        {
            const v = Number(referenceborderradiusnumber.value) + Number(e.target.value);

            if((referenceborderradiusnumber.min <= v) && (v <= referenceborderradiusnumber.max))
            {
                referenceborderradiusnumber.value = v;

                referenceborderradiusnumberupdate();
            }
        }



        function referenceborderstyleload()
        {
            const div = document.createElement("div");
            div.id = "referenceborderstyle";
            div.innerHTML = "border-style";
            tabcontentreference.append(div);
        }
        addEventListener("load", referenceborderstyleload);

        function referenceborderstyleselectload()
        {
            const br = document.createElement("br");
            referenceborderstyle.append(br);

            const select = document.createElement("select");
            select.id = "referenceborderstyleselect";
            select.addEventListener("input", referenceborderstyleselectupdate);
            referenceborderstyle.append(select);

            for(const value of borderstylearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            //select.value = borderstylearray[8];

            referenceborderstyleselectset();
        }
        addEventListener("load", referenceborderstyleselectload);

        function referenceborderstyleselectset()
        {
            text.referenceborderstyle = referenceborderstyleselect.value;
        }

        function referenceborderstyleselectupdate()
        {
            referenceborderstyleselectset();
            svgupdate();
        }



        function referenceborderwidthload()
        {
            const div = document.createElement("div");
            div.id = "referenceborderwidth";
            div.innerHTML = "border-width";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referenceborderwidthload);

        function referenceborderwidthnumberload()
        {
            const br = document.createElement("br");
            referenceborderwidth.append(br);

            const input = document.createElement("input");
            input.id = "referenceborderwidthnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 25;
            input.addEventListener("input", referenceborderwidthnumberupdate);
            referenceborderwidth.append(input);

            //referenceborderwidthnumberset();
        }
        addEventListener("load", referenceborderwidthnumberload);

        function referenceborderwidthnumberset()
        {
            const v = Number(referenceborderwidthnumber.value);

            referenceborderwidthrange.value = v;
            text.referenceborderwidth = v;
        }

        function referenceborderwidthnumberupdate()
        {
            referenceborderwidthnumberset();
            svgupdate();
        }

        function referenceborderwidthrangeload()
        {
            const input = document.createElement("input");
            input.id = "referenceborderwidthrange";
            input.max = referenceborderwidthnumber.max;
            input.min = referenceborderwidthnumber.min;
            input.type = "range";
            input.value = referenceborderwidthnumber.value;
            input.addEventListener("input", referenceborderwidthrangeupdate);
            referenceborderwidth.append(input);

            referenceborderwidthrangeset();
        }
        addEventListener("load", referenceborderwidthrangeload);

        function referenceborderwidthrangeset()
        {
            const v = Number(referenceborderwidthrange.value);

            referenceborderwidthnumber.value = v;
            text.referenceborderwidth = v;
        }

        function referenceborderwidthrangeupdate()
        {
            referenceborderwidthrangeset();
            svgupdate();
        }

        function referenceborderwidthexactload()
        {
            const br = document.createElement("br");
            referenceborderwidth.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceborderwidthexactupdate);
                referenceborderwidth.append(button);
            }
        }
        addEventListener("load", referenceborderwidthexactload);

        function referenceborderwidthexactupdate(e)
        {
            referenceborderwidthnumber.value = Number(e.target.value);

            referenceborderwidthnumberupdate();
        }

        function referenceborderwidthincrementload()
        {
            const br = document.createElement("br");
            referenceborderwidth.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceborderwidthincrementupdate);
                referenceborderwidth.append(button);
            }
        }
        addEventListener("load", referenceborderwidthincrementload);

        function referenceborderwidthincrementupdate(e)
        {
            const v = Number(referenceborderwidthnumber.value) + Number(e.target.value);

            if((referenceborderwidthnumber.min <= v) && (v <= referenceborderwidthnumber.max))
            {
                referenceborderwidthnumber.value = v;

                referenceborderwidthnumberupdate();
            }
        }



        function referencehorizontalload()
        {
            const div = document.createElement("div");
            div.id = "referencehorizontal";
            div.innerHTML = "horizontal";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencehorizontalload);

        function referencehorizontalselectload()
        {
            const br = document.createElement("br");
            referencehorizontal.append(br);

            const select = document.createElement("select");
            select.id = "referencehorizontalselect";
            select.addEventListener("input", referencehorizontalselectupdate);
            referencehorizontal.append(select);

            for(const value of horizontalarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            select.value = horizontalarray[1];

            referencehorizontalselectset();
        }
        addEventListener("load", referencehorizontalselectload);

        function referencehorizontalselectset()
        {
            text.referencehorizontal = referencehorizontalselect.value;
        }

        function referencehorizontalselectupdate()
        {
            referencehorizontalselectset();
            svgupdate();
        }



        function referenceverticalload()
        {
            const div = document.createElement("div");
            div.id = "referencevertical";
            div.innerHTML = "vertical";
            tabcontentreference.append(div);
        }
        addEventListener("load", referenceverticalload);

        function referenceverticalselectload()
        {
            const br = document.createElement("br");
            referencevertical.append(br);

            const select = document.createElement("select");
            select.id = "referenceverticalselect";
            select.addEventListener("input", referenceverticalselectupdate);
            referencevertical.append(select);

            for(const value of verticalarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            select.value = verticalarray[1];

            referenceverticalselectset();
        }
        addEventListener("load", referenceverticalselectload);

        function referenceverticalselectset()
        {
            text.referencevertical = referenceverticalselect.value;
        }

        function referenceverticalselectupdate()
        {
            referenceverticalselectset();
            svgupdate();
        }



        function referencewritingmodeload()
        {
            const div = document.createElement("div");
            div.id = "referencewritingmode";
            div.innerHTML = "writing-mode";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencewritingmodeload);

        function referencewritingmodeselectload()
        {
            const br = document.createElement("br");
            referencewritingmode.append(br);

            const select = document.createElement("select");
            select.id = "referencewritingmodeselect";
            select.addEventListener("input", referencewritingmodeselectupdate);
            referencewritingmode.append(select);

            for(const value of writingmodearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            referencewritingmodeselectset();
        }
        addEventListener("load", referencewritingmodeselectload);

        function referencewritingmodeselectset()
        {
            text.referencewritingmode = referencewritingmodeselect.value;
        }

        function referencewritingmodeselectupdate()
        {
            referencewritingmodeselectset();
            svgupdate();
        }



        function referencefontfamilyload()
        {
            const div = document.createElement("div");
            div.id = "referencefontfamily";
            div.innerHTML = "font-family";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencefontfamilyload);

        function referencefontfamilyselectload()
        {
            const br = document.createElement("br");
            referencefontfamily.append(br);

            const select = document.createElement("select");
            select.id = "referencefontfamilyselect";
            select.addEventListener("input", referencefontfamilyselectupdate);
            referencefontfamily.append(select);

            for(const value of fontfamilyarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            referencefontfamilyselectset();
        }
        addEventListener("load", referencefontfamilyselectload);

        function referencefontfamilyselectset()
        {
            text.referencefontfamily = referencefontfamilyselect.value;
        }

        function referencefontfamilyselectupdate()
        {
            referencefontfamilyselectset();
            svgupdate();
        }



        function referencefontsizeload()
        {
            const div = document.createElement("div");
            div.id = "referencefontsize";
            div.innerHTML = "font-size";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencefontsizeload);

        function referencefontsizenumberload()
        {
            const br = document.createElement("br");
            referencefontsize.append(br);

            const input = document.createElement("input");
            input.id = "referencefontsizenumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", referencefontsizenumberupdate);
            referencefontsize.append(input);

            //referencefontsizenumberset();
        }
        addEventListener("load", referencefontsizenumberload);

        function referencefontsizenumberset()
        {
            const v = Number(referencefontsizenumber.value);

            referencefontsizerange.value = v;
            text.referencefontsize = v;
        }

        function referencefontsizenumberupdate()
        {
            referencefontsizenumberset();
            svgupdate();
        }

        function referencefontsizerangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefontsizerange";
            input.max = referencefontsizenumber.max;
            input.min = referencefontsizenumber.min;
            input.type = "range";
            input.value = referencefontsizenumber.value;
            input.addEventListener("input", referencefontsizerangeupdate);
            referencefontsize.append(input);

            referencefontsizerangeset();
        }
        addEventListener("load", referencefontsizerangeload);

        function referencefontsizerangeset()
        {
            const v = Number(referencefontsizerange.value);

            referencefontsizenumber.value = v;
            text.referencefontsize = v;
        }

        function referencefontsizerangeupdate()
        {
            referencefontsizerangeset();
            svgupdate();
        }

        function referencefontsizeexactload()
        {
            const br = document.createElement("br");
            referencefontsize.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefontsizeexactupdate);
                referencefontsize.append(button);
            }
        }
        addEventListener("load", referencefontsizeexactload);

        function referencefontsizeexactupdate(e)
        {
            referencefontsizenumber.value = Number(e.target.value);

            referencefontsizenumberupdate();
        }

        function referencefontsizeincrementload()
        {
            const br = document.createElement("br");
            referencefontsize.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefontsizeincrementupdate);
                referencefontsize.append(button);
            }
        }
        addEventListener("load", referencefontsizeincrementload);

        function referencefontsizeincrementupdate(e)
        {
            const v = Number(referencefontsizenumber.value) + Number(e.target.value);

            if((referencefontsizenumber.min <= v) && (v <= referencefontsizenumber.max))
            {
                referencefontsizenumber.value = v;

                referencefontsizenumberupdate();
            }
        }

/*
        function referencefontsizefitload()
        {
            const button = document.createElement("button");
            button.innerHTML = "fit";
            button.addEventListener("click", referencefontsizefitupdate);
            referencefontsize.append(button);
        }
        addEventListener("load", referencefontsizefitload);

        function referencefontsizefitupdate()
        {
            const t = document.createElement("div");
            referencefontsize.append(t);
            t.innerHTML = text.bookname;
            t.style.fontSize = `${referencefontsizenumber.value}px`;

            const h1 = text.referencewidth;
            const h2 = text.referenceheight;
            const h3 = t.offsetWidth;
            const h4 = t.offsetHeight;
            const h5 = referencefontsizenumber.value;

            //const h4 = t.offsetParent;//t.style.fontSize;
            //const h5 = t.clientHeight;//text.style.height;
            //const h6 = text.height;
            //const h7 = text.getBoundingClientRect().height;
            //const h8 = text.style.lineHeight;
            //const h9 = canvas.getBoundingClientRect().height;
            console.log(h1, h2, h3, h4, h5);
            //t.hidden = true;

            if(h2 < h4)
            {
                referencefontsizenumber.value -= 1;
                referencefit();
            }

            referencefontsizenumberupdate();
        }
//*/



        function referencefontstyleload()
        {
            const div = document.createElement("div");
            div.id = "referencefontstyle";
            div.innerHTML = "font-style";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencefontstyleload);

        function referencefontstyleselectload()
        {
            const br = document.createElement("br");
            referencefontstyle.append(br);

            const select = document.createElement("select");
            select.id = "referencefontstyleselect";
            select.addEventListener("input", referencefontstyleselectupdate);
            referencefontstyle.append(select);

            for(const value of fontstylearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            referencefontstyleselectset();
        }
        addEventListener("load", referencefontstyleselectload);

        function referencefontstyleselectset()
        {
            text.referencefontstyle = referencefontstyleselect.value;
        }

        function referencefontstyleselectupdate()
        {
            referencefontstyleselectset();
            svgupdate();
        }



        function referencefontvariantload()
        {
            const div = document.createElement("div");
            div.id = "referencefontvariant";
            div.innerHTML = "font-variant";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencefontvariantload);

        function referencefontvariantselectload()
        {
            const br = document.createElement("br");
            referencefontvariant.append(br);

            const select = document.createElement("select");
            select.id = "referencefontvariantselect";
            select.addEventListener("input", referencefontvariantselectupdate);
            referencefontvariant.append(select);

            for(const value of fontvariantarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            referencefontvariantselectset();
        }
        addEventListener("load", referencefontvariantselectload);

        function referencefontvariantselectset()
        {
            text.referencefontvariant = referencefontvariantselect.value;
        }

        function referencefontvariantselectupdate()
        {
            referencefontvariantselectset();
            svgupdate();
        }



        function referencefontweightload()
        {
            const div = document.createElement("div");
            div.id = "referencefontweight";
            div.innerHTML = "font-weight";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencefontweightload);

        function referencefontweightselectload()
        {
            const br = document.createElement("br");
            referencefontweight.append(br);

            const select = document.createElement("select");
            select.id = "referencefontweightselect";
            select.addEventListener("input", referencefontweightselectupdate);
            referencefontweight.append(select);

            for(const value of fontweightarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            referencefontweightselectset();
        }
        addEventListener("load", referencefontweightselectload);

        function referencefontweightselectset()
        {
            text.referencefontweight = referencefontweightselect.value;
        }

        function referencefontweightselectupdate()
        {
            referencefontweightselectset();
            svgupdate();
        }



        function referencecolorload()
        {
            const div = document.createElement("div");
            div.id = "referencecolor";
            div.innerHTML = "color";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencecolorload);

        function referencecolorcolorload()
        {
            const br = document.createElement("br");
            referencecolor.append(br);

            const input = document.createElement("input");
            input.id = "referencecolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", referencecolorcolorupdate);
            referencecolor.append(input);

            //referencecolorcolorset();
        }
        addEventListener("load", referencecolorcolorload);

        function referencecolorcolorset()
        {
            const c = referencecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referencealphanumber.value;

            text.referencecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencecolorcolorupdate()
        {
            referencecolorcolorset();
            svgupdate();
        }

        function referencecolorexactload()
        {
            const br = document.createElement("br");
            referencecolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencecolorexactupdate);
                referencecolor.append(button);
            }
        }
        addEventListener("load", referencecolorexactload);

        function referencecolorexactupdate(e)
        {
            referencecolorcolor.value = e.target.value;

            referencecolorcolorupdate();
        }



        function referencealphaload()
        {
            const div = document.createElement("div");
            div.id = "referencealpha";
            div.innerHTML = "alpha";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencealphaload);

        function referencealphanumberload()
        {
            const br = document.createElement("br");
            referencealpha.append(br);

            const input = document.createElement("input");
            input.id = "referencealphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", referencealphanumberupdate);
            referencealpha.append(input);

            //referencealphanumberset();
        }
        addEventListener("load", referencealphanumberload);

        function referencealphanumberset()
        {
            const c = referencecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referencealphanumber.value;

            referencealpharange.value = a;
            text.referencecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencealphanumberupdate()
        {
            referencealphanumberset();
            svgupdate();
        }

        function referencealpharangeload()
        {
            const input = document.createElement("input");
            input.id = "referencealpharange";
            input.max = referencealphanumber.max;
            input.min = referencealphanumber.min;
            input.step = referencealphanumber.step;
            input.type = "range";
            input.value = referencealphanumber.value;
            input.addEventListener("input", referencealpharangeupdate);
            referencealpha.append(input);

            referencealpharangeset();
        }
        addEventListener("load", referencealpharangeload);

        function referencealpharangeset()
        {
            const c = referencecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referencealpharange.value;

            referencealphanumber.value = a;
            text.referencecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencealpharangeupdate()
        {
            referencealpharangeset();
            svgupdate();
        }

        function referencealphaexactload()
        {
            const br = document.createElement("br");
            referencealpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencealphaexactupdate);
                referencealpha.append(button);
            }
        }
        addEventListener("load", referencealphaexactload);

        function referencealphaexactupdate(e)
        {
            referencealphanumber.value = Number(e.target.value);

            referencealphanumberupdate();
        }

        function referencealphaincrementload()
        {
            const br = document.createElement("br");
            referencealpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencealphaincrementupdate);
                referencealpha.append(button);
            }
        }
        addEventListener("load", referencealphaincrementload);

        function referencealphaincrementupdate(e)
        {
            let v = Number(referencealphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((referencealphanumber.min <= v) && (v <= referencealphanumber.max))
            {
                referencealphanumber.value = v;

                referencealphanumberupdate();
            }
        }



/*leftoff
        function referencefilterblurload()
        {
            const div = document.createElement("div");
            div.id = "referencefilterblur";
            div.innerHTML = "filter-blur";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefilterblurload);

        function referencefilterblurnumberload()
        {
            const br = document.createElement("br");
            referencefilterblur.append(br);

            const input = document.createElement("input");
            input.id = "referencefilterblurnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencefilterblurnumberupdate);
            referencefilterblur.append(input);

            //referencefilterblurnumberset();
        }
        addEventListener("load", referencefilterblurnumberload);

        function referencefilterblurnumberset()
        {
            const v = referencefilterblurnumber.value;

            referencefilterblurrange.value = v;
            text.referencebackdropfilterblur = v;
        }

        function referencefilterblurnumberupdate()
        {
            referencefilterblurnumberset();
            svgupdate();
        }

        function referencefilterblurrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefilterblurrange";
            input.max = referencefilterblurnumber.max;
            input.min = referencefilterblurnumber.min;
            input.step = referencefilterblurnumber.step;
            input.type = "range";
            input.value = referencefilterblurnumber.value;
            input.addEventListener("input", referencefilterblurrangeupdate);
            referencefilterblur.append(input);

            referencefilterblurrangeset();
        }
        addEventListener("load", referencefilterblurrangeload);

        function referencefilterblurrangeset()
        {
            const v = referencefilterblurrange.value;

            referencefilterblurnumber.value = v;
            text.referencebackdropfilterblur = v;
        }

        function referencefilterblurrangeupdate()
        {
            referencefilterblurrangeset();
            svgupdate();
        }

        function referencefilterblurexactload()
        {
            const br = document.createElement("br");
            referencefilterblur.append(br);

            const array =
            [
                ["0",0],
                ["2",2],
                ["4",4],
                ["8",8],
                ["16",16],
                ["32",32],
                ["64",64],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterblurexactupdate);
                referencefilterblur.append(button);
            }
        }
        addEventListener("load", referencefilterblurexactload);

        function referencefilterblurexactupdate(e)
        {
            referencefilterblurnumber.value = Number(e.target.value);

            referencefilterblurnumberupdate();
        }

        function referencefilterblurincrementload()
        {
            const br = document.createElement("br");
            referencefilterblur.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterblurincrementupdate);
                referencefilterblur.append(button);
            }
        }
        addEventListener("load", referencefilterblurincrementload);

        function referencefilterblurincrementupdate(e)
        {
            const v = Number(referencefilterblurnumber.value) + Number(e.target.value);

            if((referencefilterblurnumber.min <= v) && (v <= referencefilterblurnumber.max))
            {
                referencefilterblurnumber.value = v;

                referencefilterblurnumberupdate();
            }
        }



        function referencefilterbrightnessload()
        {
            const div = document.createElement("div");
            div.id = "referencefilterbrightness";
            div.innerHTML = "filter-brightness";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefilterbrightnessload);

        function referencefilterbrightnessnumberload()
        {
            const br = document.createElement("br");
            referencefilterbrightness.append(br);

            const input = document.createElement("input");
            input.id = "referencefilterbrightnessnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", referencefilterbrightnessnumberupdate);
            referencefilterbrightness.append(input);

            //referencefilterbrightnessnumberset();
        }
        addEventListener("load", referencefilterbrightnessnumberload);

        function referencefilterbrightnessnumberset()
        {
            const v = referencefilterbrightnessnumber.value;

            referencefilterbrightn
10000
essrange.value = v;
            text.referencebackdropfilterbrightness = v;
        }

        function referencefilterbrightnessnumberupdate()
        {
            referencefilterbrightnessnumberset();
            svgupdate();
        }

        function referencefilterbrightnessrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefilterbrightnessrange";
            input.max = referencefilterbrightnessnumber.max;
            input.min = referencefilterbrightnessnumber.min;
            input.step = referencefilterbrightnessnumber.step;
            input.type = "range";
            input.value = referencefilterbrightnessnumber.value;
            input.addEventListener("input", referencefilterbrightnessrangeupdate);
            referencefilterbrightness.append(input);

            referencefilterbrightnessrangeset();
        }
        addEventListener("load", referencefilterbrightnessrangeload);

        function referencefilterbrightnessrangeset()
        {
            const v = referencefilterbrightnessrange.value;

            referencefilterbrightnessnumber.value = v;
            text.referencebackdropfilterbrightness = v;
        }

        function referencefilterbrightnessrangeupdate()
        {
            referencefilterbrightnessrangeset();
            svgupdate();
        }

        function referencefilterbrightnessexactload()
        {
            const br = document.createElement("br");
            referencefilterbrightness.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterbrightnessexactupdate);
                referencefilterbrightness.append(button);
            }
        }
        addEventListener("load", referencefilterbrightnessexactload);

        function referencefilterbrightnessexactupdate(e)
        {
            referencefilterbrightnessnumber.value = Number(e.target.value);

            referencefilterbrightnessnumberupdate();
        }

        function referencefilterbrightnessincrementload()
        {
            const br = document.createElement("br");
            referencefilterbrightness.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterbrightnessincrementupdate);
                referencefilterbrightness.append(button);
            }
        }
        addEventListener("load", referencefilterbrightnessincrementload);

        function referencefilterbrightnessincrementupdate(e)
        {
            const v = Number(referencefilterbrightnessnumber.value) + Number(e.target.value);

            if((referencefilterbrightnessnumber.min <= v) && (v <= referencefilterbrightnessnumber.max))
            {
                referencefilterbrightnessnumber.value = v;

                referencefilterbrightnessnumberupdate();
            }
        }



        function referencefiltercontrastload()
        {
            const div = document.createElement("div");
            div.id = "referencefiltercontrast";
            div.innerHTML = "filter-contrast";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefiltercontrastload);

        function referencefiltercontrastnumberload()
        {
            const br = document.createElement("br");
            referencefiltercontrast.append(br);

            const input = document.createElement("input");
            input.id = "referencefiltercontrastnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", referencefiltercontrastnumberupdate);
            referencefiltercontrast.append(input);

            //referencefiltercontrastnumberset();
        }
        addEventListener("load", referencefiltercontrastnumberload);

        function referencefiltercontrastnumberset()
        {
            const v = referencefiltercontrastnumber.value;

            referencefiltercontrastrange.value = v;
            text.referencebackdropfiltercontrast = v;
        }

        function referencefiltercontrastnumberupdate()
        {
            referencefiltercontrastnumberset();
            svgupdate();
        }

        function referencefiltercontrastrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefiltercontrastrange";
            input.max = referencefiltercontrastnumber.max;
            input.min = referencefiltercontrastnumber.min;
            input.step = referencefiltercontrastnumber.step;
            input.type = "range";
            input.value = referencefiltercontrastnumber.value;
            input.addEventListener("input", referencefiltercontrastrangeupdate);
            referencefiltercontrast.append(input);

            referencefiltercontrastrangeset();
        }
        addEventListener("load", referencefiltercontrastrangeload);

        function referencefiltercontrastrangeset()
        {
            const v = referencefiltercontrastrange.value;

            referencefiltercontrastnumber.value = v;
            text.referencebackdropfiltercontrast = v;
        }

        function referencefiltercontrastrangeupdate()
        {
            referencefiltercontrastrangeset();
            svgupdate();
        }

        function referencefiltercontrastexactload()
        {
            const br = document.createElement("br");
            referencefiltercontrast.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltercontrastexactupdate);
                referencefiltercontrast.append(button);
            }
        }
        addEventListener("load", referencefiltercontrastexactload);

        function referencefiltercontrastexactupdate(e)
        {
            referencefiltercontrastnumber.value = Number(e.target.value);

            referencefiltercontrastnumberupdate();
        }

        function referencefiltercontrastincrementload()
        {
            const br = document.createElement("br");
            referencefiltercontrast.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltercontrastincrementupdate);
                referencefiltercontrast.append(button);
            }
        }
        addEventListener("load", referencefiltercontrastincrementload);

        function referencefiltercontrastincrementupdate(e)
        {
            const v = Number(referencefiltercontrastnumber.value) + Number(e.target.value);

            if((referencefiltercontrastnumber.min <= v) && (v <= referencefiltercontrastnumber.max))
            {
                referencefiltercontrastnumber.value = v;

                referencefiltercontrastnumberupdate();
            }
        }



        function referencefiltergrayscaleload()
        {
            const div = document.createElement("div");
            div.id = "referencefiltergrayscale";
            div.innerHTML = "filter-grayscale";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefiltergrayscaleload);

        function referencefiltergrayscalenumberload()
        {
            const br = document.createElement("br");
            referencefiltergrayscale.append(br);

            const input = document.createElement("input");
            input.id = "referencefiltergrayscalenumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencefiltergrayscalenumberupdate);
            referencefiltergrayscale.append(input);

            //referencefiltergrayscalenumberset();
        }
        addEventListener("load", referencefiltergrayscalenumberload);

        function referencefiltergrayscalenumberset()
        {
            const v = referencefiltergrayscalenumber.value;

            referencefiltergrayscalerange.value = v;
            text.referencebackdropfiltergrayscale = v;
        }

        function referencefiltergrayscalenumberupdate()
        {
            referencefiltergrayscalenumberset();
            svgupdate();
        }

        function referencefiltergrayscalerangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefiltergrayscalerange";
            input.max = referencefiltergrayscalenumber.max;
            input.min = referencefiltergrayscalenumber.min;
            input.step = referencefiltergrayscalenumber.step;
            input.type = "range";
            input.value = referencefiltergrayscalenumber.value;
            input.addEventListener("input", referencefiltergrayscalerangeupdate);
            referencefiltergrayscale.append(input);

            referencefiltergrayscalerangeset();
        }
        addEventListener("load", referencefiltergrayscalerangeload);

        function referencefiltergrayscalerangeset()
        {
            const v = referencefiltergrayscalerange.value;

            referencefiltergrayscalenumber.value = v;
            text.referencebackdropfiltergrayscale = v;
        }

        function referencefiltergrayscalerangeupdate()
        {
            referencefiltergrayscalerangeset();
            svgupdate();
        }

        function referencefiltergrayscaleexactload()
        {
            const br = document.createElement("br");
            referencefiltergrayscale.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltergrayscaleexactupdate);
                referencefiltergrayscale.append(button);
            }
        }
        addEventListener("load", referencefiltergrayscaleexactload);

        function referencefiltergrayscaleexactupdate(e)
        {
            referencefiltergrayscalenumber.value = Number(e.target.value);

            referencefiltergrayscalenumberupdate();
        }

        function referencefiltergrayscaleincrementload()
        {
            const br = document.createElement("br");
            referencefiltergrayscale.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltergrayscaleincrementupdate);
                referencefiltergrayscale.append(button);
            }
        }
        addEventListener("load", referencefiltergrayscaleincrementload);

        function referencefiltergrayscaleincrementupdate(e)
        {
            const v = Number(referencefiltergrayscalenumber.value) + Number(e.target.value);

            if((referencefiltergrayscalenumber.min <= v) && (v <= referencefiltergrayscalenumber.max))
            {
                referencefiltergrayscalenumber.value = v;

                referencefiltergrayscalenumberupdate();
            }
        }



        function referencefilterhuerotateload()
        {
            const div = document.createElement("div");
            div.id = "referencefilterhuerotate";
            div.innerHTML = "filter-hue-rotate";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefilterhuerotateload);

        function referencefilterhuerotatenumberload()
        {
            const br = document.createElement("br");
            referencefilterhuerotate.append(br);

            const input = document.createElement("input");
            input.id = "referencefilterhuerotatenumber";
            input.max = 360;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencefilterhuerotatenumberupdate);
            referencefilterhuerotate.append(input);

            //referencefilterhuerotatenumberset();
        }
        addEventListener("load", referencefilterhuerotatenumberload);

        function referencefilterhuerotatenumberset()
        {
            const v = referencefilterhuerotatenumber.value;

            referencefilterhuerotaterange.value = v;
            text.referencebackdropfilterhuerotate = v;
        }

        function referencefilterhuerotatenumberupdate()
        {
            referencefilterhuerotatenumberset();
            svgupdate();
        }

        function referencefilterhuerotaterangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefilterhuerotaterange";
            input.max = referencefilterhuerotatenumber.max;
            input.min = referencefilterhuerotatenumber.min;
            input.step = referencefilterhuerotatenumber.step;
            input.type = "range";
            input.value = referencefilterhuerotatenumber.value;
            input.addEventListener("input", referencefilterhuerotaterangeupdate);
            referencefilterhuerotate.append(input);

            referencefilterhuerotaterangeset();
        }
        addEventListener("load", referencefilterhuerotaterangeload);

        function referencefilterhuerotaterangeset()
        {
            const v = referencefilterhuerotaterange.value;

            referencefilterhuerotatenumber.value = v;
            text.referencebackdropfilterhuerotate = v;
        }

        function referencefilterhuerotaterangeupdate()
        {
            referencefilterhuerotaterangeset();
            svgupdate();
        }

        function referencefilterhuerotateexactload()
        {
            const br = document.createElement("br");
            referencefilterhuerotate.append(br);

            const array =
            [
                ["0",0],
                ["90",90],
                ["180",180],
                ["270",270],
                ["360",360],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterhuerotateexactupdate);
                referencefilterhuerotate.append(button);
            }
        }
        addEventListener("load", referencefilterhuerotateexactload);

        function referencefilterhuerotateexactupdate(e)
        {
            referencefilterhuerotatenumber.value = Number(e.target.value);

            referencefilterhuerotatenumberupdate();
        }

        function referencefilterhuerotateincrementload()
        {
            const br = document.createElement("br");
            referencefilterhuerotate.append(br);

            const array =
            [
                //["-90",-90],
                ["-45",-45],
                ["-15",-15],
                ["-1",-1],
                ["+1",1],
                ["+15",15],
                ["+45",45],
                //["+90",90],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterhuerotateincrementupdate);
                referencefilterhuerotate.append(button);
            }
        }
        addEventListener("load", referencefilterhuerotateincrementload);

        function referencefilterhuerotateincrementupdate(e)
        {
            const v = Number(referencefilterhuerotatenumber.value) + Number(e.target.value);

            if((referencefilterhuerotatenumber.min <= v) && (v <= referencefilterhuerotatenumber.max))
            {
                referencefilterhuerotatenumber.value = v;

                referencefilterhuerotatenumberupdate();
            }
        }



        function referencefilterinvertload()
        {
            const div = document.createElement("div");
            div.id = "referencefilterinvert";
            div.innerHTML = "filter-invert";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefilterinvertload);

        function referencefilterinvertnumberload()
        {
            const br = document.createElement("br");
            referencefilterinvert.append(br);

            const input = document.createElement("input");
            input.id = "referencefilterinvertnumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencefilterinvertnumberupdate);
            referencefilterinvert.append(input);

            //referencefilterinvertnumberset();
        }
        addEventListener("load", referencefilterinvertnumberload);

        function referencefilterinvertnumberset()
        {
            const v = referencefilterinvertnumber.value;

            referencefilterinvertrange.value = v;
            text.referencebackdropfilterinvert = v;
        }

        function referencefilterinvertnumberupdate()
        {
            referencefilterinvertnumberset();
            svgupdate();
        }

        function referencefilterinvertrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefilterinvertrange";
            input.max = referencefilterinvertnumber.max;
            input.min = referencefilterinvertnumber.min;
            input.step = referencefilterinvertnumber.step;
            input.type = "range";
            input.value = referencefilterinvertnumber.value;
            input.addEventListener("input", referencefilterinvertrangeupdate);
            referencefilterinvert.append(input);

            referencefilterinvertrangeset();
        }
        addEventListener("load", referencefilterinvertrangeload);

        function referencefilterinvertrangeset()
        {
            const v = referencefilterinvertrange.value;

            referencefilterinvertnumber.value = v;
            text.referencebackdropfilterinvert = v;
        }

        function referencefilterinvertrangeupdate()
        {
            referencefilterinvertrangeset();
            svgupdate();
        }

        function referencefilterinvertexactload()
        {
            const br = document.createElement("br");
            referencefilterinvert.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterinvertexactupdate);
                referencefilterinvert.append(button);
            }
        }
        addEventListener("load", referencefilterinvertexactload);

        function referencefilterinvertexactupdate(e)
        {
            referencefilterinvertnumber.value = Number(e.target.value);

            referencefilterinvertnumberupdate();
        }

        function referencefilterinvertincrementload()
        {
            const br = document.createElement("br");
            referencefilterinvert.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterinvertincrementupdate);
                referencefilterinvert.append(button);
            }
        }
        addEventListener("load", referencefilterinvertincrementload);

        function referencefilterinvertincrementupdate(e)
        {
            const v = Number(referencefilterinvertnumber.value) + Number(e.target.value);

            if((referencefilterinvertnumber.min <= v) && (v <= referencefilterinvertnumber.max))
            {
                referencefilterinvertnumber.value = v;

                referencefilterinvertnumberupdate();
            }
        }



        function referencefiltersaturateload()
        {
            const div = document.createElement("div");
            div.id = "referencefiltersaturate";
            div.innerHTML = "filter-saturate";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefiltersaturateload);

        function referencefiltersaturatenumberload()
        {
            const br = document.createElement("br");
            referencefiltersaturate.append(br);

            const input = document.createElement("input");
            input.id = "referencefiltersaturatenumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", referencefiltersaturatenumberupdate);
            referencefiltersaturate.append(input);

            //referencefiltersaturatenumberset();
        }
        addEventListener("load", referencefiltersaturatenumberload);

        function referencefiltersaturatenumberset()
        {
            const v = referencefiltersaturatenumber.value;

            referencefiltersaturaterange.value = v;
            text.referencebackdropfiltersaturate = v;
        }

        function referencefiltersaturatenumberupdate()
        {
            referencefiltersaturatenumberset();
            svgupdate();
        }

        function referencefiltersaturaterangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefiltersaturaterange";
            input.max = referencefiltersaturatenumber.max;
            input.min = referencefiltersaturatenumber.min;
            input.step = referencefiltersaturatenumber.step;
            input.type = "range";
            input.value = referencefiltersaturatenumber.value;
            input.addEventListener("input", referencefiltersaturaterangeupdate);
            referencefiltersaturate.append(input);

            referencefiltersaturaterangeset();
        }
        addEventListener("load", referencefiltersaturaterangeload);

        function referencefiltersaturaterangeset()
        {
            const v = referencefiltersaturaterange.value;

            referencefiltersaturatenumber.value = v;
            text.referencebackdropfiltersaturate = v;
        }

        function referencefiltersaturaterangeupdate()
        {
            referencefiltersaturaterangeset();
            svgupdate();
        }

        function referencefiltersaturateexactload()
        {
            const br = document.createElement("br");
            referencefiltersaturate.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltersaturateexactupdate);
                referencefiltersaturate.append(button);
            }
        }
        addEventListener("load", referencefiltersaturateexactload);

        function referencefiltersaturateexactupdate(e)
        {
            referencefiltersaturatenumber.value = Number(e.target.value);

            referencefiltersaturatenumberupdate();
        }

        function referencefiltersaturateincrementload()
        {
            const br = document.createElement("br");
            referencefiltersaturate.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltersaturateincrementupdate);
                referencefiltersaturate.append(button);
            }
        }
        addEventListener("load", referencefiltersaturateincrementload);

        function referencefiltersaturateincrementupdate(e)
        {
            const v = Number(referencefiltersaturatenumber.value) + Number(e.target.value);

            if((referencefiltersaturatenumber.min <= v) && (v <= referencefiltersaturatenumber.max))
            {
                referencefiltersaturatenumber.value = v;

                referencefiltersaturatenumberupdate();
            }
        }



        function referencefiltersepiaload()
        {
            const div = document.createElement("div");
            div.id = "referencefiltersepia";
            div.innerHTML = "filter-sepia";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefiltersepiaload);

        function referencefiltersepianumberload()
        {
            const br = document.createElement("br");
            referencefiltersepia.append(br);

            const input = document.createElement("input");
            input.id = "referencefiltersepianumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencefiltersepianumberupdate);
            referencefiltersepia.append(input);

            //referencefiltersepianumberset();
        }
        addEventListener("load", referencefiltersepianumberload);

        function referencefiltersepianumberset()
        {
            const v = referencefiltersepianumber.value;

            referencefiltersepiarange.value = v;
            text.referencebackdropfiltersepia = v;
        }

        function referencefiltersepianumberupdate()
        {
            referencefiltersepianumberset();
            svgupdate();
        }

        function referencefiltersepiarangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefiltersepiarange";
            input.max = referencefiltersepianumber.max;
            input.min = referencefiltersepianumber.min;
            input.step = referencefiltersepianumber.step;
            input.type = "range";
            input.value = referencefiltersepianumber.value;
            input.addEventListener("input", referencefiltersepiarangeupdate);
            referencefiltersepia.append(input);

            referencefiltersepiarangeset();
        }
        addEventListener("load", referencefiltersepiarangeload);

        function referencefiltersepiarangeset()
        {
            const v = referencefiltersepiarange.value;

            referencefiltersepianumber.value = v;
            text.referencebackdropfiltersepia = v;
        }

        function referencefiltersepiarangeupdate()
        {
            referencefiltersepiarangeset();
            svgupdate();
        }

        function referencefiltersepiaexactload()
        {
            const br = document.createElement("br");
            referencefiltersepia.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltersepiaexactupdate);
                referencefiltersepia.append(button);
            }
        }
        addEventListener("load", referencefiltersepiaexactload);

        function referencefiltersepiaexactupdate(e)
        {
            referencefiltersepianumber.value = Number(e.target.value);

            referencefiltersepianumberupdate();
        }

        function referencefiltersepiaincrementload()
        {
            const br = document.createElement("br");
            referencefiltersepia.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltersepiaincrementupdate);
                referencefiltersepia.append(button);
            }
        }
        addEventListener("load", referencefiltersepiaincrementload);

        function referencefiltersepiaincrementupdate(e)
        {
            const v = Number(referencefiltersepianumber.value) + Number(e.target.value);

            if((referencefiltersepianumber.min <= v) && (v <= referencefiltersepianumber.max))
            {
                referencefiltersepianumber.value = v;

                referencefiltersepianumberupdate();
            }
        }
//*/



/*
        function referencemargintopload()
        {
            const div = document.createElement("div");
            div.id = "referencemargintop";
            div.innerHTML = "margin-top";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencemargintopload);

        function referencemargintopnumberload()
        {
            const br = document.createElement("br");
            referencemargintop.append(br);

            const input = document.createElement("input");
            input.id = "referencemargintopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencemargintopnumberupdate);
            referencemargintop.append(input);

            //referencemargintopnumberset();
        }
        addEventListener("load", referencemargintopnumberload);

        function referencemargintopnumberset()
        {
            const v = Number(referencemargintopnumber.value);

            referencemargintoprange.value = v;
            text.referencemargintop = v;
        }

        function referencemargintopnumberupdate()
        {
            referencemargintopnumberset();

            svgupdate();
        }

        function referencemargintoprangeload()
        {
            const input = document.createElement("input");
            input.id = "referencemargintoprange";
            input.max = referencemargintopnumber.max;
            input.min = referencemargintopnumber.min;
            input.type = "range";
            input.value = referencemargintopnumber.value;
            input.addEventListener("input", referencemargintoprangeupdate);
            referencemargintop.append(input);

            referencemargintoprangeset();
        }
        addEventListener("load", referencemargintoprangeload);

        function referencemargintoprangeset()
        {
            const v = Number(referencemargintoprange.value);

            referencemargintopnumber.value = v;
            text.referencemargintop = v;
        }

        function referencemargintoprangeupdate()
        {
            referencemargintoprangeset();

            svgupdate();
        }



        function referencemarginbottomload()
        {
            const div = document.createElement("div");
            div.id = "referencemarginbottom";
            div.innerHTML = "margin-bottom";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencemarginbottomload);

        function referencemarginbottomnumberload()
        {
            const br = document.createElement("br");
            referencemarginbottom.append(br);

            const input = document.createElement("input");
            input.id = "referencemarginbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencemarginbottomnumberupdate);
            referencemarginbottom.append(input);

            //referencemarginbottomnumberset();
        }
        addEventListener("load", referencemarginbottomnumberload);

        function referencemarginbottomnumberset()
        {
            const v = Number(referencemarginbottomnumber.value);

            referencemarginbottomrange.value = v;
            text.referencemarginbottom = v;
        }

        function referencemarginbottomnumberupdate()
        {
            referencemarginbottomnumberset();

            svgupdate();
        }

        function referencemarginbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencemarginbottomrange";
            input.max = referencemarginbottomnumber.max;
            input.min = referencemarginbottomnumber.min;
            input.type = "range";
            input.value = referencemarginbottomnumber.value;
            input.addEventListener("input", referencemarginbottomrangeupdate);
            referencemarginbottom.append(input);

            referencemarginbottomrangeset();
        }
        addEventListener("load", referencemarginbottomrangeload);

        function referencemarginbottomrangeset()
        {
            const v = Number(referencemarginbottomrange.value);

            referencemarginbottomnumber.value = v;
            text.referencemarginbottom = v;
        }

        function referencemarginbottomrangeupdate()
        {
            referencemarginbottomrangeset();

            svgupdate();
        }



        function referencemarginleftload()
        {
            const div = document.createElement("div");
            div.id = "referencemarginleft";
            div.innerHTML = "margin-left";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencemarginleftload);

        function referencemarginleftnumberload()
        {
            const br = document.createElement("br");
            referencemarginleft.append(br);

            const input = document.createElement("input");
            input.id = "referencemarginleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencemarginleftnumberupdate);
            referencemarginleft.append(input);

            //referencemarginleftnumberset();
        }
        addEventListener("load", referencemarginleftnumberload);

        function referencemarginleftnumberset()
        {
            const v = Number(referencemarginleftnumber.value);

            referencemarginleftrange.value = v;
            text.referencemarginleft = v;
        }

        function referencemarginleftnumberupdate()
        {
            referencemarginleftnumberset();

            svgupdate();
        }

        function referencemarginleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencemarginleftrange";
            input.max = referencemarginleftnumber.max;
            input.min = referencemarginleftnumber.min;
            input.type = "range";
            input.value = referencemarginleftnumber.value;
            input.addEventListener("input", referencemarginleftrangeupdate);
            referencemarginleft.append(input);

            referencemarginleftrangeset();
        }
        addEventListener("load", referencemarginleftrangeload);

        function referencemarginleftrangeset()
        {
            const v = Number(referencemarginleftrange.value);

            referencemarginleftnumber.value = v;
            text.referencemarginleft = v;
        }

        function referencemarginleftrangeupdate()
        {
            referencemarginleftrangeset();

            svgupdate();
        }



        function referencemarginrightload()
        {
            const div = document.createElement("div");
            div.id = "referencemarginright";
            div.innerHTML = "margin-right";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencemarginrightload);

        function referencemarginrightnumberload()
        {
            const br = document.createElement("br");
            referencemarginright.append(br);

            const input = document.createElement("input");
            input.id = "referencemarginrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencemarginrightnumberupdate);
            referencemarginright.append(input);

            //referencemarginrightnumberset();
        }
        addEventListener("load", referencemarginrightnumberload);

        function referencemarginrightnumberset()
        {
            const v = Number(referencemarginrightnumber.value);

            referencemarginrightrange.value = v;
            text.referencemarginright = v;
        }

        function referencemarginrightnumberupdate()
        {
            referencemarginrightnumberset();

            svgupdate();
        }

        function referencemarginrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencemarginrightrange";
            input.max = referencemarginrightnumber.max;
            input.min = referencemarginrightnumber.min;
            input.type = "range";
            input.value = referencemarginrightnumber.value;
            input.addEventListener("input", referencemarginrightrangeupdate);
            referencemarginright.append(input);

            referencemarginrightrangeset();
        }
        addEventListener("load", referencemarginrightrangeload);

        function referencemarginrightrangeset()
        {
            const v = Number(referencemarginrightrange.value);

            referencemarginrightnumber.value = v;
            text.referencemarginright = v;
        }

        function referencemarginrightrangeupdate()
        {
            referencemarginrightrangeset();

            svgupdate();
        }



        function referencepaddingtopload()
        {
            const div = document.createElement("div");
            div.id = "referencepaddingtop";
            div.innerHTML = "padding-top";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencepaddingtopload);

        function referencepaddingtopnumberload()
        {
            const br = document.createElement("br");
            referencepaddingtop.append(br);

            const input = document.createElement("input");
            input.id = "referencepaddingtopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencepaddingtopnumberupdate);
            referencepaddingtop.append(input);

            //referencepaddingtopnumberset();
        }
        addEventListener("load", referencepaddingtopnumberload);

        function referencepaddingtopnumberset()
        {
            const v = Number(referencepaddingtopnumber.value);

            referencepaddingtoprange.value = v;
            text.referencepaddingtop = v;
        }

        function referencepaddingtopnumberupdate()
        {
            referencepaddingtopnumberset();

            svgupdate();
        }

        function referencepaddingtoprangeload()
        {
            const input = document.createElement("input");
            input.id = "referencepaddingtoprange";
            input.max = referencepaddingtopnumber.max;
            input.min = referencepaddingtopnumber.min;
            input.type = "range";
            input.value = referencepaddingtopnumber.value;
            input.addEventListener("input", referencepaddingtoprangeupdate);
            referencepaddingtop.append(input);

            referencepaddingtoprangeset();
        }
        addEventListener("load", referencepaddingtoprangeload);

        function referencepaddingtoprangeset()
        {
            const v = Number(referencepaddingtoprange.value);

            referencepaddingtopnumber.value = v;
            text.referencepaddingtop = v;
        }

        function referencepaddingtoprangeupdate()
        {
            referencepaddingtoprangeset();

            svgupdate();
        }



        function referencepaddingbottomload()
        {
            const div = document.createElement("div");
            div.id = "referencepaddingbottom";
            div.innerHTML = "padding-bottom";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencepaddingbottomload);

        function referencepaddingbottomnumberload()
        {
            const br = document.createElement("br");
            referencepaddingbottom.append(br);

            const input = document.createElement("input");
            input.id = "referencepaddingbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencepaddingbottomnumberupdate);
            referencepaddingbottom.append(input);

            //referencepaddingbottomnumberset();
        }
        addEventListener("load", referencepaddingbottomnumberload);

        function referencepaddingbottomnumberset()
        {
            const v = Number(referencepaddingbottomnumber.value);

            referencepaddingbottomrange.value = v;
            text.referencepaddingbottom = v;
        }

        function referencepaddingbottomnumberupdate()
        {
            referencepaddingbottomnumberset();

            svgupdate();
        }

        function referencepaddingbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencepaddingbottomrange";
            input.max = referencepaddingbottomnumber.max;
            input.min = referencepaddingbottomnumber.min;
            input.type = "range";
            input.value = referencepaddingbottomnumber.value;
            input.addEventListener("input", referencepaddingbottomrangeupdate);
            referencepaddingbottom.append(input);

            referencepaddingbottomrangeset();
        }
        addEventListener("load", referencepaddingbottomrangeload);

        function referencepaddingbottomrangeset()
        {
            const v = Number(referencepaddingbottomrange.value);

            referencepaddingbottomnumber.value = v;
            text.referencepaddingbottom = v;
        }

        function referencepaddingbottomrangeupdate()
        {
            referencepaddingbottomrangeset();

            svgupdate();
        }



        function referencepaddingleftload()
        {
            const div = document.createElement("div");
            div.id = "referencepaddingleft";
            div.innerHTML = "padding-left";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencepaddingleftload);

        function referencepaddingleftnumberload()
        {
            const br = document.createElement("br");
            referencepaddingleft.append(br);

            const input = document.createElement("input");
            input.id = "referencepaddingleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencepaddingleftnumberupdate);
            referencepaddingleft.append(input);

            //referencepaddingleftnumberset();
        }
        addEventListener("load", referencepaddingleftnumberload);

        function referencepaddingleftnumberset()
        {
            const v = Number(referencepaddingleftnumber.value);

            referencepaddingleftrange.value = v;
            text.referencepaddingleft = v;
        }

        function referencepaddingleftnumberupdate()
        {
            referencepaddingleftnumberset();

            svgupdate();
        }

        function referencepaddingleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencepaddingleftrange";
            input.max = referencepaddingleftnumber.max;
            input.min = referencepaddingleftnumber.min;
            input.type = "range";
            input.value = referencepaddingleftnumber.value;
            input.addEventListener("input", referencepaddingleftrangeupdate);
            referencepaddingleft.append(input);

            referencepaddingleftrangeset();
        }
        addEventListener("load", referencepaddingleftrangeload);


        function referencepaddingleftrangeset()
        {
            const v = Number(referencepaddingleftrange.value);

            referencepaddingleftnumber.value = v;
            text.referencepaddingleft = v;
        }

        function referencepaddingleftrangeupdate()
        {
            referencepaddingleftrangeset();

            svgupdate();
        }



        function referencepaddingrightload()
        {
            const div = document.createElement("div");
            div.id = "referencepaddingright";
            div.innerHTML = "padding-right";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencepaddingrightload);

        function referencepaddingrightnumberload()
        {
            const br = document.createElement("br");
            referencepaddingright.append(br);

            const input = document.createElement("input");
            input.id = "referencepaddingrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencepaddingrightnumberupdate);
            referencepaddingright.append(input);

            //referencepaddingrightnumberset();
        }
        addEventListener("load", referencepaddingrightnumberload);

        function referencepaddingrightnumberset()
        {
            const v = Number(referencepaddingrightnumber.value);

            referencepaddingrightrange.value = v;
            text.referencepaddingright = v;
        }

        function referencepaddingrightnumberupdate()
        {
            referencepaddingrightnumberset();

            svgupdate();
        }

        function referencepaddingrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencepaddingrightrange";
            input.max = referencepaddingrightnumber.max;
            input.min = referencepaddingrightnumber.min;
            input.type = "range";
            input.value = referencepaddingrightnumber.value;
            input.addEventListener("input", referencepaddingrightrangeupdate);
            referencepaddingright.append(input);

            referencepaddingrightrangeset();
        }
        addEventListener("load", referencepaddingrightrangeload);

        function referencepaddingrightrangeset()
        {
            const v = Number(referencepaddingrightrange.value);

            referencepaddingrightnumber.value = v;
            text.referencepaddingright = v;
        }

        function referencepaddingrightrangeupdate()
        {
            referencepaddingrightrangeset();

            svgupdate();
        }
//*/






        function passagewidthload()
        {
            const div = document.createElement("div");
            div.id = "passagewidth";
            div.innerHTML = "width";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagewidthload);

        function passagewidthnumberload()
        {
            const br = document.createElement("br");
            passagewidth.append(br);

            const input = document.createElement("input");
            input.id = "passagewidthnumber";
            input.max = maxwidth;
            input.min = 0;
            input.type = "number";
            input.value = canvas.width - 100;
            input.addEventListener("input", passagewidthnumberupdate);
            passagewidth.append(input);

            //passagewidthnumberset();
        }
        addEventListener("load", passagewidthnumberload);

        function passagewidthnumberset()
        {
            const v = Number(passagewidthnumber.value);

            passagewidthrange.value = v;
            text.passagewidth = v;
        }

        function passagewidthnumberupdate()
        {
            passagewidthnumberset();
            svgupdate();
        }

        function passagewidthrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagewidthrange";
            input.max = passagewidthnumber.max;
            input.min = passagewidthnumber.min;
            input.type = "range";
            input.value = passagewidthnumber.value;
            input.addEventListener("input", passagewidthrangeupdate);
            passagewidth.append(input);

            passagewidthrangeset();
        }
        addEventListener("load", passagewidthrangeload);

        function passagewidthrangeset()
        {
            const v = Number(passagewidthrange.value);

            passagewidthnumber.value = v;
            text.passagewidth = v;
        }

        function passagewidthrangeupdate()
        {
            passagewidthrangeset();
            svgupdate();
        }

        function passagewidthexactload()
        {
            const br = document.createElement("br");
            passagewidth.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagewidthexactupdate);
                passagewidth.append(button);
            }
        }
        addEventListener("load", passagewidthexactload);

        function passagewidthexactupdate(e)
        {
            passagewidthnumber.value = canvas.width * Number(e.target.value);

            passagewidthnumberupdate();
        }

        function passagewidthincrementload()
        {
            const br = document.createElement("br");
            passagewidth.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagewidthincrementupdate);
                passagewidth.append(button);
            }
        }
        addEventListener("load", passagewidthincrementload);

        function passagewidthincrementupdate(e)
        {
            const v = Number(passagewidthnumber.value) + Number(e.target.value);

            if((passagewidthnumber.min <= v) && (v <= passagewidthnumber.max))
            {
                passagewidthnumber.value = v;

                passagewidthnumberupdate();
            }
        }



        function passageheightload()
        {
            const div = document.createElement("div");
            div.id = "passageheight";
            div.innerHTML = "height";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passageheightload);

        function passageheightnumberload()
        {
            const br = document.createElement("br");
            passageheight.append(br);

            const input = document.createElement("input");
            input.id = "passageheightnumber";
            input.max = maxheight;
            input.min = 0;
            input.type = "number";
            input.value = 300;
            input.addEventListener("input", passageheightnumberupdate);
            passageheight.append(input);

            //passageheightnumberset();
        }
        addEventListener("load", passageheightnumberload);

        function passageheightnumberset()
        {
            const v = Number(passageheightnumber.value);

            passageheightrange.value = v;
            text.passageheight = v;
        }

        function passageheightnumberupdate()
        {
            passageheightnumberset();
            svgupdate();
        }

        function passageheightrangeload()
        {
            const input = document.createElement("input");
            input.id = "passageheightrange";
            input.max = passageheightnumber.max;
            input.min = passageheightnumber.min;
            input.type = "range";
            input.value = passageheightnumber.value;
            input.addEventListener("input", passageheightrangeupdate);
            passageheight.append(input);

            passageheightrangeset();
        }
        addEventListener("load", passageheightrangeload);

        function passageheightrangeset()
        {
            const v = Number(passageheightrange.value);

            passageheightnumber.value = v;
            text.passageheight = v;
        }

        function passageheightrangeupdate()
        {
            passageheightrangeset();
            svgupdate();
        }

        function passageheightexactload()
        {
            const br = document.createElement("br");
            passageheight.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageheightexactupdate);
                passageheight.append(button);
            }
        }
        addEventListener("load", passageheightexactload);

        function passageheightexactupdate(e)
        {
            passageheightnumber.value = canvas.height * Number(e.target.value);

            passageheightnumberupdate();
        }

        function passageheightincrementload()
        {
            const br = document.createElement("br");
            passageheight.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageheightincrementupdate);
                passageheight.append(button);
            }
        }
        addEventListener("load", passageheightincrementload);

        function passageheightincrementupdate(e)
        {
            const v = Number(passageheightnumber.value) + Number(e.target.value);

            if((passageheightnumber.min <= v) && (v <= passageheightnumber.max))
            {
                passageheightnumber.value = v;

                passageheightnumberupdate();
            }
        }



        function passagexload()
        {
            const div = document.createElement("div");
            div.id = "passagex";
            div.innerHTML = "x";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagexload);

        function passagexnumberload()
        {
            const br = document.createElement("br");
            passagex.append(br);

            const input = document.createElement("input");
            input.id = "passagexnumber";
            input.max = maxwidth;
            input.min = -maxwidth;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", passagexnumberupdate);
            passagex.append(input);

            //passagexnumberset();
        }
        addEventListener("load", passagexnumberload);

        function passagexnumberset()
        {
            const v = Number(passagexnumber.value);

            passagexrange.value = v;
            text.passagex = v;
        }

        function passagexnumberupdate()
        {
            passagexnumberset();
            svgupdate();
        }

        function passagexrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagexrange";
            input.max = passagexnumber.max;
            input.min = passagexnumber.min;
            input.type = "range";
            input.value = passagexnumber.value;
            input.addEventListener("input", passagexrangeupdate);
            passagex.append(input);

            passagexrangeset();
        }
        addEventListener("load", passagexrangeload);

        function passagexrangeset()
        {
            const v = Number(passagexrange.value);

            passagexnumber.value = v;
            text.passagex = v;
        }

        function passagexrangeupdate()
        {
            passagexrangeset();
            svgupdate();
        }

        function passagexexactload()
        {
            const br = document.createElement("br");
            passagex.append(br);

            const array =
            [
                ["left",0],
                ["center",0.5],
                ["right",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagexexactupdate);
                passagex.append(button);
            }
        }
        addEventListener("load", passagexexactload);

        function passagexexactupdate(e)
        {
            //passagexnumber.value = (canvas.width - text.passagewidth - text.passagepaddingleft - text.passagepaddingright) * Number(e.target.value);
            passagexnumber.value = (canvas.width - text.passagewidth) * Number(e.target.value);

            passagexnumberupdate();
        }

        function passagexincrementload()
        {
            const br = document.createElement("br");
            passagex.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagexincrementupdate);
                passagex.append(button);
            }
        }
        addEventListener("load", passagexincrementload);

        function passagexincrementupdate(e)
        {
            const v = Number(passagexnumber.value) + Number(e.target.value);

            if((passagexnumber.min <= v) && (v <= passagexnumber.max))
            {
                passagexnumber.value = v;

                passagexnumberupdate();
            }
        }



        function passageyload()
        {
            const div = document.createElement("div");
            div.id = "passagey";
            div.innerHTML = "y";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passageyload);

        function passageynumberload()
        {
            const br = document.createElement("br");
            passagey.append(br);

            const input = document.createElement("input");
            input.id = "passageynumber";
            input.max = maxheight;
            input.min = -maxheight;
            input.type = "number";
            input.value = 730;
            input.addEventListener("input", passageynumberupdate);
            passagey.append(input);

            //passageynumberset();
        }
        addEventListener("load", passageynumberload);

        function passageynumberset()
        {
            const v = Number(passageynumber.value);

            passageyrange.value = v;
            text.passagey = v;
        }

        function passageynumberupdate()
        {
            passageynumberset();
            svgupdate();
        }

        function passageyrangeload()
        {
            const input = document.createElement("input");
            input.id = "passageyrange";
            input.max = passageynumber.max;
            input.min = passageynumber.min;
            input.type = "range";
            input.value = passageynumber.value;
            input.addEventListener("input", passageyrangeupdate);
            passagey.append(input);

            passageyrangeset();
        }
        addEventListener("load", passageyrangeload);

        function passageyrangeset()
        {
            const v = Number(passageyrange.value);

            passageynumber.value = v;
            text.passagey = v;
        }

        function passageyrangeupdate()
        {
            passageyrangeset();
            svgupdate();
        }

        function passageyexactload()
        {
            const br = document.createElement("br");
            passagey.append(br);

            const array =
            [
                ["top",0],
                ["center",0.5],
                ["bottom",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageyexactupdate);
                passagey.append(button);
            }
        }
        addEventListener("load", passageyexactload);

        function passageyexactupdate(e)
        {
            //passageynumber.value = (canvas.height - text.passageheight - text.passagepaddingtop - text.passagepaddingbottom) * Number(e.target.value);
            passageynumber.value = (canvas.height - text.passageheight) * Number(e.target.value);

            passageynumberupdate();
        }

        function passageyincrementload()
        {
            const br = document.createElement("br");
            passagey.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageyincrementupdate);
                passagey.append(button);
            }
        }
        addEventListener("load", passageyincrementload);

        function passageyincrementupdate(e)
        {
            const v = Number(passageynumber.value) + Number(e.target.value);

            if((passageynumber.min <= v) && (v <= passageynumber.max))
            {
                passageynumber.value = v;

                passageynumberupdate();
            }
        }



        function passagebackgroundcolorload()
        {
            const div = document.createElement("div");
            div.id = "passagebackgroundcolor";
            div.innerHTML = "background-color";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagebackgroundcolorload);

        function passagebackgroundcolorcolorload()
        {
            const br = document.createElement("br");
            passagebackgroundcolor.append(br);

            const input = document.createElement("input");
            input.id = "passagebackgroundcolorcolor";
            input.type = "color";
            input.value = "#ffffff";
            input.addEventListener("input", passagebackgroundcolorcolorupdate);
            passagebackgroundcolor.append(input);

            //passagebackgroundcolorcolorset();
        }
        addEventListener("load", passagebackgroundcolorcolorload);

        function passagebackgroundcolorcolorset()
        {
            const c = passagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passagebackgroundalphanumber.value;

            text.passagebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passagebackgroundcolorcolorupdate()
        {
            passagebackgroundcolorcolorset();
            svgupdate();
        }

        function passagebackgroundcolorexactload()
        {
            const br = document.createElement("br");
            passagebackgroundcolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagebackgroundcolorexactupdate);
                passagebackgroundcolor.append(button);
            }
        }
        addEventListener("load", passagebackgroundcolorexactload);

        function passagebackgroundcolorexactupdate(e)
        {
            passagebackgroundcolorcolor.value = e.target.value;

            passagebackgroundcolorcolorupdate();
        }



        function passagebackgroundalphaload()
        {
            const div = document.createElement("div");
            div.id = "passagebackgroundalpha";
            div.innerHTML = "background-alpha";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagebackgroundalphaload);

        function passagebackgroundalphanumberload()
        {
            const br = document.createElement("br");
            passagebackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "passagebackgroundalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 0.5;
            input.addEventListener("input", passagebackgroundalphanumberupdate);
            passagebackgroundalpha.append(input);

            //passagebackgroundalphanumberset();
        }
        addEventListener("load", passagebackgroundalphanumberload);

        function passagebackgroundalphanumberset()
        {
            const c = passagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passagebackgroundalphanumber.value;

            passagebackgroundalpharange.value = a;
            text.passagebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passagebackgroundalphanumberupdate()
        {
            passagebackgroundalphanumberset();
            svgupdate();
        }

        function passagebackgroundalpharangeload()
        {
            const input = document.createElement("input");
            input.id = "passagebackgroundalpharange";
            input.max = passagebackgroundalphanumber.max;
            input.min = passagebackgroundalphanumber.min;
            input.step = passagebackgroundalphanumber.step;
            input.type = "range";
            input.value = passagebackgroundalphanumber.value;
            input.addEventListener("input", passagebackgroundalpharangeupdate);
            passagebackgroundalpha.append(input);

            passagebackgroundalpharangeset();
        }
        addEventListener("load", passagebackgroundalpharangeload);

        function passagebackgroundalpharangeset()
        {
            const c = passagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passagebackgroundalpharange.value;

            passagebackgroundalphanumber.value = a;
            text.passagebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passagebackgroundalpharangeupdate()
        {
            passagebackgroundalpharangeset();
            svgupdate();
        }

        function passagebackgroundalphaexactload()
        {
            const br = document.createElement("br");
            passagebackgroundalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagebackgroundalphaexactupdate);
                passagebackgroundalpha.append(button);
            }
        }
        addEventListener("load", passagebackgroundalphaexactload);

        function passagebackgroundalphaexactupdate(e)
        {
            passagebackgroundalphanumber.value = Number(e.target.value);

            passagebackgroundalphanumberupdate();
        }

        function passagebackgroundalphaincrementload()
        {
            const br = document.createElement("br");
            passagebackgroundalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagebackgroundalphaincrementupdate);
                passagebackgroundalpha.append(button);
            }
        }
        addEventListener("load", passagebackgroundalphaincrementload);

        function passagebackgroundalphaincrementupdate(e)
        {
            let v = Number(passagebackgroundalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((passagebackgroundalphanumber.min <= v) && (v <= passagebackgroundalphanumber.max))
            {
                passagebackgroundalphanumber.value = v;

                passagebackgroundalphanumberupdate();
            }
        }



        function passagebordercolorload()
        {
            const div = document.createElement("div");
            div.id = "passagebordercolor";
            div.innerHTML = "border-color";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagebordercolorload);

        function passagebordercolorcolorload()
        {
            const br = document.createElement("br");
            passagebordercolor.append(br);

            const input = document.createElement("input");
            input.id = "passagebordercolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", passagebordercolorcolorupdate);
            passagebordercolor.append(input);

            //passagebordercolorcolorset();
        }
        addEventListener("load", passagebordercolorcolorload);

        function passagebordercolorcolorset()
        {
            const c = passagebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passageborderalphanumber.value;

            text.passagebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passagebordercolorcolorupdate()
        {
            passagebordercolorcolorset();
            svgupdate();
        }

        function passagebordercolorexactload()
        {
            const br = document.createElement("br");
            passagebordercolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagebordercolorexactupdate);
                passagebordercolor.append(button);
            }
        }
        addEventListener("load", passagebordercolorexactload);

        function passagebordercolorexactupdate(e)
        {
            passagebordercolorcolor.value = e.target.value;

            passagebordercolorcolorupdate();
        }



        function passageborderalphaload()
        {
            const div = document.createElement("div");
            div.id = "passageborderalpha";
            div.innerHTML = "border-alpha";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passageborderalphaload);

        function passageborderalphanumberload()
        {
            const br = document.createElement("br");
            passageborderalpha.append(br);

            const input = document.createElement("input");
            input.id = "passageborderalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", passageborderalphanumberupdate);
            passageborderalpha.append(input);

            //passageborderalphanumberset();
        }
        addEventListener("load", passageborderalphanumberload);

        function passageborderalphanumberset()
        {
            const c = passagebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passageborderalphanumber.value;

            passageborderalpharange.value = a;
            text.passagebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passageborderalphanumberupdate()
        {
            passageborderalphanumberset();
            svgupdate();
        }

        function passageborderalpharangeload()
        {
            const input = document.createElement("input");
            input.id = "passageborderalpharange";
            input.max = passageborderalphanumber.max;
            input.min = passageborderalphanumber.min;
            input.step = passageborderalphanumber.step;
            input.type = "range";
            input.value = passageborderalphanumber.value;
            input.addEventListener("input", passageborderalpharangeupdate);
            passageborderalpha.append(input);

            passageborderalpharangeset();
        }
        addEventListener("load", passageborderalpharangeload);

        function passageborderalpharangeset()
        {
            const c = passagebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passageborderalpharange.value;

            passageborderalphanumber.value = a;
            text.passagebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passageborderalpharangeupdate()
        {
            passageborderalpharangeset();
            svgupdate();
        }

        function passageborderalphaexactload()
        {
            const br = document.createElement("br");
            passageborderalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageborderalphaexactupdate);
                passageborderalpha.append(button);
            }
        }
        addEventListener("load", passageborderalphaexactload);

        function passageborderalphaexactupdate(e)
        {
            passageborderalphanumber.value = Number(e.target.value);

            passageborderalphanumberupdate();
        }

        function passageborderalphaincrementload()
        {
            const br = document.createElement("br");
            passageborderalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageborderalphaincrementupdate);
                passageborderalpha.append(button);
            }
        }
        addEventListener("load", passageborderalphaincrementload);

        function passageborderalphaincrementupdate(e)
        {
            let v = Number(passageborderalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((passageborderalphanumber.min <= v) && (v <= passageborderalphanumber.max))
            {
                passageborderalphanumber.value = v;

                passageborderalphanumberupdate();
            }
        }



        function passageborderradiusload()
        {
            const div = document.createElement("div");
            div.id = "passageborderradius";
            div.innerHTML = "border-radius";
            tabconten
10000
tpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passageborderradiusload);

        function passageborderradiusnumberload()
        {
            const br = document.createElement("br");
            passageborderradius.append(br);

            const input = document.createElement("input");
            input.id = "passageborderradiusnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", passageborderradiusnumberupdate);
            passageborderradius.append(input);

            //passageborderradiusnumberset();
        }
        addEventListener("load", passageborderradiusnumberload);

        function passageborderradiusnumberset()
        {
            const v = Number(passageborderradiusnumber.value);

            passageborderradiusrange.value = v;
            text.passageborderradius = v;
        }

        function passageborderradiusnumberupdate()
        {
            passageborderradiusnumberset();
            svgupdate();
        }

        function passageborderradiusrangeload()
        {
            const input = document.createElement("input");
            input.id = "passageborderradiusrange";
            input.max = passageborderradiusnumber.max;
            input.min = passageborderradiusnumber.min;
            input.type = "range";
            input.value = passageborderradiusnumber.value;
            input.addEventListener("input", passageborderradiusrangeupdate);
            passageborderradius.append(input);

            passageborderradiusrangeset();
        }
        addEventListener("load", passageborderradiusrangeload);

        function passageborderradiusrangeset()
        {
            const v = Number(passageborderradiusrange.value);

            passageborderradiusnumber.value = v;
            text.passageborderradius = v;
        }

        function passageborderradiusrangeupdate()
        {
            passageborderradiusrangeset();
            svgupdate();
        }

        function passageborderradiusexactload()
        {
            const br = document.createElement("br");
            passageborderradius.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageborderradiusexactupdate);
                passageborderradius.append(button);
            }
        }
        addEventListener("load", passageborderradiusexactload);

        function passageborderradiusexactupdate(e)
        {
            passageborderradiusnumber.value = Number(e.target.value);

            passageborderradiusnumberupdate();
        }

        function passageborderradiusincrementload()
        {
            const br = document.createElement("br");
            passageborderradius.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageborderradiusincrementupdate);
                passageborderradius.append(button);
            }
        }
        addEventListener("load", passageborderradiusincrementload);

        function passageborderradiusincrementupdate(e)
        {
            const v = Number(passageborderradiusnumber.value) + Number(e.target.value);

            if((passageborderradiusnumber.min <= v) && (v <= passageborderradiusnumber.max))
            {
                passageborderradiusnumber.value = v;

                passageborderradiusnumberupdate();
            }
        }



        function passageborderstyleload()
        {
            const div = document.createElement("div");
            div.id = "passageborderstyle";
            div.innerHTML = "border-style";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passageborderstyleload);

        function passageborderstyleselectload()
        {
            const br = document.createElement("br");
            passageborderstyle.append(br);

            const select = document.createElement("select");
            select.id = "passageborderstyleselect";
            select.addEventListener("input", passageborderstyleselectupdate);
            passageborderstyle.append(select);

            for(const value of borderstylearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            //select.value = borderstylearray[8];

            passageborderstyleselectset();
        }
        addEventListener("load", passageborderstyleselectload);

        function passageborderstyleselectset()
        {
            text.passageborderstyle = passageborderstyleselect.value;
        }

        function passageborderstyleselectupdate()
        {
            passageborderstyleselectset();
            svgupdate();
        }



        function passageborderwidthload()
        {
            const div = document.createElement("div");
            div.id = "passageborderwidth";
            div.innerHTML = "border-width";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passageborderwidthload);

        function passageborderwidthnumberload()
        {
            const br = document.createElement("br");
            passageborderwidth.append(br);

            const input = document.createElement("input");
            input.id = "passageborderwidthnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 25;
            input.addEventListener("input", passageborderwidthnumberupdate);
            passageborderwidth.append(input);

            //passageborderwidthnumberset();
        }
        addEventListener("load", passageborderwidthnumberload);

        function passageborderwidthnumberset()
        {
            const v = Number(passageborderwidthnumber.value);

            passageborderwidthrange.value = v;
            text.passageborderwidth = v;
        }

        function passageborderwidthnumberupdate()
        {
            passageborderwidthnumberset();
            svgupdate();
        }

        function passageborderwidthrangeload()
        {
            const input = document.createElement("input");
            input.id = "passageborderwidthrange";
            input.max = passageborderwidthnumber.max;
            input.min = passageborderwidthnumber.min;
            input.type = "range";
            input.value = passageborderwidthnumber.value;
            input.addEventListener("input", passageborderwidthrangeupdate);
            passageborderwidth.append(input);

            passageborderwidthrangeset();
        }
        addEventListener("load", passageborderwidthrangeload);

        function passageborderwidthrangeset()
        {
            const v = Number(passageborderwidthrange.value);

            passageborderwidthnumber.value = v;
            text.passageborderwidth = v;
        }

        function passageborderwidthrangeupdate()
        {
            passageborderwidthrangeset();
            svgupdate();
        }

        function passageborderwidthexactload()
        {
            const br = document.createElement("br");
            passageborderwidth.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageborderwidthexactupdate);
                passageborderwidth.append(button);
            }
        }
        addEventListener("load", passageborderwidthexactload);

        function passageborderwidthexactupdate(e)
        {
            passageborderwidthnumber.value = Number(e.target.value);

            passageborderwidthnumberupdate();
        }

        function passageborderwidthincrementload()
        {
            const br = document.createElement("br");
            passageborderwidth.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageborderwidthincrementupdate);
                passageborderwidth.append(button);
            }
        }
        addEventListener("load", passageborderwidthincrementload);

        function passageborderwidthincrementupdate(e)
        {
            const v = Number(passageborderwidthnumber.value) + Number(e.target.value);

            if((passageborderwidthnumber.min <= v) && (v <= passageborderwidthnumber.max))
            {
                passageborderwidthnumber.value = v;

                passageborderwidthnumberupdate();
            }
        }



        function passagehorizontalload()
        {
            const div = document.createElement("div");
            div.id = "passagehorizontal";
            div.innerHTML = "horizontal";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagehorizontalload);

        function passagehorizontalselectload()
        {
            const br = document.createElement("br");
            passagehorizontal.append(br);

            const select = document.createElement("select");
            select.id = "passagehorizontalselect";
            select.addEventListener("input", passagehorizontalselectupdate);
            passagehorizontal.append(select);

            for(const value of horizontalarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            select.value = horizontalarray[1];

            passagehorizontalselectset();
        }
        addEventListener("load", passagehorizontalselectload);

        function passagehorizontalselectset()
        {
            text.passagehorizontal = passagehorizontalselect.value;
        }

        function passagehorizontalselectupdate()
        {
            passagehorizontalselectset();
            svgupdate();
        }



        function passageverticalload()
        {
            const div = document.createElement("div");
            div.id = "passagevertical";
            div.innerHTML = "vertical";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passageverticalload);

        function passageverticalselectload()
        {
            const br = document.createElement("br");
            passagevertical.append(br);

            const select = document.createElement("select");
            select.id = "passageverticalselect";
            select.addEventListener("input", passageverticalselectupdate);
            passagevertical.append(select);

            for(const value of verticalarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            select.value = verticalarray[1];

            passageverticalselectset();
        }
        addEventListener("load", passageverticalselectload);

        function passageverticalselectset()
        {
            text.passagevertical = passageverticalselect.value;
        }

        function passageverticalselectupdate()
        {
            passageverticalselectset();
            svgupdate();
        }



        function passagewritingmodeload()
        {
            const div = document.createElement("div");
            div.id = "passagewritingmode";
            div.innerHTML = "writing-mode";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagewritingmodeload);

        function passagewritingmodeselectload()
        {
            const br = document.createElement("br");
            passagewritingmode.append(br);

            const select = document.createElement("select");
            select.id = "passagewritingmodeselect";
            select.addEventListener("input", passagewritingmodeselectupdate);
            passagewritingmode.append(select);

            for(const value of writingmodearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            passagewritingmodeselectset();
        }
        addEventListener("load", passagewritingmodeselectload);

        function passagewritingmodeselectset()
        {
            text.passagewritingmode = passagewritingmodeselect.value;
        }

        function passagewritingmodeselectupdate()
        {
            passagewritingmodeselectset();
            svgupdate();
        }



        function passagefontfamilyload()
        {
            const div = document.createElement("div");
            div.id = "passagefontfamily";
            div.innerHTML = "font-family";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagefontfamilyload);

        function passagefontfamilyselectload()
        {
            const br = document.createElement("br");
            passagefontfamily.append(br);

            const select = document.createElement("select");
            select.id = "passagefontfamilyselect";
            select.addEventListener("input", passagefontfamilyselectupdate);
            passagefontfamily.append(select);

            for(const value of fontfamilyarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            passagefontfamilyselectset();
        }
        addEventListener("load", passagefontfamilyselectload);

        function passagefontfamilyselectset()
        {
            text.passagefontfamily = passagefontfamilyselect.value;
        }

        function passagefontfamilyselectupdate()
        {
            passagefontfamilyselectset();
            svgupdate();
        }



        function passagefontsizeload()
        {
            const div = document.createElement("div");
            div.id = "passagefontsize";
            div.innerHTML = "font-size";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagefontsizeload);

        function passagefontsizenumberload()
        {
            const br = document.createElement("br");
            passagefontsize.append(br);

            const input = document.createElement("input");
            input.id = "passagefontsizenumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 60;
            input.addEventListener("input", passagefontsizenumberupdate);
            passagefontsize.append(input);

            //passagefontsizenumberset();
        }
        addEventListener("load", passagefontsizenumberload);

        function passagefontsizenumberset()
        {
            const v = Number(passagefontsizenumber.value);

            passagefontsizerange.value = v;
            text.passagefontsize = v;
        }

        function passagefontsizenumberupdate()
        {
            passagefontsizenumberset();
            svgupdate();
        }

        function passagefontsizerangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefontsizerange";
            input.max = passagefontsizenumber.max;
            input.min = passagefontsizenumber.min;
            input.type = "range";
            input.value = passagefontsizenumber.value;
            input.addEventListener("input", passagefontsizerangeupdate);
            passagefontsize.append(input);

            passagefontsizerangeset();
        }
        addEventListener("load", passagefontsizerangeload);

        function passagefontsizerangeset()
        {
            const v = Number(passagefontsizerange.value);

            passagefontsizenumber.value = v;
            text.passagefontsize = v;
        }

        function passagefontsizerangeupdate()
        {
            passagefontsizerangeset();
            svgupdate();
        }

        function passagefontsizeexactload()
        {
            const br = document.createElement("br");
            passagefontsize.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefontsizeexactupdate);
                passagefontsize.append(button);
            }
        }
        addEventListener("load", passagefontsizeexactload);

        function passagefontsizeexactupdate(e)
        {
            passagefontsizenumber.value = Number(e.target.value);

            passagefontsizenumberupdate();
        }

        function passagefontsizeincrementload()
        {
            const br = document.createElement("br");
            passagefontsize.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefontsizeincrementupdate);
                passagefontsize.append(button);
            }
        }
        addEventListener("load", passagefontsizeincrementload);

        function passagefontsizeincrementupdate(e)
        {
            const v = Number(passagefontsizenumber.value) + Number(e.target.value);

            if((passagefontsizenumber.min <= v) && (v <= passagefontsizenumber.max))
            {
                passagefontsizenumber.value = v;

                passagefontsizenumberupdate();
            }
        }

/*
        function passagefontsizefitload()
        {
            const button = document.createElement("button");
            button.innerHTML = "fit";
            button.addEventListener("click", passagefontsizefitupdate);
            passagefontsize.append(button);
        }
        addEventListener("load", passagefontsizefitload);

        function passagefontsizefitupdate()
        {
            const t = document.createElement("div");
            passagefontsize.append(t);
            t.innerHTML = text.bookname;
            t.style.fontSize = `${passagefontsizenumber.value}px`;

            const h1 = text.passagewidth;
            const h2 = text.passageheight;
            const h3 = t.offsetWidth;
            const h4 = t.offsetHeight;
            const h5 = passagefontsizenumber.value;

            //const h4 = t.offsetParent;//t.style.fontSize;
            //const h5 = t.clientHeight;//text.style.height;
            //const h6 = text.height;
            //const h7 = text.getBoundingClientRect().height;
            //const h8 = text.style.lineHeight;
            //const h9 = canvas.getBoundingClientRect().height;
            console.log(h1, h2, h3, h4, h5);
            //t.hidden = true;

            if(h2 < h4)
            {
                passagefontsizenumber.value -= 1;
                passagefit();
            }

            passagefontsizenumberupdate();
        }
//*/



        function passagefontstyleload()
        {
            const div = document.createElement("div");
            div.id = "passagefontstyle";
            div.innerHTML = "font-style";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagefontstyleload);

        function passagefontstyleselectload()
        {
            const br = document.createElement("br");
            passagefontstyle.append(br);

            const select = document.createElement("select");
            select.id = "passagefontstyleselect";
            select.addEventListener("input", passagefontstyleselectupdate);
            passagefontstyle.append(select);

            for(const value of fontstylearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            passagefontstyleselectset();
        }
        addEventListener("load", passagefontstyleselectload);

        function passagefontstyleselectset()
        {
            text.passagefontstyle = passagefontstyleselect.value;
        }

        function passagefontstyleselectupdate()
        {
            passagefontstyleselectset();
            svgupdate();
        }



        function passagefontvariantload()
        {
            const div = document.createElement("div");
            div.id = "passagefontvariant";
            div.innerHTML = "font-variant";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagefontvariantload);

        function passagefontvariantselectload()
        {
            const br = document.createElement("br");
            passagefontvariant.append(br);

            const select = document.createElement("select");
            select.id = "passagefontvariantselect";
            select.addEventListener("input", passagefontvariantselectupdate);
            passagefontvariant.append(select);

            for(const value of fontvariantarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            passagefontvariantselectset();
        }
        addEventListener("load", passagefontvariantselectload);

        function passagefontvariantselectset()
        {
            text.passagefontvariant = passagefontvariantselect.value;
        }

        function passagefontvariantselectupdate()
        {
            passagefontvariantselectset();
            svgupdate();
        }



        function passagefontweightload()
        {
            const div = document.createElement("div");
            div.id = "passagefontweight";
            div.innerHTML = "font-weight";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagefontweightload);

        function passagefontweightselectload()
        {
            const br = document.createElement("br");
            passagefontweight.append(br);

            const select = document.createElement("select");
            select.id = "passagefontweightselect";
            select.addEventListener("input", passagefontweightselectupdate);
            passagefontweight.append(select);

            for(const value of fontweightarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            passagefontweightselectset();
        }
        addEventListener("load", passagefontweightselectload);

        function passagefontweightselectset()
        {
            text.passagefontweight = passagefontweightselect.value;
        }

        function passagefontweightselectupdate()
        {
            passagefontweightselectset();
            svgupdate();
        }



        function passagecolorload()
        {
            const div = document.createElement("div");
            div.id = "passagecolor";
            div.innerHTML = "color";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagecolorload);

        function passagecolorcolorload()
        {
            const br = document.createElement("br");
            passagecolor.append(br);

            const input = document.createElement("input");
            input.id = "passagecolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", passagecolorcolorupdate);
            passagecolor.append(input);

            //passagecolorcolorset();
        }
        addEventListener("load", passagecolorcolorload);

        function passagecolorcolorset()
        {
            const c = passagecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passagealphanumber.value;

            text.passagecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passagecolorcolorupdate()
        {
            passagecolorcolorset();
            svgupdate();
        }

        function passagecolorexactload()
        {
            const br = document.createElement("br");
            passagecolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagecolorexactupdate);
                passagecolor.append(button);
            }
        }
        addEventListener("load", passagecolorexactload);

        function passagecolorexactupdate(e)
        {
            passagecolorcolor.value = e.target.value;

            passagecolorcolorupdate();
        }



        function passagealphaload()
        {
            const div = document.createElement("div");
            div.id = "passagealpha";
            div.innerHTML = "alpha";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagealphaload);

        function passagealphanumberload()
        {
            const br = document.createElement("br");
            passagealpha.append(br);

            const input = document.createElement("input");
            input.id = "passagealphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", passagealphanumberupdate);
            passagealpha.append(input);

            //passagealphanumberset();
        }
        addEventListener("load", passagealphanumberload);

        function passagealphanumberset()
        {
            const c = passagecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passagealphanumber.value;

            passagealpharange.value = a;
            text.passagecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passagealphanumberupdate()
        {
            passagealphanumberset();
            svgupdate();
        }

        function passagealpharangeload()
        {
            const input = document.createElement("input");
            input.id = "passagealpharange";
            input.max = passagealphanumber.max;
            input.min = passagealphanumber.min;
            input.step = passagealphanumber.step;
            input.type = "range";
            input.value = passagealphanumber.value;
            input.addEventListener("input", passagealpharangeupdate);
            passagealpha.append(input);

            passagealpharangeset();
        }
        addEventListener("load", passagealpharangeload);

        function passagealpharangeset()
        {
            const c = passagecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passagealpharange.value;

            passagealphanumber.value = a;
            text.passagecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passagealpharangeupdate()
        {
            passagealpharangeset();
            svgupdate();
        }

        function passagealphaexactload()
        {
            const br = document.createElement("br");
            passagealpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagealphaexactupdate);
                passagealpha.append(button);
            }
        }
        addEventListener("load", passagealphaexactload);

        function passagealphaexactupdate(e)
        {
            passagealphanumber.value = Number(e.target.value);

            passagealphanumberupdate();
        }

        function passagealphaincrementload()
        {
            const br = document.createElement("br");
            passagealpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagealphaincrementupdate);
                passagealpha.append(button);
            }
        }
        addEventListener("load", passagealphaincrementload);

        function passagealphaincrementupdate(e)
        {
            let v = Number(passagealphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((passagealphanumber.min <= v) && (v <= passagealphanumber.max))
            {
                passagealphanumber.value = v;

                passagealphanumberupdate();
            }
        }



/*leftoff
        function passagefilterblurload()
        {
            const div = document.createElement("div");
            div.id = "passagefilterblur";
            div.innerHTML = "filter-blur";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefilterblurload);

        function passagefilterblurnumberload()
        {
            const br = document.createElement("br");
            passagefilterblur.append(br);

            const input = document.createElement("input");
            input.id = "passagefilterblurnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagefilterblurnumberupdate);
            passagefilterblur.append(input);

            //passagefilterblurnumberset();
        }
        addEventListener("load", passagefilterblurnumberload);

        function passagefilterblurnumberset()
        {
            const v = passagefilterblurnumber.value;

            passagefilterblurrange.value = v;
            text.passagebackdropfilterblur = v;
        }

        function passagefilterblurnumberupdate()
        {
            passagefilterblurnumberset();
            svgupdate();
        }

        function passagefilterblurrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefilterblurrange";
            input.max = passagefilterblurnumber.max;
            input.min = passagefilterblurnumber.min;
            input.step = passagefilterblurnumber.step;
            input.type = "range";
            input.value = passagefilterblurnumber.value;
            input.addEventListener("input", passagefilterblurrangeupdate);
            passagefilterblur.append(input);

            passagefilterblurrangeset();
        }
        addEventListener("load", passagefilterblurrangeload);

        function passagefilterblurrangeset()
        {
            const v = passagefilterblurrange.value;

            passagefilterblurnumber.value = v;
            text.passagebackdropfilterblur = v;
        }

        function passagefilterblurrangeupdate()
        {
            passagefilterblurrangeset();
            svgupdate();
        }

        function passagefilterblurexactload()
        {
            const br = document.createElement("br");
            passagefilterblur.append(br);

            const array =
            [
                ["0",0],
                ["2",2],
                ["4",4],
                ["8",8],
                ["16",16],
                ["32",32],
                ["64",64],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterblurexactupdate);
                passagefilterblur.append(button);
            }
        }
        addEventListener("load", passagefilterblurexactload);

        function passagefilterblurexactupdate(e)
        {
            passagefilterblurnumber.value = Number(e.target.value);

            passagefilterblurnumberupdate();
        }

        function passagefilterblurincrementload()
        {
            const br = document.createElement("br");
            passagefilterblur.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterblurincrementupdate);
                passagefilterblur.append(button);
            }
        }
        addEventListener("load", passagefilterblurincrementload);

        function passagefilterblurincrementupdate(e)
        {
            const v = Number(passagefilterblurnumber.value) + Number(e.target.value);

            if((passagefilterblurnumber.min <= v) && (v <= passagefilterblurnumber.max))
            {
                passagefilterblurnumber.value = v;

                passagefilterblurnumberupdate();
            }
        }



        function passagefilterbrightnessload()
        {
            const div = document.createElement("div");
            div.id = "passagefilterbrightness";
            div.innerHTML = "filter-brightness";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefilterbrightnessload);

        function passagefilterbrightnessnumberload()
        {
            const br = document.createElement("br");
            passagefilterbrightness.append(br);

            const input = document.createElement("input");
            input.id = "passagefilterbrightnessnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", passagefilterbrightnessnumberupdate);
            passagefilterbrightness.append(input);

            //passagefilterbrightnessnumberset();
        }
        addEventListener("load", passagefilterbrightnessnumberload);

        function passagefilterbrightnessnumberset()
        {
            const v = passagefilterbrightnessnumber.value;

            passagefilterbrightnessrange.value = v;
            text.passagebackdropfilterbrightness = v;
        }

        function passagefilterbrightnessnumberupdate()
        {
            passagefilterbrightnessnumberset();
            svgupdate();
        }

        function passagefilterbrightnessrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefilterbrightnessrange";
            input.max = passagefilterbrightnessnumber.max;
            input.min = passagefilterbrightnessnumber.min;
            input.step = passagefilterbrightnessnumber.step;
            input.type = "range";
            input.value = passagefilterbrightnessnumber.value;
            input.addEventListener("input", passagefilterbrightnessrangeupdate);
            passagefilterbrightness.append(input);

            passagefilterbrightnessrangeset();
        }
        addEventListener("load", passagefilterbrightnessrangeload);

        function passagefilterbrightnessrangeset()
        {
            const v = passagefilterbrightnessrange.value;

            passagefilterbrightnessnumber.value = v;
            text.passagebackdropfilterbrightness = v;
        }

        function passagefilterbrightnessrangeupdate()
        {
            passagefilterbrightnessrangeset();
            svgupdate();
        }

        function passagefilterbrightnessexactload()
        {
            const br = document.createElement("br");
            passagefilterbrightness.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterbrightnessexactupdate);
                passagefilterbrightness.append(button);
            }
        }
        addEventListener("load", passagefilterbrightnessexactload);

        function passagefilterbrightnessexactupdate(e)
        {
            passagefilterbrightnessnumber.value = Number(e.target.value);

            passagefilterbrightnessnumberupdate();
        }

        function passagefilterbrightnessincrementload()
        {
            const br = document.createElement("br");
            passagefilterbrightness.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterbrightnessincrementupdate);
                passagefilterbrightness.append(button);
            }
        }
        addEventListener("load", passagefilterbrightnessincrementload);

        function passagefilterbrightnessincrementupdate(e)
        {
            const v = Number(passagefilterbrightnessnumber.value) + Number(e.target.value);

            if((passagefilterbrightnessnumber.min <= v) && (v <= passagefilterbrightnessnumber.max))
            {
                passagefilterbrightnessnumber.value = v;

                passagefilterbrightnessnumberupdate();
            }
        }



        function passagefiltercontrastload()
        {
            const div = document.createElement("div");
            div.id = "passagefiltercontrast";
            div.innerHTML = "filter-contrast";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefiltercontrastload);

        function passagefiltercontrastnumberload()
        {
            const br = document.createElement("br");
            passagefiltercontrast.append(br);

            const input = document.createElement("input");
            input.id = "passagefiltercontrastnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", passagefiltercontrastnumberupdate);
            passagefiltercontrast.append(input);

            //passagefiltercontrastnumberset();
        }
        addEventListener("load", passagefiltercontrastnumberload);

        function passagefiltercontrastnumberset()
        {
            const v = passagefiltercontrastnumber.value;

            passagefiltercontrastrange.value = v;
            text.passagebackdropfiltercontrast = v;
        }

        function passagefiltercontrastnumberupdate()
        {
            passagefiltercontrastnumberset();
            svgupdate();
        }

        function passagefiltercontrastrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefiltercontrastrange";
            input.max = passagefiltercontrastnumber.max;
            input.min = passagefiltercontrastnumber.min;
            input.step = passagefiltercontrastnumber.step;
            input.type = "range";
            input.value = passagefiltercontrastnumber.value;
            input.addEventListener("input", passagefiltercontrastrangeupdate);
            passagefiltercontrast.append(input);

            passagefiltercontrastrangeset();
        }
        addEventListener("load", passagefiltercontrastrangeload);

        function passagefiltercontrastrangeset()
        {
            const v = passagefiltercontrastrange.value;

            passagefiltercontrastnumber.value = v;
            text.passagebackdropfiltercontrast = v;
        }

        function passagefiltercontrastrangeupdate()
        {
            passagefiltercontrastrangeset();
            svgupdate();
        }

        function passagefiltercontrastexactload()
        {
            const br = document.createElement("br");
            passagefiltercontrast.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltercontrastexactupdate);
                passagefiltercontrast.append(button);
            }
        }
        addEventListener("load", passagefiltercontrastexactload);

        function passagefiltercontrastexactupdate(e)
        {
            passagefiltercontrastnumber.value = Number(e.target.value);

            passagefiltercontrastnumberupdate();
        }

        function passagefiltercontrastincrementload()
        {
            const br = document.createElement("br");
            passagefiltercontrast.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltercontrastincrementupdate);
                passagefiltercontrast.append(button);
            }
        }
        addEventListener("load", passagefiltercontrastincrementload);

        function passagefiltercontrastincrementupdate(e)
        {
            const v = Number(passagefiltercontrastnumber.value) + Number(e.target.value);

            if((passagefiltercontrastnumber.min <= v) && (v <= passagefiltercontrastnumber.max))
            {
                passagefiltercontrastnumber.value = v;

                passagefiltercontrastnumberupdate();
            }
        }



        function passagefiltergrayscaleload()
        {
            const div = document.createElement("div");
            div.id = "passagefiltergrayscale";
            div.innerHTML = "filter-grayscale";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefiltergrayscaleload);

        function passagefiltergrayscalenumberload()
        {
            const br = document.createElement("br");
            passagefiltergrayscale.append(br);

            const input = document.createElement("input");
            input.id = "passagefiltergrayscalenumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagefiltergrayscalenumberupdate);
            passagefiltergrayscale.append(input);

            //passagefiltergrayscalenumberset();
        }
        addEventListener("load", passagefiltergrayscalenumberload);

        function passagefiltergrayscalenumberset()
        {
            const v = passagefiltergrayscalenumber.value;

            passagefiltergrayscalerange.value = v;
            text.passagebackdropfiltergrayscale = v;
        }

        function passagefiltergrayscalenumberupdate()
        {
            passagefiltergrayscalenumberset();
            svgupdate();
        }

        function passagefiltergrayscalerangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefiltergrayscalerange";
            input.max = passagefiltergrayscalenumber.max;
            input.min = passagefiltergrayscalenumber.min;
            input.step = passagefiltergrayscalenumber.step;
            input.type = "range";
            input.value = passagefiltergrayscalenumber.value;
            input.addEventListener("input", passagefiltergrayscalerangeupdate);
            passagefiltergrayscale.append(input);

            passagefiltergrayscalerangeset();
        }
        addEventListener("load", passagefiltergrayscalerangeload);

        function passagefiltergrayscalerangeset()
        {
            const v = passagefiltergrayscalerange.value;

            passagefiltergrayscalenumber.value = v;
            text.passagebackdropfiltergrayscale = v;
        }

        function passagefiltergrayscalerangeupdate()
        {
            passagefiltergrayscalerangeset();
            svgupdate();
        }

        function passagefiltergrayscaleexactload()
        {
            const br = document.createElement("br");
            passagefiltergrayscale.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltergrayscaleexactupdate);
                passagefiltergrayscale.append(button);
            }
        }
        addEventListener("load", passagefiltergrayscaleexactload);

        function passagefiltergrayscaleexactupdate(e)
        {
            passagefiltergrayscalenumber.value = Number(e.target.value);

            passagefiltergrayscalenumberupdate();
        }

        function passagefiltergrayscaleincrementload()
        {
            const br = document.createElement("br");
            passagefiltergrayscale.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltergrayscaleincrementupdate);
                passagefiltergrayscale.append(button);
            }
        }
        addEventListener("load", passagefiltergrayscaleincrementload);

        function passagefiltergrayscaleincrementupdate(e)
        {
            const v = Number(passagefiltergrayscalenumber.value) + Number(e.target.value);

            if((passagefiltergrayscalenumber.min <= v) && (v <= passagefiltergrayscalenumber.max))
            {
                passagefiltergrayscalenumber.value = v;

                passagefiltergrayscalenumberupdate();
            }
        }



        function passagefilterhuerotateload()
        {
            const div = document.createElement("div");
            div.id = "passagefilterhuerotate";
            div.innerHTML = "filter-hue-rotate";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefilterhuerotateload);

        function passagefilterhuerotatenumberload()
        {
            const br = document.createElement("br");
            passagefilterhuerotate.append(br);

            const input = document.createElement("input");
            input.id = "passagefilterhuerotatenumber";
            input.max = 360;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagefilterhuerotatenumberupdate);
            passagefilterhuerotate.append(input);

            //passagefilterhuerotatenumberset();
        }
        addEventListener("load", passagefilterhuerotatenumberload);

        function passagefilterhuerotatenumberset()
        {
            const v = passagefilterhuerotatenumber.value;

            passagefilterhuerotaterange.value = v;
            text.passagebackdropfilterhuerotate = v;
        }

        function passagefilterhuerotatenumberupdate()
        {
            passagefilterhuerotatenumberset();
            svgupdate();
        }

        function passagefilterhuerotaterangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefilterhuerotaterange";
            input.max = passagefilterhuerotatenumber.max;
            input.min = passagefilterhuerotatenumber.min;
            input.step = passagefilterhuerotatenumber.step;
            input.type = "range";
            input.value = passagefilterhuerotatenumber.value;
            input.addEventListener("input", passagefilterhuerotaterangeupdate);
            passagefilterhuerotate.append(input);

            passagefilterhuerotaterangeset();
        }
        addEventListener("load", passagefilterhuerotaterangeload);

        function passagefilterhuerotaterangeset()
        {
            const v = passagefilterhuerotaterange.value;

            passagefilterhuerotatenumber.value = v;
            text.passagebackdropfilterhuerotate = v;
        }

        function passagefilterhuerotaterangeupdate()
        {
            passagefilterhuerotaterangeset();
            svgupdate();
        }

        function passagefilterhuerotateexactload()
        {
            const br = document.createElement("br");
            passagefilterhuerotate.append(br);

            const array =
            [
                ["0",0],
                ["90",90],
                ["180",180],
                ["270",270],
                ["360",360],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterhuerotateexactupdate);
                passagefilterhuerotate.append(button);
            }
        }
        addEventListener("load", passagefilterhuerotateexactload);

        function passagefilterhuerotateexactupdate(e)
        {
            passagefilterhuerotatenumber.value = Number(e.target.value);

            passagefilterhuerotatenumberupdate();
        }

        function passagefilterhuerotateincrementload()
        {
            const br = document.createElement("br");
            passagefilterhuerotate.append(br);

            const array =
            [
                //["-90",-90],
                ["-45",-45],
                ["-15",-15],
                ["-1",-1],
                ["+1",1],
                ["+15",15],
                ["+45",45],
                //["+90",90],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterhuerotateincrementupdate);
                passagefilterhuerotate.append(button);
            }
        }
        addEventListener("load", passagefilterhuerotateincrementload);

        function passagefilterhuerotateincrementupdate(e)
        {
            const v = Number(passagefilterhuerotatenumber.value) + Number(e.target.value);

            if((passagefilterhuerotatenumber.min <= v) && (v <= passagefilterhuerotatenumber.max))
            {
                passagefilterhuerotatenumber.value = v;

                passagefilterhuerotatenumberupdate();
            }
        }



        function passagefilterinvertload()
        {
            const div = document.createElement("div");
            div.id = "passagefilterinvert";
            div.innerHTML = "filter-invert";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefilterinvertload);

        function passagefilterinvertnumberload()
        {
            const br = document.createElement("br");
            passagefilterinvert.append(br);

            const input = document.createElement("input");
            input.id = "passagefilterinvertnumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagefilterinvertnumberupdate);
            passagefilterinvert.append(input);

            //passagefilterinvertnumberset();
        }
        addEventListener("load", passagefilterinvertnumberload);

        function passagefilterinvertnumberset()
        {
            const v = passagefilterinvertnumber.value;

            passagefilterinvertrange.value = v;
            text.passagebackdropfilterinvert = v;
        }

        function passagefilterinvertnumberupdate()
        {
            passagefilterinvertnumberset();
            svgupdate();
        }

        function passagefilterinvertrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefilterinvertrange";
            input.max = passagefilterinvertnumber.max;
            input.min = passagefilterinvertnumber.min;
            input.step = passagefilterinvertnumber.step;
            input.type = "range";
            input.value = passagefilterinvertnumber.value;
            input.addEventListener("input", passagefilterinvertrangeupdate);
            passagefilterinvert.append(input);

            passagefilterinvertrangeset();
        }
        addEventListener("load", passagefilterinvertrangeload);

        function passagefilterinvertrangeset()
        {
            const v = passagefilterinvertrange.value;

            passagefilterinvertnumber.value = v;
            text.passagebackdropfilterinvert = v;
        }

        function passagefilterinvertrangeupdate()
        {
            passagefilterinvertrangeset();
            svgupdate();
        }

        function passagefilterinvertexactload()
        {
            const br = document.createElement("br");
            passagefilterinvert.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterinvertexactupdate);
                passagefilterinvert.append(button);
            }
        }
        addEventListener("load", passagefilterinvertexactload);

        function passagefilterinvertexactupdate(e)
        {
            passagefilterinvertnumber.value = Number(e.target.value);

            passagefilterinvertnumberupdate();
        }

        function passagefilterinvertincrementload()
        {
            const br = document.createElement("br");
            passagefilterinvert.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");

                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterinvertincrementupdate);
                passagefilterinvert.append(button);
            }
        }
        addEventListener("load", passagefilterinvertincrementload);

        function passagefilterinvertincrementupdate(e)
        {
            const v = Number(passagefilterinvertnumber.value) + Number(e.target.value);

            if((passagefilterinvertnumber.min <= v) && (v <= passagefilterinvertnumber.max))
            {
                passagefilterinvertnumber.value = v;

                passagefilterinvertnumberupdate();
            }
        }



        function passagefiltersaturateload()
        {
            const div = document.createElement("div");
            div.id = "passagefiltersaturate";
            div.innerHTML = "filter-saturate";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefiltersaturateload);

        function passagefiltersaturatenumberload()
        {
            const br = document.createElement("br");
            passagefiltersaturate.append(br);

            const input = document.createElement("input");
            input.id = "passagefiltersaturatenumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", passagefiltersaturatenumberupdate);
            passagefiltersaturate.append(input);

            //passagefiltersaturatenumberset();
        }
        addEventListener("load", passagefiltersaturatenumberload);

        function passagefiltersaturatenumberset()
        {
            const v = passagefiltersaturatenumber.value;

            passagefiltersaturaterange.value = v;
            text.passagebackdropfiltersaturate = v;
        }

        function passagefiltersaturatenumberupdate()
        {
            passagefiltersaturatenumberset();
            svgupdate();
        }

        function passagefiltersaturaterangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefiltersaturaterange";
            input.max = passagefiltersaturatenumber.max;
            input.min = passagefiltersaturatenumber.min;
            input.step = passagefiltersaturatenumber.step;
            input.type = "range";
            input.value = passagefiltersaturatenumber.value;
            input.addEventListener("input", passagefiltersaturaterangeupdate);
            passagefiltersaturate.append(input);

            passagefiltersaturaterangeset();
        }
        addEventListener("load", passagefiltersaturaterangeload);

        function passagefiltersaturaterangeset()
        {
            const v = passagefiltersaturaterange.value;

            passagefiltersaturatenumber.value = v;
            text.passagebackdropfiltersaturate = v;
        }

        function passagefiltersaturaterangeupdate()
        {
            passagefiltersaturaterangeset();
            svgupdate();
        }

        function passagefiltersaturateexactload()
        {
            const br = document.createElement("br");
            passagefiltersaturate.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltersaturateexactupdate);
                passagefiltersaturate.append(button);
            }
        }
        addEventListener("load", passagefiltersaturateexactload);

        function passagefiltersaturateexactupdate(e)
        {
            passagefiltersaturatenumber.value = Number(e.target.value);

            passagefiltersaturatenumberupdate();
        }

        function passagefiltersaturateincrementload()
        {
            const br = document.createElement("br");
            passagefiltersaturate.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltersaturateincrementupdate);
                passagefiltersaturate.append(button);
            }
        }
        addEventListener("load", passagefiltersaturateincrementload);

        function passagefiltersaturateincrementupdate(e)
        {
            const v = Number(passagefiltersaturatenumber.value) + Number(e.target.value);

            if((passagefiltersaturatenumber.min <= v) && (v <= passagefiltersaturatenumber.max))
            {
                passagefiltersaturatenumber.value = v;

                passagefiltersaturatenumberupdate();
            }
        }



        function passagefiltersepiaload()
        {
            const div = document.createElement("div");
            div.id = "passagefiltersepia";
            div.innerHTML = "filter-sepia";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefiltersepiaload);

        function passagefiltersepianumberload()
        {
            const br = document.createElement("br");
            passagefiltersepia.append(br);

            const input = document.createElement("input");
            input.id = "passagefiltersepianumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagefiltersepianumberupdate);
            passagefiltersepia.append(input);

            //passagefiltersepianumberset();
        }
        addEventListener("load", passagefiltersepianumberload);

        function passagefiltersepianumberset()
        {
            const v = passagefiltersepianumber.value;

            passagefiltersepiarange.value = v;
            text.passagebackdropfiltersepia = v;
        }

        function passagefiltersepianumberupdate()
        {
            passagefiltersepianumberset();
            svgupdate();
        }

        function passagefiltersepiarangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefiltersepiarange";
            input.max = passagefiltersepianumber.max;
            input.min = passagefiltersepianumber.min;
            input.step = passagefiltersepianumber.step;
            input.type = "range";
            input.value = passagefiltersepianumber.value;
            input.addEventListener("input", passagefiltersepiarangeupdate);
            passagefiltersepia.append(input);

            passagefiltersepiarangeset();
        }
        addEventListener("load", passagefiltersepiarangeload);

        function passagefiltersepiarangeset()
        {
            const v = passagefiltersepiarange.value;

            passagefiltersepianumber.value = v;
            text.passagebackdropfiltersepia = v;
        }

        function passagefiltersepiarangeupdate()
        {
            passagefiltersepiarangeset();
            svgupdate();
        }

        function passagefiltersepiaexactload()
        {
            const br = document.createElement("br");
            passagefiltersepia.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltersepiaexactupdate);
                passagefiltersepia.append(button);
            }
        }
        addEventListener("load", passagefiltersepiaexactload);

        function passagefiltersepiaexactupdate(e)
        {
            passagefiltersepianumber.value = Number(e.target.value);

            passagefiltersepianumberupdate();
        }

        function passagefiltersepiaincrementload()
        {
            const br = document.createElement("br");
            passagefiltersepia.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltersepiaincrementupdate);
                passagefiltersepia.append(button);
            }
        }
        addEventListener("load", passagefiltersepiaincrementload);

        function passagefiltersepiaincrementupdate(e)
        {
            const v = Number(passagefiltersepianumber.value) + Number(e.target.value);

            if((passagefiltersepianumber.min <= v) && (v <= passagefiltersepianumber.max))
            {
                passagefiltersepianumber.value = v;

                passagefiltersepianumberupdate();
            }
        }
//*/



/*
        function passagemargintopload()
        {
            const div = document.createElement("div");
            div.id = "passagemargintop";
            div.innerHTML = "margin-top";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagemargintopload);

        function passagemargintopnumberload()
        {
            const br = document.createElement("br");
            passagemargintop.append(br);

            const input = document.createElement("input");
            input.id = "passagemargintopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagemargintopnumberupdate);
            passagemargintop.append(input);

            //passagemargintopnumberset();
        }
        addEventListener("load", passagemargintopnumberload);

        function passagemargintopnumberset()
        {
            const v = Number(passagemargintopnumber.value);

            passagemargintoprange.value = v;
            text.passagemargintop = v;
        }

        function passagemargintopnumberupdate()
        {
            passagemargintopnumberset();

            svgupdate();
        }

        function passagemargintoprangeload()
        {
            const input = document.createElement("input");
            input.id = "passagemargintoprange";
            input.max = passagemargintopnumber.max;
            input.min = passagemargintopnumber.min;
            input.type = "range";
            input.value = passagemargintopnumber.value;
            input.addEventListener("input", passagemargintoprangeupdate);
            passagemargintop.append(input);

            passagemargintoprangeset();
        }
        addEventListener("load", passagemargintoprangeload);

        function passagemargintoprangeset()
        {
            const v = Number(passagemargintoprange.value);

            passagemargintopnumber.value = v;
            text.passagemargintop = v;
        }

        function passagemargintoprangeupdate()
        {
            passagemargintoprangeset();

            svgupdate();
        }



        function passagemarginbottomload()
        {
            const div = document.createElement("div");
            div.id = "passagemarginbottom";
            div.innerHTML = "margin-bottom";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagemarginbottomload);

        function passagemarginbottomnumberload()
        {
            const br = document.createElement("br");
            passagemarginbottom.append(br);

            const input = document.createElement("input");
            input.id = "passagemarginbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagemarginbottomnumberupdate);
            passagemarginbottom.append(input);

            //passagemarginbottomnumberset();
        }
        addEventListener("load", passagemarginbottomnumberload);

        function passagemarginbottomnumberset()
        {
            const v = Number(passagemarginbottomnumber.value);

            passagemarginbottomrange.value = v;
            text.passagemarginbottom = v;
        }

        function passagemarginbottomnumberupdate()
        {
            passagemarginbottomnumberset();

            svgupdate();
        }

        function passagemarginbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagemarginbottomrange";
            input.max = passagemarginbottomnumber.max;
            input.min = passagemarginbottomnumber.min;
            input.type = "range";
            input.value = passagemarginbottomnumber.value;
            input.addEventListener("input", passagemarginbottomrangeupdate);
            passagemarginbottom.append(input);

            passagemarginbottomrangeset();
        }
        addEventListener("load", passagemarginbottomrangeload);

        function passagemarginbottomrangeset()
        {
            const v = Number(passagemarginbottomrange.value);

            passagemarginbottomnumber.value = v;
            text.passagemarginbottom = v;
        }

        function passagemarginbottomrangeupdate()
        {
            passagemarginbottomrangeset();

            svgupdate();
        }



        function passagemarginleftload()
        {
            const div = document.createElement("div");
            div.id = "passagemarginleft";
            div.innerHTML = "margin-left";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagemarginleftload);

        function passagemarginleftnumberload()
        {
            const br = document.createElement("br");
            passagemarginleft.append(br);

            const input = document.createElement("input");
            input.id = "passagemarginleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagemarginleftnumberupdate);
            passagemarginleft.append(input);

            //passagemarginleftnumberset();
        }
        addEventListener("load", passagemarginleftnumberload);

        function passagemarginleftnumberset()
        {
            const v = Number(passagemarginleftnumber.value);

            passagemarginleftrange.value = v;
            text.passagemarginleft = v;
        }

        function passagemarginleftnumberupdate()
        {
            passagemarginleftnumberset();

            svgupdate();
        }

        function passagemarginleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagemarginleftrange";
            input.max = passagemarginleftnumber.max;
            input.min = passagemarginleftnumber.min;
            input.type = "range";
            input.value = passagemarginleftnumber.value;
            input.addEventListener("input", passagemarginleftrangeupdate);
            passagemarginleft.append(input);

            passagemarginleftrangeset();
        }
        addEventListener("load", passagemarginleftrangeload);

        function passagemarginleftrangeset()
        {
            const v = Number(passagemarginleftrange.value);

            passagemarginleftnumber.value = v;
            text.passagemarginleft = v;
        }

        function passagemarginleftrangeupdate()
        {
            passagemarginleftrangeset();

            svgupdate();
        }



        function passagemarginrightload()
        {
            const div = document.createElement("div");
            div.id = "passagemarginright";
            div.innerHTML = "margin-right";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagemarginrightload);

        function passagemarginrightnumberload()
        {
            const br = document.createElement("br");
            passagemarginright.append(br);

            const input = document.createElement("input");
            input.id = "passagemarginrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagemarginrightnumberupdate);
            passagemarginright.append(input);

            //passagemarginrightnumberset();
        }
        addEventListener("load", passagemarginrightnumberload);

        function passagemarginrightnumberset()
        {
            const v = Number(passagemarginrightnumber.value);

            passagemarginrightrange.value = v;
            text.passagemarginright = v;
        }

        function passagemarginrightnumberupdate()
        {
            passagemarginrightnumberset();

            svgupdate();
        }

        function passagemarginrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagemarginrightrange";
            input.max = passagemarginrightnumber.max;
            input.min = passagemarginrightnumber.min;
            input.type = "range";
            input.value = passagemarginrightnumber.value;
            input.addEventListener("input", passagemarginrightrangeupdate);
            passagemarginright.append(input);

            passagemarginrightrangeset();
        }
        addEventListener("load", passagemarginrightrangeload);

        function passagemarginrightrangeset()
        {
            const v = Number(passagemarginrightrange.value);

            passagemarginrightnumber.value = v;
            text.passagemarginright = v;
        }

        function passagemarginrightrangeupdate()
        {
            passagemarginrightrangeset();

            svgupdate();
        }



        function passagepaddingtopload()
        {
            const div = document.createElement("div");
            div.id = "passagepaddingtop";
            div.innerHTML = "padding-top";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagepaddingtopload);

        function passagepaddingtopnumberload()
        {
            const br = document.createElement("br");
            passagepaddingtop.append(br);

            const input = document.createElement("input");
            input.id = "passagepaddingtopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagepaddingtopnumberupdate);
            passagepaddingtop.append(input);

            //passagepaddingtopnumberset();
        }
        addEventListener("load", passagepaddingtopnumberload);

        function passagepaddingtopnumberset()
        {
            const v = Number(passagepaddingtopnumber.value);

            passagepaddingtoprange.value = v;
            text.passagepaddingtop = v;
        }

        function passagepaddingtopnumberupdate()
        {
            passagepaddingtopnumberset();

            svgupdate();
        }

        function passagepaddingtoprangeload()
        {
            const input = document.createElement("input");
            input.id = "passagepaddingtoprange";
            input.max = passagepaddingtopnumber.max;
            input.min = passagepaddingtopnumber.min;
            input.type = "range";
            input.value = passagepaddingtopnumber.value;
            input.addEventListener("input", passagepaddingtoprangeupdate);
            passagepaddingtop.append(input);

            passagepaddingtoprangeset();
        }
        addEventListener("load", passagepaddingtoprangeload);

        function passagepaddingtoprangeset()
        {
            const v = Number(passagepaddingtoprange.value);

            passagepaddingtopnumber.value = v;
            text.passagepaddingtop = v;
        }

        function passagepaddingtoprangeupdate()
        {
            passagepaddingtoprangeset();

            svgupdate();
        }



        function passagepaddingbottomload()
        {
            const div = document.createElement("div");
            div.id = "passagepaddingbottom";
            div.innerHTML = "padding-bottom";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagepaddingbottomload);

        function passagepaddingbottomnumberload()
        {
            const br = document.createElement("br");
            passagepaddingbottom.append(br);

            const input = document.createElement("input");
            input.id = "passagepaddingbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagepaddingbottomnumberupdate);
            passagepaddingbottom.append(input);

            //passagepaddingbottomnumberset();
        }
        addEventListener("load", passagepaddingbottomnumberload);

        function passagepaddingbottomnumberset()
        {
            const v = Number(passagepaddingbottomnumber.value);

            passagepaddingbottomrange.value = v;
            text.passagepaddingbottom = v;
        }

        function passagepaddingbottomnumberupdate()
        {
            passagepaddingbottomnumberset();

            svgupdate();
        }

        function passagepaddingbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagepaddingbottomrange";
            input.max = passagepaddingbottomnumber.max;
            input.min = passagepaddingbottomnumber.min;
            input.type = "range";
            input.value = passagepaddingbottomnumber.value;
            input.addEventListener("input", passagepaddingbottomrangeupdate);
            passagepaddingbottom.append(input);

            passagepaddingbottomrangeset();
        }
        addEventListener("load", passagepaddingbottomrangeload);

        function passagepaddingbottomrangeset()
        {
            const v = Number(passagepaddingbottomrange.value);

            passagepaddingbottomnumber.value = v;
            text.passagepaddingbottom = v;
        }

        function passagepaddingbottomrangeupdate()
        {
            passagepaddingbottomrangeset();

            svgupdate();
        }



        function passagepaddingleftload()
        {
            const div = document.createElement("div");
            div.id = "passagepaddingleft";
            div.innerHTML = "padding-left";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagepaddingleftload);

        function passagepaddingleftnumberload()
        {
            
10000
const br = document.createElement("br");
            passagepaddingleft.append(br);

            const input = document.createElement("input");
            input.id = "passagepaddingleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagepaddingleftnumberupdate);
            passagepaddingleft.append(input);

            //passagepaddingleftnumberset();
        }
        addEventListener("load", passagepaddingleftnumberload);

        function passagepaddingleftnumberset()
        {
            const v = Number(passagepaddingleftnumber.value);

            passagepaddingleftrange.value = v;
            text.passagepaddingleft = v;
        }

        function passagepaddingleftnumberupdate()
        {
            passagepaddingleftnumberset();

            svgupdate();
        }

        function passagepaddingleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagepaddingleftrange";
            input.max = passagepaddingleftnumber.max;
            input.min = passagepaddingleftnumber.min;
            input.type = "range";
            input.value = passagepaddingleftnumber.value;
            input.addEventListener("input", passagepaddingleftrangeupdate);
            passagepaddingleft.append(input);

            passagepaddingleftrangeset();
        }
        addEventListener("load", passagepaddingleftrangeload);


        function passagepaddingleftrangeset()
        {
            const v = Number(passagepaddingleftrange.value);

            passagepaddingleftnumber.value = v;
            text.passagepaddingleft = v;
        }

        function passagepaddingleftrangeupdate()
        {
            passagepaddingleftrangeset();

            svgupdate();
        }



        function passagepaddingrightload()
        {
            const div = document.createElement("div");
            div.id = "passagepaddingright";
            div.innerHTML = "padding-right";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagepaddingrightload);

        function passagepaddingrightnumberload()
        {
            const br = document.createElement("br");
            passagepaddingright.append(br);

            const input = document.createElement("input");
            input.id = "passagepaddingrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagepaddingrightnumberupdate);
            passagepaddingright.append(input);

            //passagepaddingrightnumberset();
        }
        addEventListener("load", passagepaddingrightnumberload);

        function passagepaddingrightnumberset()
        {
            const v = Number(passagepaddingrightnumber.value);

            passagepaddingrightrange.value = v;
            text.passagepaddingright = v;
        }

        function passagepaddingrightnumberupdate()
        {
            passagepaddingrightnumberset();

            svgupdate();
        }

        function passagepaddingrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagepaddingrightrange";
            input.max = passagepaddingrightnumber.max;
            input.min = passagepaddingrightnumber.min;
            input.type = "range";
            input.value = passagepaddingrightnumber.value;
            input.addEventListener("input", passagepaddingrightrangeupdate);
            passagepaddingright.append(input);

            passagepaddingrightrangeset();
        }
        addEventListener("load", passagepaddingrightrangeload);

        function passagepaddingrightrangeset()
        {
            const v = Number(passagepaddingrightrange.value);

            passagepaddingrightnumber.value = v;
            text.passagepaddingright = v;
        }

        function passagepaddingrightrangeupdate()
        {
            passagepaddingrightrangeset();

            svgupdate();
        }
//*/






        function savedownloadload()
        {
            const div = document.createElement("div");
            div.id = "savedownload";
            //div.innerHTML = "download<br>";
            tabcontentsave.append(div);
        }
        addEventListener("load", savedownloadload);

        function savedownloadimageload()
        {
            const a = document.createElement("a");
            a.download = "download";
            a.id = "savedownloadimage";
            a.innerHTML = "download";
            a.addEventListener("click", savedownloadimageupdate);
            savedownload.append(a);

            savedownloadimageupdate();
        }
        addEventListener("load", savedownloadimageload);

        function savedownloadimageupdate()
        {
            savedownloadimage.href = canvas.toDataURL();
        }
/*
        function savedownloadsettingsload()
        {
            const a = document.createElement("a");
            a.download = "settings.txt";
            a.id = "savedownloadsettings";
            a.innerHTML = "<br>settings";
            a.addEventListener("click", savedownloadsettingsupdate);
            savedownload.append(a);

            savedownloadsettingsupdate();
        }
        addEventListener("load", savedownloadsettingsload);

        function savedownloadsettingsupdate()
        {
            const data =
            [
                [
                    "canvas.width",
                    canvas.width,
                ],
                canvas.height,
                canvas.backgroundcolor,
                canvas.backgroundalpha,
                image.file,
                image.fit,
                image.width,
                image.height,
                image.x,
                image.y,
                image.backgroundcolor,
                image.backgroundalpha,
                image.opacity,
                text.messagetext,
                text.messagewidth,
                text.messageheight,
                text.messagex,
                text.messagey,
                text.messagehorizontal,
                text.messagevertical,
                text.messagewritingmode,
                text.messagefontfamily,
                text.messagefontsize,
                text.messagebackgroundcolor,
                text.messagebackgroundalpha,
                text.messagecolor,
                text.messagealpha,
                text.version,
                text.versionname,
                text.book,
                text.bookname,
                text.chapter,
                text.verse,
                text.verseend,
                text.referencewidth,
                text.referenceheight,
                text.referencex,
                text.referencey,
                text.referencehorizontal,
                text.referencevertical,
                text.referencewritingmode,
                text.referencefontfamily,
                text.referencefontsize,
                text.referencebackgroundcolor,
                text.referencebackgroundalpha,
                text.referencecolor,
                text.referencealpha,
                text.passagewidth,
                text.passageheight,
                text.passagex,
                text.passagey,
                text.passagehorizontal,
                text.passagevertical,
                text.passagewritingmode,
                text.passagefontfamily,
                text.passagefontsize,
                text.passagebackgroundcolor,
                text.passagebackgroundalpha,
                text.passagecolor,
                text.passagealpha,
            ];
            //leftoff
            const data2 = [];
            for(const a of data)
            {
                data2
            }
            savedownloadsettings.href = `data:text/plain,${data}`;
        }



        function savefileload()
        {
            const div = document.createElement("div");
            div.id = "savefile";
            div.innerHTML = "file<br>";
            tabcontentsave.append(div);
        }
        addEventListener("load", savefileload);

        function savefilefileload()
        {
            const input = document.createElement("input");
            input.id = "savefilefile";
            input.type = "file";
            input.addEventListener("change", savefilefileupdate);
            savefile.append(input);
        }
        addEventListener("load", savefilefileload);

        function savefilefileupdate()
        {
            const f = savefilefile.files[0];

            save.src = URL.createObjectURL(f);
        }
//*/</script></div></main><div class=banner><script defer src=https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4239362730750625 crossorigin=anonymous></script><ins class=adsbygoogle data-ad-client=ca-pub-4239362730750625 data-ad-slot=5564639719><a href=https://samaritanspurse.org/occ/ target=_blank><img alt="Samaritan's Purse Operation Christmas Child" src=/assets/svg/SamaritansPurseOperationChristmasChild1.svg title="Samaritan's Purse Operation Christmas Child"></a></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><footer><div id=boilerplate><div><a href=/Jesus/>Jesus</a> · <a href=/Bible/>Bible</a></div><div><a href=/html/>HTML</a> · <a href=/css/>CSS</a> · <a href=/js/>JS</a> · <a href=/php/>PHP</a> · <a href=/svg/>SVG</a></div><div><a href=/applications/>Applications</a> · <a href=/editor/>Editor</a> · <a href=/favicon/>Favicon</a></div><div><a href=/htaccess/>.htaccess</a> · <a href=/acme.sh/>acme.sh</a></div><div><a href=/flash/>Flash</a> · <a href=/sketchup/>SketchUp</a> · <a href=/unity/>Unity</a> · <a href=/xcode/>Xcode</a></div><div><a href=/about/>About</a> · <a href=/terms/>Terms</a></div><div><a href=/>osbo.com</a></div></div><div id=copyright>© 2026 Osbo Design</div></footer></div><div id=nav><div class=h1><a href=/Jesus/>JESUS</a></div><div class=h1><a id=switch-Bible>BIBLE</a></div><div id=list-Bible><h2>Overview</h2><div><ul><li><a href=/Bible/>Overview</a></li></ul></div><h2>Search</h2><div><ul><li><a href=/Bible/search/>Search</a></li></ul></div><h2>Download</h2><div><ul><li><a href=/Bible/download/>Download</a></li></ul></div><h2>العربية</h2><div><ul><li><a href=/Bible/asvd/>الكتاب المقدس ترجمة فانديك وسميث (ASVD)</a></li></ul></div><h2>česky</h2><div><ul><li><a href=/Bible/csbkr/>Bible Kralická 1613 (CSBKR)</a></li></ul></div><h2>Dansk</h2><div><ul><li><a href=/Bible/da1871/>Danske Bibel 1871 (DA1871)</a></li></ul></div><h2>Deutsch</h2><div><ul><li><a href=/Bible/delut/>Luther Bible 1912 (DELUT)</a></li><li><a href=/Bible/elb/>Elberfelder 1905 (ELB)</a></li><li><a href=/Bible/elb71/>Elberfelder 1871 (ELB71)</a></li></ul></div><h2>English</h2><div><ul><li><a href=/Bible/asv/>American Standard Version (ASV)</a></li><li><a href=/Bible/kjv/>King James Version (KJV)</a></li><li><a href=/Bible/web/>World English Bible (WEB)</a></li></ul></div><h2>Español</h2><div><ul><li><a href=/Bible/rves/>Reina-Valera Antigua (RVES)</a></li></ul></div><h2>Suomi</h2><div><ul><li><a href=/Bible/fi1776/>Finnish 1776 (FI1776)</a></li><li><a href=/Bible/finpr/>Finnish 1938 (FINPR)</a></li></ul></div><h2>Français</h2><div><ul><li><a href=/Bible/fmar/>Martin 1744 (FMAR)</a></li><li><a href=/Bible/frdby/>Bible Darby en français (FRDBY)</a></li><li><a href=/Bible/lsg/>Louis Segond 1910 (LSG)</a></li><li><a href=/Bible/ost/>Ostervald (OST)</a></li></ul></div><h2>Magyar</h2><div><ul><li><a href=/Bible/kar/>Károli 1590 (KAR)</a></li></ul></div><h2>Bahasa Indonesia</h2><div><ul><li><a href=/Bible/idbar/>Terjemahan Baru (IDBAR)</a></li></ul></div><h2>Italiano</h2><div><ul><li><a href=/Bible/igd/>Giovanni Diodati Bibbia (IGD)</a></li><li><a href=/Bible/itriv/>Italian Riveduta 1927 (ITRIV)</a></li></ul></div><h2>日本語</h2><div><ul><li><a href=/Bible/ja1955/>Colloquial Japanese 1955 (JA1955)</a></li></ul></div><h2>Malagasy</h2><div><ul><li><a href=/Bible/mg1865/>Malagasy Bible (MG1865)</a></li></ul></div><h2>te reo Māori</h2><div><ul><li><a href=/Bible/maor/>Maori Bible (MAOR)</a></li></ul></div><h2>한국어</h2><div><ul><li><a href=/Bible/korvb/>개역한글 (KORVB)</a></li></ul></div><h2>Nederlands</h2><div><ul><li><a href=/Bible/sv1750/>Statenvertaling (SV1750)</a></li></ul></div><h2>Norsk</h2><div><ul><li><a href=/Bible/norsk/>Det Norsk Bibelselskap 1930 (NORSK)</a></li></ul></div><h2>Polski</h2><div><ul><li><a href=/Bible/pbg/>Biblia Gdańska (PBG)</a></li></ul></div><h2>Português</h2><div><ul><li><a href=/Bible/aa/>Almeida Atualizada (AA)</a></li></ul></div><h2>Română</h2><div><ul><li><a href=/Bible/rmnn/>Romanian Cornilescu 1928 (RMNN)</a></li><li><a href=/Bible/vdc/>Versiunea Dumitru Cornilescu (VDC)</a></li><li><a href=/Bible/vdcc/>Versiunea Dumitru Cornilescu Corectată (VDCC)</a></li></ul></div><h2>Pyccкий</h2><div><ul><li><a href=/Bible/rursv/>Синодальный перевод (RURSV)</a></li></ul></div><h2>Shqip</h2><div><ul><li><a href=/Bible/albb/>Albanian Bible (ALBB)</a></li></ul></div><h2>Svenska</h2><div><ul><li><a href=/Bible/sk73/>Karl XII 1873 (SK73)</a></li><li><a href=/Bible/sven/>Svenska 1917 (SVEN)</a></li></ul></div><h2>Wikang Tagalog</h2><div><ul><li><a href=/Bible/tlab/>Ang Biblia (TLAB)</a></li></ul></div><h2>українська</h2><div><ul><li><a href=/Bible/ubio/>Біблія в пер. Івана Огієнка 1962 (UBIO)</a></li><li><a href=/Bible/ukrk/>Біблія в пер. П.Куліша та І.Пулюя 1905 (UKRK)</a></li></ul></div><h2>Tiếng Việt</h2><div><ul><li><a href=/Bible/vi1934/>Vietnamese Bible 1934 (VI1934)</a></li></ul></div><h2>简体中文</h2><div><ul><li><a href=/Bible/cuvs/>简体和合本 (CUVS)</a></li></ul></div><h2>繁體中文</h2><div><ul><li><a href=/Bible/cuv/>和合本 (CUV)</a></li></ul></div></div><div class=h1><a id=switch-html>HTML</a></div><div id=list-html><h2>Overview</h2><div><ul><li><a href=/html/>Overview</a></li></ul></div><h2>Attributes</h2><div><ul><li><a href=/html/attributes/abbr/>abbr</a></li><li><a href=/html/attributes/accept/>accept</a></li><li><a href=/html/attributes/accept-charset/>accept-charset</a></li><li><a href=/html/attributes/accesskey/>accesskey</a></li><li><a href=/html/attributes/action/>action</a></li><li><a href=/html/attributes/alt/>alt</a></li><li><a href=/html/attributes/as/>as</a></li><li><a href=/html/attributes/async/>async</a></li><li><a href=/html/attributes/autocapitalize/>autocapitalize</a></li><li><a href=/html/attributes/autocomplete/>autocomplete</a></li><li><a href=/html/attributes/autofocus/>autofocus</a></li><li><a href=/html/attributes/autoplay/>autoplay</a></li><li><a href=/html/attributes/blocking/>blocking</a></li><li><a href=/html/attributes/charset/>charset</a></li><li><a href=/html/attributes/checked/>checked</a></li><li><a href=/html/attributes/cite/>cite</a></li><li><a href=/html/attributes/class/>class</a></li><li><a href=/html/attributes/color/>color</a></li><li><a href=/html/attributes/cols/>cols</a></li><li><a href=/html/attributes/colspan/>colspan</a></li><li><a href=/html/attributes/contenteditable/>contenteditable</a></li><li><a href=/html/attributes/controls/>controls</a></li><li><a href=/html/attributes/coords/>coords</a></li><li><a href=/html/attributes/crossorigin/>crossorigin</a></li><li><a href=/html/attributes/data/>data</a></li><li><a href=/html/attributes/datetime/>datetime</a></li><li><a href=/html/attributes/decoding/>decoding</a></li><li><a href=/html/attributes/default/>default</a></li><li><a href=/html/attributes/defer/>defer</a></li><li><a href=/html/attributes/dir/>dir</a></li><li><a href=/html/attributes/dirname/>dirname</a></li><li><a href=/html/attributes/disabled/>disabled</a></li><li><a href=/html/attributes/download/>download</a></li><li><a href=/html/attributes/draggable/>draggable</a></li><li><a href=/html/attributes/enctype/>enctype</a></li><li><a href=/html/attributes/enterkeyhint/>enterkeyhint</a></li><li><a href=/html/attributes/exportparts/>exportparts</a></li><li><a href=/html/attributes/fetchpriority/>fetchpriority</a></li><li><a href=/html/attributes/for/>for</a></li><li><a href=/html/attributes/form/>form</a></li><li><a href=/html/attributes/formaction/>formaction</a></li><li><a href=/html/attributes/formenctype/>formenctype</a></li><li><a href=/html/attributes/formmethod/>formmethod</a></li><li><a href=/html/attributes/formnovalidate/>formnovalidate</a></li><li><a href=/html/attributes/formtarget/>formtarget</a></li><li><a href=/html/attributes/headers/>headers</a></li><li><a href=/html/attributes/height/>height</a></li><li><a href=/html/attributes/hidden/>hidden</a></li><li><a href=/html/attributes/high/>high</a></li><li><a href=/html/attributes/href/>href</a></li><li><a href=/html/attributes/hreflang/>hreflang</a></li><li><a href=/html/attributes/http-equiv/>http-equiv</a></li><li><a href=/html/attributes/id/>id</a></li><li><a href=/html/attributes/imagesizes/>imagesizes</a></li><li><a href=/html/attributes/imagesrcset/>imagesrcset</a></li><li><a href=/html/attributes/inert/>inert</a></li><li><a href=/html/attributes/inputmode/>inputmode</a></li><li><a href=/html/attributes/integrity/>integrity</a></li><li><a href=/html/attributes/is/>is</a></li><li><a href=/html/attributes/ismap/>ismap</a></li><li><a href=/html/attributes/itemid/>itemid</a></li><li><a href=/html/attributes/itemprop/>itemprop</a></li><li><a href=/html/attributes/itemref/>itemref</a></li><li><a href=/html/attributes/itemscope/>itemscope</a></li><li><a href=/html/attributes/itemtype/>itemtype</a></li><li><a href=/html/attributes/kind/>kind</a></li><li><a href=/html/attributes/label/>label</a></li><li><a href=/html/attributes/lang/>lang</a></li><li><a href=/html/attributes/list/>list</a></li><li><a href=/html/attributes/loading/>loading</a></li><li><a href=/html/attributes/loop/>loop</a></li><li><a href=/html/attributes/low/>low</a></li><li><a href=/html/attributes/max/>max</a></li><li><a href=/html/attributes/maxlength/>maxlength</a></li><li><a href=/html/attributes/media/>media</a></li><li><a href=/html/attributes/method/>method</a></li><li><a href=/html/attributes/min/>min</a></li><li><a href=/html/attributes/minlength/>minlength</a></li><li><a href=/html/attributes/multiple/>multiple</a></li><li><a href=/html/attributes/muted/>muted</a></li><li><a href=/html/attributes/name/>name</a></li><li><a href=/html/attributes/nomodule/>nomodule</a></li><li><a href=/html/attributes/nonce/>nonce</a></li><li><a href=/html/attributes/novalidate/>novalidate</a></li><li><a href=/html/attributes/onabort/>onabort</a></li><li><a href=/html/attributes/onafterprint/>onafterprint</a></li><li><a href=/html/attributes/onauxclick/>onauxclick</a></li><li><a href=/html/attributes/onbeforeinput/>onbeforeinput</a></li><li><a href=/html/attributes/onbeforeprint/>onbeforeprint</a></li><li><a href=/html/attributes/onbeforetoggle/>onbeforetoggle</a></li><li><a href=/html/attributes/onbeforeunload/>onbeforeunload</a></li><li><a href=/html/attributes/onblur/>onblur</a></li><li><a href=/html/attributes/oncancel/>oncancel</a></li><li><a href=/html/attributes/oncanplay/>oncanplay</a></li><li><a href=/html/attributes/oncanplaythrough/>oncanplaythrough</a></li><li><a href=/html/attributes/onchange/>onchange</a></li><li><a href=/html/attributes/onclick/>onclick</a></li><li><a href=/html/attributes/oncontextlost/>oncontextlost</a></li><li><a href=/html/attributes/oncontextmenu/>oncontextmenu</a></li><li><a href=/html/attributes/oncontextrestored/>oncontextrestored</a></li><li><a href=/html/attributes/oncopy/>oncopy</a></li><li><a href=/html/attributes/oncut/>oncut</a></li><li><a href=/html/attributes/ondblclick/>ondblclick</a></li><li><a href=/html/attributes/ondrag/>ondrag</a></li><li><a href=/html/attributes/ondragend/>ondragend</a></li><li><a href=/html/attributes/ondragenter/>ondragenter</a></li><li><a href=/html/attributes/ondragleave/>ondragleave</a></li><li><a href=/html/attributes/ondragover/>ondragover</a></li><li><a href=/html/attributes/ondragstart/>ondragstart</a></li><li><a href=/html/attributes/ondrop/>ondrop</a></li><li><a href=/html/attributes/ondurationchange/>ondurationchange</a></li><li><a href=/html/attributes/onended/>onended</a></li><li><a href=/html/attributes/onfocus/>onfocus</a></li><li><a href=/html/attributes/onformdata/>onformdata</a></li><li><a href=/html/attributes/onhashchange/>onhashchange</a></li><li><a href=/html/attributes/oninput/>oninput</a></li><li><a href=/html/attributes/oninvalid/>oninvalid</a></li><li><a href=/html/attributes/onkeydown/>onkeydown</a></li><li><a href=/html/attributes/onkeypress/>onkeypress</a></li><li><a href=/html/attributes/onkeyup/>onkeyup</a></li><li><a href=/html/attributes/onlanguagechange/>onlanguagechange</a></li><li><a href=/html/attributes/onload/>onload</a></li><li><a href=/html/attributes/onloadeddata/>onloadeddata</a></li><li><a href=/html/attributes/onloadedmetadata/>onloadedmetadata</a></li><li><a href=/html/attributes/onloadstart/>onloadstart</a></li><li><a href=/html/attributes/onmousedown/>onmousedown</a></li><li><a href=/html/attributes/onmouseenter/>onmouseenter</a></li><li><a href=/html/attributes/onmouseleave/>onmouseleave</a></li><li><a href=/html/attributes/onmousemove/>onmousemove</a></li><li><a href=/html/attributes/onmouseout/>onmouseout</a></li><li><a href=/html/attributes/onmouseover/>onmouseover</a></li><li><a href=/html/attributes/onmouseup/>onmouseup</a></li><li><a href=/html/attributes/onmousewheel/>onmousewheel</a></li><li><a href=/html/attributes/onoffline/>onoffline</a></li><li><a href=/html/attributes/ononline/>ononline</a></li><li><a href=/html/attributes/onpagehide/>onpagehide</a></li><li><a href=/html/attributes/onpageshow/>onpageshow</a></li><li><a href=/html/attributes/onpaste/>onpaste</a></li><li><a href=/html/attributes/onpause/>onpause</a></li><li><a href=/html/attributes/onplay/>onplay</a></li><li><a href=/html/attributes/onplaying/>onplaying</a></li><li><a href=/html/attributes/onprogress/>onprogress</a></li><li><a href=/html/attributes/onratechange/>onratechange</a></li><li><a href=/html/attributes/onreset/>onreset</a></li><li><a href=/html/attributes/onresize/>onresize</a></li><li><a href=/html/attributes/onscroll/>onscroll</a></li><li><a href=/html/attributes/onscrollend/>onscrollend</a></li><li><a href=/html/attributes/onsearch/>onsearch</a></li><li><a href=/html/attributes/onseeked/>onseeked</a></li><li><a href=/html/attributes/onseeking/>onseeking</a></li><li><a href=/html/attributes/onselect/>onselect</a></li><li><a href=/html/attributes/onstorage/>onstorage</a></li><li><a href=/html/attributes/onsubmit/>onsubmit</a></li><li><a href=/html/attributes/onsuspend/>onsuspend</a></li><li><a href=/html/attributes/ontimeupdate/>ontimeupdate</a></li><li><a href=/html/attributes/ontoggle/>ontoggle</a></li><li><a href=/html/attributes/onunload/>onunload</a></li><li><a href=/html/attributes/onvolumechange/>onvolumechange</a></li><li><a href=/html/attributes/onwaiting/>onwaiting</a></li><li><a href=/html/attributes/onwheel/>onwheel</a></li><li><a href=/html/attributes/open/>open</a></li><li><a href=/html/attributes/optimum/>optimum</a></li><li><a href=/html/attributes/part/>part</a></li><li><a href=/html/attributes/pattern/>pattern</a></li><li><a href=/html/attributes/ping/>ping</a></li><li><a href=/html/attributes/placeholder/>placeholder</a></li><li><a href=/html/attributes/playsinline/>playsinline</a></li><li><a href=/html/attributes/popover/>popover</a></li><li><a href=/html/attributes/popovertarget/>popovertarget</a></li><li><a href=/html/attributes/popovertargetaction/>popovertargetaction</a></li><li><a href=/html/attributes/poster/>poster</a></li><li><a href=/html/attributes/preload/>preload</a></li><li><a href=/html/attributes/readonly/>readonly</a></li><li><a href=/html/attributes/referrerpolicy/>referrerpolicy</a></li><li><a href=/html/attributes/rel/>rel</a></li><li><a href=/html/attributes/required/>required</a></li><li><a href=/html/attributes/reversed/>reversed</a></li><li><a href=/html/attributes/rows/>rows</a></li><li><a href=/html/attributes/rowspan/>rowspan</a></li><li><a href=/html/attributes/sandbox/>sandbox</a></li><li><a href=/html/attributes/scope/>scope</a></li><li><a href=/html/attributes/selected/>selected</a></li><li><a href=/html/attributes/shape/>shape</a></li><li><a href=/html/attributes/size/>size</a></li><li><a href=/html/attributes/sizes/>sizes</a></li><li><a href=/html/attributes/slot/>slot</a></li><li><a href=/html/attributes/span/>span</a></li><li><a href=/html/attributes/spellcheck/>spellcheck</a></li><li><a href=/html/attributes/src/>src</a></li><li><a href=/html/attributes/srcdoc/>srcdoc</a></li><li><a href=/html/attributes/srclang/>srclang</a></li><li><a href=/html/attributes/srcset/>srcset</a></li><li><a href=/html/attributes/start/>start</a></li><li><a href=/html/attributes/step/>step</a></li><li><a href=/html/attributes/style/>style</a></li><li><a href=/html/attributes/tabindex/>tabindex</a></li><li><a href=/html/attributes/target/>target</a></li><li><a href=/html/attributes/title/>title</a></li><li><a href=/html/attributes/translate/>translate</a></li><li><a href=/html/attributes/type/>type</a></li><li><a href=/html/attributes/usemap/>usemap</a></li><li><a href=/html/attributes/value/>value</a></li><li><a href=/html/attributes/width/>width</a></li><li><a href=/html/attributes/wrap/>wrap</a></li></ul></div><h2>Elements</h2><div><ul><li><a href=/html/elements/!doctype/>!doctype</a></li><li><a href=/html/elements/a/>a</a></li><li><a href=/html/elements/abbr/>abbr</a></li><li><a href=/html/elements/address/>address</a></li><li><a href=/html/elements/area/>area</a></li><li><a href=/html/elements/article/>article</a></li><li><a href=/html/elements/aside/>aside</a></li><li><a href=/html/elements/audio/>audio</a></li><li><a href=/html/elements/b/>b</a></li><li><a href=/html/elements/base/>base</a></li><li><a href=/html/elements/bdi/>bdi</a></li><li><a href=/html/elements/bdo/>bdo</a></li><li><a href=/html/elements/blockquote/>blockquote</a></li><li><a href=/html/elements/body/>body</a></li><li><a href=/html/elements/br/>br</a></li><li><a href=/html/elements/button/>button</a></li><li><a href=/html/elements/canvas/>canvas</a></li><li><a href=/html/elements/caption/>caption</a></li><li><a href=/html/elements/cite/>cite</a></li><li><a href=/html/elements/code/>code</a></li><li><a href=/html/elements/col/>col</a></li><li><a href=/html/elements/colgroup/>colgroup</a></li><li><a href=/html/elements/data/>data</a></li><li><a href=/html/elements/datalist/>datalist</a></li><li><a href=/html/elements/dd/>dd</a></li><li><a href=/html/elements/del/>del</a></li><li><a href=/html/elements/details/>details</a></li><li><a href=/html/elements/dfn/>dfn</a></li><li><a href=/html/elements/dialog/>dialog</a></li><li><a href=/html/elements/div/>div</a></li><li><a href=/html/elements/dl/>dl</a></li><li><a href=/html/elements/dt/>dt</a></li><li><a href=/html/elements/em/>em</a></li><li><a href=/html/elements/embed/>embed</a></li><li><a href=/html/elements/fieldset/>fieldset</a></li><li><a href=/html/elements/figcaption/>figcaption</a></li><li><a href=/html/elements/figure/>figure</a></li><li><a href=/html/elements/footer/>footer</a></li><li><a href=/html/elements/form/>form</a></li><li><a href=/html/elements/h1/>h1</a></li><li><a href=/html/elements/h2/>h2</a></li><li><a href=/html/elements/h3/>h3</a></li><li><a href=/html/elements/h4/>h4</a></li><li><a href=/html/elements/h5/>h5</a></li><li><a href=/html/elements/h6/>h6</a></li><li><a href=/html/elements/head/>head</a></li><li><a href=/html/elements/header/>header</a></li><li><a href=/html/elements/hgroup/>hgroup</a></li><li><a href=/html/elements/hr/>hr</a></li><li><a href=/html/elements/html/>html</a></li><li><a href=/html/elements/i/>i</a></li><li><a href=/html/elements/iframe/>iframe</a></li><li><a href=/html/elements/img/>img</a></li><li><a href=/html/elements/input/>input</a></li><li><a href=/html/elements/ins/>ins</a></li><li><a href=/html/elements/kbd/>kbd</a></li><li><a href=/html/elements/label/>label</a></li><li><a href=/html/elements/legend/>legend</a></li><li><a href=/html/elements/li/>li</a></li><li><a href=/html/elements/link/>link</a></li><li><a href=/html/elements/main/>main</a></li><li><a href=/html/elements/map/>map</a></li><li><a href=/html/elements/mark/>mark</a></li><li><a href=/html/elements/menu/>menu</a></li><li><a href=/html/elements/meta/>meta</a></li><li><a href=/html/elements/meter/>meter</a></li><li><a href=/html/elements/nav/>nav</a></li><li><a href=/html/elements/noscript/>noscript</a></li><li><a href=/html/elements/object/>object</a></li><li><a href=/html/elements/ol/>ol</a></li><li><a href=/html/elements/optgroup/>optgroup</a></li><li><a href=/html/elements/option/>option</a></li><li><a href=/html/elements/output/>output</a></li><li><a href=/html/elements/p/>p</a></li><li><a href=/html/elements/param/>param</a></li><li><a href=/html/elements/picture/>picture</a></li><li><a href=/html/elements/pre/>pre</a></li><li><a href=/html/elements/progress/>progress</a></li><li><a href=/html/elements/q/>q</a></li><li><a href=/html/elements/rb/>rb</a></li><li><a href=/html/elements/rp/>rp</a></li><li><a href=/html/elements/rt/>rt</a></li><li><a href=/html/elements/rtc/>rtc</a></li><li><a href=/html/elements/ruby/>ruby</a></li><li><a href=/html/elements/s/>s</a></li><li><a href=/html/elements/samp/>samp</a></li><li><a href=/html/elements/script/>script</a></li><li><a href=/html/elements/search/>search</a></li><li><a href=/html/elements/section/>section</a></li><li><a href=/html/elements/select/>select</a></li><li><a href=/html/elements/slot/>slot</a></li><li><a href=/html/elements/small/>small</a></li><li><a href=/html/elements/source/>source</a></li><li><a href=/html/elements/span/>span</a></li><li><a href=/html/elements/strong/>strong</a></li><li><a href=/html/elements/style/>style</a></li><li><a href=/html/elements/sub/>sub</a></li><li><a href=/html/elements/summary/>summary</a></li><li><a href=/html/elements/sup/>sup</a></li><li><a href=/html/elements/table/>table</a></li><li><a href=/html/elements/tbody/>tbody</a></li><li><a href=/html/elements/td/>td</a></li><li><a href=/html/elements/template/>template</a></li><li><a href=/html/elements/textarea/>textarea</a></li><li><a href=/html/elements/tfoot/>tfoot</a></li><li><a href=/html/elements/th/>th</a></li><li><a href=/html/elements/thead/>thead</a></li><li><a href=/html/elements/time/>time</a></li><li><a href=/html/elements/title/>title</a></li><li><a href=/html/elements/tr/>tr</a></li><li><a href=/html/elements/track/>track</a></li><li><a href=/html/elements/u/>u</a></li><li><a href=/html/elements/ul/>ul</a></li><li><a href=/html/elements/var/>var</a></li><li><a href=/html/elements/video/>video</a></li><li><a href=/html/elements/wbr/>wbr</a></li></ul></div><h2>Other</h2><div><ul><li><a href=/html/characters/>Characters</a></li><li><a href=/html/comments/>Comments</a></li><li><a href=/html/datatypes/>Datatypes</a></li></ul></div></div><div class=h1><a id=switch-css>CSS</a></div><div id=list-css><h2>Overview</h2><div><ul><li><a href=/css/>Overview</a></li></ul></div><h2>Functions</h2><div><ul><li><a href=/css/functions/abs/>abs</a></li><li><a href=/css/functions/acos/>acos</a></li><li><a href=/css/functions/asin/>asin</a></li><li><a href=/css/functions/atan/>atan</a></li><li><a href=/css/functions/atan2/>atan2</a></li><li><a href=/css/functions/attr/>attr</a></li><li><a href=/css/functions/calc/>calc</a></li><li><a href=/css/functions/clamp/>clamp</a></li><li><a href=/css/functions/color/>color</a></li><li><a href=/css/functions/conic-gradient/>conic-gradient</a></li><li><a href=/css/functions/cos/>cos</a></li><li><a href=/css/functions/counter/>counter</a></li><li><a href=/css/functions/counters/>counters</a></li><li><a href=/css/functions/hsl/>hsl</a></li><li><a href=/css/functions/hsla/>hsla</a></li><li><a href=/css/functions/hwb/>hwb</a></li><li><a href=/css/functions/if/>if</a></li><li><a href=/css/functions/lab/>lab</a></li><li><a href=/css/functions/lch/>lch</a></li><li><a href=/css/functions/linear-gradient/>linear-gradient</a></li><li><a href=/css/functions/matrix/>matrix</a></li><li><a href=/css/functions/matrix3d/>matrix3d</a></li><li><a href=/css/functions/max/>max</a></li><li><a href=/css/functions/min/>min</a></li><li><a href=/css/functions/mod/>mod</a></li><li><a href=/css/functions/oklab/>oklab</a></li><li><a href=/css/functions/oklch/>oklch</a></li><li><a href=/css/functions/param/>param</a></li><li><a href=/css/functions/perspective/>perspective</a></li><li><a href=/css/functions/radial-gradient/>radial-gradient</a></li><li><a href=/css/functions/rem/>rem</a></li><li><a href=/css/functions/repeating-conic-gradient/>repeating-conic-gradient</a></li><li><a href=/css/functions/repeating-linear-gradient/>repeating-linear-gradient</a></li><li><a href=/css/functions/repeating-radial-gradient/>repeating-radial-gradient</a></li><li><a href=/css/functions/rgb/>rgb</a></li><li><a href=/css/functions/rgba/>rgba</a></li><li><a href=/css/functions/rotate/>rotate</a></li><li><a href=/css/functions/rotate3d/>rotate3d</a></li><li><a href=/css/functions/rotatex/>rotateX</a></li><li><a href=/css/functions/rotatey/>rotateY</a></li><li><a href=/css/functions/rotatez/>rotateZ</a></li><li><a href=/css/functions/round/>round</a></li><li><a href=/css/functions/scale/>scale</a></li><li><a href=/css/functions/scale3d/>scale3d</a></li><li><a href=/css/functions/scalex/>scaleX</a></li><li><a href=/css/functions/scaley/>scaleY</a></li><li><a href=/css/functions/scalez/>scaleZ</a></li><li><a href=/css/functions/sin/>sin</a></li><li><a href=/css/functions/skew/>skew</a></li><li><a href=/css/functions/skewx/>skewX</a></li><li><a href=/css/functions/skewy/>skewY</a></li><li><a href=/css/functions/src/>src</a></li><li><a href=/css/functions/tan/>tan</a></li><li><a href=/css/functions/translate/>translate</a></li><li><a href=/css/functions/translate3d/>translate3d</a></li><li><a href=/css/functions/translatex/>translateX</a></li><li><a href=/css/functions/translatey/>translateY</a></li><li><a href=/css/functions/translatez/>translateZ</a></li><li><a href=/css/functions/url/>url</a></li><li><a href=/css/functions/var/>var</a></li></ul></div><h2>Properties</h2><div><ul><li><a href=/css/properties/accent-color/>accent-color</a></li><li><a href=/css/properties/align-content/>align-content</a></li><li><a href=/css/properties/align-items/>align-items</a></li><li><a href=/css/properties/align-self/>align-self</a></li><li><a href=/css/properties/all/>all</a></li><li><a href=/css/properties/animation/>animation</a></li><li><a href=/css/properties/animation-composition/>animation-composition</a></li><li><a href=/css/properties/animation-delay/>animation-delay</a></li><li><a href=/css/properties/animation-direction/>animation-direction</a></li><li><a href=/css/properties/animation-duration/>animation-duration</a></li><li><a href=/css/properties/animation-fill-mode/>animation-fill-mode</a></li><li><a href=/css/properties/animation-iteration-count/>animation-iteration-count</a></li><li><a href=/css/properties/animation-name/>animation-name</a></li><li><a href=/css/properties/animation-play-state/>animation-play-state</a></li><li><a href=/css/properties/animation-timeline/>animation-timeline</a></li><li><a href=/css/properties/animation-timing-function/>animation-timing-function</a></li><li><a href=/css/properties/appearance/>appearance</a></li><li><a href=/css/properties/aspect-ratio/>aspect-ratio</a></li><li><a href=/css/properties/backdrop-filter/>backdrop-filter</a></li><li><a href=/css/properties/backface-visibility/>backface-visibility</a></li><li><a href=/css/properties/background/>background</a></li><li><a href=/css/properties/background-attachment/>background-attachment</a></li><li><a href=/css/properties/background-blend-mode/>background-blend-mode</a></li><li><a href=/css/properties/background-clip/>background-clip</a></li><li><a href=/css/properties/background-color/>background-color</a></li><li><a href=/css/properties/background-image/>background-image</a></li><li><a href=/css/properties/background-origin/>background-origin</a></li><li><a href=/css/properties/background-position/>background-position</a></li><li><a href=/css/properties/background-position-x/>background-position-x</a></li><li><a href=/css/properties/background-position-y/>background-position-y</a></li><li><a href=/css/properties/background-repeat/>background-repeat</a></li><li><a href=/css/properties/background-size/>background-size</a></li><li><a href=/css/properties/block-ellipsis/>block-ellipsis</a></li><li><a href=/css/properties/block-size/>block-size</a></li><li><a href=/css/properties/border/>border</a></li><li><a href=/css/properties/border-block/>border-block</a></li><li><a href=/css/properties/border-block-color/>border-block-color</a></li><li><a href=/css/properties/border-block-end/>border-block-end</a></li><li><a href=/css/properties/border-block-end-color/>border-block-end-color</a></li><li><a href=/css/properties/border-block-end-style/>border-block-end-style</a></li><li><a href=/css/properties/border-block-end-width/>border-block-end-width</a></li><li><a href=/css/properties/border-block-start/>border-block-start</a></li><li><a href=/css/properties/border-block-start-color/>border-block-start-color</a></li><li><a href=/css/properties/border-block-start-style/>border-block-start-style</a></li><li><a href=/css/properties/border-block-start-width/>border-block-start-width</a></li><li><a href=/css/properties/border-block-style/>border-block-style</a></li><li><a href=/css/properties/border-block-width/>border-block-width</a></li><li><a href=/css/properties/border-bottom/>border-bottom</a></li><li><a href=/css/properties/border-bottom-color/>border-bottom-color</a></li><li><a href=/css/properties/border-bottom-left-radius/>border-bottom-left-radius</a></li><li><a href=/css/properties/border-bottom-right-radius/>border-bottom-right-radius</a></li><li><a href=/css/properties/border-bottom-style/>border-bottom-style</a></li><li><a href=/css/properties/border-bottom-width/>border-bottom-width</a></li><li><a href=/css/properties/border-collapse/>border-collapse</a></li><li><a href=/css/properties/border-color/>border-color</a></li><li><a href=/css/properties/border-end-end-radius/>border-end-end-radius</a></li><li><a href=/css/properties/border-end-start-radius/>border-end-start-radius</a></li><li><a href=/css/properties/border-image/>border-image</a></li><li><a href=/css/properties/border-image-outset/>border-image-outset</a></li><li><a href=/css/properties/border-image-repeat/>border-image-repeat</a></li><li><a href=/css/properties/border-image-slice/>border-image-slice</a></li><li><a href=/css/properties/border-image-source/>border-image-source</a></li><li><a href=/css/properties/border-image-width/>border-image-width</a></li><li><a href=/css/properties/border-inline/>border-inline</a></li><li><a href=/css/properties/border-inline-color/>border-inline-color</a></li><li><a href=/css/properties/border-inline-end/>border-inline-end</a></li><li><a href=/css/properties/border-inline-end-color/>border-inline-end-color</a></li><li><a href=/css/properties/border-inline-end-style/>border-inline-end-style</a></li><li><a href=/css/properties/border-inline-end-width/>border-inline-end-width</a></li><li><a href=/css/properties/border-inline-start/>border-inline-start</a></li><li><a href=/css/properties/border-inline-start-color/>border-inline-start-color</a></li><li><a href=/css/properties/border-inline-start-style/>border-inline-start-style</a></li><li><a href=/css/properties/border-inline-start-width/>border-inline-start-width</a></li><li><a href=/css/properties/border-inline-style/>border-inline-style</a></li><li><a href=/css/properties/border-inline-width/>border-inline-width</a></li><li><a href=/css/properties/border-left/>border-left</a></li><li><a href=/css/properties/border-left-color/>border-left-color</a></li><li><a href=/css/properties/border-left-style/>border-left-style</a></li><li><a href=/css/properties/border-left-width/>border-left-width</a></li><li><a href=/css/properties/border-radius/>border-radius</a></li><li><a href=/css/properties/border-right/>border-right</a></li><li><a href=/css/properties/border-right-color/>border-right-color</a></li><li><a href=/css/properties/border-right-style/>border-right-style</a></li><li><a href=/css/properties/border-right-width/>border-right-width</a></li><li><a href=/css/properties/border-spacing/>border-spacing</a></li><li><a href=/css/properties/border-start-end-radius/>border-start-end-radius</a></li><li><a href=/css/properties/border-start-start-radius/>border-start-start-radius</a></li><li><a href=/css/properties/border-style/>border-style</a></li><li><a href=/css/properties/border-top/>border-top</a></li><li><a href=/css/properties/border-top-color/>border-top-color</a></li><li><a href=/css/properties/border-top-left-radius/>border-top-left-radius</a></li><li><a href=/css/properties/border-top-right-radius/>border-top-right-radius</a></li><li><a href=/css/properties/border-top-style/>border-top-style</a></li><li><a href=/css/properties/border-top-width/>border-top-width</a></li><li><a href=/css/properties/border-width/>border-width</a></li><li><a href=/css/properties/bottom/>bottom</a></li><li><a href=/css/properties/box-decoration-break/>box-decoration-break</a></li><li><a href=/css/properties/box-shadow/>box-shadow</a></li><li><a href=/css/properties/box-sizing/>box-sizing</a></li><li><a href=/css/properties/caption-side/>caption-side</a></li><li><a href=/css/properties/caret/>caret</a></li><li><a href=/css/properties/caret-animation/>caret-animation</a></li><li><a href=/css/properties/caret-color/>caret-color</a></li><li><a href=/css/properties/caret-shape/>caret-shape</a></li><li><a href=/css/properties/clear/>clear</a></li><li><a href=/css/properties/clip/>clip</a></li><li><a href=/css/properties/clip-path/>clip-path</a></li><li><a href=/css/properties/color/>color</a></li><li><a href=/css/properties/color-scheme/>color-scheme</a></li><li><a href=/css/properties/column-count/>column-count</a></li><li><a href=/css/properties/column-fill/>column-fill</a></li><li><a href=/css/properties/column-gap/>column-gap</a></li><li><a href=/css/properties/column-rule/>column-rule</a></li><li><a href=/css/properties/column-rule-color/>column-rule-color</a></li><li><a href=/css/properties/column-rule-style/>column-rule-style</a></li><li><a href=/css/properties/column-rule-width/>column-rule-width</a></li><li><a href=/css/properties/column-span/>column-span</a></li><li><a href=/css/properties/column-width/>column-width</a></li><li><a href=/css/properties/columns/>columns</a></li><li><a href=/css/properties/contain/>contain</a></li><li><a href=/css/properties/contain-intrinsic-block-size/>contain-intrinsic-block-size</a></li><li><a href=/css/properties/contain-intrinsic-height/>contain-intrinsic-height</a></li><li><a href=/css/properties/contain-intrinsic-inline-size/>contain-intrinsic-inline-size</a></li><li><a href=/css/properties/contain-intrinsic-size/>contain-intrinsic-size</a></li><li><a href=/css/properties/contain-intrinsic-width/>contain-intrinsic-width</a></li><li><a href=/css/properties/container/>container</a></li><li><a href=/css/properties/container-name/>container-name</a></li><li><a href=/css/properties/container-type/>container-type</a></li><li><a href=/css/properties/content/>content</a></li><li><a href=/css/properties/content-visibility/>content-visibility</a></li><li><a href=/css/properties/continue/>continue</a></li><li><a href=/css/properties/counter-increment/>counter-increment</a></li><li><a href=/css/properties/counter-reset/>counter-reset</a></li><li><a href=/css/properties/counter-set/>counter-set</a></li><li><a href=/css/properties/cursor/>cursor</a></li><li><a href=/css/properties/direction/>direction</a></li><li><a href=/css/properties/display/>display</a></li><li><a href=/css/properties/empty-cells/>empty-cells</a></li><li><a href=/css/properties/filter/>filter</a></li><li><a href=/css/properties/flex/>flex</a></li><li><a href=/css/properties/flex-basis/>flex-basis</a></li><li><a href=/css/properties/flex-direction/>flex-direction</a></li><li><a href=/css/properties/flex-flow/>flex-flow</a></li><li><a href=/css/properties/flex-grow/>flex-grow</a></li><li><a href=/css/properties/flex-shrink/>flex-shrink</a></li><li><a href=/css/properties/flex-wrap/>flex-wrap</a></li><li><a href=/css/properties/float/>float</a></li><li><a href=/css/properties/font/>font</a></li><li><a href=/css/properties/font-family/>font-family</a></li><li><a href=/css/properties/font-feature-settings/>font-feature-settings</a></li><li><a href=/css/properties/font-kerning/>font-kerning</a></li><li><a href=/css/properties/font-optical-sizing/>font-optical-sizing</a></li><li><a href=/css/properties/font-size/>font-size</a></li><li><a href=/css/properties/font-size-adjust/>font-size-adjust</a></li><li><a href=/css/properties/font-stretch/>font-stretch</a></li><li><a href=/css/properties/font-style/>font-style</a></li><li><a href=/css/properties/font-variant/>font-variant</a></li><li><a href=/css/properties/font-variant-caps/>font-variant-caps</a></li><li><a href=/css/properties/font-variant-ligatures/>font-variant-ligatures</a></li><li><a href=/css/properties/font-variant-numeric/>font-variant-numeric</a></li><li><a href=/css/properties/font-variant-position/>font-variant-position</a></li><li><a href=/css/properties/font-variation-settings/>font-variation-settings</a></li><li><a href=/css/properties/font-weight/>font-weight</a></li><li><a href=/css/properties/forced-color-adjust/>forced-color-adjust</a></li><li><a href=/css/properties/gap/>gap</a></li><li><a href=/css/properties/grid/>grid</a></li><li><a href=/css/properties/grid-area/>grid-area</a></li><li><a href=/css/properties/grid-auto-columns/>grid-auto-columns</a></li><li><a href=/css/properties/grid-auto-flow/>grid-auto-flow</a></li><li><a href=/css/properties/grid-auto-rows/>grid-auto-rows</a></li><li><a href=/css/properties/grid-column/>grid-column</a></li><li><a href=/css/properties/grid-column-end/>grid-column-end</a></li><li><a href=/css/properties/grid-column-start/>grid-column-start</a></li><li><a href=/css/properties/grid-row/>grid-row</a></li><li><a href=/css/properties/grid-row-end/>grid-row-end</a></li><li><a href=/css/properties/grid-row-start/>grid-row-start</a></li><li><a href=/css/properties/grid-template/>grid-template</a></li><li><a href=/css/properties/grid-template-areas/>grid-template-areas</a></li><li><a href=/css/properties/grid-template-columns/>grid-template-columns</a></li><li><a href=/css/properties/grid-template-rows/>grid-template-rows</a></li><li><a href=/css/properties/hanging-punctuation/>hanging-punctuation</a></li><li><a href=/css/properties/height/>height</a></li><li><a href=/css/properties/hyphens/>hyphens</a></li><li><a href=/css/properties/image-rendering/>image-rendering</a></li><li><a href=/css/properties/initial-letter/>initial-letter</a></li><li><a href=/css/properties/initial-letter-align/>initial-letter-align</a></li><li><a href=/css/properties/inline-size/>inline-size</a></li><li><a href=/css/properties/inset/>inset</a></li><li><a href=/css/properties/inset-block/>inset-block</a></li><li><a href=/css/properties/inset-block-end/>inset-block-end</a></li><li><a href=/css/properties/inset-block-start/>inset-block-start</a></li><li><a href=/css/properties/inset-inline/>inset-inline</a></li><li><a href=/css/properties/inset-inline-end/>inset-inline-end</a></li><li><a href=/css/properties/inset-inline-start/>inset-inline-start</a></li><li><a href=/css/properties/isolation/>isolation</a></li><li><a href=/css/properties/justify-content/>justify-content</a></li><li><a href=/css/properties/justify-items/>justify-items</a></li><li><a href=/css/properties/justify-self/>justify-self</a></li><li><a href=/css/properties/left/>left</a></li><li><a href=/css/properties/letter-spacing/>letter-spacing</a></li><li><a href=/css/properties/line-break/>line-break</a></li><li><a href=/css/properties/line-clamp/>line-clamp</a></li><li><a href=/css/properties/line-height/>line-height</a></li><li><a href=/css/properties/list-style/>list-style</a></li><li><a href=/css/properties/list-style-image/>list-style-image</a></li><li><a href=/css/properties/list-style-position/>list-style-position</a></li><li><a href=/css/properties/list-style-type/>list-style-type</a></li><li><a href=/css/properties/margin/>margin</a></li><li><a href=/css/properties/margin-block/>margin-block</a></li><li><a href=/css/properties/margin-block-end/>margin-block-end</a></li><li><a href=/css/properties/margin-block-start/>margin-block-start</a></li><li><a href=/css/properties/margin-bottom/>margin-bottom</a></li><li><a href=/css/properties/margin-inline/>margin-inline</a></li><li><a href=/css/properties/margin-inline-end/>margin-inline-end</a></li><li><a href=/css/properties/margin-inline-start/>margin-inline-start</a></li><li><a href=/css/properties/margin-left/>margin-left</a></li><li><a href=/css/properties/margin-right/>margin-right</a></li><li><a href=/css/properties/margin-top/>margin-top</a></li><li><a href=/css/properties/mask/>mask</a></li><li><a href=/css/properties/mask-border/>mask-border</a></li><li><a href=/css/properties/mask-border-mode/>mask-border-mode</a></li><li><a href=/css/properties/mask-border-outset/>mask-border-outset</a></li><li><a href=/css/properties/mask-border-repeat/>mask-border-repeat</a></li><li><a href=/css/properties/mask-border-slice/>mask-border-slice</a></li><li><a href=/css/properties/mask-border-source/>mask-border-source</a></li><li><a href=/css/properties/mask-border-width/>mask-border-width</a></li><li><a href=/css/properties/mask-clip/>mask-clip</a></li><li><a href=/css/properties/mask-composite/>mask-composite</a></li><li><a href=/css/properties/mask-image/>mask-image</a></li><li><a href=/css/properties/mask-mode/>mask-mode</a></li><li><a href=/css/properties/mask-origin/>mask-origin</a></li><li><a href=/css/properties/mask-position/>mask-position</a></li><li><a href=/css/properties/mask-repeat/>mask-repeat</a></li><li><a href=/css/properties/mask-size/>mask-size</a></li><li><a href=/css/properties/mask-type/>mask-type</a></li><li><a href=/css/properties/math-depth/>math-depth</a></li><li><a href=/css/properties/math-shift/>math-shift</a></li><li><a href=/css/properties/math-style/>math-style</a></li><li><a href=/css/properties/max-block-size/>max-block-size</a></li><li><a href=/css/properties/max-height/>max-height</a></li><li><a href=/css/properties/max-inline-size/>max-inline-size</a></li><li><a href=/css/properties/max-lines/>max-lines</a></li><li><a href=/css/properties/max-width/>max-width</a></li><li><a href=/css/properties/min-block-size/>min-block-size</a></li><li><a href=/css/properties/min-height/>min-height</a></li><li><a href=/css/properties/min-inline-size/>min-inline-size</a></li><li><a href=/css/properties/min-width/>min-width</a></li><li><a href=/css/properties/mix-blend-mode/>mix-blend-mode</a></li><li><a href=/css/properties/nav-down/>nav-down</a></li><li><a href=/css/properties/nav-left/>nav-left</a></li><li><a href=/css/properties/nav-right/>nav-right</a></li><li><a href=/css/properties/nav-up/>nav-up</a></li><li><a href=/css/properties/object-fit/>object-fit</a></li><li><a href=/css/properties/object-position/>object-position</a></li><li><a href=/css/properties/opacity/>opacity</a></li><li><a href=/css/properties/orphans/>orphans</a></li><li><a href=/css/properties/outline/>outline</a></li><li><a href=/css/properties/outline-color/>outline-color</a></li><li><a href=/css/properties/outline-offset/>outline-offset</a></li><li><a href=/css/properties/outline-style/>outline-style</a></li><li><a href=/css/properties/outline-width/>outline-width</a></li><li><a href=/css/properties/overflow/>overflow</a></li><li><a href=/css/properties/overflow-block/>overflow-block</a></li><li><a href=/css/properties/overflow-clip-margin/>overflow-clip-margin</a></li><li><a href=/css/properties/overflow-inline/>overflow-inline</a></li><li><a href=/css/properties/overflow-wrap/>overflow-wrap</a></li><li><a href=/css/properties/overflow-x/>overflow-x</a></li><li><a href=/css/properties/overflow-y/>overflow-y</a></li><li><a href=/css/properties/padding/>padding</a></li><li><a href=/css/properties/padding-block/>padding-block</a></li><li><a href=/css/properties/padding-block-end/>padding-block-end</a></li><li><a href=/css/properties/padding-block-start/>padding-block-start</a></li><li><a href=/css/properties/padding-bottom/>padding-bottom</a></li><li><a href=/css/properties/padding-inline/>padding-inline</a></li><li><a href=/css/properties/padding-inline-end/>padding-inline-end</a></li><li><a href=/css/properties/padding-inline-start/>padding-inline-start</a></li><li><a href=/css/properties/padding-left/>padding-left</a></li><li><a href=/css/properties/padding-right/>padding-right</a></li><li><a href=/css/properties/padding-top/>padding-top</a></li><li><a href=/css/properties/paint-order/>paint-order</a></li><li><a href=/css/properties/perspective/>perspective</a></li><li><a href=/css/properties/perspective-origin/>perspective-origin</a></li><li><a href=/css/properties/place-content/>place-content</a></li><li><a href=/css/properties/place-items/>place-items</a></li><li><a href=/css/properties/place-self/>place-self</a></li><li><a href=/css/properties/pointer-events/>pointer-events</a></li><li><a href=/css/properties/position/>position</a></li><li><a href=/css/properties/print-color-adjust/>print-color-adjust</a></li><li><a href=/css/properties/quotes/>quotes</a></li><li><a href=/css/properties/resize/>resize</a></li><li><a href=/css/properties/right/>right</a></li><li><a href=/css/properties/rotate/>rotate</a></li><li><a href=/css/properties/row-gap/>row-gap</a></li><li><a href=/css/properties/scale/>scale</a></li><li><a href=/css/properties/scroll-behavior/>scroll-behavior</a></li><li><a href=/css/properties/scroll-margin/>scroll-margin</a></li><li><a href=/css/properties/scroll-margin-block/>scroll-margin-block</a></li><li><a href=/css/properties/scroll-margin-block-end/>scroll-margin-block-end</a></li><li><a href=/css/properties/scroll-margin-block-start/>scroll-margin-block-start</a></li><li><a href=/css/properties/scroll-margin-bottom/>scroll-margin-bottom</a></li><li><a href=/css/properties/scroll-margin-inline/>scroll-margin-inline</a></li><li><a href=/css/properties/scroll-margin-inline-end/>scroll-margin-inline-end</a></li><li><a href=/css/properties/scroll-margin-inline-start/>scroll-margin-inline-start</a></li><li><a href=/css/properties/scroll-margin-left/>scroll-margin-left</a></li><li><a href=/css/properties/scroll-margin-right/>scroll-margin-right</a></li><li><a href=/css/properties/scroll-margin-top/>scroll-margin-top</a></li><li><a href=/css/properties/scroll-padding/>scroll-padding</a></li><li><a href=/css/properties/scroll-padding-block/>scroll-padding-block</a></li><li><a href=/css/properties/scroll-padding-block-end/>scroll-padding-block-end</a></li><li><a href=/css/properties/scroll-padding-block-start/>scroll-padding-block-start</a></li><li><a href=/css/properties/scroll-padding-bottom/>scroll-padding-bottom</a></li><li><a href=/css/properties/scroll-padding-inline/>scroll-padding-inline</a></li><li><a href=/css/properties/scroll-padding-inline-end/>scroll-padding-inline-end</a></li><li><a href=/css/properties/scroll-padding-inline-start/>scroll-padding-inline-start</a></li><li><a href=/css/properties/scroll-padding-left/>scroll-padding-left</a></li><li><a href=/css/properties/scroll-padding-right/>scroll-padding-right</a></li><li><a href=/css/properties/scroll-padding-top/>scroll-padding-top</a></li><li><a href=/css/properties/scroll-snap-align/>scroll-snap-align</a></li><li><a href=/css/properties/scroll-snap-stop/>scroll-snap-stop</a></li><li><a href=/css/properties/scroll-snap-type/>scroll-snap-type</a></li><li><a href=/css/properties/scroll-timeline/>scroll-timeline</a></li><li><a href=/css/properties/scroll-timeline-axis/>scroll-timeline-axis</a></li><li><a href=/css/properties/scroll-timeline-name/>scroll-timeline-name</a></li><li><a href=/css/properties/scrollbar-color/>scrollbar-color</a></li><li><a href=/css/properties/scrollbar-gutter/>scrollbar-gutter</a></li><li><a href=/css/properties/scrollbar-width/>scrollbar-width</a></li><li><a href=/css/properties/shape-image-threshold/>shape-image-threshold</a></li><li><a href=/css/properties/shape-margin/>shape-margin</a></li><li><a href=/css/properties/shape-outside/>shape-outside</a></li><li><a href=/css/properties/shape-rendering/>shape-rendering</a></li><li><a href=/css/properties/tab-size/>tab-size</a></li><li><a href=/css/properties/table-layout/>table-layout</a></li><li><a href=/css/properties/text-align/>text-align</a></li><li><a href=/css/properties/text-align-all/>text-align-all</a></li><li><a href=/css/properties/text-align-last/>text-align-last</a></li><li><a href=/css/properties/text-combine-upright/>text-combine-upright</a></li><li><a href=/css/properties/text-decoration/>text-decoration</a></li><li><a href=/css/properties/text-decoration-color/>text-decoration-color</a></li><li><a href=/css/properties/text-decoration-line/>text-decoration-line</a></li><li><a href=/css/properties/text-decoration-skip-ink/>text-decoration-skip-ink</a></li><li><a href=/css/properties/text-decoration-style/>text-decoration-style</a></li><li><a href=/css/properties/text-decoration-thickness/>text-decoration-thickness</a></li><li><a href=/css/properties/text-decoration-trim/>text-decoration-trim</a></li><li><a href=/css/properties/text-emphasis/>text-emphasis</a></li><li><a href=/css/properties/text-emphasis-color/>text-emphasis-color</a></li><li><a href=/css/properties/text-emphasis-position/>text-emphasis-position</a></li><li><a href=/css/properties/text-emphasis-style/>text-emphasis-style</a></li><li><a href=/css/properties/text-indent/>text-indent</a></li><li><a href=/css/properties/text-justify/>text-justify</a></li><li><a href=/css/properties/text-orientation/>text-orientation</a></li><li><a href=/css/properties/text-overflow/>text-overflow</a></li><li><a href=/css/properties/text-rendering/>text-rendering</a></li><li><a href=/css/properties/text-shadow/>text-shadow</a></li><li><a href=/css/properties/text-transform/>text-transform</a></li><li><a href=/css/properties/text-underline-offset/>text-underline-offset</a></li><li><a href=/css/properties/text-underline-position/>text-underline-position</a></li><li><a href=/css/properties/top/>top</a></li><li><a href=/css/properties/transform/>transform</a></li><li><a href=/css/properties/transform-box/>transform-box</a></li><li><a href=/css/properties/transform-origin/>transform-origin</a></li><li><a href=/css/properties/transform-style/>transform-style</a></li><li><a href=/css/properties/transition/>transition</a></li><li><a href=/css/properties/transition-delay/>transition-delay</a></li><li><a href=/css/properties/transition-duration/>transition-duration</a></li><li><a href=/css/properties/transition-property/>transition-property</a></li><li><a href=/css/properties/transition-timing-function/>transition-timing-function</a></li><li><a href=/css/properties/translate/>translate</a></li><li><a href=/css/properties/unicode-bidi/>unicode-bidi</a></li><li><a href=/css/properties/vertical-align/>vertical-align</a></li><li><a href=/css/properties/visibility/>visibility</a></li><li><a href=/css/properties/white-space/>white-space</a></li><li><a href=/css/properties/widows/>widows</a></li><li><a href=/css/properties/width/>width</a></li><li><a href=/css/properties/word-break/>word-break</a></li><li><a href=/css/properties/word-spacing/>word-spacing</a></li><li><a href=/css/properties/word-wrap/>word-wrap</a></li><li><a href=/css/properties/writing-mode/>writing-mode</a></li><li><a href=/css/properties/z-index/>z-index</a></li><li><a href=/css/properties/zoom/>zoom</a></li></ul></div><h2>Pseudo-Classes</h2><div><ul><li><a href=/css/pseudo-classes/active/>active</a></li><li><a href=/css/pseudo-classes/any-link/>any-link</a></li><li><a href=/css/pseudo-classes/autofill/>autofill</a></li><li><a href=/css/pseudo-classes/blank/>blank</a></li><li><a href=/css/pseudo-classes/checked/>checked</a></li><li><a href=/css/pseudo-classes/default/>default</a></li><li><a href=/css/pseudo-classes/defined/>defined</a></li><li><a href=/css/pseudo-classes/dir/>dir</a></li><li><a href=/css/pseudo-classes/disabled/>disabled</a></li><li><a href=/css/pseudo-classes/empty/>empty</a></li><li><a href=/css/pseudo-classes/enabled/>enabled</a></li><li><a href=/css/pseudo-classes/first-child/>first-child</a></li><li><a href=/css/pseudo-classes/first-of-type/>first-of-type</a></li><li><a href=/css/pseudo-classes/focus/>focus</a></li><li><a href=/css/pseudo-classes/focus-visible/>focus-visible</a></li><li><a href=/css/pseudo-classes/focus-within/>focus-within</a></li><li><a href=/css/pseudo-classes/fullscreen/>fullscreen</a></li><li><a href=/css/pseudo-classes/has/>has</a></li><li><a href=/css/pseudo-classes/hover/>hover</a></li><li><a href=/css/pseudo-classes/in-range/>in-range</a></li><li><a href=/css/pseudo-classes/indeterminate/>indeterminate</a></li><li><a href=/css/pseudo-classes/invalid/>invalid</a></li><li><a href=/css/pseudo-classes/is/>is</a></li><li><a href=/css/pseudo-classes/lang/>lang</a></li><li><a href=/css/pseudo-classes/last-child/>last-child</a></li><li><a href=/css/pseudo-classes/last-of-type/>last-of-type</a></li><li><a href=/css/pseudo-classes/link/>link</a></li><li><a href=/css/pseudo-classes/local-link/>local-link</a></li><li><a href=/css/pseudo-classes/modal/>modal</a></li><li><a href=/css/pseudo-classes/not/>not</a></li><li><a href=/css/pseudo-classes/nth-child/>nth-child</a></li><li><a href=/css/pseudo-classes/nth-col/>nth-col</a></li><li><a href=/css/pseudo-classes/nth-last-child/>nth-last-child</a></li><li><a href=/css/pseudo-classes/nth-last-col/>nth-last-col</a></li><li><a href=/css/pseudo-classes/nth-last-of-type/>nth-last-of-type</a></li><li><a href=/css/pseudo-classes/nth-of-type/>nth-of-type</a></li><li><a href=/css/pseudo-classes/only-child/>only-child</a></li><li><a href=/css/pseudo-classes/only-of-type/>only-of-type</a></li><li><a href=/css/pseudo-classes/optional/>optional</a></li><li><a href=/css/pseudo-classes/out-of-range/>out-of-range</a></li><li><a href=/css/pseudo-classes/picture-in-picture/>picture-in-picture</a></li><li><a href=/css/pseudo-classes/placeholder-shown/>placeholder-shown</a></li><li><a href=/css/pseudo-classes/popover-open/>popover-open</a></li><li><a href=/css/pseudo-classes/read-only/>read-only</a></li><li><a href=/css/pseudo-classes/read-write/>read-write</a></li><li><a href=/css/pseudo-classes/required/>required</a></li><li><a href=/css/pseudo-classes/root/>root</a></li><li><a href=/css/pseudo-classes/scope/>scope</a></li><li><a href=/css/pseudo-classes/target/>target</a></li><li><a href=/css/pseudo-classes/target-within/>target-within</a></li><li><a href=/css/pseudo-classes/valid/>valid</a></li><li><a href=/css/pseudo-classes/visited/>visited</a></li><li><a href=/css/pseudo-classes/where/>where</a></li></ul></div><h2>Pseudo-Elements</h2><div><ul><li><a href=/css/pseudo-elements/after/>after</a></li><li><a href=/css/pseudo-elements/backdrop/>backdrop</a></li><li><a href=/css/pseudo-elements/before/>before</a></li><li><a href=/css/pseudo-elements/details-content/>details-content</a></li><li><a href=/css/pseudo-elements/file-selector-button/>file-selector-button</a></li><li><a href=/css/pseudo-elements/first-letter/>first-letter</a></li><li><a href=/css/pseudo-elements/first-line/>first-line</a></li><li><a href=/css/pseudo-elements/highlight/>highlight</a></li><li><a href=/css/pseudo-elements/marker/>marker</a></li><li><a href=/css/pseudo-elements/part/>part</a></li><li><a href=/css/pseudo-elements/placeholder/>placeholder</a></li><li><a href=/css/pseudo-elements/selection/>selection</a></li></ul></div><h2>Units</h2><div><ul><li><a href=/css/units/cap/>cap</a></li><li><a href=/css/units/ch/>ch</a></li><li><a href=/css/units/cm/>cm</a></li><li><a href=/css/units/cqb/>cqb</a></li><li><a href=/css/units/cqh/>cqh</a></li><li><a href=/css/units/cqi/>cqi</a></li><li><a href=/css/units/cqmax/>cqmax</a></li><li><a href=/css/units/cqmin/>cqmin</a></li><li><a href=/css/units/cqw/>cqw</a></li><li><a href=/css/units/deg/>deg</a></li><li><a href=/css/units/dpcm/>dpcm</a></li><li><a href=/css/units/dpi/>dpi</a></li><li><a href=/css/units/dppx/>dppx</a></li><li><a href=/css/units/dvb/>dvb</a></li><li><a href=/css/units/dvh/>dvh</a></li><li><a href=/css/units/dvi/>dvi</a></li><li><a href=/css/units/dvmax/>dvmax</a></li><li><a href=/css/units/dvmin/>dvmin</a></li><li><a href=/css/units/dvw/>dvw</a></li><li><a href=/css/units/em/>em</a></li><li><a href=/css/units/ex/>ex</a></li><li><a href=/css/units/grad/>grad</a></li><li><a href=/css/units/ic/>ic</a></li><li><a href=/css/units/in/>in</a></li><li><a href=/css/units/lvb/>lvb</a></li><li><a href=/css/units/lvh/>lvh</a></li><li><a href=/css/units/lvi/>lvi</a></li><li><a href=/css/units/lvmax/>lvmax</a></li><li><a href=/css/units/lvmin/>lvmin</a></li><li><a href=/css/units/lvw/>lvw</a></li><li><a href=/css/units/mm/>mm</a></li><li><a href=/css/units/ms/>ms</a></li><li><a href=/css/units/pc/>pc</a></li><li><a href=/css/units/pt/>pt</a></li><li><a href=/css/units/px/>px</a></li><li><a href=/css/units/q/>Q</a></li><li><a href=/css/units/rad/>rad</a></li><li><a href=/css/units/rem/>rem</a></li><li><a href=/css/units/s/>s</a></li><li><a href=/css/units/svb/>svb</a></li><li><a href=/css/units/svh/>svh</a></li><li><a href=/css/units/svi/>svi</a></li><li><a href=/css/units/svmax/>svmax</a></li><li><a href=/css/units/svmin/>svmin</a></li><li><a href=/css/units/svw/>svw</a></li><li><a href=/css/units/turn/>turn</a></li><li><a href=/css/units/vb/>vb</a></li><li><a href=/css/units/vh/>vh</a></li><li><a href=/css/units/vi/>vi</a></li><li><a href=/css/units/vmax/>vmax</a></li><li><a href=/css/units/vmin/>vmin</a></li><li><a href=/css/units/vw/>vw</a></li></ul></div></div><div class=h1><a id=switch-js>JS</a></div><div id=list-js><h2>Overview</h2><div><ul><li><a href=/js/>Overview</a></li></ul></div><h2>AbortController</h2><div><ul><li><a href=/js/abortcontroller/abort/>abort</a></li><li><a href=/js/abortcontroller/abortcontroller/>AbortController</a></li><li><a href=/js/abortcontroller/signal/>signal</a></li></ul></div><h2>AbstractRange</h2><div><ul><li><a href=/js/abstractrange/collapsed/>collapsed</a></li><li><a href=/js/abstractrange/endcontainer/>endContainer</a></li><li><a href=/js/abstractrange/endoffset/>endOffset</a></li><li><a href=/js/abstractrange/startcontainer/>startContainer</a></li><li><a href=/js/abstractrange/startoffset/>startOffset</a></li></ul></div><h2>AbortSignal</h2><div><ul><li><a href=/js/abortsignal/abort/>abort</a></li><li><a href=/js/abortsignal/aborted/>aborted</a></li><li><a href=/js/abortsignal/reason/>reason</a></li><li><a href=/js/abortsignal/throwifaborted/>throwIfAborted</a></li><li><a href=/js/abortsignal/timeout/>timeout</a></li></ul></div><h2>ChildNode</h2><div><ul><li><a href=/js/childnode/after/>after</a></li><li><a href=/
10000
js/childnode/before/>before</a></li><li><a href=/js/childnode/remove/>remove</a></li><li><a href=/js/childnode/replacewith/>replaceWith</a></li></ul></div><h2>Comment</h2><div><ul><li><a href=/js/comment/comment/>Comment</a></li></ul></div><h2>console</h2><div><ul><li><a href=/js/console/assert/>assert</a></li><li><a href=/js/console/clear/>clear</a></li><li><a href=/js/console/count/>count</a></li><li><a href=/js/console/countreset/>countReset</a></li><li><a href=/js/console/debug/>debug</a></li><li><a href=/js/console/dir/>dir</a></li><li><a href=/js/console/dirxml/>dirxml</a></li><li><a href=/js/console/error/>error</a></li><li><a href=/js/console/group/>group</a></li><li><a href=/js/console/groupcollapsed/>groupCollapsed</a></li><li><a href=/js/console/groupend/>groupEnd</a></li><li><a href=/js/console/info/>info</a></li><li><a href=/js/console/log/>log</a></li><li><a href=/js/console/table/>table</a></li><li><a href=/js/console/time/>time</a></li><li><a href=/js/console/timeend/>timeEnd</a></li><li><a href=/js/console/timelog/>timeLog</a></li><li><a href=/js/console/trace/>trace</a></li><li><a href=/js/console/warn/>warn</a></li></ul></div><h2>CustomEvent</h2><div><ul><li><a href=/js/customevent/customevent/>CustomEvent</a></li><li><a href=/js/customevent/detail/>detail</a></li></ul></div><h2>Declarations</h2><div><ul><li><a href=/js/declarations/const/>const</a></li><li><a href=/js/declarations/let/>let</a></li><li><a href=/js/declarations/var/>var</a></li></ul></div><h2>Document</h2><div><ul><li><a href=/js/document/adoptnode/>adoptNode</a></li><li><a href=/js/document/body/>body</a></li><li><a href=/js/document/characterset/>characterSet</a></li><li><a href=/js/document/close/>close</a></li><li><a href=/js/document/compatmode/>compatMode</a></li><li><a href=/js/document/contenttype/>contentType</a></li><li><a href=/js/document/cookie/>cookie</a></li><li><a href=/js/document/createcdatasection/>createCDATASection</a></li><li><a href=/js/document/createcomment/>createComment</a></li><li><a href=/js/document/createdocumentfragment/>createDocumentFragment</a></li><li><a href=/js/document/createelement/>createElement</a></li><li><a href=/js/document/createelementns/>createElementNS</a></li><li><a href=/js/document/createprocessinginstruction/>createProcessingInstruction</a></li><li><a href=/js/document/createtextnode/>createTextNode</a></li><li><a href=/js/document/currentscript/>currentScript</a></li><li><a href=/js/document/defaultview/>defaultView</a></li><li><a href=/js/document/designmode/>designMode</a></li><li><a href=/js/document/dir/>dir</a></li><li><a href=/js/document/doctype/>doctype</a></li><li><a href=/js/document/document/>Document</a></li><li><a href=/js/document/documentelement/>documentElement</a></li><li><a href=/js/document/documenturi/>documentURI</a></li><li><a href=/js/document/domain/>domain</a></li><li><a href=/js/document/embeds/>embeds</a></li><li><a href=/js/document/exitpictureinpicture/>exitPictureInPicture</a></li><li><a href=/js/document/forms/>forms</a></li><li><a href=/js/document/getelementsbyclassname/>getElementsByClassName</a></li><li><a href=/js/document/getelementsbyname/>getElementsByName</a></li><li><a href=/js/document/getelementsbytagname/>getElementsByTagName</a></li><li><a href=/js/document/getelementsbytagnamens/>getElementsByTagNameNS</a></li><li><a href=/js/document/hasfocus/>hasFocus</a></li><li><a href=/js/document/head/>head</a></li><li><a href=/js/document/hidden/>hidden</a></li><li><a href=/js/document/images/>images</a></li><li><a href=/js/document/implementation/>implementation</a></li><li><a href=/js/document/importnode/>importNode</a></li><li><a href=/js/document/lastmodified/>lastModified</a></li><li><a href=/js/document/links/>links</a></li><li><a href=/js/document/location/>location</a></li><li><a href=/js/document/onreadystatechange/>onreadystatechange</a></li><li><a href=/js/document/onvisibilitychange/>onvisibilitychange</a></li><li><a href=/js/document/open/>open</a></li><li><a href=/js/document/parsehtmlunsafe/>parseHTMLUnsafe</a></li><li><a href=/js/document/pictureinpictureenabled/>pictureInPictureEnabled</a></li><li><a href=/js/document/plugins/>plugins</a></li><li><a href=/js/document/readystate/>readyState</a></li><li><a href=/js/document/referrer/>referrer</a></li><li><a href=/js/document/scripts/>scripts</a></li><li><a href=/js/document/title/>title</a></li><li><a href=/js/document/url/>URL</a></li><li><a href=/js/document/visibilitystate/>visibilityState</a></li><li><a href=/js/document/write/>write</a></li><li><a href=/js/document/writeln/>writeln</a></li></ul></div><h2>DocumentFragment</h2><div><ul><li><a href=/js/documentfragment/documentfragment/>DocumentFragment</a></li></ul></div><h2>DocumentOrShadowRoot</h2><div><ul><li><a href=/js/documentorshadowroot/activeelement/>activeElement</a></li><li><a href=/js/documentorshadowroot/pictureinpictureelement/>pictureInPictureElement</a></li></ul></div><h2>DOMImplementation</h2><div><ul><li><a href=/js/domimplementation/createdocument/>createDocument</a></li><li><a href=/js/domimplementation/createdocumenttype/>createDocumentType</a></li><li><a href=/js/domimplementation/createhtmldocument/>createHTMLDocument</a></li></ul></div><h2>DOMStringList</h2><div><ul><li><a href=/js/domstringlist/contains/>contains</a></li><li><a href=/js/domstringlist/item/>item</a></li><li><a href=/js/domstringlist/length/>length</a></li></ul></div><h2>DOMTokenList</h2><div><ul><li><a href=/js/domtokenlist/add/>add</a></li><li><a href=/js/domtokenlist/contains/>contains</a></li><li><a href=/js/domtokenlist/item/>item</a></li><li><a href=/js/domtokenlist/length/>length</a></li><li><a href=/js/domtokenlist/remove/>remove</a></li><li><a href=/js/domtokenlist/replace/>replace</a></li><li><a href=/js/domtokenlist/supports/>supports</a></li><li><a href=/js/domtokenlist/toggle/>toggle</a></li><li><a href=/js/domtokenlist/value/>value</a></li></ul></div><h2>Element</h2><div><ul><li><a href=/js/element/attachshadow/>attachShadow</a></li><li><a href=/js/element/classlist/>classList</a></li><li><a href=/js/element/classname/>className</a></li><li><a href=/js/element/closest/>closest</a></li><li><a href=/js/element/getattribute/>getAttribute</a></li><li><a href=/js/element/getattributenames/>getAttributeNames</a></li><li><a href=/js/element/getattributens/>getAttributeNS</a></li><li><a href=/js/element/hasattribute/>hasAttribute</a></li><li><a href=/js/element/hasattributens/>hasAttributeNS</a></li><li><a href=/js/element/hasattributes/>hasAttributes</a></li><li><a href=/js/element/id/>id</a></li><li><a href=/js/element/innerhtml/>innerHTML</a></li><li><a href=/js/element/insertadjacenthtml/>insertAdjacentHTML</a></li><li><a href=/js/element/localname/>localName</a></li><li><a href=/js/element/matches/>matches</a></li><li><a href=/js/element/namespaceuri/>namespaceURI</a></li><li><a href=/js/element/outerhtml/>outerHTML</a></li><li><a href=/js/element/prefix/>prefix</a></li><li><a href=/js/element/removeattribute/>removeAttribute</a></li><li><a href=/js/element/removeattributens/>removeAttributeNS</a></li><li><a href=/js/element/setattribute/>setAttribute</a></li><li><a href=/js/element/setattributens/>setAttributeNS</a></li><li><a href=/js/element/shadowroot/>shadowRoot</a></li><li><a href=/js/element/slot/>slot</a></li><li><a href=/js/element/tagname/>tagName</a></li><li><a href=/js/element/toggleattribute/>toggleAttribute</a></li></ul></div><h2>Event</h2><div><ul><li><a href=/js/event/bubbles/>bubbles</a></li><li><a href=/js/event/cancelable/>cancelable</a></li><li><a href=/js/event/composed/>composed</a></li><li><a href=/js/event/composedpath/>composedPath</a></li><li><a href=/js/event/currenttarget/>currentTarget</a></li><li><a href=/js/event/defaultprevented/>defaultPrevented</a></li><li><a href=/js/event/event/>Event</a></li><li><a href=/js/event/eventphase/>eventPhase</a></li><li><a href=/js/event/istrusted/>isTrusted</a></li><li><a href=/js/event/preventdefault/>preventDefault</a></li><li><a href=/js/event/stopimmediatepropagation/>stopImmediatePropagation</a></li><li><a href=/js/event/stoppropagation/>stopPropagation</a></li><li><a href=/js/event/target/>target</a></li><li><a href=/js/event/timestamp/>timeStamp</a></li><li><a href=/js/event/type/>type</a></li></ul></div><h2>EventTarget</h2><div><ul><li><a href=/js/eventtarget/addeventlistener/>addEventListener</a></li><li><a href=/js/eventtarget/dispatchevent/>dispatchEvent</a></li><li><a href=/js/eventtarget/eventtarget/>EventTarget</a></li><li><a href=/js/eventtarget/removeeventlistener/>removeEventListener</a></li></ul></div><h2>HTMLAllCollection</h2><div><ul><li><a href=/js/htmlallcollection/item/>item</a></li><li><a href=/js/htmlallcollection/length/>length</a></li><li><a href=/js/htmlallcollection/nameditem/>namedItem</a></li></ul></div><h2>HTMLBaseElement</h2><div><ul><li><a href=/js/htmlbaseelement/href/>href</a></li><li><a href=/js/htmlbaseelement/target/>target</a></li></ul></div><h2>HTMLCollection</h2><div><ul><li><a href=/js/htmlcollection/item/>item</a></li><li><a href=/js/htmlcollection/length/>length</a></li><li><a href=/js/htmlcollection/nameditem/>namedItem</a></li></ul></div><h2>HTMLDialogElement</h2><div><ul><li><a href=/js/htmldialogelement/close/>close</a></li><li><a href=/js/htmldialogelement/open/>open</a></li><li><a href=/js/htmldialogelement/returnvalue/>returnValue</a></li><li><a href=/js/htmldialogelement/show/>show</a></li><li><a href=/js/htmldialogelement/showmodal/>showModal</a></li></ul></div><h2>HTMLElement</h2><div><ul><li><a href=/js/htmlelement/accesskey/>accessKey</a></li><li><a href=/js/htmlelement/accesskeylabel/>accessKeyLabel</a></li><li><a href=/js/htmlelement/attachinternals/>attachInternals</a></li><li><a href=/js/htmlelement/autocapitalize/>autocapitalize</a></li><li><a href=/js/htmlelement/autocorrect/>autocorrect</a></li><li><a href=/js/htmlelement/click/>click</a></li><li><a href=/js/htmlelement/constructor/>constructor</a></li><li><a href=/js/htmlelement/dir/>dir</a></li><li><a href=/js/htmlelement/draggable/>draggable</a></li><li><a href=/js/htmlelement/hidden/>hidden</a></li><li><a href=/js/htmlelement/hidepopover/>hidePopover</a></li><li><a href=/js/htmlelement/inert/>inert</a></li><li><a href=/js/htmlelement/innertext/>innerText</a></li><li><a href=/js/htmlelement/lang/>lang</a></li><li><a href=/js/htmlelement/outertext/>outerText</a></li><li><a href=/js/htmlelement/popover/>popover</a></li><li><a href=/js/htmlelement/showpopover/>showPopover</a></li><li><a href=/js/htmlelement/spellcheck/>spellcheck</a></li><li><a href=/js/htmlelement/title/>title</a></li><li><a href=/js/htmlelement/togglepopover/>togglePopover</a></li><li><a href=/js/htmlelement/translate/>translate</a></li><li><a href=/js/htmlelement/writingsuggestions/>writingSuggestions</a></li></ul></div><h2>HTMLFormControlsCollection</h2><div><ul><li><a href=/js/htmlformcontrolscollection/item/>item</a></li><li><a href=/js/htmlformcontrolscollection/length/>length</a></li><li><a href=/js/htmlformcontrolscollection/nameditem/>namedItem</a></li></ul></div><h2>HTMLLinkElement</h2><div><ul><li><a href=/js/htmllinkelement/crossorigin/>crossOrigin</a></li><li><a href=/js/htmllinkelement/href/>href</a></li><li><a href=/js/htmllinkelement/rel/>rel</a></li></ul></div><h2>HTMLOptionsCollection</h2><div><ul><li><a href=/js/htmloptionscollection/add/>add</a></li><li><a href=/js/htmloptionscollection/item/>item</a></li><li><a href=/js/htmloptionscollection/length/>length</a></li><li><a href=/js/htmloptionscollection/nameditem/>namedItem</a></li><li><a href=/js/htmloptionscollection/remove/>remove</a></li><li><a href=/js/htmloptionscollection/selectedindex/>selectedIndex</a></li></ul></div><h2>HTMLOrSVGElement</h2><div><ul><li><a href=/js/htmlorsvgelement/autofocus/>autofocus</a></li><li><a href=/js/htmlorsvgelement/blur/>blur</a></li><li><a href=/js/htmlorsvgelement/dataset/>dataset</a></li><li><a href=/js/htmlorsvgelement/focus/>focus</a></li><li><a href=/js/htmlorsvgelement/nonce/>nonce</a></li><li><a href=/js/htmlorsvgelement/tabindex/>tabIndex</a></li></ul></div><h2>HTMLVideoElement</h2><div><ul><li><a href=/js/htmlvideoelement/autopictureinpicture/>autoPictureInPicture</a></li><li><a href=/js/htmlvideoelement/disablepictureinpicture/>disablePictureInPicture</a></li><li><a href=/js/htmlvideoelement/requestpictureinpicture/>requestPictureInPicture</a></li></ul></div><h2>Iterations</h2><div><ul><li><a href=/js/iterations/do-while/>do-while</a></li><li><a href=/js/iterations/for/>for</a></li><li><a href=/js/iterations/for-await-of/>for-await-of</a></li><li><a href=/js/iterations/for-in/>for-in</a></li><li><a href=/js/iterations/for-of/>for-of</a></li><li><a href=/js/iterations/while/>while</a></li></ul></div><h2>Location</h2><div><ul><li><a href=/js/location/ancestororigins/>ancestorOrigins</a></li></ul></div><h2>MutationObserver</h2><div><ul><li><a href=/js/mutationobserver/disconnect/>disconnect</a></li><li><a href=/js/mutationobserver/mutationobserver/>MutationObserver</a></li><li><a href=/js/mutationobserver/observe/>observe</a></li><li><a href=/js/mutationobserver/takerecords/>takeRecords</a></li></ul></div><h2>MutationRecord</h2><div><ul><li><a href=/js/mutationrecord/addednodes/>addedNodes</a></li><li><a href=/js/mutationrecord/attributename/>attributeName</a></li><li><a href=/js/mutationrecord/attributenamespace/>attributeNamespace</a></li><li><a href=/js/mutationrecord/nextsibling/>nextSibling</a></li><li><a href=/js/mutationrecord/oldvalue/>oldValue</a></li><li><a href=/js/mutationrecord/previoussibling/>previousSibling</a></li><li><a href=/js/mutationrecord/removednodes/>removedNodes</a></li><li><a href=/js/mutationrecord/target/>target</a></li><li><a href=/js/mutationrecord/type/>type</a></li></ul></div><h2>Node</h2><div><ul><li><a href=/js/node/baseuri/>baseURI</a></li><li><a href=/js/node/childnodes/>childNodes</a></li><li><a href=/js/node/clonenode/>cloneNode</a></li><li><a href=/js/node/comparedocumentposition/>compareDocumentPosition</a></li><li><a href=/js/node/contains/>contains</a></li><li><a href=/js/node/firstchild/>firstChild</a></li><li><a href=/js/node/getrootnode/>getRootNode</a></li><li><a href=/js/node/haschildnodes/>hasChildNodes</a></li><li><a href=/js/node/isconnected/>isConnected</a></li><li><a href=/js/node/isequalnode/>isEqualNode</a></li><li><a href=/js/node/lastchild/>lastChild</a></li><li><a href=/js/node/nextsibling/>nextSibling</a></li><li><a href=/js/node/nodename/>nodeName</a></li><li><a href=/js/node/nodetype/>nodeType</a></li><li><a href=/js/node/normalize/>normalize</a></li><li><a href=/js/node/ownerdocument/>ownerDocument</a></li><li><a href=/js/node/parentelement/>parentElement</a></li><li><a href=/js/node/parentnode/>parentNode</a></li><li><a href=/js/node/previoussibling/>previousSibling</a></li></ul></div><h2>NodeList</h2><div><ul><li><a href=/js/nodelist/item/>item</a></li><li><a href=/js/nodelist/length/>length</a></li></ul></div><h2>NonDocumentTypeChildNode</h2><div><ul><li><a href=/js/nondocumenttypechildnode/nextelementsibling/>nextElementSibling</a></li><li><a href=/js/nondocumenttypechildnode/previouselementsibling/>previousElementSibling</a></li></ul></div><h2>NonElementParentNode</h2><div><ul><li><a href=/js/nonelementparentnode/getelementbyid/>getElementById</a></li></ul></div><h2>ParentNode</h2><div><ul><li><a href=/js/parentnode/append/>append</a></li><li><a href=/js/parentnode/children/>children</a></li><li><a href=/js/parentnode/firstelementchild/>firstElementChild</a></li><li><a href=/js/parentnode/lastelementchild/>lastElementChild</a></li><li><a href=/js/parentnode/prepend/>prepend</a></li><li><a href=/js/parentnode/queryselector/>querySelector</a></li><li><a href=/js/parentnode/queryselectorall/>querySelectorAll</a></li><li><a href=/js/parentnode/replacechildren/>replaceChildren</a></li></ul></div><h2>Prompts</h2><div><ul><li><a href=/js/prompts/alert/>alert</a></li><li><a href=/js/prompts/confirm/>confirm</a></li><li><a href=/js/prompts/prompt/>prompt</a></li></ul></div><h2>RadioNodeList</h2><div><ul><li><a href=/js/radionodelist/value/>value</a></li></ul></div><h2>Range</h2><div><ul><li><a href=/js/range/commonancestorcontainer/>commonAncestorContainer</a></li><li><a href=/js/range/comparepoint/>comparePoint</a></li><li><a href=/js/range/createcontextualfragment/>createContextualFragment</a></li><li><a href=/js/range/intersectsnode/>intersectsNode</a></li><li><a href=/js/range/range/>Range</a></li></ul></div><h2>Slottable</h2><div><ul><li><a href=/js/slottable/assignedslot/>assignedSlot</a></li></ul></div><h2>Statements</h2><div><ul><li><a href=/js/statements/if/>if</a></li><li><a href=/js/statements/switch/>switch</a></li><li><a href=/js/statements/try/>try</a></li></ul></div><h2>StaticRange</h2><div><ul><li><a href=/js/staticrange/staticrange/>StaticRange</a></li></ul></div><h2>Text</h2><div><ul><li><a href=/js/text/splittext/>splitText</a></li><li><a href=/js/text/text/>Text</a></li><li><a href=/js/text/wholetext/>wholeText</a></li></ul></div><h2>Window</h2><div><ul><li><a href=/js/window/location/>location</a></li></ul></div><h2>WindowOrWorkerGlobalScope</h2><div><ul><li><a href=/js/windoworworkerglobalscope/atob/>atob</a></li><li><a href=/js/windoworworkerglobalscope/btoa/>btoa</a></li><li><a href=/js/windoworworkerglobalscope/clearinterval/>clearInterval</a></li><li><a href=/js/windoworworkerglobalscope/cleartimeout/>clearTimeout</a></li><li><a href=/js/windoworworkerglobalscope/createimagebitmap/>createImageBitmap</a></li><li><a href=/js/windoworworkerglobalscope/crossoriginisolated/>crossOriginIsolated</a></li><li><a href=/js/windoworworkerglobalscope/issecurecontext/>isSecureContext</a></li><li><a href=/js/windoworworkerglobalscope/origin/>origin</a></li><li><a href=/js/windoworworkerglobalscope/queuemicrotask/>queueMicrotask</a></li><li><a href=/js/windoworworkerglobalscope/reporterror/>reportError</a></li><li><a href=/js/windoworworkerglobalscope/setinterval/>setInterval</a></li><li><a href=/js/windoworworkerglobalscope/settimeout/>setTimeout</a></li><li><a href=/js/windoworworkerglobalscope/structuredclone/>structuredClone</a></li></ul></div><h2>Other</h2><div><ul><li><a href=/js/array/>Array</a></li><li><a href=/js/comments/>Comments</a></li><li><a href=/js/date/>Date</a></li><li><a href=/js/enable/>Enable</a></li><li><a href=/js/functions/>Functions</a></li><li><a href=/js/infinity/>Infinity</a></li><li><a href=/js/print/>print</a></li></ul></div></div><div class=h1><a id=switch-php>PHP</a></div><div id=list-php><h2>Overview</h2><div><ul><li><a href=/php/>Overview</a></li></ul></div><h2>Array</h2><div><ul><li><a href=/php/array/array/>array</a></li><li><a href=/php/array/array_all/>array_all</a></li><li><a href=/php/array/array_any/>array_any</a></li><li><a href=/php/array/array_change_key_case/>array_change_key_case</a></li><li><a href=/php/array/array_chunk/>array_chunk</a></li><li><a href=/php/array/array_column/>array_column</a></li><li><a href=/php/array/array_combine/>array_combine</a></li><li><a href=/php/array/array_count_values/>array_count_values</a></li><li><a href=/php/array/array_diff/>array_diff</a></li><li><a href=/php/array/array_diff_assoc/>array_diff_assoc</a></li><li><a href=/php/array/array_diff_key/>array_diff_key</a></li><li><a href=/php/array/array_diff_uassoc/>array_diff_uassoc</a></li><li><a href=/php/array/array_diff_ukey/>array_diff_ukey</a></li><li><a href=/php/array/array_fill/>array_fill</a></li><li><a href=/php/array/array_fill_keys/>array_fill_keys</a></li><li><a href=/php/array/array_filter/>array_filter</a></li><li><a href=/php/array/array_find/>array_find</a></li><li><a href=/php/array/array_find_key/>array_find_key</a></li><li><a href=/php/array/array_first/>array_first</a></li><li><a href=/php/array/array_flip/>array_flip</a></li><li><a href=/php/array/array_intersect/>array_intersect</a></li><li><a href=/php/array/array_intersect_assoc/>array_intersect_assoc</a></li><li><a href=/php/array/array_intersect_key/>array_intersect_key</a></li><li><a href=/php/array/array_intersect_uassoc/>array_intersect_uassoc</a></li><li><a href=/php/array/array_intersect_ukey/>array_intersect_ukey</a></li><li><a href=/php/array/array_key_exists/>array_key_exists</a></li><li><a href=/php/array/array_key_first/>array_key_first</a></li><li><a href=/php/array/array_key_last/>array_key_last</a></li><li><a href=/php/array/array_keys/>array_keys</a></li><li><a href=/php/array/array_last/>array_last</a></li><li><a href=/php/array/array_map/>array_map</a></li><li><a href=/php/array/array_merge/>array_merge</a></li><li><a href=/php/array/array_merge_recursive/>array_merge_recursive</a></li><li><a href=/php/array/array_multisort/>array_multisort</a></li><li><a href=/php/array/array_pad/>array_pad</a></li><li><a href=/php/array/array_pop/>array_pop</a></li><li><a href=/php/array/array_product/>array_product</a></li><li><a href=/php/array/array_push/>array_push</a></li><li><a href=/php/array/array_rand/>array_rand</a></li><li><a href=/php/array/array_reduce/>array_reduce</a></li><li><a href=/php/array/array_replace/>array_replace</a></li><li><a href=/php/array/array_replace_recursive/>array_replace_recursive</a></li><li><a href=/php/array/array_reverse/>array_reverse</a></li><li><a href=/php/array/array_search/>array_search</a></li><li><a href=/php/array/array_shift/>array_shift</a></li><li><a href=/php/array/array_slice/>array_slice</a></li><li><a href=/php/array/array_splice/>array_splice</a></li><li><a href=/php/array/array_sum/>array_sum</a></li><li><a href=/php/array/array_udiff/>array_udiff</a></li><li><a href=/php/array/array_udiff_assoc/>array_udiff_assoc</a></li><li><a href=/php/array/array_udiff_uassoc/>array_udiff_uassoc</a></li><li><a href=/php/array/array_uintersect/>array_uintersect</a></li><li><a href=/php/array/array_uintersect_assoc/>array_uintersect_assoc</a></li><li><a href=/php/array/array_uintersect_uassoc/>array_uintersect_uassoc</a></li><li><a href=/php/array/array_unique/>array_unique</a></li><li><a href=/php/array/array_unshift/>array_unshift</a></li><li><a href=/php/array/array_values/>array_values</a></li><li><a href=/php/array/array_walk/>array_walk</a></li><li><a href=/php/array/array_walk_recursive/>array_walk_recursive</a></li><li><a href=/php/array/arsort/>arsort</a></li><li><a href=/php/array/asort/>asort</a></li><li><a href=/php/array/compact/>compact</a></li><li><a href=/php/array/count/>count</a></li><li><a href=/php/array/current/>current</a></li><li><a href=/php/array/end/>end</a></li><li><a href=/php/array/extract/>extract</a></li><li><a href=/php/array/in_array/>in_array</a></li><li><a href=/php/array/key/>key</a></li><li><a href=/php/array/key_exists/>key_exists</a></li><li><a href=/php/array/krsort/>krsort</a></li><li><a href=/php/array/ksort/>ksort</a></li><li><a href=/php/array/list/>list</a></li><li><a href=/php/array/natcasesort/>natcasesort</a></li><li><a href=/php/array/natsort/>natsort</a></li><li><a href=/php/array/next/>next</a></li><li><a href=/php/array/pos/>pos</a></li><li><a href=/php/array/prev/>prev</a></li><li><a href=/php/array/range/>range</a></li><li><a href=/php/array/reset/>reset</a></li><li><a href=/php/array/rsort/>rsort</a></li><li><a href=/php/array/shuffle/>shuffle</a></li><li><a href=/php/array/sizeof/>sizeof</a></li><li><a href=/php/array/sort/>sort</a></li><li><a href=/php/array/uasort/>uasort</a></li><li><a href=/php/array/uksort/>uksort</a></li><li><a href=/php/array/usort/>usort</a></li></ul></div><h2>BCMath</h2><div><ul><li><a href=/php/bcmath/bcadd/>bcadd</a></li><li><a href=/php/bcmath/bcceil/>bcceil</a></li><li><a href=/php/bcmath/bccomp/>bccomp</a></li><li><a href=/php/bcmath/bcdiv/>bcdiv</a></li><li><a href=/php/bcmath/bcdivmod/>bcdivmod</a></li><li><a href=/php/bcmath/bcfloor/>bcfloor</a></li><li><a href=/php/bcmath/bcmod/>bcmod</a></li><li><a href=/php/bcmath/bcmul/>bcmul</a></li><li><a href=/php/bcmath/bcpow/>bcpow</a></li><li><a href=/php/bcmath/bcpowmod/>bcpowmod</a></li><li><a href=/php/bcmath/bcround/>bcround</a></li><li><a href=/php/bcmath/bcscale/>bcscale</a></li><li><a href=/php/bcmath/bcsqrt/>bcsqrt</a></li><li><a href=/php/bcmath/bcsub/>bcsub</a></li></ul></div><h2>bzip2</h2><div><ul><li><a href=/php/bzip2/bzclose/>bzclose</a></li><li><a href=/php/bzip2/bzcompress/>bzcompress</a></li><li><a href=/php/bzip2/bzdecompress/>bzdecompress</a></li><li><a href=/php/bzip2/bzerrno/>bzerrno</a></li><li><a href=/php/bzip2/bzerror/>bzerror</a></li><li><a href=/php/bzip2/bzerrstr/>bzerrstr</a></li><li><a href=/php/bzip2/bzflush/>bzflush</a></li><li><a href=/php/bzip2/bzopen/>bzopen</a></li><li><a href=/php/bzip2/bzread/>bzread</a></li><li><a href=/php/bzip2/bzwrite/>bzwrite</a></li></ul></div><h2>Calendar</h2><div><ul><li><a href=/php/calendar/cal_days_in_month/>cal_days_in_month</a></li><li><a href=/php/calendar/cal_from_jd/>cal_from_jd</a></li><li><a href=/php/calendar/cal_info/>cal_info</a></li><li><a href=/php/calendar/cal_to_jd/>cal_to_jd</a></li><li><a href=/php/calendar/easter_date/>easter_date</a></li><li><a href=/php/calendar/easter_days/>easter_days</a></li><li><a href=/php/calendar/frenchtojd/>frenchtojd</a></li><li><a href=/php/calendar/gregoriantojd/>gregoriantojd</a></li><li><a href=/php/calendar/jddayofweek/>jddayofweek</a></li><li><a href=/php/calendar/jdmonthname/>jdmonthname</a></li><li><a href=/php/calendar/jdtofrench/>jdtofrench</a></li><li><a href=/php/calendar/jdtogregorian/>jdtogregorian</a></li><li><a href=/php/calendar/jdtojewish/>jdtojewish</a></li><li><a href=/php/calendar/jdtojulian/>jdtojulian</a></li><li><a href=/php/calendar/jdtounix/>jdtounix</a></li><li><a href=/php/calendar/jewishtojd/>jewishtojd</a></li><li><a href=/php/calendar/juliantojd/>juliantojd</a></li><li><a href=/php/calendar/unixtojd/>unixtojd</a></li></ul></div><h2>Class / Object</h2><div><ul><li><a href=/php/class-object/class_alias/>class_alias</a></li><li><a href=/php/class-object/class_exists/>class_exists</a></li><li><a href=/php/class-object/get_called_class/>get_called_class</a></li><li><a href=/php/class-object/get_class/>get_class</a></li><li><a href=/php/class-object/get_class_methods/>get_class_methods</a></li><li><a href=/php/class-object/get_class_vars/>get_class_vars</a></li><li><a href=/php/class-object/get_declared_classes/>get_declared_classes</a></li><li><a href=/php/class-object/get_declared_interfaces/>get_declared_interfaces</a></li><li><a href=/php/class-object/get_declared_traits/>get_declared_traits</a></li><li><a href=/php/class-object/get_object_vars/>get_object_vars</a></li><li><a href=/php/class-object/get_parent_class/>get_parent_class</a></li><li><a href=/php/class-object/interface_exists/>interface_exists</a></li><li><a href=/php/class-object/is_a/>is_a</a></li><li><a href=/php/class-object/is_subclass_of/>is_subclass_of</a></li><li><a href=/php/class-object/method_exists/>method_exists</a></li><li><a href=/php/class-object/property_exists/>property_exists</a></li><li><a href=/php/class-object/trait_exists/>trait_exists</a></li></ul></div><h2>Ctype</h2><div><ul><li><a href=/php/ctype/ctype_alnum/>ctype_alnum</a></li><li><a href=/php/ctype/ctype_alpha/>ctype_alpha</a></li><li><a href=/php/ctype/ctype_cntrl/>ctype_cntrl</a></li><li><a href=/php/ctype/ctype_digit/>ctype_digit</a></li><li><a href=/php/ctype/ctype_graph/>ctype_graph</a></li><li><a href=/php/ctype/ctype_lower/>ctype_lower</a></li><li><a href=/php/ctype/ctype_print/>ctype_print</a></li><li><a href=/php/ctype/ctype_punct/>ctype_punct</a></li><li><a href=/php/ctype/ctype_space/>ctype_space</a></li><li><a href=/php/ctype/ctype_upper/>ctype_upper</a></li><li><a href=/php/ctype/ctype_xdigit/>ctype_xdigit</a></li></ul></div><h2>cURL</h2><div><ul><li><a href=/php/curl/curl_close/>curl_close</a></li><li><a href=/php/curl/curl_copy_handle/>curl_copy_handle</a></li><li><a href=/php/curl/curl_errno/>curl_errno</a></li><li><a href=/php/curl/curl_error/>curl_error</a></li><li><a href=/php/curl/curl_escape/>curl_escape</a></li><li><a href=/php/curl/curl_exec/>curl_exec</a></li><li><a href=/php/curl/curl_getinfo/>curl_getinfo</a></li><li><a href=/php/curl/curl_init/>curl_init</a></li><li><a href=/php/curl/curl_multi_add_handle/>curl_multi_add_handle</a></li><li><a href=/php/curl/curl_multi_close/>curl_multi_close</a></li><li><a href=/php/curl/curl_multi_errno/>curl_multi_errno</a></li><li><a href=/php/curl/curl_multi_exec/>curl_multi_exec</a></li><li><a href=/php/curl/curl_multi_getcontent/>curl_multi_getcontent</a></li><li><a href=/php/curl/curl_multi_info_read/>curl_multi_info_read</a></li><li><a href=/php/curl/curl_multi_init/>curl_multi_init</a></li><li><a href=/php/curl/curl_multi_remove_handle/>curl_multi_remove_handle</a></li><li><a href=/php/curl/curl_multi_select/>curl_multi_select</a></li><li><a href=/php/curl/curl_multi_setopt/>curl_multi_setopt</a></li><li><a href=/php/curl/curl_multi_strerror/>curl_multi_strerror</a></li><li><a href=/php/curl/curl_pause/>curl_pause</a></li><li><a href=/php/curl/curl_reset/>curl_reset</a></li><li><a href=/php/curl/curl_setopt/>curl_setopt</a></li><li><a href=/php/curl/curl_setopt_array/>curl_setopt_array</a></li><li><a href=/php/curl/curl_share_close/>curl_share_close</a></li><li><a href=/php/curl/curl_share_errno/>curl_share_errno</a></li><li><a href=/php/curl/curl_share_init/>curl_share_init</a></li><li><a href=/php/curl/curl_share_init_persistent/>curl_share_init_persistent</a></li><li><a href=/php/curl/curl_share_setopt/>curl_share_setopt</a></li><li><a href=/php/curl/curl_share_strerror/>curl_share_strerror</a></li><li><a href=/php/curl/curl_strerror/>curl_strerror</a></li><li><a href=/php/curl/curl_unescape/>curl_unescape</a></li><li><a href=/php/curl/curl_upkeep/>curl_upkeep</a></li><li><a href=/php/curl/curl_version/>curl_version</a></li></ul></div><h2>Date / Time</h2><div><ul><li><a href=/php/date-time/checkdate/>checkdate</a></li><li><a href=/php/date-time/date/>date</a></li><li><a href=/php/date-time/date_add/>date_add</a></li><li><a href=/php/date-time/date_create/>date_create</a></li><li><a href=/php/date-time/date_create_from_format/>date_create_from_format</a></li><li><a href=/php/date-time/date_create_immutable/>date_create_immutable</a></li><li><a href=/php/date-time/date_create_immutable_from_format/>date_create_immutable_from_format</a></li><li><a href=/php/date-time/date_date_set/>date_date_set</a></li><li><a href=/php/date-time/date_default_timezone_get/>date_default_timezone_get</a></li><li><a href=/php/date-time/date_default_timezone_set/>date_default_timezone_set</a></li><li><a href=/php/date-time/date_diff/>date_diff</a></li><li><a href=/php/date-time/date_format/>date_format</a></li><li><a href=/php/date-time/date_get_last_errors/>date_get_last_errors</a></li><li><a href=/php/date-time/date_interval_create_from_date_string/>date_interval_create_from_date_string</a></li><li><a href=/php/date-time/date_interval_format/>date_interval_format</a></li><li><a href=/php/date-time/date_isodate_set/>date_isodate_set</a></li><li><a href=/php/date-time/date_modify/>date_modify</a></li><li><a href=/php/date-time/date_offset_get/>date_offset_get</a></li><li><a href=/php/date-time/date_parse/>date_parse</a></li><li><a href=/php/date-time/date_parse_from_format/>date_parse_from_format</a></li><li><a href=/php/date-time/date_sub/>date_sub</a></li><li><a href=/php/date-time/date_sun_info/>date_sun_info</a></li><li><a href=/php/date-time/date_sunrise/>date_sunrise</a></li><li><a href=/php/date-time/date_sunset/>date_sunset</a></li><li><a href=/php/date-time/date_time_set/>date_time_set</a></li><li><a href=/php/date-time/date_timestamp_get/>date_timestamp_get</a></li><li><a href=/php/date-time/date_timestamp_set/>date_timestamp_set</a></li><li><a href=/php/date-time/date_timezone_get/>date_timezone_get</a></li><li><a href=/php/date-time/date_timezone_set/>date_timezone_set</a></li><li><a href=/php/date-time/getdate/>getdate</a></li><li><a href=/php/date-time/gettimeofday/>gettimeofday</a></li><li><a href=/php/date-time/gmdate/>gmdate</a></li><li><a href=/php/date-time/gmmktime/>gmmktime</a></li><li><a href=/php/date-time/gmstrftime/>gmstrftime</a></li><li><a href=/php/date-time/idate/>idate</a></li><li><a href=/php/date-time/localtime/>localtime</a></li><li><a href=/php/date-time/microtime/>microtime</a></li><li><a href=/php/date-time/mktime/>mktime</a></li><li><a href=/php/date-time/strftime/>strftime</a></li><li><a href=/php/date-time/strptime/>strptime</a></li><li><a href=/php/date-time/strtotime/>strtotime</a></li><li><a href=/php/date-time/time/>time</a></li><li><a href=/php/date-time/timezone_abbreviations_list/>timezone_abbreviations_list</a></li><li><a href=/php/date-time/timezone_identifiers_list/>timezone_identifiers_list</a></li><li><a href=/php/date-time/timezone_location_get/>timezone_location_get</a></li><li><a href=/php/date-time/timezone_name_from_abbr/>timezone_name_from_abbr</a></li><li><a href=/php/date-time/timezone_name_get/>timezone_name_get</a></li><li><a href=/php/date-time/timezone_offset_get/>timezone_offset_get</a></li><li><a href=/php/date-time/timezone_open/>timezone_open</a></li><li><a href=/php/date-time/timezone_transitions_get/>timezone_transitions_get</a></li><li><a href=/php/date-time/timezone_version_get/>timezone_version_get</a></li></ul></div><h2>Directory</h2><div><ul><li><a href=/php/directory/chdir/>chdir</a></li><li><a href=/php/directory/chroot/>chroot</a></li><li><a href=/php/directory/closedir/>closedir</a></li><li><a href=/php/directory/dir/>dir</a></li><li><a href=/php/directory/getcwd/>getcwd</a></li><li><a href=/php/directory/opendir/>opendir</a></li><li><a href=/php/directory/readdir/>readdir</a></li><li><a href=/php/directory/rewinddir/>rewinddir</a></li><li><a href=/php/directory/scandir/>scandir</a></li></ul></div><h2>DOM</h2><div><ul><li><a href=/php/dom/dom_import_simplexml/>dom_import_simplexml</a></li></ul></div><h2>Error Handling</h2><div><ul><li><a href=/php/error-handling/debug_backtrace/>debug_backtrace</a></li><li><a href=/php/error-handling/debug_print_backtrace/>debug_print_backtrace</a></li><li><a href=/php/error-handling/error_clear_last/>error_clear_last</a></li><li><a href=/php/error-handling/error_get_last/>error_get_last</a></li><li><a href=/php/error-handling/error_log/>error_log</a></li><li><a href=/php/error-handling/error_reporting/>error_reporting</a></li><li><a href=/php/error-handling/get_error_handler/>get_error_handler</a></li><li><a href=/php/error-handling/get_exception_handler/>get_exception_handler</a></li><li><a href=/php/error-handling/restore_error_handler/>restore_error_handler</a></li><li><a href=/php/error-handling/restore_exception_handler/>restore_exception_handler</a></li><li><a href=/php/error-handling/set_error_handler/>set_error_handler</a></li><li><a href=/php/error-handling/set_exception_handler/>set_exception_handler</a></li><li><a href=/php/error-handling/trigger_error/>trigger_error</a></li><li><a href=/php/error-handling/user_error/>user_error</a></li></ul></div><h2>Exif</h2><div><ul><li><a href=/php/exif/exif_imagetype/>exif_imagetype</a></li><li><a href=/php/exif/exif_read_data/>exif_read_data</a></li><li><a href=/php/exif/exif_tagname/>exif_tagname</a></li><li><a href=/php/exif/exif_thumbnail/>exif_thumbnail</a></li></ul></div><h2>Fileinfo</h2><div><ul><li><a href=/php/fileinfo/finfo_buffer/>finfo_buffer</a></li><li><a href=/php/fileinfo/finfo_close/>finfo_close</a></li><li><a href=/php/fileinfo/finfo_file/>finfo_file</a></li><li><a href=/php/fileinfo/finfo_open/>finfo_open</a></li><li><a href=/php/fileinfo/finfo_set_flags/>finfo_set_flags</a></li><li><a href=/php/fileinfo/mime_content_type/>mime_content_type</a></li></ul></div><h2>Filesystem</h2><div><ul><li><a href=/php/filesystem/basename/>basename</a></li><li><a href=/php/filesystem/chgrp/>chgrp</a></li><li><a href=/php/filesystem/chmod/>chmod</a></li><li><a href=/php/filesystem/chown/>chown</a></li><li><a href=/php/filesystem/clearstatcache/>clearstatcache</a></li><li><a href=/php/filesystem/copy/>copy</a></li><li><a href=/php/filesystem/dirname/>dirname</a></li><li><a href=/php/filesystem/disk_free_space/>disk_free_space</a></li><li><a href=/php/filesystem/disk_total_space/>disk_total_space</a></li><li><a href=/php/filesystem/diskfreespace/>diskfreespace</a></li><li><a href=/php/filesystem/fclose/>fclose</a></li><li><a href=/php/filesystem/feof/>feof</a></li><li><a href=/php/filesystem/fflush/>fflush</a></li><li><a href=/php/filesystem/fgetc/>fgetc</a></li><li><a href=/php/filesystem/fgetcsv/>fgetcsv</a></li><li><a href=/php/filesystem/fgets/>fgets</a></li><li><a href=/php/filesystem/file/>file</a></li><li><a href=/php/filesystem/file_exists/>file_exists</a></li><li><a href=/php/filesystem/file_get_contents/>file_get_contents</a></li><li><a href=/php/filesystem/file_put_contents/>file_put_contents</a></li><li><a href=/php/filesystem/fileatime/>fileatime</a></li><li><a href=/php/filesystem/filectime/>filectime</a></li><li><a href=/php/filesystem/filegroup/>filegroup</a></li><li><a href=/php/filesystem/fileinode/>fileinode</a></li><li><a href=/php/filesystem/filemtime/>filemtime</a></li><li><a href=/php/filesystem/fileowner/>fileowner</a></li><li><a href=/php/filesystem/fileperms/>fileperms</a></li><li><a href=/php/filesystem/filesize/>filesize</a></li><li><a href=/php/filesystem/filetype/>filetype</a></li><li><a href=/php/filesystem/flock/>flock</a></li><li><a href=/php/filesystem/fnmatch/>fnmatch</a></li><li><a href=/php/filesystem/fopen/>fopen</a></li><li><a href=/php/filesystem/fpassthru/>fpassthru</a></li><li><a href=/php/filesystem/fputcsv/>fputcsv</a></li><li><a href=/php/filesystem/fputs/>fputs</a></li><li><a href=/php/filesystem/fread/>fread</a></li><li><a href=/php/filesystem/fscanf/>fscanf</a></li><li><a href=/php/filesystem/fseek/>fseek</a></li><li><a href=/php/filesystem/fstat/>fstat</a></li><li><a href=/php/filesystem/ftell/>ftell</a></li><li><a href=/php/filesystem/ftruncate/>ftruncate</a></li><li><a href=/php/filesystem/fwrite/>fwrite</a></li><li><a href=/php/filesystem/glob/>glob</a></li><li><a href=/php/filesystem/is_dir/>is_dir</a></li><li><a href=/php/filesystem/is_executable/>is_executable</a></li><li><a href=/php/filesystem/is_file/>is_file</a></li><li><a href=/php/filesystem/is_link/>is_link</a></li><li><a href=/php/filesystem/is_readable/>is_readable</a></li><li><a href=/php/filesystem/is_uploaded_file/>is_uploaded_file</a></li><li><a href=/php/filesystem/is_writable/>is_writable</a></li><li><a href=/php/filesystem/is_writeable/>is_writeable</a></li><li><a href=/php/filesystem/lchgrp/>lchgrp</a></li><li><a href=/php/filesystem/lchown/>lchown</a></li><li><a href=/php/filesystem/link/>link</a></li><li><a href=/php/filesystem/linkinfo/>linkinfo</a></li><li><a href=/php/filesystem/lstat/>lstat</a></li><li><a href=/php/filesystem/mkdir/>mkdir</a></li><li><a href=/php/filesystem/move_uploaded_file/>move_uploaded_file</a></li><li><a href=/php/filesystem/pathinfo/>pathinfo</a></li><li><a href=/php/filesystem/pclose/>pclose</a></li><li><a href=/php/filesystem/popen/>popen</a></li><li><a href=/php/filesystem/readfile/>readfile</a></li><li><a href=/php/filesystem/readlink/>readlink</a></li><li><a href=/php/filesystem/realpath/>realpath</a></li><li><a href=/php/filesystem/realpath_cache_get/>realpath_cache_get</a></li><li><a href=/php/filesystem/realpath_cache_size/>realpath_cache_size</a></li><li><a href=/php/filesystem/rename/>rename</a></li><li><a href=/php/filesystem/rewind/>rewind</a></li><li><a href=/php/filesystem/rmdir/>rmdir</a></li><li><a href=/php/filesystem/set_file_buffer/>set_file_buffer</a></li><li><a href=/php/filesystem/stat/>stat</a></li><li><a href=/php/filesystem/symlink/>symlink</a></li><li><a href=/php/filesystem/tempnam/>tempnam</a></li><li><a href=/php/filesystem/tmpfile/>tmpfile</a></li><li><a href=/php/filesystem/touch/>touch</a></li><li><a href=/php/filesystem/umask/>umask</a></li><li><a href=/php/filesystem/unlink/>unlink</a></li></ul></div><h2>Filter</h2><div><ul><li><a href=/php/filter/filter_has_var/>filter_has_var</a></li><li><a href=/php/filter/filter_id/>filter_id</a></li><li><a href=/php/filter/filter_input/>filter_input</a></li><li><a href=/php/filter/filter_input_array/>filter_input_array</a></li><li><a href=/php/filter/filter_list/>filter_list</a></li><li><a href=/php/filter/filter_var/>filter_var</a></li><li><a href=/php/filter/filter_var_array/>filter_var_array</a></li></ul></div><h2>Function Handling</h2><div><ul><li><a href=/php/function-handling/call_user_func/>call_user_func</a></li><li><a href=/php/function-handling/call_user_func_array/>call_user_func_array</a></li><li><a href=/php/function-handling/forward_static_call/>forward_static_call</a></li><li><a href=/php/function-handling/forward_static_call_array/>forward_static_call_array</a></li><li><a href=/php/function-handling/func_get_arg/>func_get_arg</a></li><li><a href=/php/function-handling/func_get_args/>func_get_args</a></li><li><a href=/php/function-handling/func_num_args/>func_num_args</a></li><li><a href=/php/function-handling/function_exists/>function_exists</a></li><li><a href=/php/function-handling/get_defined_functions/>get_defined_functions</a></li><li><a href=/php/function-handling/register_shutdown_function/>register_shutdown_function</a></li><li><a href=/php/function-handling/register_tick_function/>register_tick_function</a></li><li><a href=/php/function-handling/unregister_tick_function/>unregister_tick_function</a></li></ul></div><h2>GMP</h2><div><ul><li><a href=/php/gmp/gmp_abs/>gmp_abs</a></li><li><a href=/php/gmp/gmp_add/>gmp_add</a></li><li><a href=/php/gmp/gmp_and/>gmp_and</a></li><li><a href=/php/gmp/gmp_binomial/>gmp_binomial</a></li><li><a href=/php/gmp/gmp_clrbit/>gmp_clrbit</a></li><li><a href=/php/gmp/gmp_cmp/>gmp_cmp</a></li><li><a href=/php/gmp/gmp_com/>gmp_com</a></li><li><a href=/php/gmp/gmp_div/>gmp_div</a></li><li><a href=/php/gmp/gmp_div_q/>gmp_div_q</a></li><li><a href=/php/gmp/gmp_div_qr/>gmp_div_qr</a></li><li><a href=/php/gmp/gmp_div_r/>gmp_div_r</a></li><li><a href=/php/gmp/gmp_divexact/>gmp_divexact</a></li><li><a href=/php/gmp/gmp_export/>gmp_export</a></li><li><a href=/php/gmp/gmp_fact/>gmp_fact</a></li><li><a href=/php/gmp/gmp_gcd/>gmp_gcd</a></li><li><a href=/php/gmp/gmp_gcdext/>gmp_gcdext</a></li><li><a href=/php/gmp/gmp_hamdist/>gmp_hamdist</a></li><li><a href=/php/gmp/gmp_import/>gmp_import</a></li><li><a href=/php/gmp/gmp_init/>gmp_init</a></li><li><a href=/php/gmp/gmp_intval/>gmp_intval</a></li><li><a href=/php/gmp/gmp_invert/>gmp_invert</a></li><li><a href=/php/gmp/gmp_jacobi/>gmp_jacobi</a></li><li><a href=/php/gmp/gmp_kronecker/>gmp_kronecker</a></li><li><a href=/php/gmp/gmp_lcm/>gmp_lcm</a></li><li><a href=/php/gmp/gmp_legendre/>gmp_legendre</a></li><li><a href=/php/gmp/gmp_mod/>gmp_mod</a></li><li><a href=/php/gmp/gmp_mul/>gmp_mul</a></li><li><a href=/php/gmp/gmp_neg/>gmp_neg</a></li><li><a href=/php/gmp/gmp_nextprime/>gmp_nextprime</a></li><li><a href=/php/gmp/gmp_or/>gmp_or</a></li><li><a href=/php/gmp/gmp_perfect_power/>gmp_perfect_power</a></li><li><a href=/php/gmp/gmp_perfect_square/>gmp_perfect_square</a></li><li><a href=/php/gmp/gmp_popcount/>gmp_popcount</a></li><li><a href=/php/gmp/gmp_pow/>gmp_pow</a></li><li><a href=/php/gmp/gmp_powm/>gmp_powm</a></li><li><a href=/php/gmp/gmp_prob_prime/>gmp_prob_prime</a></li><li><a href=/php/gmp/gmp_random_bits/>gmp_random_bits</a></li><li><a href=/php/gmp/gmp_random_range/>gmp_random_range</a></li><li><a href=/php/gmp/gmp_random_seed/>gmp_random_seed</a></li><li><a href=/php/gmp/gmp_root/>gmp_root</a></li><li><a href=/php/gmp/gmp_rootrem/>gmp_rootrem</a></li><li><a href=/php/gmp/gmp_scan0/>gmp_scan0</a></li><li><a href=/php/gmp/gmp_scan1/>gmp_scan1</a></li><li><a href=/php/gmp/gmp_setbit/>gmp_setbit</a></li><li><a href=/php/gmp/gmp_sign/>gmp_sign</a></li><li><a href=/php/gmp/gmp_sqrt/>gmp_sqrt</a></li><li><a href=/php/gmp/gmp_sqrtrem/>gmp_sqrtrem</a></li><li><a href=/php/gmp/gmp_strval/>gmp_strval</a></li><li><a href=/php/gmp/gmp_sub/>gmp_sub</a></li><li><a href=/php/gmp/gmp_testbit/>gmp_testbit</a></li><li><a href=/php/gmp/gmp_xor/>gmp_xor</a></li></ul></div><h2>Hash</h2><div><ul><li><a href=/php/hash/hash/>hash</a></li><li><a href=/php/hash/hash_algos/>hash_algos</a></li><li><a href=/php/hash/hash_copy/>hash_copy</a></li><li><a href=/php/hash/hash_equals/>hash_equals</a></li><li><a href=/php/hash/hash_file/>hash_file</a></li><li><a href=/php/hash/hash_final/>hash_final</a></li><li><a href=/php/hash/hash_hkdf/>hash_hkdf</a></li><li><a href=/php/hash/hash_hmac/>hash_hmac</a></li><li><a href=/php/hash/hash_hmac_algos/>hash_hmac_algos</a></li><li><a href=/php/hash/hash_hmac_file/>hash_hmac_file</a></li><li><a href=/php/hash/hash_init/>hash_init</a></li><li><a href=/php/hash/hash_pbkdf2/>hash_pbkdf2</a></li><li><a href=/php/hash/hash_update/>hash_update</a></li><li><a href=/php/hash/hash_update_file/>hash_update_file</a></li><li><a href=/php/hash/hash_update_stream/>hash_update_stream</a></li></ul></div><h2>iconv</h2><div><ul><li><a href=/php/iconv/iconv/>iconv</a></li><li><a href=/php/iconv/iconv_get_encoding/>iconv_get_encoding</a></li><li><a href=/php/iconv/iconv_mime_decode/>iconv_mime_decode</a></li><li><a href=/php/iconv/iconv_mime_decode_headers/>iconv_mime_decode_headers</a></li><li><a href=/php/iconv/iconv_mime_encode/>iconv_mime_encode</a></li><li><a href=/php/iconv/iconv_set_encoding/>iconv_set_encoding</a></li><li><a href=/php/iconv/iconv_strlen/>iconv_strlen</a></li><li><a href=/php/iconv/iconv_strpos/>iconv_strpos</a></li><li><a href=/php/iconv/iconv_strrpos/>iconv_strrpos</a></li><li><a href=/php/iconv/iconv_substr/>iconv_substr</a></li><li><a href=/php/iconv/ob_iconv_handler/>ob_iconv_handler</a></li></ul></div><h2>Image</h2><div><ul><li><a href=/php/image/gd_info/>gd_info</a></li><li><a href=/php/image/getimagesize/>getimagesize</a></li><li><a href=/php/image/getimagesizefromstring/>getimagesizefromstring</a></li><li><a href=/php/image/image_type_to_extension/>image_type_to_extension</a></li><li><a href=/php/image/image_type_to_mime_type/>image_type_to_mime_type</a></li><li><a href=/php/image/imageaffine/>imageaffine</a></li><li><a href=/php/image/imageaffinematrixconcat/>imageaffinematrixconcat</a></li><li><a href=/php/image/imageaffinematrixget/>imageaffinematrixget</a></li><li><a href=/php/image/imagealphablending/>imagealphablending</a></li><li><a href=/php/image/imageantialias/>imageantialias</a></li><li><a href=/php/image/imagearc/>imagearc</a></li><li><a href=/php/image/imageavif/>imageavif</a></li><li><a href=/php/image/imagebmp/>imagebmp</a></li><li><a href=/php/image/imagechar/>imagechar</a></li><li><a href=/php/image/imagecharup/>imagecharup</a></li><li><a href=/php/image/imagecolorallocate/>imagecolorallocate</a></li><li><a href=/php/image/imagecolorallocatealpha/>imagecolorallocatealpha</a></li><li><a href=/php/image/imagecolorat/>imagecolorat</a></li><li><a href=/php/image/imagecolorclosest/>imagecolorclosest</a></li><li><a href=/php/image/imagecolorclosestalpha/>imagecolorclosestalpha</a></li><li><a href=/php/image/imagecolorclosesthwb/>imagecolorclosesthwb</a></li><li><a href=/php/image/imagecolordeallocate/>imagecolordeallocate</a></li><li><a href=/php/image/imagecolorexact/>imagecolorexact</a></li><li><a href=/php/image/imagecolorexactalpha/>imagecolorexactalpha</a></li><li><a href=/php/image/imagecolormatch/>imagecolormatch</a></li><li><a href=/php/image/imagecolorresolve/>imagecolorresolve</a></li><li><a href=/php/image/imagecolorresolvealpha/>imagecolorresolvealpha</a></li><li><a href=/php/image/imagecolorset/>imagecolorset</a></li><li><a href=/php/image/imagecolorsforindex/>imagecolorsforindex</a></li><li><a href=/php/image/imagecolorstotal/>imagecolorstotal</a></li><li><a href=/php/image/imagecolortransparent/>imagecolortransparent</a></li><li><a href=/php/image/imageconvolution/>imageconvolution</a></li><li><a href=/php/image/imagecopy/>imagecopy</a></li><li><a href=/php/image/imagecopymerge/>imagecopymerge</a></li><li><a href=/php/image/imagecopymergegray/>imagecopymergegray</a></li><li><a href=/php/image/imagecopyresampled/>imagecopyresampled</a></li><li><a href=/php/image/imagecopyresized/>imagecopyresized</a></li><li><a href=/php/image/imagecreate/>imagecreate</a></li><li><a href=/php/image/imagecreatefromavif/>imagecreatefromavif</a></li><li><a href=/php/image/imagecreatefrombmp/>imagecreatefrombmp</a></li><li><a href=/php/image/imagecreatefromgif/>imagecreatefromgif</a></li><li><a href=/php/image/imagecreatefromjpeg/>imagecreatefromjpeg</a></li><li><a href=/php/image/imagecreatefrompng/>imagecreatefrompng</a></li><li><a href=/php/image/imagecreatefromstring/>imagecreatefromstring</a></li><li><a href=/php/image/imagecreatefromtga/>imagecreatefromtga</a></li><li><a href=/php/image/imagecreatefromwbmp/>imagecreatefromwbmp</a></li><li><a href=/php/image/imagecreatefromwebp/>imagecreatefromwebp</a></li><li><a href=/php/image/imagecreatefromxbm/>imagecreatefromxbm</a></li><li><a href=/php/image/imagecreatefromxpm/>imagecreatefromxpm</a></li><li><a href=/php/image/imagecreatetruecolor/>imagecreatetruecolor</a></li><li><a href=/php/image/imagecrop/>imagecrop</a></li><li><a href=/php/image/imagecropauto/>imagecropauto</a></li><li><a href=/php/image/imagedashedline/>imagedashedline</a></li><li><a href=/php/image/imagedestroy/>imagedestroy</a></li><li><a href=/php/image/imageellipse/>imageellipse</a></li><li><a href=/php/image/imagefill/>imagefill</a></li><li><a href=/php/image/imagefilledarc/>imagefilledarc</a></li><li><a href=/php/image/imagefilledellipse/>imagefilledellipse</a></li><li><a href=/php/image/imagefilledpolygon/>imagefilledpolygon</a></li><li><a href=/php/image/imagefilledrectangle/>imagefilledrectangle</a></li><li><a href=/php/image/imagefilltoborder/>imagefilltoborder</a></li><li><a href=/php/image/imagefilter/>imagefilter</a></li><li><a href=/php/image/imageflip/>imageflip</a></li><li><a href=/php/image/imagefontheight/>imagefontheight</a></li><li><a href=/php/image/imagefontwidth/>imagefontwidth</a></li><li><a href=/php/image/imageftbbox/>imageftbbox</a></li><li><a href=/php/image/imagefttext/>imagefttext</a></li><li><a href=/php/image/imagegammacorrect/>imagegammacorrect</a></li><li><a href=/php/image/imagegetclip/>imagegetclip</a></li><li><a href=/php/image/imagegetinterpolation/>imagegetinterpolation</a></li><li><a href=/php/image/imagegif/>imagegif</a></li><li><a href=/php/image/imageinterlace/>imageinterlace</a></li><li><a href=/php/image/imageistruecolor/>imageistruecolor</a></li><li><a href=/php/image/imagejpeg/>imagejpeg</a></li><li><a href=/php/image/imagelayereffect/>imagelayereffect</a></li><li><a href=/php/image/imageline/>imageline</a></li><li><a href=/php/image/imageloadfont/>imageloadfont</a></li><li><a href=/php/image/imageopenpolygon/>imageopenpolygon</a></li><li><a href=/php/image/imagepalettecopy/>imagepalettecopy</a></li><li><a href=/php/image/imagepalettetotruecolor/>imagepalettetotruecolor</a></li><li><a href=/php/image/imagepng/>imagepng</a></li><li><a href=/php/image/imagepolygon/>imagepolygon</a></li><li><a href=/php/image/imagerectangle/>imagerectangle</a></li><li><a href=/php/image/imageresolution/>imageresolution</a></li><li><a href=/php/image/imagerotate/>imagerotate</a></li><li><a href=/php/image/imagesavealpha/>imagesavealpha</a></li><li><a href=/php/image/imagescale/>imagescale</a></li><li><a href=/php/image/imagesetbrush/>imagesetbrush</a></li><li><a href=/php/image/imagesetclip/>imagesetclip</a></li><li><a href=/php/image/imagesetinterpolation/>imagesetinterpolation</a></li><li><a href=/php/image/imagesetpixel/>imagesetpixel</a></li><li><a href=/php/image/imagesetstyle/>imagesetstyle</a></li><li><a href=/php/image/imagesetthickness/>imagesetthickness</a></li><li><a href=/php/image/imagesettile/>imagesettile</a></li><li><a href=/php/image/imagestring/>imagestring</a></li><li><a href=/php/image/imagestringup/>imagestringup</a></li><li><a href=/php/image/imagesx/>imagesx</a></li><li><a href=/php/image/imagesy/>imagesy</a></li><li><a href=/php/image/imagetruecolortopalette/>imagetruecolortopalette</a></li><li><a href=/php/image/imagettfbbox/>imagettfbbox</a></li><li><a href=/php/image/imagettftext/>imagettftext</a></li><li><a href=/php/image/imagetypes/>imagetypes</a></li><li><a href=/php/image/imagewbmp/>imagewbmp</a></li><li><a href=/php/image/imagewebp/>imagewebp</a></li><li><a href=/php/image/imagexbm/>imagexbm</a></li><li><a href=/php/image/iptcembed/>iptcembed</a></li><li><a href=/php/image/iptcparse/>iptcparse</a></li></ul></div><h2>JSON</h2><div><ul><li><a href=/php/json/json_decode/>json_decode</a></li><li><a href=/php/json/json_encode/>json_encode</a></li><li><a href=/php/json/json_last_error/>json_last_error</a></li><li><a href=/php/json/json_last_error_msg/>json_last_error_msg</a></li><li><a href=/php/json/json_validate/>json_validate</a></li></ul></div><h2>libxml</h2><div><ul><li><a href=/php/libxml/libxml_clear_errors/>libxml_clear_errors</a></li><li><a href=/php/libxml/libxml_get_errors/>libxml_get_errors</a></li><li><a href=/php/libxml/libxml_get_external_entity_loader/>libxml_get_external_entity_loader</a></li><li><a href=/php/libxml/libxml_get_last_error/>libxml_get_last_error</a></li><li><a href=/php/libxml/libxml_set_external_entity_loader/>libxml_set_external_entity_loader</a></li><li><a href=/php/libxml/libxml_set_streams_context/>libxml_set_streams_context</a></li><li><a href=/php/libxml/libxml_use_internal_errors/>libxml_use_internal_errors</a></li></ul></div><h2>Mail</h2><div><ul><li><a href=/php/mail/mail/>mail</a></li></ul></div><h2>Math</h2><div><ul><li><a href=/php/math/abs/>abs</a></li><li><a href=/php/math/acos/>acos</a></li><li><a href=/php/math/acosh/>acosh</a></li><li><a href=/php/math/asin/>asin</a></li><li><a href=/php/math/asinh/>asinh</a></li><li><a href=/php/math/atan/>atan</a></li><li><a href=/php/math/atan2/>atan2</a></li><li><a href=/php/math/atanh/>atanh</a></li><li><a href=/php/math/base_convert/>base_convert</a></li><li><a href=/php/math/bindec/>bindec</a></li><li><a href=/php/math/ceil/>ceil</a></li><li><a href=/php/math/cos/>cos</a></li><li><a href=/php/math/cosh/>cosh</a></li><li><a href=/php/math/decbin/>decbin</a></li><li><a href=/php/math/dechex/>dechex</a></li><li><a href=/php/math/decoct/>decoct</a></li><li><a href=/php/math/deg2rad/>deg2rad</a></li><li><a href=/php/math/exp/>exp</a></li><li><a href=/php/math/expm1/>expm1</a></li><li><a href=/php/math/fdiv/>fdiv</a></li><li><a href=/php/math/floor/>floor</a></li><li><a href=/php/math/fmod/>fmod</a></li><li><a href=/php/math/fpow/>fpow</a></li><li><a href=/php/math/hexdec/>hexdec</a></li><li><a href=/php/math/hypot/>hypot</a></li><li><a href=/php/math/intdiv/>intdiv</a></li><li><a href=/php/math/is_finite/>is_finite</a></li><li><a href=/php/math/is_infinite/>is_infinite</a></li><li><a href=/php/math/is_nan/>is_nan</a></li><li><a href=/php/math/log/>log</a></li><li><a href=/php/math/log10/>log10</a></li><li><a href=/php/math/log1p/>log1p</a></li><li><a href=/php/math/max/>max</a></li><li><a href=/php/math/min/>min</a></li><li><a href=/php/math/octdec/>octdec</a></li><li><a href=/php/math/pi/>pi</a></li><li><a href=/php/math/pow/>pow</a></li><li><a href=/php/math/rad2deg/>rad2deg</a></li><li><a href=/php/math/round/>round</a></li><li><a href=/php/math/sin/>sin</a></li><li><a href=/php/math/sinh/>sinh</a></li><li><a href=/php/math/sqrt/>sqrt</a></li><li><a href=/php/math/tan/>tan</a></li><li><a href=/php/math/tanh/>tanh</a></li></ul></div><h2>Miscellaneous</h2><div><ul><li><a href=/php/miscellaneous/__halt_compiler/>__halt_compiler</a></li><li><a href=/php/miscellaneous/connection_aborted/>connection_aborted</a></li><li><a href=/php/miscellaneous/connection_status/>connection_status</a></li><li><a href=/php/miscellaneous/constant/>constant</a></li><li><a href=/php/miscellaneous/define/>define</a></li><li><a href=/php/miscellaneous/defined/>defined</a></li><li><a href=/php/miscellaneous/die/>die</a></li><li><a href=/php/miscellaneous/eval/>eval</a></li><li><a href=/php/miscellaneous/exit/>exit</a></li><li><a href=/php/miscellaneous/highlight_file/>highlight_file</a></li><li><a href=/php/miscellaneous/highlight_string/>highlight_string</a></li><li><a href=/php/miscellaneous/hrtime/>hrtime</a></li><li><a href=/php/miscellaneous/ignore_user_abort/>ignore_user_abort</a></li><li><a href=/php/miscellaneous/pack/>pack</a></li><li><a href=/php/miscellaneous/php_strip_whitespace/>php_strip_whitespace</a></li><li><a href=/php/miscellaneous/show_source/>show_source</a></li><li><a href=/php/miscellaneous/sleep/>sleep</a></li><li><a href=/php/miscellaneous/sys_getloadavg/>sys_getloadavg</a></li><li><a href=/php/miscellaneous/time_nanosleep/>time_nanosleep</a></li><li><a href=/php/miscellaneous/time_sleep_until/>time_sleep_until</a></li><li><a href=/php/miscellaneous/uniqid/>uniqid</a></li><li><a href=/php/miscellaneous/unpack/>unpack</a></li><li><a href=/php/miscellaneous/usleep/>usleep</a></li></ul></div><h2>Multibyte String</h2><div><ul><li><a href=/php/multibyte-string/mb_check_encoding/>mb_check_encoding</a></li><li><a href=/php/multibyte-string/mb_chr/>mb_chr</a></li><li><a href=/php/multibyte-string/mb_convert_case/>mb_convert_case</a></li><li><a href=/php/multibyte-string/mb_convert_encoding/>mb_convert_encoding</a></li><li><a href=/php/multibyte-string/mb_convert_kana/>mb_convert_kana</a></li><li><a href=/php/multibyte-string/mb_convert_variables/>mb_convert_variables</a></li><li><a href=/php/multibyte-string/mb_decode_mimeheader/>mb_decode_mimeheader</a></li><li><a href=/php/multibyte-string/mb_decode_numericentity/>mb_decode_numericentity</a></li><li><a href=/php/multibyte-string/mb_detect_encoding/>mb_detect_encoding</a></li><li><a href=/php/multibyte-string/mb_detect_order/>mb_detect_order</a></li><li><a href=/php/multibyte-string/mb_encode_mimeheader/>mb_encode_mimeheader</a></li><li><a href=/php/multibyte-string/mb_encode_numericentity/>mb_encode_numericentity</a></li><li><a href=/php/multibyte-string/mb_encoding_aliases/>mb_encoding_aliases</a></li><li><a href=/php/multibyte-string/mb_ereg/>mb_ereg</a></li><li><a href=/php/multibyte-string/mb_ereg_match/>mb_ereg_match</a></li><li><a href=/php/multibyte-string/mb_ereg_replace/>mb_ereg_replace</a></li><li><a href=/php/multibyte-string/mb_ereg_replace_callback/>mb_ereg_replace_callback</a></li><li><a href=/php/multibyte-string/mb_ereg_search/>mb_ereg_search</a></li><li><a href=/php/multibyte-string/mb_ereg_search_getpos/>mb_ereg_search_getpos</a></li><li><a href=/php/multibyte-string/mb_ereg_search_getregs/>mb_ereg_search_getregs</a></li><li><a href=/php/multibyte-string/mb_ereg_search_init/>mb_ereg_search_init</a></li><li><a href=/php/multibyte-string/mb_ereg_search_pos/>mb_ereg_search_pos</a></li><li><a href=/php/multibyte-string/mb_ereg_search_regs/>mb_ereg_search_regs</a></li><li><a href=/php/multibyte-string/mb_ereg_search_setpos/>mb_ereg_search_setpos</a></li><li><a href=/php/multibyte-string/mb_eregi/>mb_eregi</a></li><li><a href=/php/multibyte-string/mb_eregi_replace/>mb_eregi_replace</a></li><li><a href=/php/multibyte-string/mb_get_info/>mb_get_info</a></li><li><a href=/php/multibyte-string/mb_http_input/>mb_http_input</a></li><li><a href=/php/multibyte-string/mb_http_output/>mb_http_output</a></li><li><a href=/php/multibyte-string/mb_internal_encoding/>mb_internal_encoding</a></li><li><a href=/php/multibyte-string/mb_language/>mb_language</a></li><li><a href=/php/multibyte-string/mb_lcfirst/>mb_lcfirst</a></li><li><a href=/php/multibyte-string/mb_list_encodings/>mb_list_encodings</a></li><li><a href=/php/multibyte-string/mb_ltrim/>mb_ltrim</a></li><li><a href=/php/multibyte-string/mb_ord/>mb_ord</a></li><li><a href=/php/multibyte-string/mb_output_handler/>mb_output_handler</a></li><li><a href=/php/multibyte-string/mb_parse_str/>mb_parse_str</a></li><li><a href=/php/multibyte-string/mb_preferred_mime_name/>mb_preferred_mime_name</a></li><li><a href=/php/multibyte-string/mb_regex_encoding/>mb_regex_encoding</a></li><li><a href=/php/multibyte-string/mb_regex_set_options/>mb_regex_set_options</a></li><li><a href=/php/multibyte-string/mb_rtrim/>mb_rtrim</a></li><li><a href=/php/multibyte-string/mb_scrub/>mb_scrub</a></li><li><a href=/php/multibyte-string/mb_send_mail/>mb_send_mail</a></li><li><a href=/php/multibyte-string/mb_split/>mb_split</a></li><li><a href=/php/multibyte-string/mb_str_pad/>mb_str_pad</a></li><li><a href=/php/multibyte-string/mb_str_split/>mb_str_split</a></li><li><a href=/php/multibyte-string/mb_strcut/>mb_strcut</a></li><li><a href=/php/multibyte-string/mb_strimwidth/>mb_strimwidth</a></li><li><a href=/php/multibyte-string/mb_stripos/>mb_stripos</a></li><li><a href=/php/multibyte-string/mb_stristr/>mb_stristr</a></li><li><a href=/php/multibyte-string/mb_strlen/>mb_strlen</a></li><li><a href=/php/multibyte-string/mb_strpos/>mb_strpos</a></li><li><a href=/php/multibyte-string/mb_strrchr/>mb_strrchr</a></li><li><a href=/php/multibyte-string/mb_strrichr/>mb_strrichr</a></li><li><a href=/php/multibyte-string/mb_strripos/>mb_strripos</a></li><li><a href=/php/multibyte-string/mb_strrpos/>mb_strrpos</a></li><li><a href=/php/multibyte-string/mb_strstr/>mb_strstr</a></li><li><a href=/php/multibyte-string/mb_strtolower/>mb_strtolower</a></li><li><a href=/php/multibyte-string/mb_strtoupper/>mb_strtoupper</a></li><li><a href=/php/multibyte-string/mb_strwidth/>mb_strwidth</a></li><li><a href=/php/multibyte-string/mb_substitute_character/>mb_substitute_character</a></li><li><a href=/php/multibyte-string/mb_substr/>mb_substr</a></li><li><a href=/php/multibyte-string/mb_substr_count/>mb_substr_count</a></li><li><a href=/php/multibyte-string/mb_trim/>mb_trim</a></li><li><a href=/php/multibyte-string/mb_ucfirst/>mb_ucfirst</a></li></ul></div><h2>Network</h2><div><ul><li><a href=/php/network/checkdnsrr/>checkdnsrr</a></li><li><a href=/php/network/closelog/>closelog</a></li><li><a href=/php/network/dns_check_record/>dns_check_record</a></li><li><a href=/php/network/dns_get_mx/>dns_get_mx</a></li><li><a href=/php/network/dns_get_record/>dns_get_record</a></li><li><a href=/php/network/fsockopen/>fsockopen</a></li><li><a href=/php/network/gethostbyaddr/>gethostbyaddr</a></li><li><a href=/php/network/gethostbyname/>gethostbyname</a></li><li><a href=/php/network/gethostbynamel/>gethostbynamel</a></li><li><a href=/php/network/gethostname/>gethostname</a></li><li><a href=/php/network/getmxrr/>getmxrr</a></li><li><a href=/php/network/getprotobyname/>getprotobyname</a></li><li><a href=/php/network/getprotobynumber/>getprotobynumber</a></li><li><a href=/php/network/getservbyname/>getservbyname</a></li><li><a href=/php/network/getservbyport/>getservbyport</a></li><li><a href=/php/network/header/>header</a></li><li><a href=/php/network/header_register_callback/>header_register_callback</a></li><li><a href=/php/network/header_remove/>header_remove</a></li><li><a href=/php/network/headers_list/>headers_list</a></li><li><a href=/php/network/headers_sent/>headers_sent</a></li><li><a href=/php/network/http_clear_last_response_headers/>http_clear_last_response_headers</a></li><li><a href=/php/network/http_get_last_response_headers/>http_get_last_response_headers</a></li><li><a href=/php/network/http_response_code/>http_response_code</a></li><li><a href=/php/network/inet_ntop/>inet_ntop</a></li><li><a href=/php/network/inet_pton/>inet_pton</a></li><li><a href=/php/network/ip2long/>ip2long</a></li><li><a href=/php/network/long2ip/>long2ip</a></li><li><a href=/php/network/openlog/>openlog</a></li><li><a href=/php/network/pfsockopen/>pfsockopen</a></li><li><a href=/php/network/setcookie/>setcookie</a></li><li><a href=/php/network/setrawcookie/>setrawcookie</a></li><li><a href=/php/network/socket_get_status/>socket_get_status</a></li><li><a href=/php/network/socket_set_blocking/>socket_set_blocking</a></li><li><a href=/php/network/socket_set_timeout/>socket_set_timeout</a></li><li><a href=/php/network/syslog/>syslog</a></li></ul></div><h2>Options / Information</h2><div><ul><li><a href=/php/options-information/assert/>assert</a></li><li><a href=/php/options-information/assert_options/>assert_options</a></li><li><a href=/php/options-information/cli_get_process_title/>cli_get_process_title</a></li><li><a href=/php/options-information/cli_set_process_title/>cli_set_process_title</a></li><li><a href=/php/options-information/dl/>dl</a></li><li><a href=/php/options-information/extension_loaded/>extension_loaded</a></li><li><a href=/php/options-information/gc_collect_cycles/>gc_collect_cycles</a></li><li><a href=/php/options-information/gc_disable/>gc_disable</a></li><li><a href=/php/options-information/gc_enable/>gc_enable</a></li><li><a href=/php/options-information/gc_enabled/>gc_enabled</a></li><li><a href=/php/options-information/gc_mem_caches/>gc_mem_caches</a></li><li><a href=/php/options-information/gc_status/>gc_status</a></li><li><a href=/php/options-information/get_cfg_var/>get_cfg_var</a></li><li><a href=/php/options-information/get_current_user/>get_current_user</a></li><li><a href=/php/options-information/get_defined_constants/>get_defined_constants</a></li><li><a href=/php/options-information/get_extension_funcs/>get_extension_funcs</a></li><li><a href=/php/options-information/get_include_path/>get_include_path</a></li><li><a href=/php/options-information/get_included_files/>get_included_files</a></li><li><a href=/php/options-information/get_load
e8d4
ed_extensions/>get_loaded_extensions</a></li><li><a href=/php/options-information/get_required_files/>get_required_files</a></li><li><a href=/php/options-information/get_resources/>get_resources</a></li><li><a href=/php/options-information/getenv/>getenv</a></li><li><a href=/php/options-information/getlastmod/>getlastmod</a></li><li><a href=/php/options-information/getmygid/>getmygid</a></li><li><a href=/php/options-information/getmyinode/>getmyinode</a></li><li><a href=/php/options-information/getmypid/>getmypid</a></li><li><a href=/php/options-information/getmyuid/>getmyuid</a></li><li><a href=/php/options-information/getopt/>getopt</a></li><li><a href=/php/options-information/getrusage/>getrusage</a></li><li><a href=/php/options-information/ini_alter/>ini_alter</a></li><li><a href=/php/options-information/ini_get/>ini_get</a></li><li><a href=/php/options-information/ini_get_all/>ini_get_all</a></li><li><a href=/php/options-information/ini_parse_quantity/>ini_parse_quantity</a></li><li><a href=/php/options-information/ini_restore/>ini_restore</a></li><li><a href=/php/options-information/ini_set/>ini_set</a></li><li><a href=/php/options-information/memory_get_peak_usage/>memory_get_peak_usage</a></li><li><a href=/php/options-information/memory_get_usage/>memory_get_usage</a></li><li><a href=/php/options-information/memory_reset_peak_usage/>memory_reset_peak_usage</a></li><li><a href=/php/options-information/php_ini_loaded_file/>php_ini_loaded_file</a></li><li><a href=/php/options-information/php_ini_scanned_files/>php_ini_scanned_files</a></li><li><a href=/php/options-information/php_sapi_name/>php_sapi_name</a></li><li><a href=/php/options-information/php_uname/>php_uname</a></li><li><a href=/php/options-information/phpcredits/>phpcredits</a></li><li><a href=/php/options-information/phpinfo/>phpinfo</a></li><li><a href=/php/options-information/phpversion/>phpversion</a></li><li><a href=/php/options-information/putenv/>putenv</a></li><li><a href=/php/options-information/set_include_path/>set_include_path</a></li><li><a href=/php/options-information/set_time_limit/>set_time_limit</a></li><li><a href=/php/options-information/sys_get_temp_dir/>sys_get_temp_dir</a></li><li><a href=/php/options-information/version_compare/>version_compare</a></li><li><a href=/php/options-information/zend_thread_id/>zend_thread_id</a></li><li><a href=/php/options-information/zend_version/>zend_version</a></li></ul></div><h2>Output Control</h2><div><ul><li><a href=/php/output-control/flush/>flush</a></li><li><a href=/php/output-control/ob_clean/>ob_clean</a></li><li><a href=/php/output-control/ob_end_clean/>ob_end_clean</a></li><li><a href=/php/output-control/ob_end_flush/>ob_end_flush</a></li><li><a href=/php/output-control/ob_flush/>ob_flush</a></li><li><a href=/php/output-control/ob_get_clean/>ob_get_clean</a></li><li><a href=/php/output-control/ob_get_contents/>ob_get_contents</a></li><li><a href=/php/output-control/ob_get_flush/>ob_get_flush</a></li><li><a href=/php/output-control/ob_get_length/>ob_get_length</a></li><li><a href=/php/output-control/ob_get_level/>ob_get_level</a></li><li><a href=/php/output-control/ob_get_status/>ob_get_status</a></li><li><a href=/php/output-control/ob_gzhandler/>ob_gzhandler</a></li><li><a href=/php/output-control/ob_implicit_flush/>ob_implicit_flush</a></li><li><a href=/php/output-control/ob_list_handlers/>ob_list_handlers</a></li><li><a href=/php/output-control/ob_start/>ob_start</a></li><li><a href=/php/output-control/output_add_rewrite_var/>output_add_rewrite_var</a></li><li><a href=/php/output-control/output_reset_rewrite_vars/>output_reset_rewrite_vars</a></li></ul></div><h2>PCNTL</h2><div><ul><li><a href=/php/pcntl/pcntl_alarm/>pcntl_alarm</a></li><li><a href=/php/pcntl/pcntl_async_signals/>pcntl_async_signals</a></li><li><a href=/php/pcntl/pcntl_errno/>pcntl_errno</a></li><li><a href=/php/pcntl/pcntl_exec/>pcntl_exec</a></li><li><a href=/php/pcntl/pcntl_fork/>pcntl_fork</a></li><li><a href=/php/pcntl/pcntl_get_last_error/>pcntl_get_last_error</a></li><li><a href=/php/pcntl/pcntl_getpriority/>pcntl_getpriority</a></li><li><a href=/php/pcntl/pcntl_rfork/>pcntl_rfork</a></li><li><a href=/php/pcntl/pcntl_setpriority/>pcntl_setpriority</a></li><li><a href=/php/pcntl/pcntl_signal/>pcntl_signal</a></li><li><a href=/php/pcntl/pcntl_signal_dispatch/>pcntl_signal_dispatch</a></li><li><a href=/php/pcntl/pcntl_signal_get_handler/>pcntl_signal_get_handler</a></li><li><a href=/php/pcntl/pcntl_sigprocmask/>pcntl_sigprocmask</a></li><li><a href=/php/pcntl/pcntl_sigtimedwait/>pcntl_sigtimedwait</a></li><li><a href=/php/pcntl/pcntl_sigwaitinfo/>pcntl_sigwaitinfo</a></li><li><a href=/php/pcntl/pcntl_strerror/>pcntl_strerror</a></li><li><a href=/php/pcntl/pcntl_unshare/>pcntl_unshare</a></li><li><a href=/php/pcntl/pcntl_wait/>pcntl_wait</a></li><li><a href=/php/pcntl/pcntl_waitpid/>pcntl_waitpid</a></li><li><a href=/php/pcntl/pcntl_wexitstatus/>pcntl_wexitstatus</a></li><li><a href=/php/pcntl/pcntl_wifexited/>pcntl_wifexited</a></li><li><a href=/php/pcntl/pcntl_wifsignaled/>pcntl_wifsignaled</a></li><li><a href=/php/pcntl/pcntl_wifstopped/>pcntl_wifstopped</a></li><li><a href=/php/pcntl/pcntl_wstopsig/>pcntl_wstopsig</a></li><li><a href=/php/pcntl/pcntl_wtermsig/>pcntl_wtermsig</a></li></ul></div><h2>PCRE</h2><div><ul><li><a href=/php/pcre/preg_filter/>preg_filter</a></li><li><a href=/php/pcre/preg_grep/>preg_grep</a></li><li><a href=/php/pcre/preg_last_error/>preg_last_error</a></li><li><a href=/php/pcre/preg_match/>preg_match</a></li><li><a href=/php/pcre/preg_match_all/>preg_match_all</a></li><li><a href=/php/pcre/preg_quote/>preg_quote</a></li><li><a href=/php/pcre/preg_replace/>preg_replace</a></li><li><a href=/php/pcre/preg_replace_callback/>preg_replace_callback</a></li><li><a href=/php/pcre/preg_replace_callback_array/>preg_replace_callback_array</a></li><li><a href=/php/pcre/preg_split/>preg_split</a></li></ul></div><h2>POSIX</h2><div><ul><li><a href=/php/posix/posix_access/>posix_access</a></li><li><a href=/php/posix/posix_ctermid/>posix_ctermid</a></li><li><a href=/php/posix/posix_eaccess/>posix_eaccess</a></li><li><a href=/php/posix/posix_errno/>posix_errno</a></li><li><a href=/php/posix/posix_fpathconf/>posix_fpathconf</a></li><li><a href=/php/posix/posix_get_last_error/>posix_get_last_error</a></li><li><a href=/php/posix/posix_getcwd/>posix_getcwd</a></li><li><a href=/php/posix/posix_getegid/>posix_getegid</a></li><li><a href=/php/posix/posix_geteuid/>posix_geteuid</a></li><li><a href=/php/posix/posix_getgid/>posix_getgid</a></li><li><a href=/php/posix/posix_getgrgid/>posix_getgrgid</a></li><li><a href=/php/posix/posix_getgrnam/>posix_getgrnam</a></li><li><a href=/php/posix/posix_getgroups/>posix_getgroups</a></li><li><a href=/php/posix/posix_getlogin/>posix_getlogin</a></li><li><a href=/php/posix/posix_getpgid/>posix_getpgid</a></li><li><a href=/php/posix/posix_getpgrp/>posix_getpgrp</a></li><li><a href=/php/posix/posix_getpid/>posix_getpid</a></li><li><a href=/php/posix/posix_getppid/>posix_getppid</a></li><li><a href=/php/posix/posix_getpwnam/>posix_getpwnam</a></li><li><a href=/php/posix/posix_getpwuid/>posix_getpwuid</a></li><li><a href=/php/posix/posix_getrlimit/>posix_getrlimit</a></li><li><a href=/php/posix/posix_getsid/>posix_getsid</a></li><li><a href=/php/posix/posix_getuid/>posix_getuid</a></li><li><a href=/php/posix/posix_initgroups/>posix_initgroups</a></li><li><a href=/php/posix/posix_isatty/>posix_isatty</a></li><li><a href=/php/posix/posix_kill/>posix_kill</a></li><li><a href=/php/posix/posix_mkfifo/>posix_mkfifo</a></li><li><a href=/php/posix/posix_mknod/>posix_mknod</a></li><li><a href=/php/posix/posix_pathconf/>posix_pathconf</a></li><li><a href=/php/posix/posix_setegid/>posix_setegid</a></li><li><a href=/php/posix/posix_seteuid/>posix_seteuid</a></li><li><a href=/php/posix/posix_setgid/>posix_setgid</a></li><li><a href=/php/posix/posix_setpgid/>posix_setpgid</a></li><li><a href=/php/posix/posix_setrlimit/>posix_setrlimit</a></li><li><a href=/php/posix/posix_setsid/>posix_setsid</a></li><li><a href=/php/posix/posix_setuid/>posix_setuid</a></li><li><a href=/php/posix/posix_strerror/>posix_strerror</a></li><li><a href=/php/posix/posix_sysconf/>posix_sysconf</a></li><li><a href=/php/posix/posix_times/>posix_times</a></li><li><a href=/php/posix/posix_ttyname/>posix_ttyname</a></li><li><a href=/php/posix/posix_uname/>posix_uname</a></li></ul></div><h2>Random</h2><div><ul><li><a href=/php/random/getrandmax/>getrandmax</a></li><li><a href=/php/random/lcg_value/>lcg_value</a></li><li><a href=/php/random/mt_getrandmax/>mt_getrandmax</a></li><li><a href=/php/random/mt_rand/>mt_rand</a></li><li><a href=/php/random/mt_srand/>mt_srand</a></li><li><a href=/php/random/rand/>rand</a></li><li><a href=/php/random/random_bytes/>random_bytes</a></li><li><a href=/php/random/random_int/>random_int</a></li><li><a href=/php/random/srand/>srand</a></li></ul></div><h2>Readline</h2><div><ul><li><a href=/php/readline/readline/>readline</a></li><li><a href=/php/readline/readline_add_history/>readline_add_history</a></li><li><a href=/php/readline/readline_callback_handler_install/>readline_callback_handler_install</a></li><li><a href=/php/readline/readline_callback_handler_remove/>readline_callback_handler_remove</a></li><li><a href=/php/readline/readline_callback_read_char/>readline_callback_read_char</a></li><li><a href=/php/readline/readline_clear_history/>readline_clear_history</a></li><li><a href=/php/readline/readline_completion_function/>readline_completion_function</a></li><li><a href=/php/readline/readline_info/>readline_info</a></li><li><a href=/php/readline/readline_list_history/>readline_list_history</a></li><li><a href=/php/readline/readline_on_new_line/>readline_on_new_line</a></li><li><a href=/php/readline/readline_read_history/>readline_read_history</a></li><li><a href=/php/readline/readline_redisplay/>readline_redisplay</a></li><li><a href=/php/readline/readline_write_history/>readline_write_history</a></li></ul></div><h2>ReflectionConstant</h2><div><ul><li><a href=/php/reflectionconstant/getname/>getName</a></li><li><a href=/php/reflectionconstant/getnamespacename/>getNamespaceName</a></li><li><a href=/php/reflectionconstant/getshortname/>getShortName</a></li><li><a href=/php/reflectionconstant/getvalue/>getValue</a></li><li><a href=/php/reflectionconstant/isdeprecated/>isDeprecated</a></li></ul></div><h2>Session</h2><div><ul><li><a href=/php/session/session_abort/>session_abort</a></li><li><a href=/php/session/session_cache_expire/>session_cache_expire</a></li><li><a href=/php/session/session_cache_limiter/>session_cache_limiter</a></li><li><a href=/php/session/session_commit/>session_commit</a></li><li><a href=/php/session/session_create_id/>session_create_id</a></li><li><a href=/php/session/session_decode/>session_decode</a></li><li><a href=/php/session/session_destroy/>session_destroy</a></li><li><a href=/php/session/session_encode/>session_encode</a></li><li><a href=/php/session/session_gc/>session_gc</a></li><li><a href=/php/session/session_get_cookie_params/>session_get_cookie_params</a></li><li><a href=/php/session/session_id/>session_id</a></li><li><a href=/php/session/session_module_name/>session_module_name</a></li><li><a href=/php/session/session_name/>session_name</a></li><li><a href=/php/session/session_regenerate_id/>session_regenerate_id</a></li><li><a href=/php/session/session_register_shutdown/>session_register_shutdown</a></li><li><a href=/php/session/session_reset/>session_reset</a></li><li><a href=/php/session/session_save_path/>session_save_path</a></li><li><a href=/php/session/session_set_cookie_params/>session_set_cookie_params</a></li><li><a href=/php/session/session_set_save_handler/>session_set_save_handler</a></li><li><a href=/php/session/session_start/>session_start</a></li><li><a href=/php/session/session_status/>session_status</a></li><li><a href=/php/session/session_unset/>session_unset</a></li><li><a href=/php/session/session_write_close/>session_write_close</a></li></ul></div><h2>Shmop</h2><div><ul><li><a href=/php/shmop/shmop_delete/>shmop_delete</a></li><li><a href=/php/shmop/shmop_open/>shmop_open</a></li><li><a href=/php/shmop/shmop_read/>shmop_read</a></li><li><a href=/php/shmop/shmop_size/>shmop_size</a></li><li><a href=/php/shmop/shmop_write/>shmop_write</a></li></ul></div><h2>SimpleXML</h2><div><ul><li><a href=/php/simplexml/simplexml_import_dom/>simplexml_import_dom</a></li><li><a href=/php/simplexml/simplexml_load_file/>simplexml_load_file</a></li><li><a href=/php/simplexml/simplexml_load_string/>simplexml_load_string</a></li></ul></div><h2>SNMP</h2><div><ul><li><a href=/php/snmp/snmp_get_quick_print/>snmp_get_quick_print</a></li><li><a href=/php/snmp/snmp_get_valueretrieval/>snmp_get_valueretrieval</a></li><li><a href=/php/snmp/snmp_read_mib/>snmp_read_mib</a></li><li><a href=/php/snmp/snmp_set_enum_print/>snmp_set_enum_print</a></li><li><a href=/php/snmp/snmp_set_oid_numeric_print/>snmp_set_oid_numeric_print</a></li><li><a href=/php/snmp/snmp_set_oid_output_format/>snmp_set_oid_output_format</a></li><li><a href=/php/snmp/snmp_set_quick_print/>snmp_set_quick_print</a></li><li><a href=/php/snmp/snmp_set_valueretrieval/>snmp_set_valueretrieval</a></li><li><a href=/php/snmp/snmp2_get/>snmp2_get</a></li><li><a href=/php/snmp/snmp2_getnext/>snmp2_getnext</a></li><li><a href=/php/snmp/snmp2_real_walk/>snmp2_real_walk</a></li><li><a href=/php/snmp/snmp2_set/>snmp2_set</a></li><li><a href=/php/snmp/snmp2_walk/>snmp2_walk</a></li><li><a href=/php/snmp/snmp3_get/>snmp3_get</a></li><li><a href=/php/snmp/snmp3_getnext/>snmp3_getnext</a></li><li><a href=/php/snmp/snmp3_real_walk/>snmp3_real_walk</a></li><li><a href=/php/snmp/snmp3_set/>snmp3_set</a></li><li><a href=/php/snmp/snmp3_walk/>snmp3_walk</a></li><li><a href=/php/snmp/snmpget/>snmpget</a></li><li><a href=/php/snmp/snmpgetnext/>snmpgetnext</a></li><li><a href=/php/snmp/snmprealwalk/>snmprealwalk</a></li><li><a href=/php/snmp/snmpset/>snmpset</a></li><li><a href=/php/snmp/snmpwalk/>snmpwalk</a></li><li><a href=/php/snmp/snmpwalkoid/>snmpwalkoid</a></li></ul></div><h2>Sockets</h2><div><ul><li><a href=/php/sockets/socket_accept/>socket_accept</a></li><li><a href=/php/sockets/socket_addrinfo_bind/>socket_addrinfo_bind</a></li><li><a href=/php/sockets/socket_addrinfo_connect/>socket_addrinfo_connect</a></li><li><a href=/php/sockets/socket_addrinfo_explain/>socket_addrinfo_explain</a></li><li><a href=/php/sockets/socket_addrinfo_lookup/>socket_addrinfo_lookup</a></li><li><a href=/php/sockets/socket_atmark/>socket_atmark</a></li><li><a href=/php/sockets/socket_bind/>socket_bind</a></li><li><a href=/php/sockets/socket_clear_error/>socket_clear_error</a></li><li><a href=/php/sockets/socket_close/>socket_close</a></li><li><a href=/php/sockets/socket_cmsg_space/>socket_cmsg_space</a></li><li><a href=/php/sockets/socket_connect/>socket_connect</a></li><li><a href=/php/sockets/socket_create/>socket_create</a></li><li><a href=/php/sockets/socket_create_listen/>socket_create_listen</a></li><li><a href=/php/sockets/socket_create_pair/>socket_create_pair</a></li><li><a href=/php/sockets/socket_export_stream/>socket_export_stream</a></li><li><a href=/php/sockets/socket_get_option/>socket_get_option</a></li><li><a href=/php/sockets/socket_getopt/>socket_getopt</a></li><li><a href=/php/sockets/socket_getpeername/>socket_getpeername</a></li><li><a href=/php/sockets/socket_getsockname/>socket_getsockname</a></li><li><a href=/php/sockets/socket_import_stream/>socket_import_stream</a></li><li><a href=/php/sockets/socket_last_error/>socket_last_error</a></li><li><a href=/php/sockets/socket_listen/>socket_listen</a></li><li><a href=/php/sockets/socket_read/>socket_read</a></li><li><a href=/php/sockets/socket_recv/>socket_recv</a></li><li><a href=/php/sockets/socket_recvfrom/>socket_recvfrom</a></li><li><a href=/php/sockets/socket_recvmsg/>socket_recvmsg</a></li><li><a href=/php/sockets/socket_select/>socket_select</a></li><li><a href=/php/sockets/socket_send/>socket_send</a></li><li><a href=/php/sockets/socket_sendmsg/>socket_sendmsg</a></li><li><a href=/php/sockets/socket_sendto/>socket_sendto</a></li><li><a href=/php/sockets/socket_set_block/>socket_set_block</a></li><li><a href=/php/sockets/socket_set_nonblock/>socket_set_nonblock</a></li><li><a href=/php/sockets/socket_set_option/>socket_set_option</a></li><li><a href=/php/sockets/socket_setopt/>socket_setopt</a></li><li><a href=/php/sockets/socket_shutdown/>socket_shutdown</a></li><li><a href=/php/sockets/socket_strerror/>socket_strerror</a></li><li><a href=/php/sockets/socket_write/>socket_write</a></li><li><a href=/php/sockets/socket_wsaprotocol_info_export/>socket_wsaprotocol_info_export</a></li><li><a href=/php/sockets/socket_wsaprotocol_info_import/>socket_wsaprotocol_info_import</a></li><li><a href=/php/sockets/socket_wsaprotocol_info_release/>socket_wsaprotocol_info_release</a></li></ul></div><h2>SPL</h2><div><ul><li><a href=/php/spl/class_implements/>class_implements</a></li><li><a href=/php/spl/class_parents/>class_parents</a></li><li><a href=/php/spl/class_uses/>class_uses</a></li><li><a href=/php/spl/iterator_apply/>iterator_apply</a></li><li><a href=/php/spl/iterator_count/>iterator_count</a></li><li><a href=/php/spl/iterator_to_array/>iterator_to_array</a></li><li><a href=/php/spl/spl_autoload/>spl_autoload</a></li><li><a href=/php/spl/spl_autoload_call/>spl_autoload_call</a></li><li><a href=/php/spl/spl_autoload_extensions/>spl_autoload_extensions</a></li><li><a href=/php/spl/spl_autoload_functions/>spl_autoload_functions</a></li><li><a href=/php/spl/spl_autoload_register/>spl_autoload_register</a></li><li><a href=/php/spl/spl_autoload_unregister/>spl_autoload_unregister</a></li><li><a href=/php/spl/spl_classes/>spl_classes</a></li><li><a href=/php/spl/spl_object_hash/>spl_object_hash</a></li><li><a href=/php/spl/spl_object_id/>spl_object_id</a></li></ul></div><h2>Stream</h2><div><ul><li><a href=/php/stream/stream_bucket_append/>stream_bucket_append</a></li><li><a href=/php/stream/stream_bucket_make_writeable/>stream_bucket_make_writeable</a></li><li><a href=/php/stream/stream_bucket_new/>stream_bucket_new</a></li><li><a href=/php/stream/stream_bucket_prepend/>stream_bucket_prepend</a></li><li><a href=/php/stream/stream_context_create/>stream_context_create</a></li><li><a href=/php/stream/stream_context_get_default/>stream_context_get_default</a></li><li><a href=/php/stream/stream_context_get_options/>stream_context_get_options</a></li><li><a href=/php/stream/stream_context_get_params/>stream_context_get_params</a></li><li><a href=/php/stream/stream_context_set_default/>stream_context_set_default</a></li><li><a href=/php/stream/stream_context_set_option/>stream_context_set_option</a></li><li><a href=/php/stream/stream_context_set_options/>stream_context_set_options</a></li><li><a href=/php/stream/stream_context_set_params/>stream_context_set_params</a></li><li><a href=/php/stream/stream_copy_to_stream/>stream_copy_to_stream</a></li><li><a href=/php/stream/stream_filter_append/>stream_filter_append</a></li><li><a href=/php/stream/stream_filter_prepend/>stream_filter_prepend</a></li><li><a href=/php/stream/stream_filter_register/>stream_filter_register</a></li><li><a href=/php/stream/stream_filter_remove/>stream_filter_remove</a></li><li><a href=/php/stream/stream_get_contents/>stream_get_contents</a></li><li><a href=/php/stream/stream_get_filters/>stream_get_filters</a></li><li><a href=/php/stream/stream_get_line/>stream_get_line</a></li><li><a href=/php/stream/stream_get_meta_data/>stream_get_meta_data</a></li><li><a href=/php/stream/stream_get_transports/>stream_get_transports</a></li><li><a href=/php/stream/stream_get_wrappers/>stream_get_wrappers</a></li><li><a href=/php/stream/stream_is_local/>stream_is_local</a></li><li><a href=/php/stream/stream_isatty/>stream_isatty</a></li><li><a href=/php/stream/stream_notification_callback/>stream_notification_callback</a></li><li><a href=/php/stream/stream_register_wrapper/>stream_register_wrapper</a></li><li><a href=/php/stream/stream_resolve_include_path/>stream_resolve_include_path</a></li><li><a href=/php/stream/stream_select/>stream_select</a></li><li><a href=/php/stream/stream_set_blocking/>stream_set_blocking</a></li><li><a href=/php/stream/stream_set_chunk_size/>stream_set_chunk_size</a></li><li><a href=/php/stream/stream_set_read_buffer/>stream_set_read_buffer</a></li><li><a href=/php/stream/stream_set_timeout/>stream_set_timeout</a></li><li><a href=/php/stream/stream_set_write_buffer/>stream_set_write_buffer</a></li><li><a href=/php/stream/stream_socket_accept/>stream_socket_accept</a></li><li><a href=/php/stream/stream_socket_client/>stream_socket_client</a></li><li><a href=/php/stream/stream_socket_enable_crypto/>stream_socket_enable_crypto</a></li><li><a href=/php/stream/stream_socket_get_name/>stream_socket_get_name</a></li><li><a href=/php/stream/stream_socket_pair/>stream_socket_pair</a></li><li><a href=/php/stream/stream_socket_recvfrom/>stream_socket_recvfrom</a></li><li><a href=/php/stream/stream_socket_sendto/>stream_socket_sendto</a></li><li><a href=/php/stream/stream_socket_server/>stream_socket_server</a></li><li><a href=/php/stream/stream_socket_shutdown/>stream_socket_shutdown</a></li><li><a href=/php/stream/stream_supports_lock/>stream_supports_lock</a></li><li><a href=/php/stream/stream_wrapper_register/>stream_wrapper_register</a></li><li><a href=/php/stream/stream_wrapper_restore/>stream_wrapper_restore</a></li><li><a href=/php/stream/stream_wrapper_unregister/>stream_wrapper_unregister</a></li></ul></div><h2>String</h2><div><ul><li><a href=/php/string/addcslashes/>addcslashes</a></li><li><a href=/php/string/addslashes/>addslashes</a></li><li><a href=/php/string/bin2hex/>bin2hex</a></li><li><a href=/php/string/chop/>chop</a></li><li><a href=/php/string/chr/>chr</a></li><li><a href=/php/string/chunk_split/>chunk_split</a></li><li><a href=/php/string/convert_uudecode/>convert_uudecode</a></li><li><a href=/php/string/convert_uuencode/>convert_uuencode</a></li><li><a href=/php/string/count_chars/>count_chars</a></li><li><a href=/php/string/crc32/>crc32</a></li><li><a href=/php/string/crypt/>crypt</a></li><li><a href=/php/string/echo/>echo</a></li><li><a href=/php/string/explode/>explode</a></li><li><a href=/php/string/fprintf/>fprintf</a></li><li><a href=/php/string/get_html_translation_table/>get_html_translation_table</a></li><li><a href=/php/string/hebrev/>hebrev</a></li><li><a href=/php/string/hebrevc/>hebrevc</a></li><li><a href=/php/string/hex2bin/>hex2bin</a></li><li><a href=/php/string/html_entity_decode/>html_entity_decode</a></li><li><a href=/php/string/htmlentities/>htmlentities</a></li><li><a href=/php/string/htmlspecialchars/>htmlspecialchars</a></li><li><a href=/php/string/htmlspecialchars_decode/>htmlspecialchars_decode</a></li><li><a href=/php/string/implode/>implode</a></li><li><a href=/php/string/join/>join</a></li><li><a href=/php/string/lcfirst/>lcfirst</a></li><li><a href=/php/string/levenshtein/>levenshtein</a></li><li><a href=/php/string/localeconv/>localeconv</a></li><li><a href=/php/string/ltrim/>ltrim</a></li><li><a href=/php/string/md5/>md5</a></li><li><a href=/php/string/md5_file/>md5_file</a></li><li><a href=/php/string/metaphone/>metaphone</a></li><li><a href=/php/string/nl_langinfo/>nl_langinfo</a></li><li><a href=/php/string/nl2br/>nl2br</a></li><li><a href=/php/string/number_format/>number_format</a></li><li><a href=/php/string/ord/>ord</a></li><li><a href=/php/string/parse_str/>parse_str</a></li><li><a href=/php/string/print/>print</a></li><li><a href=/php/string/printf/>printf</a></li><li><a href=/php/string/quoted_printable_decode/>quoted_printable_decode</a></li><li><a href=/php/string/quoted_printable_encode/>quoted_printable_encode</a></li><li><a href=/php/string/quotemeta/>quotemeta</a></li><li><a href=/php/string/rtrim/>rtrim</a></li><li><a href=/php/string/setlocale/>setlocale</a></li><li><a href=/php/string/sha1/>sha1</a></li><li><a href=/php/string/sha1_file/>sha1_file</a></li><li><a href=/php/string/similar_text/>similar_text</a></li><li><a href=/php/string/soundex/>soundex</a></li><li><a href=/php/string/sprintf/>sprintf</a></li><li><a href=/php/string/sscanf/>sscanf</a></li><li><a href=/php/string/str_contains/>str_contains</a></li><li><a href=/php/string/str_decrement/>str_decrement</a></li><li><a href=/php/string/str_ends_with/>str_ends_with</a></li><li><a href=/php/string/str_getcsv/>str_getcsv</a></li><li><a href=/php/string/str_increment/>str_increment</a></li><li><a href=/php/string/str_ireplace/>str_ireplace</a></li><li><a href=/php/string/str_pad/>str_pad</a></li><li><a href=/php/string/str_repeat/>str_repeat</a></li><li><a href=/php/string/str_replace/>str_replace</a></li><li><a href=/php/string/str_rot13/>str_rot13</a></li><li><a href=/php/string/str_shuffle/>str_shuffle</a></li><li><a href=/php/string/str_split/>str_split</a></li><li><a href=/php/string/str_starts_with/>str_starts_with</a></li><li><a href=/php/string/str_word_count/>str_word_count</a></li><li><a href=/php/string/strcasecmp/>strcasecmp</a></li><li><a href=/php/string/strchr/>strchr</a></li><li><a href=/php/string/strcmp/>strcmp</a></li><li><a href=/php/string/strcoll/>strcoll</a></li><li><a href=/php/string/strcspn/>strcspn</a></li><li><a href=/php/string/strip_tags/>strip_tags</a></li><li><a href=/php/string/stripcslashes/>stripcslashes</a></li><li><a href=/php/string/stripos/>stripos</a></li><li><a href=/php/string/stripslashes/>stripslashes</a></li><li><a href=/php/string/stristr/>stristr</a></li><li><a href=/php/string/strlen/>strlen</a></li><li><a href=/php/string/strnatcasecmp/>strnatcasecmp</a></li><li><a href=/php/string/strnatcmp/>strnatcmp</a></li><li><a href=/php/string/strncasecmp/>strncasecmp</a></li><li><a href=/php/string/strncmp/>strncmp</a></li><li><a href=/php/string/strpbrk/>strpbrk</a></li><li><a href=/php/string/strpos/>strpos</a></li><li><a href=/php/string/strrchr/>strrchr</a></li><li><a href=/php/string/strrev/>strrev</a></li><li><a href=/php/string/strripos/>strripos</a></li><li><a href=/php/string/strrpos/>strrpos</a></li><li><a href=/php/string/strspn/>strspn</a></li><li><a href=/php/string/strstr/>strstr</a></li><li><a href=/php/string/strtok/>strtok</a></li><li><a href=/php/string/strtolower/>strtolower</a></li><li><a href=/php/string/strtoupper/>strtoupper</a></li><li><a href=/php/string/strtr/>strtr</a></li><li><a href=/php/string/substr/>substr</a></li><li><a href=/php/string/substr_compare/>substr_compare</a></li><li><a href=/php/string/substr_count/>substr_count</a></li><li><a href=/php/string/substr_replace/>substr_replace</a></li><li><a href=/php/string/trim/>trim</a></li><li><a href=/php/string/ucfirst/>ucfirst</a></li><li><a href=/php/string/ucwords/>ucwords</a></li><li><a href=/php/string/vfprintf/>vfprintf</a></li><li><a href=/php/string/vprintf/>vprintf</a></li><li><a href=/php/string/vsprintf/>vsprintf</a></li><li><a href=/php/string/wordwrap/>wordwrap</a></li></ul></div><h2>Tokenizer</h2><div><ul><li><a href=/php/tokenizer/token_get_all/>token_get_all</a></li><li><a href=/php/tokenizer/token_name/>token_name</a></li></ul></div><h2>URL</h2><div><ul><li><a href=/php/url/base64_decode/>base64_decode</a></li><li><a href=/php/url/base64_encode/>base64_encode</a></li><li><a href=/php/url/get_headers/>get_headers</a></li><li><a href=/php/url/get_meta_tags/>get_meta_tags</a></li><li><a href=/php/url/http_build_query/>http_build_query</a></li><li><a href=/php/url/parse_url/>parse_url</a></li><li><a href=/php/url/rawurldecode/>rawurldecode</a></li><li><a href=/php/url/rawurlencode/>rawurlencode</a></li><li><a href=/php/url/urldecode/>urldecode</a></li><li><a href=/php/url/urlencode/>urlencode</a></li></ul></div><h2>Variable Handling</h2><div><ul><li><a href=/php/variable-handling/boolval/>boolval</a></li><li><a href=/php/variable-handling/debug_zval_dump/>debug_zval_dump</a></li><li><a href=/php/variable-handling/doubleval/>doubleval</a></li><li><a href=/php/variable-handling/empty/>empty</a></li><li><a href=/php/variable-handling/floatval/>floatval</a></li><li><a href=/php/variable-handling/get_debug_type/>get_debug_type</a></li><li><a href=/php/variable-handling/get_defined_vars/>get_defined_vars</a></li><li><a href=/php/variable-handling/get_resource_id/>get_resource_id</a></li><li><a href=/php/variable-handling/get_resource_type/>get_resource_type</a></li><li><a href=/php/variable-handling/gettype/>gettype</a></li><li><a href=/php/variable-handling/intval/>intval</a></li><li><a href=/php/variable-handling/is_array/>is_array</a></li><li><a href=/php/variable-handling/is_bool/>is_bool</a></li><li><a href=/php/variable-handling/is_callable/>is_callable</a></li><li><a href=/php/variable-handling/is_countable/>is_countable</a></li><li><a href=/php/variable-handling/is_double/>is_double</a></li><li><a href=/php/variable-handling/is_float/>is_float</a></li><li><a href=/php/variable-handling/is_int/>is_int</a></li><li><a href=/php/variable-handling/is_integer/>is_integer</a></li><li><a href=/php/variable-handling/is_iterable/>is_iterable</a></li><li><a href=/php/variable-handling/is_long/>is_long</a></li><li><a href=/php/variable-handling/is_null/>is_null</a></li><li><a href=/php/variable-handling/is_numeric/>is_numeric</a></li><li><a href=/php/variable-handling/is_object/>is_object</a></li><li><a href=/php/variable-handling/is_real/>is_real</a></li><li><a href=/php/variable-handling/is_resource/>is_resource</a></li><li><a href=/php/variable-handling/is_scalar/>is_scalar</a></li><li><a href=/php/variable-handling/is_string/>is_string</a></li><li><a href=/php/variable-handling/isset/>isset</a></li><li><a href=/php/variable-handling/print_r/>print_r</a></li><li><a href=/php/variable-handling/serialize/>serialize</a></li><li><a href=/php/variable-handling/settype/>settype</a></li><li><a href=/php/variable-handling/strval/>strval</a></li><li><a href=/php/variable-handling/unserialize/>unserialize</a></li><li><a href=/php/variable-handling/unset/>unset</a></li><li><a href=/php/variable-handling/var_dump/>var_dump</a></li><li><a href=/php/variable-handling/var_export/>var_export</a></li></ul></div><h2>zlib</h2><div><ul><li><a href=/php/zlib/deflate_add/>deflate_add</a></li><li><a href=/php/zlib/deflate_init/>deflate_init</a></li><li><a href=/php/zlib/gzclose/>gzclose</a></li><li><a href=/php/zlib/gzcompress/>gzcompress</a></li><li><a href=/php/zlib/gzdecode/>gzdecode</a></li><li><a href=/php/zlib/gzdeflate/>gzdeflate</a></li><li><a href=/php/zlib/gzencode/>gzencode</a></li><li><a href=/php/zlib/gzeof/>gzeof</a></li><li><a href=/php/zlib/gzfile/>gzfile</a></li><li><a href=/php/zlib/gzgetc/>gzgetc</a></li><li><a href=/php/zlib/gzgets/>gzgets</a></li><li><a href=/php/zlib/gzinflate/>gzinflate</a></li><li><a href=/php/zlib/gzopen/>gzopen</a></li><li><a href=/php/zlib/gzpassthru/>gzpassthru</a></li><li><a href=/php/zlib/gzputs/>gzputs</a></li><li><a href=/php/zlib/gzread/>gzread</a></li><li><a href=/php/zlib/gzrewind/>gzrewind</a></li><li><a href=/php/zlib/gzseek/>gzseek</a></li><li><a href=/php/zlib/gztell/>gztell</a></li><li><a href=/php/zlib/gzuncompress/>gzuncompress</a></li><li><a href=/php/zlib/gzwrite/>gzwrite</a></li><li><a href=/php/zlib/inflate_add/>inflate_add</a></li><li><a href=/php/zlib/inflate_get_read_len/>inflate_get_read_len</a></li><li><a href=/php/zlib/inflate_get_status/>inflate_get_status</a></li><li><a href=/php/zlib/inflate_init/>inflate_init</a></li><li><a href=/php/zlib/ob_gzhandler/>ob_gzhandler</a></li><li><a href=/php/zlib/readgzfile/>readgzfile</a></li><li><a href=/php/zlib/zlib_decode/>zlib_decode</a></li><li><a href=/php/zlib/zlib_encode/>zlib_encode</a></li><li><a href=/php/zlib/zlib_get_coding_type/>zlib_get_coding_type</a></li></ul></div></div><div class=h1><a id=switch-svg>SVG</a></div><div id=list-svg><h2>Overview</h2><div><ul><li><a href=/svg/>Overview</a></li></ul></div><h2>Attributes</h2><div><ul><li><a href=/svg/attributes/accumulate/>accumulate</a></li><li><a href=/svg/attributes/additive/>additive</a></li><li><a href=/svg/attributes/amplitude/>amplitude</a></li><li><a href=/svg/attributes/attributename/>attributeName</a></li><li><a href=/svg/attributes/azimuth/>azimuth</a></li><li><a href=/svg/attributes/basefrequency/>baseFrequency</a></li><li><a href=/svg/attributes/begin/>begin</a></li><li><a href=/svg/attributes/bias/>bias</a></li><li><a href=/svg/attributes/by/>by</a></li><li><a href=/svg/attributes/calcmode/>calcMode</a></li><li><a href=/svg/attributes/clippathunits/>clipPathUnits</a></li><li><a href=/svg/attributes/crossorigin/>crossorigin</a></li><li><a href=/svg/attributes/cx/>cx</a></li><li><a href=/svg/attributes/cy/>cy</a></li><li><a href=/svg/attributes/d/>d</a></li><li><a href=/svg/attributes/diffuseconstant/>diffuseConstant</a></li><li><a href=/svg/attributes/divisor/>divisor</a></li><li><a href=/svg/attributes/download/>download</a></li><li><a href=/svg/attributes/dur/>dur</a></li><li><a href=/svg/attributes/dx/>dx</a></li><li><a href=/svg/attributes/dy/>dy</a></li><li><a href=/svg/attributes/edgemode/>edgeMode</a></li><li><a href=/svg/attributes/elevation/>elevation</a></li><li><a href=/svg/attributes/end/>end</a></li><li><a href=/svg/attributes/exponent/>exponent</a></li><li><a href=/svg/attributes/fill/>fill</a></li><li><a href=/svg/attributes/filterunits/>filterUnits</a></li><li><a href=/svg/attributes/flood-color/>flood-color</a></li><li><a href=/svg/attributes/flood-opacity/>flood-opacity</a></li><li><a href=/svg/attributes/fr/>fr</a></li><li><a href=/svg/attributes/from/>from</a></li><li><a href=/svg/attributes/fx/>fx</a></li><li><a href=/svg/attributes/fy/>fy</a></li><li><a href=/svg/attributes/gradienttransform/>gradientTransform</a></li><li><a href=/svg/attributes/gradientunits/>gradientUnits</a></li><li><a href=/svg/attributes/height/>height</a></li><li><a href=/svg/attributes/href/>href</a></li><li><a href=/svg/attributes/hreflang/>hreflang</a></li><li><a href=/svg/attributes/id/>id</a></li><li><a href=/svg/attributes/in/>in</a></li><li><a href=/svg/attributes/in2/>in2</a></li><li><a href=/svg/attributes/intercept/>intercept</a></li><li><a href=/svg/attributes/k1/>k1</a></li><li><a href=/svg/attributes/k2/>k2</a></li><li><a href=/svg/attributes/k3/>k3</a></li><li><a href=/svg/attributes/k4/>k4</a></li><li><a href=/svg/attributes/kernelmatrix/>kernelMatrix</a></li><li><a href=/svg/attributes/keypoints/>keyPoints</a></li><li><a href=/svg/attributes/keysplines/>keySplines</a></li><li><a href=/svg/attributes/keytimes/>keyTimes</a></li><li><a href=/svg/attributes/lengthadjust/>lengthAdjust</a></li><li><a href=/svg/attributes/limitingconeangle/>limitingConeAngle</a></li><li><a href=/svg/attributes/markerheight/>markerHeight</a></li><li><a href=/svg/attributes/markerunits/>markerUnits</a></li><li><a href=/svg/attributes/markerwidth/>markerWidth</a></li><li><a href=/svg/attributes/maskcontentunits/>maskContentUnits</a></li><li><a href=/svg/attributes/maskunits/>maskUnits</a></li><li><a href=/svg/attributes/max/>max</a></li><li><a href=/svg/attributes/media/>media</a></li><li><a href=/svg/attributes/method/>method</a></li><li><a href=/svg/attributes/min/>min</a></li><li><a href=/svg/attributes/mode/>mode</a></li><li><a href=/svg/attributes/no-composite/>no-composite</a></li><li><a href=/svg/attributes/numoctaves/>numOctaves</a></li><li><a href=/svg/attributes/offset/>offset</a></li><li><a href=/svg/attributes/onbegin/>onbegin</a></li><li><a href=/svg/attributes/onend/>onend</a></li><li><a href=/svg/attributes/onrepeat/>onrepeat</a></li><li><a href=/svg/attributes/operator/>operator</a></li><li><a href=/svg/attributes/order/>order</a></li><li><a href=/svg/attributes/orient/>orient</a></li><li><a href=/svg/attributes/origin/>origin</a></li><li><a href=/svg/attributes/path/>path</a></li><li><a href=/svg/attributes/pathlength/>pathLength</a></li><li><a href=/svg/attributes/patterncontentunits/>patternContentUnits</a></li><li><a href=/svg/attributes/patterntransform/>patternTransform</a></li><li><a href=/svg/attributes/patternunits/>patternUnits</a></li><li><a href=/svg/attributes/ping/>ping</a></li><li><a href=/svg/attributes/points/>points</a></li><li><a href=/svg/attributes/pointsatx/>pointsAtX</a></li><li><a href=/svg/attributes/pointsaty/>pointsAtY</a></li><li><a href=/svg/attributes/pointsatz/>pointsAtZ</a></li><li><a href=/svg/attributes/preservealpha/>preserveAlpha</a></li><li><a href=/svg/attributes/preserveaspectratio/>preserveAspectRatio</a></li><li><a href=/svg/attributes/primitiveunits/>primitiveUnits</a></li><li><a href=/svg/attributes/r/>r</a></li><li><a href=/svg/attributes/radius/>radius</a></li><li><a href=/svg/attributes/referrerpolicy/>referrerPolicy</a></li><li><a href=/svg/attributes/refx/>refx</a></li><li><a href=/svg/attributes/refy/>refy</a></li><li><a href=/svg/attributes/rel/>rel</a></li><li><a href=/svg/attributes/repeatcount/>repeatCount</a></li><li><a href=/svg/attributes/repeatdur/>repeatDur</a></li><li><a href=/svg/attributes/requiredextensions/>requiredExtensions</a></li><li><a href=/svg/attributes/restart/>restart</a></li><li><a href=/svg/attributes/rotate/>rotate</a></li><li><a href=/svg/attributes/rx/>rx</a></li><li><a href=/svg/attributes/ry/>ry</a></li><li><a href=/svg/attributes/scale/>scale</a></li><li><a href=/svg/attributes/seed/>seed</a></li><li><a href=/svg/attributes/side/>side</a></li><li><a href=/svg/attributes/slope/>slope</a></li><li><a href=/svg/attributes/spacing/>spacing</a></li><li><a href=/svg/attributes/specularconstant/>specularConstant</a></li><li><a href=/svg/attributes/specularexponent/>specularExponent</a></li><li><a href=/svg/attributes/spreadmethod/>spreadMethod</a></li><li><a href=/svg/attributes/startoffset/>startoffset</a></li><li><a href=/svg/attributes/stddeviation/>stdDeviation</a></li><li><a href=/svg/attributes/stitchtiles/>stitchTiles</a></li><li><a href=/svg/attributes/stop-color/>stop-color</a></li><li><a href=/svg/attributes/stop-opacity/>stop-opacity</a></li><li><a href=/svg/attributes/surfacescale/>surfaceScale</a></li><li><a href=/svg/attributes/systemlanguage/>systemLanguage</a></li><li><a href=/svg/attributes/tabindex/>tabindex</a></li><li><a href=/svg/attributes/tablevalues/>tableValues</a></li><li><a href=/svg/attributes/target/>target</a></li><li><a href=/svg/attributes/targetx/>targetX</a></li><li><a href=/svg/attributes/targety/>targetY</a></li><li><a href=/svg/attributes/textlength/>textLength</a></li><li><a href=/svg/attributes/title/>title</a></li><li><a href=/svg/attributes/to/>to</a></li><li><a href=/svg/attributes/transform/>transform</a></li><li><a href=/svg/attributes/type/>type</a></li><li><a href=/svg/attributes/values/>values</a></li><li><a href=/svg/attributes/viewbox/>viewBox</a></li><li><a href=/svg/attributes/width/>width</a></li><li><a href=/svg/attributes/x/>x</a></li><li><a href=/svg/attributes/x1/>x1</a></li><li><a href=/svg/attributes/x2/>x2</a></li><li><a href=/svg/attributes/xchannelselector/>xChannelSelector</a></li><li><a href=/svg/attributes/y/>y</a></li><li><a href=/svg/attributes/y1/>y1</a></li><li><a href=/svg/attributes/y2/>y2</a></li><li><a href=/svg/attributes/ychannelselector/>yChannelSelector</a></li><li><a href=/svg/attributes/z/>z</a></li><li><a href=/svg/attributes/zoomandpan/>zoomAndPan</a></li></ul></div><h2>Elements</h2><div><ul><li><a href=/svg/elements/a/>a</a></li><li><a href=/svg/elements/animate/>animate</a></li><li><a href=/svg/elements/animatemotion/>animateMotion</a></li><li><a href=/svg/elements/animatetransform/>animateTransform</a></li><li><a href=/svg/elements/circle/>circle</a></li><li><a href=/svg/elements/clippath/>clipPath</a></li><li><a href=/svg/elements/defs/>defs</a></li><li><a href=/svg/elements/desc/>desc</a></li><li><a href=/svg/elements/discard/>discard</a></li><li><a href=/svg/elements/ellipse/>ellipse</a></li><li><a href=/svg/elements/feblend/>feBlend</a></li><li><a href=/svg/elements/fecolormatrix/>feColorMatrix</a></li><li><a href=/svg/elements/fecomponenttransfer/>feComponentTransfer</a></li><li><a href=/svg/elements/fecomposite/>feComposite</a></li><li><a href=/svg/elements/feconvolvematrix/>feConvolveMatrix</a></li><li><a href=/svg/elements/fediffuselighting/>feDiffuseLighting</a></li><li><a href=/svg/elements/fedisplacementmap/>feDisplacementMap</a></li><li><a href=/svg/elements/fedistantlight/>feDistantLight</a></li><li><a href=/svg/elements/fedropshadow/>feDropShadow</a></li><li><a href=/svg/elements/feflood/>feFlood</a></li><li><a href=/svg/elements/fefunca/>feFuncA</a></li><li><a href=/svg/elements/fefuncb/>feFuncB</a></li><li><a href=/svg/elements/fefuncg/>feFuncG</a></li><li><a href=/svg/elements/fefuncr/>feFuncR</a></li><li><a href=/svg/elements/fegaussianblur/>feGaussianBlur</a></li><li><a href=/svg/elements/feimage/>feImage</a></li><li><a href=/svg/elements/femerge/>feMerge</a></li><li><a href=/svg/elements/femergenode/>feMergeNode</a></li><li><a href=/svg/elements/femorphology/>feMorphology</a></li><li><a href=/svg/elements/feoffset/>feOffset</a></li><li><a href=/svg/elements/fepointlight/>fePointLight</a></li><li><a href=/svg/elements/fespecularlighting/>feSpecularLighting</a></li><li><a href=/svg/elements/fespotlight/>feSpotLight</a></li><li><a href=/svg/elements/fetile/>feTile</a></li><li><a href=/svg/elements/feturbulence/>feTurbulence</a></li><li><a href=/svg/elements/filter/>filter</a></li><li><a href=/svg/elements/foreignobject/>foreignObject</a></li><li><a href=/svg/elements/g/>g</a></li><li><a href=/svg/elements/image/>image</a></li><li><a href=/svg/elements/line/>line</a></li><li><a href=/svg/elements/lineargradient/>linearGradient</a></li><li><a href=/svg/elements/marker/>marker</a></li><li><a href=/svg/elements/mask/>mask</a></li><li><a href=/svg/elements/metadata/>metadata</a></li><li><a href=/svg/elements/mpath/>mpath</a></li><li><a href=/svg/elements/path/>path</a></li><li><a href=/svg/elements/pattern/>pattern</a></li><li><a href=/svg/elements/polygon/>polygon</a></li><li><a href=/svg/elements/polyline/>polyline</a></li><li><a href=/svg/elements/radialgradient/>radialGradient</a></li><li><a href=/svg/elements/rect/>rect</a></li><li><a href=/svg/elements/script/>script</a></li><li><a href=/svg/elements/set/>set</a></li><li><a href=/svg/elements/stop/>stop</a></li><li><a href=/svg/elements/style/>style</a></li><li><a href=/svg/elements/svg/>svg</a></li><li><a href=/svg/elements/switch/>switch</a></li><li><a href=/svg/elements/symbol/>symbol</a></li><li><a href=/svg/elements/text/>text</a></li><li><a href=/svg/elements/textpath/>textPath</a></li><li><a href=/svg/elements/title/>title</a></li><li><a href=/svg/elements/tspan/>tspan</a></li><li><a href=/svg/elements/unknown/>unknown</a></li><li><a href=/svg/elements/use/>use</a></li><li><a href=/svg/elements/view/>view</a></li></ul></div><h2>Values</h2><div><ul><li><a href=/svg/values/_blank/>_blank</a></li><li><a href=/svg/values/_parent/>_parent</a></li><li><a href=/svg/values/_self/>_self</a></li><li><a href=/svg/values/_top/>_top</a></li><li><a href=/svg/values/a/>A</a></li><li><a href=/svg/values/align/>align</a></li><li><a href=/svg/values/alpha-value/>alpha-value</a></li><li><a href=/svg/values/always/>always</a></li><li><a href=/svg/values/angle/>angle</a></li><li><a href=/svg/values/anonymous/>anonymous</a></li><li><a href=/svg/values/arithmetic/>arithmetic</a></li><li><a href=/svg/values/atop/>atop</a></li><li><a href=/svg/values/auto/>auto</a></li><li><a href=/svg/values/auto-start-reverse/>auto-start-reverse</a></li><li><a href=/svg/values/auto-reverse/>auto-reverse</a></li><li><a href=/svg/values/b/>B</a></li><li><a href=/svg/values/backgroundalpha/>BackgroundAlpha</a></li><li><a href=/svg/values/backgroundimage/>BackgroundImage</a></li><li><a href=/svg/values/begin-value-list/>begin-value-list</a></li><li><a href=/svg/values/blend-mode/>blend-mode</a></li><li><a href=/svg/values/bottom/>bottom</a></li><li><a href=/svg/values/center/>center</a></li><li><a href=/svg/values/clock-value/>clock-value</a></li><li><a href=/svg/values/color/>color</a></li><li><a href=/svg/values/control-point/>control-point</a></li><li><a href=/svg/values/currentcolor/>currentColor</a></li><li><a href=/svg/values/default/>default</a></li><li><a href=/svg/values/dilate/>dilate</a></li><li><a href=/svg/values/disable/>disable</a></li><li><a href=/svg/values/discrete/>discrete</a></li><li><a href=/svg/values/duplicate/>duplicate</a></li><li><a href=/svg/values/empty-string/>empty-string</a></li><li><a href=/svg/values/end-value-list/>end-value-list</a></li><li><a href=/svg/values/erode/>erode</a></li><li><a href=/svg/values/exact/>exact</a></li><li><a href=/svg/values/false/>false</a></li><li><a href=/svg/values/fillpaint/>FillPaint</a></li><li><a href=/svg/values/filter-primitive-reference/>filter-primitive-reference</a></li><li><a href=/svg/values/fractalnoise/>fractalNoise</a></li><li><a href=/svg/values/freeze/>freeze</a></li><li><a href=/svg/values/g/>G</a></li><li><a href=/svg/values/gamma/>gamma</a></li><li><a href=/svg/values/height/>height</a></li><li><a href=/svg/values/huerotate/>hueRotate</a></li><li><a href=/svg/values/icccolor/>icccolor</a></li><li><a href=/svg/values/id/>id</a></li><li><a href=/svg/values/identity/>identity</a></li><li><a href=/svg/values/in/>in</a></li><li><a href=/svg/values/indefinite/>indefinite</a></li><li><a href=/svg/values/integer/>integer</a></li><li><a href=/svg/values/left/>left</a></li><li><a href=/svg/values/length/>length</a></li><li><a href=/svg/values/length-percentage/>length-percentage</a></li><li><a href=/svg/values/lighter/>lighter</a></li><li><a href=/svg/values/linear/>linear</a></li><li><a href=/svg/values/list/>list</a></li><li><a href=/svg/values/list-of-numbers/>list-of-numbers</a></li><li><a href=/svg/values/luminancetoalpha/>luminanceToAlpha</a></li><li><a href=/svg/values/magnify/>magnify</a></li><li><a href=/svg/values/matrix/>matrix</a></li><li><a href=/svg/values/media/>media</a></li><li><a href=/svg/values/meetorslice/>meetOrSlice</a></li><li><a href=/svg/values/min-x/>min-x</a></li><li><a href=/svg/values/min-y/>min-y</a></li><li><a href=/svg/values/name/>name</a></li><li><a href=/svg/values/never/>never</a></li><li><a href=/svg/values/no-composite/>no-composite</a></li><li><a href=/svg/values/no-referrer/>no-referrer</a></li><li><a href=/svg/values/no-referrer-when-downgrade/>no-referrer-when-downgrade</a></li><li><a href=/svg/values/none/>none</a></li><li><a href=/svg/values/nostitch/>noStitch</a></li><li><a href=/svg/values/number/>number</a></li><li><a href=/svg/values/number-optional-number/>number-optional-number</a></li><li><a href=/svg/values/objectboundingbox/>objectBoundingBox</a></li><li><a href=/svg/values/origin/>origin</a></li><li><a href=/svg/values/origin-when-cross-origin/>origin-when-cross-origin</a></li><li><a href=/svg/values/out/>out</a></li><li><a href=/svg/values/over/>over</a></li><li><a href=/svg/values/paced/>paced</a></li><li><a href=/svg/values/pad/>pad</a></li><li><a href=/svg/values/path-data/>path-data</a></li><li><a href=/svg/values/percentage/>percentage</a></li><li><a href=/svg/values/points/>points</a></li><li><a href=/svg/values/r/>R</a></li><li><a href=/svg/values/reflect/>reflect</a></li><li><a href=/svg/values/remove/>remove</a></li><li><a href=/svg/values/repeat/>repeat</a></li><li><a href=/svg/values/replace/>replace</a></li><li><a href=/svg/values/right/>right</a></li><li><a href=/svg/values/rotate/>rotate</a></li><li><a href=/svg/values/same-origin/>same-origin</a></li><li><a href=/svg/values/saturate/>saturate</a></li><li><a href=/svg/values/scale/>scale</a></li><li><a href=/svg/values/script/>script</a></li><li><a href=/svg/values/set-of-comma-separated-tokens/>set-of-comma-separated-tokens</a></li><li><a href=/svg/values/set-of-space-separated-tokens/>set-of-space-separated-tokens</a></li><li><a href=/svg/values/skewx/>skewx</a></li><li><a href=/svg/values/skewy/>skewy</a></li><li><a href=/svg/values/sourcealpha/>SourceAlpha</a></li><li><a href=/svg/values/sourcegraphic/>SourceGraphic</a></li><li><a href=/svg/values/spacing/>spacing</a></li><li><a href=/svg/values/spacingandglyphs/>spacingAndGlyphs</a></li><li><a href=/svg/values/spline/>spline</a></li><li><a href=/svg/values/stitch/>stitch</a></li><li><a href=/svg/values/stretch/>stretch</a></li><li><a href=/svg/values/strict-origin/>strict-origin</a></li><li><a href=/svg/values/strict-origin-when-cross-origin/>strict-origin-when-cross-origin</a></li><li><a href=/svg/values/string/>string</a></li><li><a href=/svg/values/strokepaint/>StrokePaint</a></li><li><a href=/svg/values/strokewidth/>strokeWidth</a></li><li><a href=/svg/values/sum/>sum</a></li><li><a href=/svg/values/table/>table</a></li><li><a href=/svg/values/tokens/>tokens</a></li><li><a href=/svg/values/top/>top</a></li><li><a href=/svg/values/transform-list/>transform-list</a></li><li><a href=/svg/values/translate/>translate</a></li><li><a href=/svg/values/true/>true</a></li><li><a href=/svg/values/turbulence/>turbulence</a></li><li><a href=/svg/values/unsafe-url/>unsafe-url</a></li><li><a href=/svg/values/url/>url</a></li><li><a href=/svg/values/use-credentials/>use-credentials</a></li><li><a href=/svg/values/userspaceonuse/>userSpaceOnUse</a></li><li><a href=/svg/values/valid-integer/>valid-integer</a></li><li><a href=/svg/values/value/>value</a></li><li><a href=/svg/values/whennotactive/>whenNotActive</a></li><li><a href=/svg/values/width/>width</a></li><li><a href=/svg/values/wrap/>wrap</a></li><li><a href=/svg/values/xml-name/>XML-Name</a></li><li><a href=/svg/values/xor/>xor</a></li></ul></div></div><div class=h1><a id=switch-applications>APPLICATIONS</a></div><div id=list-applications><h2>Overview</h2><div><ul><li><a href=/applications/>Overview</a></li></ul></div><h2>Bible</h2><div><ul><li><a href=/applications/Bible-passages/>Bible Passages</a></li><li><a href=/applications/Bible-pictures/>Bible Pictures</a></li><li><a href=/applications/Jesus-loves-the-little-children/>Jesus Loves the Little Children</a></li><li><a href=/applications/merry-Christmas/>Merry Christmas</a></li><li><a href=/applications/one-man-one-woman-one-lifetime/>One Man. One Woman. One Lifetime.</a></li><li><a href=/applications/The-Armor-of-God/>The Armor of God</a></li></ul></div><h2>Cards</h2><div><ul><li><a href=/applications/euchre/>Euchre</a></li><li><a href=/applications/sevens/>Sevens</a></li><li><a href=/applications/solitaire/>Solitaire</a></li></ul></div><h2>LEGO</h2><div><ul><li><a href=/applications/lego-cannonball-bingo/>LEGO Cannonball Bingo</a></li><li><a href=/applications/lego-pandamonium/>LEGO Pandamonium</a></li><li><a href=/applications/lego-pirate-plunder/>LEGO Pirate Plunder</a></li><li><a href=/applications/lego-the-machine/>LEGO The Machine</a></li></ul></div><h2>Other</h2><div><ul><li><a href=/applications/miniature-golf/>Miniature Golf</a></li><li><a href=/applications/space-station/>Space Station</a></li></ul></div></div><div class=h1><a href=/editor/>EDITOR</a></div><div class=h1><a href=/favicon/>FAVICON</a></div><div class=h1><a href=/htaccess/>.HTACCESS</a></div><div class=h1><a href=/acme.sh/>ACME.SH</a></div><div class=h1><a id=switch-flash>FLASH</a></div><div id=list-flash><div class=h2><a href=/flash/detect/>DETECT</a></div><div class=h2><a id=switch-flash-actionscript>ACTIONSCRIPT</a></div><div id=list-flash-actionscript><h3>Overview</h3><div><ul><li><a href=/flash/actionscript/>Overview</a></li></ul></div><h3>Assets</h3><div><ul><li><a href=/flash/actionscript/embed/>Embed</a></li><li><a href=/flash/actionscript/load/>Load</a></li></ul></div></div><div class=h2><a id=switch-flash-as3dmod>AS3DMOD</a></div><div id=list-flash-as3dmod><h3>Overview</h3><div><ul><li><a href=/flash/as3dmod/>Overview</a></li></ul></div><h3>Modifiers</h3><div><ul><li><a href=/flash/as3dmod/bend/>Bend</a></li><li><a href=/flash/as3dmod/bloat/>Bloat</a></li><li><a href=/flash/as3dmod/cloth/>Cloth</a></li><li><a href=/flash/as3dmod/noise/>Noise</a></li><li><a href=/flash/as3dmod/perlin/>Perlin</a></li><li><a href=/flash/as3dmod/pivot/>Pivot</a></li><li><a href=/flash/as3dmod/skew/>Skew</a></li><li><a href=/flash/as3dmod/taper/>Taper</a></li><li><a href=/flash/as3dmod/twist/>Twist</a></li></ul></div><h3>Other</h3><div><ul><li><a href=/flash/as3dmod/flag/>Flag</a></li></ul></div></div><div class=h2><a href=/flash/flartoolkit/>FLARTOOLKIT</a></div><div class=h2><a id=switch-flash-jiglibflash>JIGLIBFLASH</a></div><div id=list-flash-jiglibflash><h3>Overview</h3><div><ul><li><a href=/flash/jiglibflash/>Overview</a></li></ul></div><h3>Objects</h3><div><ul><li><a href=/flash/jiglibflash/jbox/>JBox</a></li><li><a href=/flash/jiglibflash/jcapsule/>JCapsule</a></li><li><a href=/flash/jiglibflash/jplane/>JPlane</a></li><li><a href=/flash/jiglibflash/jsphere/>JSphere</a></li></ul></div><h3>Other</h3><div><ul><li><a href=/flash/jiglibflash/physics/>Physics</a></li></ul></div></div><div class=h2><a id=switch-flash-papervision3d>PAPERVISION3D</a></div><div id=list-flash-papervision3d><h3>Overview</h3><div><ul><li><a href=/flash/papervision3d/>Overview</a></li></ul></div><h3>Install</h3><div><ul><li><a href=/flash/papervision3d/install/>Install</a></li></ul></div><h3>Example</h3><div><ul><li><a href=/flash/papervision3d/1/>1</a></li><li><a href=/flash/papervision3d/2/>2</a></li><li><a href=/flash/papervision3d/3/>3</a></li><li><a href=/flash/papervision3d/4/>4</a></li><li><a href=/flash/papervision3d/5/>5</a></li></ul></div><h3>Cameras</h3><div><ul><li><a href=/flash/papervision3d/camera3d/>Camera3D</a></li><li><a href=/flash/papervision3d/debugcamera3d/>DebugCamera3D</a></li><li><a href=/flash/papervision3d/springcamera3d/>SpringCamera3D</a></li></ul></div><h3>Core</h3><div><ul><li><a href=/flash/papervision3d/lines3d/>Lines3D</a></li><li><a href=/flash/papervision3d/fogfilter/>FogFilter</a></li></ul></div><h3>Light</h3><div><ul><li><a href=/flash/papervision3d/pointlight3d/>PointLight3D</a></li></ul></div><h3>Materials</h3><div><ul><li><a href=/flash/papervision3d/bitmapfilematerial/>BitmapFileMaterial</a></li><li><a href=/flash/papervision3d/bitmapmaterial/>BitmapMaterial</a></li><li><a href=/flash/papervision3d/bitmapviewportmaterial/>BitmapViewportMaterial</a></li><li><a href=/flash/papervision3d/colormaterial/>ColorMaterial</a></li><li><a href=/flash/papervision3d/compositematerial/>CompositeMaterial</a></li><li><a href=/flash/papervision3d/moviematerial/>MovieMaterial</a></li><li><a href=/flash/papervision3d/wireframematerial/>WireframeMaterial</a></li></ul></div><h3>Shade Materials</h3><div><ul><li><a href=/flash/papervision3d/cellmaterial/>CellMaterial</a></li><li><a href=/flash/papervision3d/envmapmaterial/>EnvMapMaterial</a></li><li><a href=/flash/papervision3d/flatshadematerial/>FlatShadeMaterial</a></li><li><a href=/flash/papervision3d/gouraudmaterial/>GouraudMaterial</a></li><li><a href=/flash/papervision3d/phongmaterial/>PhongMaterial</a></li></ul></div><h3>Special Material</h3><div><ul><li><a href=/flash/papervision3d/particlematerial/>ParticleMaterial</a></li></ul></div><h3>Parser Objects</h3><div><ul><li><a href=/flash/papervision3d/dae/>DAE</a></li><li><a href=/flash/papervision3d/kmz/>KMZ</a></li></ul></div><h3>Primitive Objects</h3><div><ul><li><a href=/flash/papervision3d/arrow/>Arrow</a></li><li><a href=/flash/papervision3d/cone/>Cone</a></li><li><a href=/flash/papervision3d/cube/>Cube</a></li><li><a href=/flash/papervision3d/cylinder/>Cylinder</a></li><li><a href=/flash/papervision3d/paperplane/>PaperPlane</a></li><li><a href=/flash/papervision3d/plane/>Plane</a></li><li><a href=/flash/papervision3d/sphere/>Sphere</a></li></ul></div><h3>Special Objects</h3><div><ul><li><a href=/flash/papervision3d/particlefield/>ParticleField</a></li><li><a href=/flash/papervision3d/ucs/>UCS</a></li></ul></div><h3>Render</h3><div><ul><li><a href=/flash/papervision3d/basicrenderengine/>BasicRenderEngine</a></li><li><a href=/flash/papervision3d/lazyrenderengine/>LazyRenderEngine</a></li><li><a href=/flash/papervision3d/quadrantrenderengine/>QuadrantRenderEngine</a></li></ul></div><h3>Scene</h3><div><ul><li><a href=/flash/papervision3d/scene3d/>Scene3D</a></li></ul></div><h3>Typography</h3><div><ul><li><a href=/flash/papervision3d/text3d/>Text3D</a></li></ul></div><h3>Views</h3><div><ul><li><a href=/flash/papervision3d/basicview/>BasicView</a></li><li><a href=/flash/papervision3d/reflectionview/>ReflectionView</a></li><li><a href=/flash/papervision3d/statsview/>StatsView</a></li><li><a href=/flash/papervision3d/viewport3d/>Viewport3D</a></li></ul></div><h3>View Layers</h3><div><ul><li><a href=/flash/papervision3d/bitmapeffectlayer/>BitmapEffectLayer</a></li><li><a href=/flash/papervision3d/viewportlayer/>ViewportLayer</a></li></ul></div><h3>Other</h3><div><ul><li><a href=/flash/papervision3d/anaglyph/>Anaglyph</a></li><li><a href=/flash/papervision3d/camera-move/>Camera Move</a></li><li><a href=/flash/papervision3d/camera-rotate/>Camera Rotate</a></li><li><a href=/flash/papervision3d/camera-target-move/>Camera Target Move</a></li><li><a href=/flash/papervision3d/object-move/>Object Move</a></li><li><a href=/flash/papervision3d/object-rotate/>Object Rotate</a></li><li><a href=/flash/papervision3d/object-scale/>Object Scale</a></li><li><a href=/flash/papervision3d/panorama/>Panorama</a></li></ul></div></div></div><div class=h1><a id=switch-sketchup>SKETCHUP</a></div><div id=list-sketchup><h2>Overview</h2><div><ul><li><a href=/sketchup/>Overview</a></li></ul></div><h2>Plugins</h2><div><ul><li><a href=/sketchup/papervision3d/>Papervision3D</a></li><li><a href=/sketchup/triangulate/>Triangulate</a></li></ul></div></div><div class=h1><a id=switch-unity>UNITY</a></div><div id=list-unity><h2>Overview</h2><div><ul><li><a href=/unity/>Overview</a></li></ul></div><h2>Detect</h2><div><ul><li><a href=/unity/detect/>Detect</a></li></ul></div><h2>Games</h2><div><ul><li><a href=/unity/air-hockey/>Air Hockey</a></li><li><a href=/unity/foosball/>Foosball</a></li><li><a href=/unity/pool/>Pool</a></li></ul></div><h2>Unity</h2><div><ul><li><a href=/unity/car/>Car</a></li><li><a href=/unity/lerpz-escapes/>Lerpz Escapes</a></li><li><a href=/unity/mecanim/>Mecanim</a></li></ul></div></div><div class=h1><a id=switch-xcode>XCODE</a></div><div id=list-xcode><h2>Overview</h2><div><ul><li><a href=/xcode/>Overview</a></li></ul></div><h2>Example</h2><div><ul><li><a href=/xcode/1/>1</a></li><li><a href=/xcode/2/>2</a></li><li><a href=/xcode/3/>3</a></li><li><a href=/xcode/4/>4</a></li><li><a href=/xcode/5/>5</a></li><li><a href=/xcode/6/>6</a></li></ul></div><h2>CSV2Plist</h2><div><ul><li><a href=/xcode/csv2plist/>CSV2Plist</a></li></ul></div><h2>UI</h2><div><ul><li><a href=/xcode/uiactivityindicatorview/>UIActivityIndicatorView</a></li><li><a href=/xcode/uibutton/>UIButton</a></li><li><a href=/xcode/uiimageview/>UIImageView</a></li><li><a href=/xcode/uilabel/>UILabel</a></li><li><a href=/xcode/uipagecontrol/>UIPageControl</a></li><li><a href=/xcode/uiprogressview/>UIProgressView</a></li><li><a href=/xcode/uisegmentedcontrol/>UISegmentedControl</a></li><li><a href=/xcode/uislider/>UISlider</a></li><li><a href=/xcode/uistepper/>UIStepper</a></li><li><a href=/xcode/uiswitch/>UISwitch</a></li><li><a href=/xcode/uitextfield/>UITextField</a></li></ul></div></div><div class=h1><a href=/about/>ABOUT</a></div><div class=h1><a href=/terms/>TERMS</a></div></div></div><div id=background><video loop muted src=/assets/mp4/1/23.mp4></video></div></body></html>
0

5 · flags · STREAM_CLIENT_CONNECT

<?

$transport = "tls";
$host = "osbo.com";
$port = "443";

$address = $transport . "://" . $host . ":" . $port;
$timeout = ini_get("default_socket_timeout");
$flags = STREAM_CLIENT_CONNECT;

$return = stream_socket_client($address, $error_code, $error_message, $timeout, $flags);

    if(!$return)
    {
        exit("$error_message($error_code)");
    }

    $string = "GET / HTTP/1.1\r\n";
    $string .= "Host: $host\r\n";
    $string .= "Connection: close\r\n\r\n";

    fwrite($return, $string);

    $length = 1024;

    while(!feof($return))
    {
        echo fgets($return, $length);
    }

fclose($return);

HTTP/1.1 200 OK
Connection: close
Cache-Control: no-store,no-transform
link: <https://osbo.com/>;rel="canonical"
x-robots-tag: noarchive,noimageindex
Content-Type: text/html; charset=UTF-8
Transfer-Encoding: chunked
Date: Fri, 23 Jan 2026 04:02:29 GMT
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
X-Content-Type-Options: nosniff

10000
<!doctype html><html lang=en><head><meta charset=utf-8><meta content=width=device-width name=viewport><meta content=osbo.com name=description><title>osbo.com</title><link defer href=/assets/css/ rel=stylesheet><link defer href=/assets/svg/ rel=icon><script defer src=/assets/js/></script><script>var _mtm = window._mtm = window._mtm || [];_mtm.push({"mtm.startTime": (new Date().getTime()), "event": "mtm.Start"});(function(){var d=document, g=d.createElement("script"), s=d.querySelector("script");g.async=true; g.src="/matomo/js/container_Gm7CI6wt.js"; s.parentNode.insertBefore(g,s);})();</script></head><body><div id=foreground><header><a href=/><img alt=Home id=home src=/assets/svg/Home.svg title=Home></a><img alt=Menu id=menu src=/assets/svg/Menu.svg title=Menu><form action=/search/><input id=search-site name=search-site title=Search type=search></form></header><footer><a href=#><img alt=Top id=top src=/assets/svg/Top.svg title=Top></a></footer></div><div id=zeroground><div id=content><header><div id=topnav><a href=/Jesus/>Jesus</a> · <a href=/Bible/>Bible</a> · <a href=/html/>HTML</a> · <a href=/css/>CSS</a> · <a href=/js/>JS</a> · <a href=/php/>PHP</a> · <a href=/svg/>SVG</a> · <a href=/applications/>Applications</a></div></header><div class=banner><script defer src=https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4239362730750625 crossorigin=anonymous></script><ins class=adsbygoogle data-ad-client=ca-pub-4239362730750625 data-ad-slot=5564639719><a href=https://samaritanspurse.org/occ/ target=_blank><img alt="Samaritan's Purse Operation Christmas Child" src=/assets/svg/SamaritansPurseOperationChristmasChild3.svg title="Samaritan's Purse Operation Christmas Child"></a></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><main><h1><a href>Bible Image Editor</a></h1><div id=myid style=height:100vh><script>const Bibleversionarray =
        [
            [
                "العربية",
                [
                    ["ASVD", "الكتاب المقدس ترجمة فانديك وسميث (ASVD)"],
                ],
            ],
            [
                "česky",
                [
                    ["CSBKR", "Bible Kralická 1613 (CSBKR)"],
                ],
            ],
            [
                "Dansk",
                [
                    ["DA1871", "Danske Bibel 1871 (DA1871)"],
                ],
            ],
            [
                "Deutsch",
                [
                    ["DELUT", "Luther Bible 1912 (DELUT)"],
                    ["ELB", "Elberfelder 1905 (ELB)"],
                    ["ELB71", "Elberfelder 1871 (ELB71)"],
                ],
            ],
            [
                "English",
                [
                    ["ASV", "American Standard Version (ASV)"],
                    ["KJV", "King James Version (KJV)"],
                    ["WEB", "World English Bible (WEB)"],
                ],
            ],
            [
                "Español",
                [
                    ["RVES", "Reina-Valera Antigua (RVES)"],
                ],
            ],
            [
                "Suomi",
                [
                    ["FI1776", "Finnish 1776 (FI1776)"],
                    ["FINPR", "Finnish 1938 (FINPR)"],
                ],
            ],
            [
                "Français",
                [
                    ["FMAR", "Martin 1744 (FMAR)"],
                    ["FRDBY", "Bible Darby en français (FRDBY)"],
                    ["LSG", "Louis Segond 1910 (LSG)"],
                    ["OST", "Ostervald (OST)"],
                ],
            ],
            [
                "Magyar",
                [
                    ["KAR", "Károli 1590 (KAR)"],
                ],
            ],
            [
                "Bahasa Indonesia",
                [
                    ["IDBAR", "Terjemahan Baru (IDBAR)"],
                ],
            ],
            [
                "Italiano",
                [
                    ["IGD", "Giovanni Diodati Bibbia (IGD)"],
                    ["ITRIV", "Italian Riveduta 1927 (ITRIV)"],
                ],
            ],
            [
                "日本語",
                [
                    ["JA1955", "Colloquial Japanese 1955 (JA1955)"],
                ],
            ],
            [
                "Malagasy",
                [
                    ["MG1865", "Malagasy Bible (MG1865)"],
                ],
            ],
            [
                "te reo Māori",
                [
                    ["MAOR", "Maori Bible (MAOR)"],
                ],
            ],
            [
                "한국어",
                [
                    ["KORVB", "개역한글 (KORVB)"],
                ],
            ],
            [
                "Nederlands",
                [
                    ["SV1750", "Statenvertaling (SV1750)"],
                ],
            ],
            [
                "Norsk",
                [
                    ["NORSK", "Det Norsk Bibelselskap 1930 (NORSK)"],
                ],
            ],
            [
                "Polski",
                [
                    ["PBG", "Biblia Gdańska (PBG)"],
                ],
            ],
            [
                "Português",
                [
                    ["AA", "Almeida Atualizada (AA)"],
                ],
            ],
            [
                "Română",
                [
                    ["RMNN", "Romanian Cornilescu 1928 (RMNN)"],
                    ["VDC", "Versiunea Dumitru Cornilescu (VDC)"],
                    ["VDCC", "Versiunea Dumitru Cornilescu Corectată (VDCC)"],
                ],
            ],
            [
                "Pyccкий",
                [
                    ["RURSV", "Синодальный перевод (RURSV)"],
                ],
            ],
            [
                "Shqip",
                [
                    ["ALBB", "Albanian Bible (ALBB)"],
                ],
            ],
            [
                "Svenska",
                [
                    ["SK73", "Karl XII 1873 (SK73)"],
                    ["SVEN", "Svenska 1917 (SVEN)"],
                ],
            ],
            [
                "Wikang Tagalog",
                [
                    ["TLAB", "Ang Biblia (TLAB)"],
                ],
            ],
            [
                "українська",
                [
                    ["UBIO", "Біблія в пер. Івана Огієнка 1962 (UBIO)"],
                    ["UKRK", "Біблія в пер. П.Куліша та І.Пулюя 1905 (UKRK)"],
                ],
            ],
            [
                "Tiếng Việt",
                [
                    ["VI1934", "Vietnamese Bible 1934 (VI1934)"],
                ],
            ],
            [
                "简体中文",
                [
                    ["CUVS", "简体和合本 (CUVS)"],
                ],
            ],
            [
                "繁體中文",
                [
                    ["CUV", "和合本 (CUV)"],
                ],
            ],
        ];
        const Biblebookarray =
        [
            //"Genesis",
            //"John",
        ];
        const Bibleversearray =
        [
            //"In the beginning God created the heaven and the earth.",
            //"For God so loved the world, that he gave his only begotten Son, that whosoever believeth in him should not perish, but have everlasting life.",
        ];
        const tabarray =
        [
            "canvas",
            "image",
            "message",
            "reference",
            "passage",
            "save",
        ];
        const borderstylearray =
        [
            "none",
            "dashed",
            "dotted",
            "double",
            "groove",
            //"hidden",
            "inset",
            "outset",
            "ridge",
            "solid",
        ];
        const horizontalarray =
        [
            "left",
            "center",
            "right",
            "justify",
        ];
        const verticalarray =
        [
            "start",
            "center",
            "end",
        ];
        const writingmodearray =
        [
            "horizontal-tb",
            "vertical-lr",
            "vertical-rl",
            "sideways-lr",
            "sideways-rl",
        ];
        const fontfamilyarray =
        [
            //generic family
            "cursive",
            "fantasy",
            "monospace",
            "sans-serif",
            "serif",

            //web safe
            //"arial",//sans-serif
            //"brush script",//serif
            "courier",
            //"garamond",//serif
            "georgia",
            "tahoma",
            //"times new roman",//serif
            "trebuchet ms",
            "verdana",

            //popular
            //"avenir",//serif
            //"bodoni",//serif
            "franklin gothic",
            //"frutiger",//serif
            //"futura",//serif
            //"helvetica",//sans-serif
            //"rockwell",//serif
            //"univers",//serif
        ];
        const fontstylearray =
        [
            "normal",
            "italic",
            //"oblique",
        ];
        const fontvariantarray =
        [
            "normal",
            "small-caps",
        ];
        const fontweightarray =
        [
            "normal",
            "bold",
            //"bolder",
            //"lighter",
        ];
        const maxheight = 10000;
        const maxwidth = 10000;
        const image = document.createElement("img");
        const text = document.createElement("img");

        function bodyload()
        {
            //const body = document.body;
            //body.id = "myid";

            const style = myid.style;
            //style.height = "100vh";
            style.overflow = "hidden";
        }
        addEventListener("load", bodyload);

        function window1load()
        {
            const div = document.createElement("div");
            div.id = "window1";
            myid.append(div);

            const style = div.style;
            style.height = "50vh";
            style.margin = "0";
        }
        addEventListener("load", window1load);

        function window2load()
        {
            const div = document.createElement("div");
            div.id = "window2";
            myid.append(div);

            const style = div.style;
            style.height = "32px";
            style.margin = "16px 0 0";
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", window2load);

        function window3load()
        {
            const div = document.createElement("div");
            div.id = "window3";
            myid.append(div);

            const style = div.style;
            style.height = "calc(50vh - 48px)";
            style.margin = "0";
            style.overflowX = "hidden";
        }
        addEventListener("load", window3load);

        function canvasload()
        {
            const canvas = document.createElement("canvas");
            canvas.height = 1080;
            canvas.id = "canvas";
            canvas.width = 1920;
            window1.append(canvas);

            const style = canvas.style;
            style.position = "relative";
        }
        addEventListener("load", canvasload);

        function canvasupdate()
        {
            //console.log("canup");
            const ww = innerWidth - 96;
            const wh = innerHeight * 0.5;
            const cw = canvas.width;
            const ch = canvas.height;
            const x = (ww - cw) * 0.5;
            const y = (wh - ch) * 0.5;
            const sw = ww / cw;
            const sh = wh / ch;
            const s = Math.min(sw, sh);

            const style = canvas.style;
            style.left = `${x}px`;
            style.top = `${y}px`;
            style.transform = `scale(${s})`;
        }
        addEventListener("load", canvasupdate);

        function resize()
        {
            canvasupdate();
        }
        addEventListener("resize", resize);

        function svgupdate()
        {
            //console.log("svgup");
            const svg =
`<svg height="${canvas.height}" width="${canvas.width}" xmlns="http://www.w3.org/2000/svg">
    <style>
        div
        {
            background-color: ${canvas.backgroundcolor};
            height: 100%;
        }
        img
        {
            box-sizing: border-box;
            position: absolute;

            background-color: ${image.backgroundcolor};
            filter: blur(${image.filterblur}px) brightness(${image.filterbrightness}%) contrast(${image.filtercontrast}%) grayscale(${image.filtergrayscale}%) hue-rotate(${image.filterhuerotate}deg) invert(${image.filterinvert}%) opacity(${image.filteropacity}%) saturate(${image.filtersaturate}%) sepia(${image.filtersepia}%);
            height: ${image.height}px;
            left: ${image.myx}px;
            margin: ${image.margintop}px ${image.marginright}px ${image.marginbottom}px ${image.marginleft}px;
            padding: ${image.paddingtop}px ${image.paddingright}px ${image.paddingbottom}px ${image.paddingleft}px;
            object-fit: ${image.objectfit};
            //opacity: ${image.opacity};
            top: ${image.myy}px;
            width: ${image.width}px;
        }
        text
        {
            box-sizing: border-box;
            display: grid;
            overflow: hidden;
            position: absolute;
        }
        text:nth-of-type(1)
        {
            white-space: pre;

            align-items: ${text.messagevertical};
            backdrop-filter: blur(${text.messagebackdropfilterblur}px) brightness(${text.messagebackdropfilterbrightness}%) contrast(${text.messagebackdropfiltercontrast}%) grayscale(${text.messagebackdropfiltergrayscale}%) hue-rotate(${text.messagebackdropfilterhuerotate}deg) invert(${text.messagebackdropfilterinvert}%) saturate(${text.messagebackdropfiltersaturate}%) sepia(${text.messagebackdropfiltersepia}%);
            background-color: ${text.messagebackgroundcolor};
            border-color: ${text.messagebordercolor};
            border-radius: ${text.messageborderradius}px;
            border-style: ${text.messageborderstyle};
            border-width: ${text.messageborderwidth}px;
            color: ${text.messagecolor};
            font-family: ${text.messagefontfamily};
            font-size: ${text.messagefontsize}px;
            font-style: ${text.messagefontstyle};
            font-variant: ${text.messagefontvariant};
            font-weight: ${text.messagefontweight};
            height: ${text.messageheight}px;
            left: ${text.messagex}px;
            margin: ${text.messagemargintop}px ${text.messagemarginright}px ${text.messagemarginbottom}px ${text.messagemarginleft}px;
            padding: ${text.messagepaddingtop}px ${text.messagepaddingright}px ${text.messagepaddingbottom}px ${text.messagepaddingleft}px;
            text-align: ${text.messagehorizontal};
            top: ${text.messagey}px;
            width: ${text.messagewidth}px;
            writing-mode: ${text.messagewritingmode};
        }
        text:nth-of-type(2)
        {
            align-items: ${text.referencevertical};
            background-color: ${text.referencebackgroundcolor};
            border-color: ${text.referencebordercolor};
            border-radius: ${text.referenceborderradius}px;
            border-style: ${text.referenceborderstyle};
            border-width: ${text.referenceborderwidth}px;
            color: ${text.referencecolor};
            font-family: ${text.referencefontfamily};
            font-size: ${text.referencefontsize}px;
            font-style: ${text.referencefontstyle};
            font-variant: ${text.referencefontvariant};
            font-weight: ${text.referencefontweight};
            height: ${text.referenceheight}px;
            left: ${text.referencex}px;
            margin: ${text.referencemargintop}px ${text.referencemarginright}px ${text.referencemarginbottom}px ${text.referencemarginleft}px;
            padding: ${text.referencepaddingtop}px ${text.referencepaddingright}px ${text.referencepaddingbottom}px ${text.referencepaddingleft}px;
            text-align: ${text.referencehorizontal};
            top: ${text.referencey}px;
            width: ${text.referencewidth}px;
            writing-mode: ${text.referencewritingmode};
        }
        text:nth-of-type(3)
        {
            align-items: ${text.passagevertical};
            background-color: ${text.passagebackgroundcolor};
            border-color: ${text.passagebordercolor};
            border-radius: ${text.passageborderradius}px;
            border-style: ${text.passageborderstyle};
            border-width: ${text.passageborderwidth}px;
            color: ${text.passagecolor};
            font-family: ${text.passagefontfamily};
            font-size: ${text.passagefontsize}px;
            font-style: ${text.passagefontstyle};
            font-variant: ${text.passagefontvariant};
            font-weight: ${text.passagefontweight};
            height: ${text.passageheight}px;
            left: ${text.passagex}px;
            margin: ${text.passagemargintop}px ${text.passagemarginright}px ${text.passagemarginbottom}px ${text.passagemarginleft}px;
            padding: ${text.passagepaddingtop}px ${text.passagepaddingright}px ${text.passagepaddingbottom}px ${text.passagepaddingleft}px;
            text-align: ${text.passagehorizontal};
            top: ${text.passagey}px;
            width: ${text.passagewidth}px;
            writing-mode: ${text.passagewritingmode};
        }
    </style>
    <foreignObject height="100%" width="100%">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <img src="${image.dataurl}"/>
            <text>${text.messagetext}</text>
            <text>${text.referencetextbook}${text.referencetextchapter}${text.referencetextverse}${text.referencetextverseend}${text.referencetextversion}</text>
            <text>${text.passagetextverse}${text.passagetextverseend}</text>
        </div>
    </foreignObject>
</svg>`;
            text.src = `data:image/svg+xml,${svg}`;
        }

        function textupdate()
        {
            const context = canvas.getContext("2d");
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.drawImage(text, 0, 0);
        }
        text.addEventListener("load", textupdate);






        function tabload()
        {
            for(const [key, value] of tabarray.entries())
            {
                const button = document.createElement("button");
                button.className = "tab";
                if(value == "save")
                {
                    button.className = "tab current";
                }
                button.id = "tab" + tabarray[key];
                //button.innerHTML = `${key + 1}) ${tabarray[key]}`;
                button.innerHTML = tabarray[key];
                button.value = "tabcontent" + tabarray[key];
                button.addEventListener("click", tabupdate);
                window2.append(button);

                /*
                const style = button.style;
                style.backgroundColor = "#000";
                style.color = "#fff";
                style.border = "none";
                style.fontSize = "16px";
                style.padding = "16px";
                style.transition = "0.5s";
                //*/
            }
        }
        addEventListener("load", tabload);


        function tabupdate(m)
        {
            const mytarget = m.target;

            //*
            for(const t of document.querySelectorAll(".tab"))
            {
                //const style = t.style;
                //style.backgroundColor = "#000";
                //style.color = "#fff";
                t.className = t.className.replace(" current", "");
            }
            //const style = document.querySelector("#"+mytarget.id).style;
            //style.backgroundColor = "#fff";
            //style.color = "#000";
            mytarget.className += " current";
            //*/

            for(const t of document.querySelectorAll(".tabcontent"))
            {
                const style = t.style;
                style.contentVisibility = "hidden";
            }
            document.querySelector("#"+mytarget.value).style.contentVisibility = "visible";
        }

        function tabcontentload()
        {
            for(const [key, value] of tabarray.entries())
            {
                const div = document.createElement("div");
                div.className = "tabcontent";
                div.id = "tabcontent" + tabarray[key];
                window3.append(div);

                //*
                const style = div.style;
                if(value != "save")
                {
                    style.contentVisibility = "hidden";
                }
                style.margin = "0";
                //style.transitionDuration = "0.5s";
                //*/
            }
        }
        addEventListener("load", tabcontentload);






        function canvaswidthload()
        {
            const div = document.createElement("div");
            div.id = "canvaswidth";
            div.innerHTML = "width";
            tabcontentcanvas.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", canvaswidthload);

        function canvaswidthnumberload()
        {
            const br = document.createElement("br");
            canvaswidth.append(br);

            const input = document.createElement("input");
            input.id = "canvaswidthnumber";
            input.max = maxwidth;
            input.min = 0;
            input.type = "number";
            input.value = canvas.width;
            input.addEventListener("input", canvaswidthnumberupdate);
            canvaswidth.append(input);

            //canvaswidthnumberupdate();
        }
        addEventListener("load", canvaswidthnumberload);

        function canvaswidthnumberupdate()
        {
            const v = canvaswidthnumber.value;

            canvaswidthrange.value = v;
            canvas.width = v;

            canvasupdate();
            svgupdate();
        }

        function canvaswidthrangeload()
        {
            //const br = document.createElement("br");
            //canvaswidth.append(br);

            const input = document.createElement("input");
            input.id = "canvaswidthrange";
            input.max = canvaswidthnumber.max;
            input.min = canvaswidthnumber.min;
            input.type = "range";
            input.value = canvaswidthnumber.value;
            input.addEventListener("input", canvaswidthrangeupdate);
            canvaswidth.append(input);

            canvaswidthrangeupdate();
        }
        addEventListener("load", canvaswidthrangeload);

        function canvaswidthrangeupdate()
        {
            const v = canvaswidthrange.value;

            canvaswidthnumber.value = v;
            canvas.width = v;

            canvasupdate();
            svgupdate();
        }

        function canvaswidthnaturalload()
        {
            const br = document.createElement("br");
            canvaswidth.append(br);

            const button = document.createElement("button");
            button.innerHTML = "image";
            button.addEventListener("click", canvaswidthnaturalupdate);
            canvaswidth.append(button);
        }
        addEventListener("load", canvaswidthnaturalload);

        function canvaswidthnaturalupdate()
        {
            canvaswidthnumber.value = image.naturalWidth;

            canvaswidthnumberupdate();
        }

        function canvaswidthexactload()
        {
            const br = document.createElement("br");
            canvaswidth.append(br);

            const array =
            [
                ["800",800],
                ["1280",1280],
                ["1366",1366],
                ["1536",1536],
                ["1600",1600],
                ["1920",1920],
                ["2304",2304],
                ["2560",2560],
                ["3840",3840],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvaswidthexactupdate);
                canvaswidth.append(button);
            }
        }
        addEventListener("load", canvaswidthexactload);

        function canvaswidthexactupdate(e)
        {
            canvaswidthnumber.value = Number(e.target.value);

            canvaswidthnumberupdate();
        }

        function canvaswidthincrementload()
        {
            const br = document.createElement("br");
            canvaswidth.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvaswidthincrementupdate);
                canvaswidth.append(button);
            }
        }
        addEventListener("load", canvaswidthincrementload);

        function canvaswidthincrementupdate(e)
        {
            const v = Number(canvaswidthnumber.value) + Number(e.target.value);

            if((canvaswidthnumber.min <= v) && (v <= canvaswidthnumber.max))
            {
                canvaswidthnumber.value = v;

                canvaswidthnumberupdate();
            }
        }



        function canvasheightload()
        {
            const div = document.createElement("div");
            div.id = "canvasheight";
            div.innerHTML = "height";
            tabcontentcanvas.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", canvasheightload);

        function canvasheightnumberload()
        {
            const br = document.createElement("br");
            canvasheight.append(br);

            const input = document.createElement("input");
            input.id = "canvasheightnumber";
            input.max = maxheight;
            input.min = 0;
            input.type = "number";
            input.value = canvas.height;
            input.addEventListener("input", canvasheightnumberupdate);
            canvasheight.append(input);

            //canvasheightnumberupdate();
        }
        addEventListener("load", canvasheightnumberload);

        function canvasheightnumberupdate()
        {
            const v = canvasheightnumber.value;

            canvasheightrange.value = v;
            canvas.height = v;

            canvasupdate();
            svgupdate();
        }

        function canvasheightrangeload()
        {
            //const br = document.createElement("br");
            //canvasheight.append(br);

            const input = document.createElement("input");
            input.id = "canvasheightrange";
            input.max = canvasheightnumber.max;
            input.min = canvasheightnumber.min;
            input.type = "range";
            input.value = canvasheightnumber.value;
            input.addEventListener("input", canvasheightrangeupdate);
            canvasheight.append(input);

            canvasheightrangeupdate();
        }
        addEventListener("load", canvasheightrangeload);

        function canvasheightrangeupdate()
        {
            const v = canvasheightrange.value;

            canvasheightnumber.value = v;
            canvas.height = v;

            canvasupdate();
            svgupdate();
        }

        function canvasheightnaturalload()
        {
            const br = document.createElement("br");
            canvasheight.append(br);

            const button = document.createElement("button");
            button.innerHTML = "image";
            button.addEventListener("click", canvasheightnaturalupdate);
            canvasheight.append(button);
        }
        addEventListener("load", canvasheightnaturalload);

        function canvasheightnaturalupdate()
        {
            canvasheightnumber.value = image.naturalHeight;

            canvasheightnumberupdate();
        }

        function canvasheightexactload()
        {
            const br = document.createElement("br");
            canvasheight.append(br);

            const array =
            [
                ["600",600],
                ["720",720],
                ["768",768],
                ["864",864],
                ["900",900],
                ["1080",1080],
                ["1296",1296],
                ["1440",1440],
                ["2160",2160],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvasheightexactupdate);
                canvasheight.append(button);
            }
        }
        addEventListener("load", canvasheightexactload);

        function canvasheightexactupdate(e)
        {
            canvasheightnumber.value = Number(e.target.value);

            canvasheightnumberupdate();
        }

        function canvasheightincrementload()
        {
            const br = document.createElement("br");
            canvasheight.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvasheightincrementupdate);
                canvasheight.append(button);
            }
        }
        addEventListener("load", canvasheightincrementload);

        function canvasheightincrementupdate(e)
        {
            const v = Number(canvasheightnumber.value) + Number(e.target.value);

            if((canvasheightnumber.min <= v) && (v <= canvasheightnumber.max))
            {
                canvasheightnumber.value = v;

                canvasheightnumberupdate();
            }
        }



        function canvasbackgroundcolorload()
        {
            const div = document.createElement("div");
            div.id = "canvasbackgroundcolor";
            div.innerHTML = "background-color";
            tabcontentcanvas.append(div);
        }
        addEventListener("load", canvasbackgroundcolorload);

        function canvasbackgroundcolorcolorload()
        {
            const br = document.createElement("br");
            canvasbackgroundcolor.append(br);

            const input = document.createElement("input");
            input.id = "canvasbackgroundcolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", canvasbackgroundcolorcolorupdate);
            canvasbackgroundcolor.append(input);

            //canvasbackgroundcolorcolorset();
        }
        addEventListener("load", canvasbackgroundcolorcolorload);

        function canvasbackgroundcolorcolorset()
        {
            const c = canvasbackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = canvasbackgroundalphanumber.value;

            canvas.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function canvasbackgroundcolorcolorupdate()
        {
            canvasbackgroundcolorcolorset();
            svgupdate();
        }

        function canvasbackgroundcolorexactload()
        {
            const br = document.createElement("br");
            canvasbackgroundcolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvasbackgroundcolorexactupdate);
                canvasbackgroundcolor.append(button);
            }
        }
        addEventListener("load", canvasbackgroundcolorexactload);

        function canvasbackgroundcolorexactupdate(e)
        {
            canvasbackgroundcolorcolor.value = e.target.value;

            canvasbackgroundcolorcolorupdate();
        }



        function canvasbackgroundalphaload()
        {
            const div = document.createElement("div");
            div.id = "canvasbackgroundalpha";
            div.innerHTML = "background-alpha";
            tabcontentcanvas.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", canvasbackgroundalphaload);

        function canvasbackgroundalphanumberload()
        {
            const br = document.createElement("br");
            canvasbackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "canvasbackgroundalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", canvasbackgroundalphanumberupdate);
            canvasbackgroundalpha.append(input);

            //canvasbackgroundalphanumberset();
        }
        addEventListener("load", canvasbackgroundalphanumberload);

        function canvasbackgroundalphanumberset()
        {
            const c = canvasbackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = canvasbackgroundalphanumber.value;

            canvasbackgroundalpharange.value = a;
            canvas.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function canvasbackgroundalphanumberupdate()
        {
            canvasbackgroundalphanumberset();
            svgupdate();
        }

        function canvasbackgroundalpharangeload()
        {
            //const br = document.createElement("br");
            //canvasbackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "canvasbackgroundalpharange";
            input.max = canvasbackgroundalphanumber.max;
            input.min = canvasbackgroundalphanumber.min;
            input.step = canvasbackgroundalphanumber.step;
            input.type = "range";
            input.value = canvasbackgroundalphanumber.value;
            input.addEventListener("input", canvasbackgroundalpharangeupdate);
            canvasbackgroundalpha.append(input);

            canvasbackgroundalpharangeset();
        }
        addEventListener("load", canvasbackgroundalpharangeload);

        function canvasbackgroundalpharangeset()
        {
            const c = canvasbackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = canvasbackgroundalpharange.value;

            canvasbackgroundalphanumber.value = a;
            canvas.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function canvasbackgroundalpharangeupdate()
        {
            canvasbackgroundalpharangeset();
            svgupdate();
        }

        function canvasbackgroundalphaexactload()
        {
            const br = document.createElement("br");
            canvasbackgroundalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvasbackgroundalphaexactupdate);
                canvasbackgroundalpha.append(button);
            }
        }
        addEventListener("load", canvasbackgroundalphaexactload);

        function canvasbackgroundalphaexactupdate(e)
        {
            canvasbackgroundalphanumber.value = Number(e.target.value);

            canvasbackgroundalphanumberupdate();
        }

        function canvasbackgroundalphaincrementload()
        {
            const br = document.createElement("br");
            canvasbackgroundalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvasbackgroundalphaincrementupdate);
                canvasbackgroundalpha.append(button);
            }
        }
        addEventListener("load", canvasbackgroundalphaincrementload);

        function canvasbackgroundalphaincrementupdate(e)
        {
            let v = Number(canvasbackgroundalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((canvasbackgroundalphanumber.min <= v) && (v <= canvasbackgroundalphanumber.max))
            {
                canvasbackgroundalphanumber.value = v;

                canvasbackgroundalphanumberupdate();
            }
        }






        function myfunction1(e)
        {
            //console.log(myvideo.duration);
            const myvideo = e.target;

            myvideo.currentTime = 0;
        }

        function myfunction2(e)
        {
            //console.log(myvideo.currentTime);
            const myvideo = e.target;

            const mycanvas = document.createElement("canvas");
            mycanvas.height = myvideo.videoHeight;
            mycanvas.width = myvideo.videoWidth;

            const mycontext = mycanvas.getContext("2d");
            mycontext.drawImage(myvideo, 0, 0, mycanvas.width, mycanvas.height);

            //const myimg = new Image();
            //myimg.src = mycanvas.toDataURL();

            image.src = mycanvas.toDataURL();
        }

        function imageload2()
        {
            //image.src = "/assets/svg/Happy.svg";

            const date  = new Date();
            const month = date.getUTCMonth() + 1;
            const day   = date.getUTCDate();

            const myvideo = document.createElement("video");
            myvideo.addEventListener("loadedmetadata", myfunction1);
            myvideo.addEventListener("seeked", myfunction2);
            myvideo.src = `/assets/mp4/${month}/${day}.mp4`;
        }
        addEventListener("load", imageload2);

        function imageload3()
        {
            fetch(image.src)
            .then(r => r.blob())
            .then(b =>
            {
                const reader = new FileReader();
                reader.readAsDataURL(b);
                reader.onloadend = () =>
                {
                    //console.log("imageload3");
                    image.dataurl = reader.result;
                    svgupdate();
                };
            });
        }
        image.addEventListener("load", imageload3);



        function imagefileload()
        {
            const div = document.createElement("div");
            div.id = "imagefile";
            div.innerHTML = "file";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagefileload);

        function imagefilefileload()
        {
            const br = document.createElement("br");
            imagefile.append(br);

            const input = document.createElement("input");
            input.id = "imagefilefile";
            input.type = "file";
            input.addEventListener("change", imagefilefileupdate);
            imagefile.append(input);
        }
        addEventListener("load", imagefilefileload);

        function imagefilefileupdate()
        {
            const f = imagefilefile.files[0];

            image.src = URL.createObjectURL(f);
        }



        function imagefitload()
        {
            const div = document.createElement("div");
            div.id = "imagefit";
            div.innerHTML = "fit";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagefitload);

        function imagefitselectload()
        {
            const br = document.createElement("br");
            imagefit.append(br);

            const select = document.createElement("select");
            select.id = "imagefitselect";
            select.addEventListener("input", imagefitselectupdate);
            imagefit.append(select);

            const array =
            [
                "contain",
                "cover",
            ];

            for(const value of array)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            imagefitselect.value = array[1];

            imagefitselectset();
        }
        addEventListener("load", imagefitselectload);

        function imagefitselectset()
        {
            image.objectfit = imagefitselect.value;
        }

        function imagefitselectupdate()
        {
            imagefitselectset();
            svgupdate();
        }



        function imagewidthload()
        {
            const div = document.createElement("div");
            div.id = "imagewidth";
            div.innerHTML = "width";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagewidthload);

        function imagewidthnumberload()
        {
            const br = document.createElement("br");
            imagewidth.append(br);

            const input = document.createElement("input");
            input.id = "imagewidthnumber";
            input.max = maxwidth;
            input.min = 0;
            input.type = "number";
            input.value = canvas.width;
            input.addEventListener("input", imagewidthnumberupdate);
            imagewidth.append(input);

            //imagewidthnumberset();
        }
        addEventListener("load", imagewidthnumberload);

        function imagewidthnumberset()
        {
            const v = imagewidthnumber.value;

            imagewidthrange.value = v;
            image.width = v;
        }

        function imagewidthnumberupdate()
        {
            imagewidthnumberset();
            svgupdate();
        }

        function imagewidthrangeload()
        {
            //const br = document.createElement("br");
            //imagewidth.append(br);

            const input = document.createElement("input");
            input.id = "imagewidthrange";
            input.max = imagewidthnumber.max;
            input.min = imagewidthnumber.min;
            input.type = "range";
            input.value = imagewidthnumber.value;
            input.addEventListener("input", imagewidthrangeupdate);
            imagewidth.append(input);

            imagewidthrangeset();
        }
        addEventListener("load", imagewidthrangeload);

        function imagewidthrangeset()
        {
            const v = imagewidthrange.value;

            imagewidthnumber.value = v;
            image.width = v;
        }

        function imagewidthrangeupdate()
        {
            imagewidthrangeset();
            svgupdate();
        }
/*
        function imagewidthnaturalload()
        {
            const br = document.createElement("br");
            imagewidth.append(br);

            const button = document.createElement("button");
            button.innerHTML = "image";
            button.addEventListener("click", imagewidthnaturalupdate);
            imagewidth.append(button);
        }
        addEventListener("load", imagewidthnaturalload);

        function imagewidthnaturalupdate()
        {
            imagewidthnumber.value = image.naturalWidth;

            imagewidthnumberupdate();
        }
//*/
        function imagewidthexactload()
        {
            const br = document.createElement("br");
            imagewidth.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagewidthexactupdate);
                imagewidth.append(button);
            }
        }
        addEventListener("load", imagewidthexactload);

        function imagewidthexactupdate(e)
        {
            imagewidthnumber.value = canvas.width * Number(e.target.value);

            imagewidthnumberupdate();
        }

        function imagewidthincrementload()
        {
            const br = document.createElement("br");
            imagewidth.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagewidthincrementupdate);
                imagewidth.append(button);
            }
        }
        addEventListener("load", imagewidthincrementload);

        function imagewidthincrementupdate(e)
        {
            const v = Number(imagewidthnumber.value) + Number(e.target.value);

            if((imagewidthnumber.min <= v) && (v <= imagewidthnumber.max))
            {
                imagewidthnumber.value = v;

                imagewidthnumberupdate();
            }
        }



        function imageheightload()
        {
            const div = document.createElement("div");
            div.id = "imageheight";
            div.innerHTML = "height";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imageheightload);

        function imageheightnumberload()
        {
            const br = document.createElement("br");
            imageheight.append(br);

            const input = document.createElement("input");
            input.id = "imageheightnumber";
            input.max = maxheight;
            input.min = 0;
            input.type = "number";
            input.value = canvas.height;
            input.addEventListener("input", imageheightnumberupdate);
            imageheight.append(input);

            //imageheightnumberset();
        }
        addEventListener("load", imageheightnumberload);

        function imageheightnumberset()
        {
            const v = imageheightnumber.value;

            imageheightrange.value = v;
            image.height = v;
        }

        function imageheightnumberupdate()
        {
            imageheightnumberset();
            svgupdate();
        }

        function imageheightrangeload()
        {
            //const br = document.createElement("br");
            //imageheight.append(br);

            const input = document.createElement("input");
            input.id = "imageheightrange";
            input.max = imageheightnumber.max;
            input.min = imageheightnumber.min;
            input.type = "range";
            input.value = imageheightnumber.value;
            input.addEventListener("input", imageheightrangeupdate);
            imageheight.append(input);

            imageheightrangeset();
        }
        addEventListener("load", imageheightrangeload);

        function imageheightrangeset()
        {
            const v = imageheightrange.value;

            imageheightnumber.value = v;
            image.height = v;
        }

        function imageheightrangeupdate()
        {
            imageheightrangeset();
            svgupdate();
        }
/*
        function imageheightnaturalload()
        {
            const br = document.createElement("br");
            imageheight.append(br);

            const button = document.createElement("button");
            button.innerHTML = "image";
            button.addEventListener("click", imageheightnaturalupdate);
            imageheight.append(button);
        }
        addEventListener("load", imageheightnaturalload);

        function imageheightnaturalupdate()
        {
            imageheightnumber.value = image.naturalHeight;

            imageheightnumberupdate();
        }
//*/
        function imageheightexactload()
        {
            const br = document.createElement("br");
            imageheight.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageheightexactupdate);
                imageheight.append(button);
            }
        }
        addEventListener("load", imageheightexactload);

        function imageheightexactupdate(e)
        {
            imageheightnumber.value = canvas.height * Number(e.target.value);

            imageheightnumberupdate();
        }

        function imageheightincrementload()
        {
            const br = document.createElement("br");
            imageheight.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageheightincrementupdate);
                imageheight.append(button);
            }
        }
        addEventListener("load", imageheightincrementload);

        function imageheightincrementupdate(e)
        {
            const v = Number(imageheightnumber.value) + Number(e.target.value);

            if((imageheightnumber.min <= v) && (v <= imageheightnumber.max))
            {
                imageheightnumber.value = v;

                imageheightnumberupdate();
            }
        }



        function imagexload()
        {
            const div = document.createElement("div");
            div.id = "imagex";
            div.innerHTML = "x";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagexload);

        function imagexnumberload()
        {
            const br = document.createElement("br");
            imagex.append(br);

            const input = document.createElement("input");
            input.id = "imagexnumber";
            input.max = maxwidth;
            input.min = -maxwidth;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagexnumberupdate);
            imagex.append(input);

            //imagexnumberset();
        }
        addEventListener("load", imagexnumberload);

        function imagexnumberset()
        {
            const v = imagexnumber.value;

            imagexrange.value = v;
            image.myx = v;
        }

        function imagexnumberupdate()
        {
            imagexnumberset();
            svgupdate();
        }

        function imagexrangeload()
        {
            //const br = document.createElement("br");
            //imagex.append(br);

            const input = document.createElement("input");
            input.id = "imagexrange";
            input.max = imagexnumber.max;
            input.min = imagexnumber.min;
            input.type = "range";
            input.value = imagexnumber.value;
            input.addEventListener("input", imagexrangeupdate);
            imagex.append(input);

            imagexrangeset();
        }
        addEventListener("load", imagexrangeload);

        function imagexrangeset()
        {
            const v = imagexrange.value;

            imagexnumber.value = v;
            image.myx = v;
        }

        function imagexrangeupdate()
        {
            imagexrangeset();
            svgupdate();
        }

        function imagexexactload()
        {
            const br = document.createElement("br");
            imagex.append(br);

            const array =
            [
                ["left",0],
                ["center",0.5],
                ["right",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagexexactupdate);
                imagex.append(button);
            }
        }
        addEventListener("load", imagexexactload);

        function imagexexactupdate(e)
        {
            imagexnumber.value = (canvas.width - image.width) * Number(e.target.value);

            imagexnumberupdate();
        }

        function imagexincrementload()
        {
            const br = document.createElement("br");
            imagex.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagexincrementupdate);
                imagex.append(button);
            }
        }
        addEventListener("load", imagexincrementload);

        function imagexincrementupdate(e)
        {
            const v = Number(imagexnumber.value) + Number(e.target.value);

            if((imagexnumber.min <= v) && (v <= imagexnumber.max))
            {
                imagexnumber.value = v;

                imagexnumberupdate();
            }
        }



        function imageyload()
        {
            const div = document.createElement("div");
            div.id = "imagey";
            div.innerHTML = "y";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imageyload);

        function imageynumberload()
        {
            const br = document.createElement("br");
            imagey.append(br);

            const input = document.createElement("input");
            input.id = "imageynumber";
            input.max = maxheight;
            input.min = -maxheight;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imageynumberupdate);
            imagey.append(input);

            //imageynumberset();
        }
        addEventListener("load", imageynumberload);

        function imageynumberset()
        {
            const v = imageynumber.value;

            imageyrange.value = v;
            image.myy = v;
        }

        function imageynumberupdate()
        {
            imageynumberset();
            svgupdate();
        }

        function imageyrangeload()
        {
            //const br = document.createElement("br");
            //imagey.append(br);

            const input = document.createElement("input");
            input.id = "imageyrange";
            input.max = imageynumber.max;
            input.min = imageynumber.min;
            input.type = "range";
            input.value = imageynumber.value;
            input.addEventListener("input", imageyrangeupdate);
            imagey.append(input);

            imageyrangeset();
        }
        addEventListener("load", imageyrangeload);

        function imageyrangeset()
        {
            const v = imageyrange.value;

            imageynumber.value = v;
            image.myy = v;
        }

        function imageyrangeupdate()
        {
            imageyrangeset();
            svgupdate();
        }

        function imageyexactload()
        {
            const br = document.createElement("br");
            imagey.append(br);

            const array =
            [
                ["top",0],
                ["center",0.5],
                ["bottom",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageyexactupdate);
                imagey.append(button);
            }
        }
        addEventListener("load", imageyexactload);

        function imageyexactupdate(e)
        {
            imageynumber.value = (canvas.height - image.height) * Number(e.target.value);

            imageynumberupdate();
        }

        function imageyincrementload()
        {
            const br = document.createElement("br");
            imagey.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageyincrementupdate);
                imagey.append(button);
            }
        }
        addEventListener("load", imageyincrementload);

        function imageyincrementupdate(e)
        {
            const v = Number(imageynumber.value) + Number(e.target.value);

            if((imageynumber.min <= v) && (v <= imageynumber.max))
            {
                imageynumber.value = v;

                imageynumberupdate();
            }
        }



        function imagebackgroundcolorload()
        {
            const div = document.createElement("div");
            div.id = "imagebackgroundcolor";
            div.innerHTML = "background-color";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagebackgroundcolorload);

        function imagebackgroundcolorcolorload()
        {
            const br = document.createElement("br");
            imagebackgroundcolor.append(br);

            const input = document.createElement("input");
            input.id = "imagebackgroundcolorcolor";
            input.type = "color";
            input.value = "#ffffff";
            input.addEventListener("input", imagebackgroundcolorcolorupdate);
            imagebackgroundcolor.append(input);

            //imagebackgroundcolorcolorset();
        }
        addEventListener("load", imagebackgroundcolorcolorload);

        function imagebackgroundcolorcolorset()
        {
            const c = imagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = imagebackgroundalphanumber.value;

            image.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function imagebackgroundcolorcolorupdate()
        {
            imagebackgroundcolorcolorset();
            svgupdate();
        }

        function imagebackgroundcolorexactload()
        {
            const br = document.createElement("br");
            imagebackgroundcolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagebackgroundcolorexactupdate);
                imagebackgroundcolor.append(button);
            }
        }
        addEventListener("load", imagebackgroundcolorexactload);

        function imagebackgroundcolorexactupdate(e)
        {
            imagebackgroundcolorcolor.value = e.target.value;

            imagebackgroundcolorcolorupdate();
        }



        function imagebackgroundalphaload()
        {
            const div = document.createElement("div");
            div.id = "imagebackgroundalpha";
            div.innerHTML = "background-alpha";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagebackgroundalphaload);

        function imagebackgroundalphanumberload()
        {
            const br = document.createElement("br");
            imagebackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "imagebackgroundalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagebackgroundalphanumberupdate);
            imagebackgroundalpha.append(input);

            //imagebackgroundalphanumberset();
        }
        addEventListener("load", imagebackgroundalphanumberload);

        function imagebackgroundalphanumberset()
        {
            const c = imagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = imagebackgroundalphanumber.value;

            imagebackgroundalpharange.value = a;
            image.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function imagebackgroundalphanumberupdate()
        {
            imagebackgroundalphanumberset();
            svgupdate();
        }

        function imagebackgroundalpharangeload()
        {
            //const br = document.createElement("br");
            //imagebackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "imagebackgroundalpharange";
            input.max = imagebackgroundalphanumber.max;
            input.min = imagebackgroundalphanumber.min;
            input.step = imagebackgroundalphanumber.step;
            input.type = "range";
            input.value = imagebackgroundalphanumber.value;
            input.addEventListener("input", imagebackgroundalpharangeupdate);
            imagebackgroundalpha.append(input);

            imagebackgroundalpharangeset();
        }
        addEventListener("load", imagebackgroundalpharangeload);

        function imagebackgroundalpharangeset()
        {
            const c = imagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = imagebackgroundalpharange.value;

            imagebackgroundalphanumber.value = a;
            image.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function imagebackgroundalpharangeupdate()
        {
            imagebackgroundalpharangeset();
            svgupdate();
        }

        function imagebackgroundalphaexactload()
        {
            const br = document.createElement("br");
            imagebackgroundalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagebackgroundalphaexactupdate);
                imagebackgroundalpha.append(button);
            }
        }
        addEventListener("load", imagebackgroundalphaexactload);

        function imagebackgroundalphaexactupdate(e)
        {
            imagebackgroundalphanumber.value = Number(e.target.value);

            imagebackgroundalphanumberupdate();
        }

        function imagebackgroundalphaincrementload()
        {
            const br = document.createElement("br");
            imagebackgroundalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagebackgroundalphaincrementupdate);
                imagebackgroundalpha.append(button);
            }
        }
        addEventListener("load", imagebackgroundalphaincrementload);

        function imagebackgroundalphaincrementupdate(e)
        {
            let v = Number(imagebackgroundalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((imagebackgroundalphanumber.min <= v) && (v <= imagebackgroundalphanumber.max))
            {
                imagebackgroundalphanumber.value = v;

                imagebackgroundalphanumberupdate();
            }
        }



/*
        function imageopacityload()
        {
            const div = document.createElement("div");
            div.id = "imageopacity";
            div.innerHTML = "opacity";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imageopacityload);

        function imageopacitynumberload()
        {
            const br = document.createElement("br");
            imageopacity.append(br);

            const input = document.createElement("input");
            input.id = "imageopacitynumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", imageopacitynumberupdate);
            imageopacity.append(input);

            //imageopacitynumberset();
        }
        addEventListener("load", imageopacitynumberload);

        function imageopacitynumberset()
        {
            const v = imageopacitynumber.value;

            imageopacityrange.value = v;
            image.opacity = v;
        }

        function imageopacitynumberupdate()
        {
            imageopacitynumberset();
            svgupdate();
        }

        function imageopacityrangeload()
        {
            const input = document.createElement("input");
            input.id = "imageopacityrange";
            input.max = imageopacitynumber.max;
            input.min = imageopacitynumber.min;
            input.step = imageopacitynumber.step;
            input.type = "range";
            input.value = imageopacitynumber.value;
            input.addEventListener("input", imageopacityrangeupdate);
            imageopacity.append(input);

            imageopacityrangeset();
        }
        addEventListener("load", imageopacityrangeload);

        function imageopacityrangeset()
        {
            const v = imageopacityrange.value;

            imageopacitynumber.value = v;
            image.opacity = v;
        }

        function imageopacityrangeupdate()
        {
            imageopacityrangeset();
            svgupdate();
        }

        function imageopacityexactload()
        {
            const br = document.createElement("br");
            imageopacity.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageopacityexactupdate);
                imageopacity.append(button);
            }
        }
        addEventListener("load", imageopacityexactload);

        function imageopacityexactupdate(e)
        {
            imageopacitynumber.value = Number(e.target.value);

            imageopacitynumberupdate();
        }

        function imageopacityincrementload()
        {
            const br = document.createElement("br");
            imageopacity.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageopacityincrementupdate);
                imageopacity.append(button);
            }
        }
        addEventListener("load", imageopacityincrementload);

        function imageopacityincrementupdate(e)
        {
            let v = Number(imageopacitynumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((imageopacitynumber.min <= v) && (v <= imageopacitynumber.max))
            {
                imageopacitynumber.value = v;

                imageopacitynumberupdate();
            }
        }
//*/



        function imagefilterblurload()
        {
            const div = document.createElement("div");
            div.id = "imagefilterblur";
            div.innerHTML = "filter-blur";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefilterblurload);

        function imagefilterblurnumberload()
        {
            const br = document.createElement("br");
            imagefilterblur.append(br);

            const input = document.createElement("input");
            input.id = "imagefilterblurnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagefilterblurnumberupdate);
            imagefilterblur.append(input);

            //imagefilterblurnumberset();
        }
        addEventListener("load", imagefilterblurnumberload);

        function imagefilterblurnumberset()
        {
            const v = imagefilterblurnumber.value;

            imagefilterblurrange.value = v;
            image.filterblur = v;
        }

        function imagefilterblurnumberupdate()
        {
            imagefilterblurnumberset();
            svgupdate();
        }

        function imagefilterblurrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefilterblurrange";
            input.max = imagefilterblurnumber.max;
            input.min = imagefilterblurnumber.min;
            input.step = imagefilterblurnumber.step;
            input.type = "range";
            input.value = imagefilterblurnumber.value;
            input.addEventListener("input", imagefilterblurrangeupdate);
            imagefilterblur.append(input);

            imagefilterblurrangeset();
        }
        addEventListener("load", imagefilterblurrangeload);

        function imagefilterblurrangeset()
        {
            const v = imagefilterblurrange.value;

            imagefilterblurnumber.value = v;
            image.filterblur = v;
        }

        function imagefilterblurrangeupdate()
        {
            imagefilterblurrangeset();
            svgupdate();
        }

        function imagefilterblurexactload()
        {
            const br = document.createElement("br");
            imagefilterblur.append(br);

            const array =
            [
                ["0",0],
                ["2",2],
                ["4",4],
                ["8",8],
                ["16",16],
                ["32",32],
                ["64",64],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterblurexactupdate);
                imagefilterblur.append(button);
            }
        }
        addEventListener("load", imagefilterblurexactload);

        function imagefilterblurexactupdate(e)
        {
            imagefilterblurnumber.value = Number(e.target.value);

            imagefilterblurnumberupdate();
        }

        function imagefilterblurincrementload()
        {
            const br = document.createElement("br");
            imagefilterblur.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterblurincrementupdate);
                imagefilterblur.append(button);
            }
        }
        addEventListener("load", imagefilterblurincrementload);

        function imagefilterblurincrementupdate(e)
        {
            const v = Number(imagefilterblurnumber.value) + Number(e.target.value);

            if((imagefilterblurnumber.min <= v) && (v <= imagefilterblurnumber.max))
            {
                imagefilterblurnumber.value = v;

                imagefilterblurnumberupdate();
            }
        }



        function imagefilterbrightnessload()
        {
            const div = document.createElement("div");
            div.id = "imagefilterbrightness";
            div.innerHTML = "filter-brightness";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefilterbrightnessload);

        function imagefilterbrightnessnumberload()
        {
            const br = document.createElement("br");
            imagefilterbrightness.append(br);

            const input = document.createElement("input");
            input.id = "imagefilterbrightnessnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", imagefilterbrightnessnumberupdate);
            imagefilterbrightness.append(input);

            //imagefilterbrightnessnumberset();
        }
        addEventListener("load", imagefilterbrightnessnumberload);

        function imagefilterbrightnessnumberset()
        {
            const v = imagefilterbrightnessnumber.value;

            imagefilterbrightnessrange.value = v;
            image.filterbrightness = v;
        }

        function imagefilterbrightnessnumberupdate()
        {
            imagefilterbrightnessnumberset();
            svgupdate();
        }

        function imagefilterbrightnessrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefilterbrightnessrange";
            input.max = imagefilterbrightnessnumber.max;
            input.min = imagefilterbrightnessnumber.min;
            input.step = imagefilterbrightnessnumber.step;
            input.type = "range";
            input.value = imagefilterbrightnessnumber.value;
            input.addEventListener("input", imagefilterbrightnessrangeupdate);
            imagefilterbrightness.append(input);

            imagefilterbrightnessrangeset();
        }
        addEventListener("load", imagefilterbrightnessrangeload);

        function imagefilterbrightnessrangeset()
        {
            const v = imagefilterbrightnessrange.value;

            imagefilterbrightnessnumber.value = v;
            image.filterbrightness = v;
        }

        function imagefilterbrightnessrangeupdate()
        {
            imagefilterbrightnessrangeset();
            svgupdate();
        }

        function imagefilterbrightnessexactload()
        {
            const br = document.createElement("br");
            imagefilterbrightness.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterbrightnessexactupdate);
                imagefilterbrightness.append(button);
            }
        }
        addEventListener("load", imagefilterbrightnessexactload);

        function imagefilterbrightnessexactupdate(e)
        {
            imagefilterbrightnessnumber.value = Number(e.target.value);

            imagefilterbrightnessnumberupdate();
        }

        function imagefilterbrightnessincrementload()
        {
            const br = document.createElement("br");
            imagefilterbrightness.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterbrightnessincrementupdate);
                imagefilterbrightness.append(button);
            }
        }
        addEventListener("load", imagefilterbrightnessincrementload);

        function imagefilterbrightnessincrementupdate(e)
        {
            const v = Number(imagefilterbrightnessnumber.value) + Number(e.target.value);

            if((imagefilterbrightnessnumber.min <= v) && (v <= imagefilterbrightnessnumber.max))
            {
                imagefilterbrightnessnumber.value = v;

                imagefilterbrightnessnumberupdate();
            }
        }



        function imagefiltercontrastload()
        {
            const div = document.createElement("div");
            div.id = "imagefiltercontrast";
            div.innerHTML = "filter-contrast";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefiltercontrastload);

        function imagefiltercontrastnumberload()
        {
            const br = document.createElement("br");
            imagefiltercontrast.append(br);

            const input = document.createElement("input");
            input.id = "imagefiltercontrastnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", imagefiltercontrastnumberupdate);
            imagefiltercontrast.append(input);

            //imagefiltercontrastnumberset();
        }
        addEventListener("load", imagefiltercontrastnumberload);

        function imagefiltercontrastnumberset()
        {
            const v = imagefiltercontrastnumber.value;

            imagefiltercontrastrange.value = v;
            image.filtercontrast = v;
        }

        function imagefiltercontrastnumberupdate()
        {
            imagefiltercontrastnumberset();
            svgupdate();
        }

        function imagefiltercontrastrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefiltercontrastrange";
            input.max = imagefiltercontrastnumber.max;
            input.min = imagefiltercontrastnumber.min;
            input.step = imagefiltercontrastnumber.step;
            input.type = "range";
            input.value = imagefiltercontrastnumber.value;
            input.addEventListener("input", imagefiltercontrastrangeupdate);
            imagefiltercontrast.append(input);

            imagefiltercontrastrangeset();
        }
        addEventListener("load", imagefiltercontrastrangeload);

        function imagefiltercontrastrangeset()
        {
            const v = imagefiltercontrastrange.value;

            imagefiltercontrastnumber.value = v;
            image.filtercontrast = v;
        }

        function imagefiltercontrastrangeupdate()
        {
            imagefiltercontrastrangeset();
            svgupdate();
        }

        function imagefiltercontrastexactload()
        {
            const br = document.createElement("br");
            imagefiltercontrast.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltercontrastexactupdate);
                imagefiltercontrast.append(button);
            }
        }
        addEventListener("load", imagefiltercontrastexactload);

        function imagefiltercontrastexactupdate(e)
        {
            imagefiltercontrastnumber.value = Number(e.target.value);

            imagefiltercontrastnumberupdate();
        }

        function imagefiltercontrastincrementload()
        {
            const br = document.createElement("br");
            imagefiltercontrast.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventList
10000
ener("click", imagefiltercontrastincrementupdate);
                imagefiltercontrast.append(button);
            }
        }
        addEventListener("load", imagefiltercontrastincrementload);

        function imagefiltercontrastincrementupdate(e)
        {
            const v = Number(imagefiltercontrastnumber.value) + Number(e.target.value);

            if((imagefiltercontrastnumber.min <= v) && (v <= imagefiltercontrastnumber.max))
            {
                imagefiltercontrastnumber.value = v;

                imagefiltercontrastnumberupdate();
            }
        }



        function imagefiltergrayscaleload()
        {
            const div = document.createElement("div");
            div.id = "imagefiltergrayscale";
            div.innerHTML = "filter-grayscale";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefiltergrayscaleload);

        function imagefiltergrayscalenumberload()
        {
            const br = document.createElement("br");
            imagefiltergrayscale.append(br);

            const input = document.createElement("input");
            input.id = "imagefiltergrayscalenumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagefiltergrayscalenumberupdate);
            imagefiltergrayscale.append(input);

            //imagefiltergrayscalenumberset();
        }
        addEventListener("load", imagefiltergrayscalenumberload);

        function imagefiltergrayscalenumberset()
        {
            const v = imagefiltergrayscalenumber.value;

            imagefiltergrayscalerange.value = v;
            image.filtergrayscale = v;
        }

        function imagefiltergrayscalenumberupdate()
        {
            imagefiltergrayscalenumberset();
            svgupdate();
        }

        function imagefiltergrayscalerangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefiltergrayscalerange";
            input.max = imagefiltergrayscalenumber.max;
            input.min = imagefiltergrayscalenumber.min;
            input.step = imagefiltergrayscalenumber.step;
            input.type = "range";
            input.value = imagefiltergrayscalenumber.value;
            input.addEventListener("input", imagefiltergrayscalerangeupdate);
            imagefiltergrayscale.append(input);

            imagefiltergrayscalerangeset();
        }
        addEventListener("load", imagefiltergrayscalerangeload);

        function imagefiltergrayscalerangeset()
        {
            const v = imagefiltergrayscalerange.value;

            imagefiltergrayscalenumber.value = v;
            image.filtergrayscale = v;
        }

        function imagefiltergrayscalerangeupdate()
        {
            imagefiltergrayscalerangeset();
            svgupdate();
        }

        function imagefiltergrayscaleexactload()
        {
            const br = document.createElement("br");
            imagefiltergrayscale.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltergrayscaleexactupdate);
                imagefiltergrayscale.append(button);
            }
        }
        addEventListener("load", imagefiltergrayscaleexactload);

        function imagefiltergrayscaleexactupdate(e)
        {
            imagefiltergrayscalenumber.value = Number(e.target.value);

            imagefiltergrayscalenumberupdate();
        }

        function imagefiltergrayscaleincrementload()
        {
            const br = document.createElement("br");
            imagefiltergrayscale.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltergrayscaleincrementupdate);
                imagefiltergrayscale.append(button);
            }
        }
        addEventListener("load", imagefiltergrayscaleincrementload);

        function imagefiltergrayscaleincrementupdate(e)
        {
            const v = Number(imagefiltergrayscalenumber.value) + Number(e.target.value);

            if((imagefiltergrayscalenumber.min <= v) && (v <= imagefiltergrayscalenumber.max))
            {
                imagefiltergrayscalenumber.value = v;

                imagefiltergrayscalenumberupdate();
            }
        }



        function imagefilterhuerotateload()
        {
            const div = document.createElement("div");
            div.id = "imagefilterhuerotate";
            div.innerHTML = "filter-hue-rotate";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefilterhuerotateload);

        function imagefilterhuerotatenumberload()
        {
            const br = document.createElement("br");
            imagefilterhuerotate.append(br);

            const input = document.createElement("input");
            input.id = "imagefilterhuerotatenumber";
            input.max = 360;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagefilterhuerotatenumberupdate);
            imagefilterhuerotate.append(input);

            //imagefilterhuerotatenumberset();
        }
        addEventListener("load", imagefilterhuerotatenumberload);

        function imagefilterhuerotatenumberset()
        {
            const v = imagefilterhuerotatenumber.value;

            imagefilterhuerotaterange.value = v;
            image.filterhuerotate = v;
        }

        function imagefilterhuerotatenumberupdate()
        {
            imagefilterhuerotatenumberset();
            svgupdate();
        }

        function imagefilterhuerotaterangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefilterhuerotaterange";
            input.max = imagefilterhuerotatenumber.max;
            input.min = imagefilterhuerotatenumber.min;
            input.step = imagefilterhuerotatenumber.step;
            input.type = "range";
            input.value = imagefilterhuerotatenumber.value;
            input.addEventListener("input", imagefilterhuerotaterangeupdate);
            imagefilterhuerotate.append(input);

            imagefilterhuerotaterangeset();
        }
        addEventListener("load", imagefilterhuerotaterangeload);

        function imagefilterhuerotaterangeset()
        {
            const v = imagefilterhuerotaterange.value;

            imagefilterhuerotatenumber.value = v;
            image.filterhuerotate = v;
        }

        function imagefilterhuerotaterangeupdate()
        {
            imagefilterhuerotaterangeset();
            svgupdate();
        }

        function imagefilterhuerotateexactload()
        {
            const br = document.createElement("br");
            imagefilterhuerotate.append(br);

            const array =
            [
                ["0",0],
                ["90",90],
                ["180",180],
                ["270",270],
                ["360",360],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterhuerotateexactupdate);
                imagefilterhuerotate.append(button);
            }
        }
        addEventListener("load", imagefilterhuerotateexactload);

        function imagefilterhuerotateexactupdate(e)
        {
            imagefilterhuerotatenumber.value = Number(e.target.value);

            imagefilterhuerotatenumberupdate();
        }

        function imagefilterhuerotateincrementload()
        {
            const br = document.createElement("br");
            imagefilterhuerotate.append(br);

            const array =
            [
                //["-90",-90],
                ["-45",-45],
                ["-15",-15],
                ["-1",-1],
                ["+1",1],
                ["+15",15],
                ["+45",45],
                //["+90",90],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterhuerotateincrementupdate);
                imagefilterhuerotate.append(button);
            }
        }
        addEventListener("load", imagefilterhuerotateincrementload);

        function imagefilterhuerotateincrementupdate(e)
        {
            const v = Number(imagefilterhuerotatenumber.value) + Number(e.target.value);

            if((imagefilterhuerotatenumber.min <= v) && (v <= imagefilterhuerotatenumber.max))
            {
                imagefilterhuerotatenumber.value = v;

                imagefilterhuerotatenumberupdate();
            }
        }



        function imagefilterinvertload()
        {
            const div = document.createElement("div");
            div.id = "imagefilterinvert";
            div.innerHTML = "filter-invert";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefilterinvertload);

        function imagefilterinvertnumberload()
        {
            const br = document.createElement("br");
            imagefilterinvert.append(br);

            const input = document.createElement("input");
            input.id = "imagefilterinvertnumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagefilterinvertnumberupdate);
            imagefilterinvert.append(input);

            //imagefilterinvertnumberset();
        }
        addEventListener("load", imagefilterinvertnumberload);

        function imagefilterinvertnumberset()
        {
            const v = imagefilterinvertnumber.value;

            imagefilterinvertrange.value = v;
            image.filterinvert = v;
        }

        function imagefilterinvertnumberupdate()
        {
            imagefilterinvertnumberset();
            svgupdate();
        }

        function imagefilterinvertrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefilterinvertrange";
            input.max = imagefilterinvertnumber.max;
            input.min = imagefilterinvertnumber.min;
            input.step = imagefilterinvertnumber.step;
            input.type = "range";
            input.value = imagefilterinvertnumber.value;
            input.addEventListener("input", imagefilterinvertrangeupdate);
            imagefilterinvert.append(input);

            imagefilterinvertrangeset();
        }
        addEventListener("load", imagefilterinvertrangeload);

        function imagefilterinvertrangeset()
        {
            const v = imagefilterinvertrange.value;

            imagefilterinvertnumber.value = v;
            image.filterinvert = v;
        }

        function imagefilterinvertrangeupdate()
        {
            imagefilterinvertrangeset();
            svgupdate();
        }

        function imagefilterinvertexactload()
        {
            const br = document.createElement("br");
            imagefilterinvert.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterinvertexactupdate);
                imagefilterinvert.append(button);
            }
        }
        addEventListener("load", imagefilterinvertexactload);

        function imagefilterinvertexactupdate(e)
        {
            imagefilterinvertnumber.value = Number(e.target.value);

            imagefilterinvertnumberupdate();
        }

        function imagefilterinvertincrementload()
        {
            const br = document.createElement("br");
            imagefilterinvert.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterinvertincrementupdate);
                imagefilterinvert.append(button);
            }
        }
        addEventListener("load", imagefilterinvertincrementload);

        function imagefilterinvertincrementupdate(e)
        {
            const v = Number(imagefilterinvertnumber.value) + Number(e.target.value);

            if((imagefilterinvertnumber.min <= v) && (v <= imagefilterinvertnumber.max))
            {
                imagefilterinvertnumber.value = v;

                imagefilterinvertnumberupdate();
            }
        }



        function imagefilteropacityload()
        {
            const div = document.createElement("div");
            div.id = "imagefilteropacity";
            div.innerHTML = "filter-opacity";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefilteropacityload);

        function imagefilteropacitynumberload()
        {
            const br = document.createElement("br");
            imagefilteropacity.append(br);

            const input = document.createElement("input");
            input.id = "imagefilteropacitynumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", imagefilteropacitynumberupdate);
            imagefilteropacity.append(input);

            //imagefilteropacitynumberset();
        }
        addEventListener("load", imagefilteropacitynumberload);

        function imagefilteropacitynumberset()
        {
            const v = imagefilteropacitynumber.value;

            imagefilteropacityrange.value = v;
            image.filteropacity = v;
        }

        function imagefilteropacitynumberupdate()
        {
            imagefilteropacitynumberset();
            svgupdate();
        }

        function imagefilteropacityrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefilteropacityrange";
            input.max = imagefilteropacitynumber.max;
            input.min = imagefilteropacitynumber.min;
            input.step = imagefilteropacitynumber.step;
            input.type = "range";
            input.value = imagefilteropacitynumber.value;
            input.addEventListener("input", imagefilteropacityrangeupdate);
            imagefilteropacity.append(input);

            imagefilteropacityrangeset();
        }
        addEventListener("load", imagefilteropacityrangeload);

        function imagefilteropacityrangeset()
        {
            const v = imagefilteropacityrange.value;

            imagefilteropacitynumber.value = v;
            image.filteropacity = v;
        }

        function imagefilteropacityrangeupdate()
        {
            imagefilteropacityrangeset();
            svgupdate();
        }

        function imagefilteropacityexactload()
        {
            const br = document.createElement("br");
            imagefilteropacity.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100 (initial)",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilteropacityexactupdate);
                imagefilteropacity.append(button);
            }
        }
        addEventListener("load", imagefilteropacityexactload);

        function imagefilteropacityexactupdate(e)
        {
            imagefilteropacitynumber.value = Number(e.target.value);

            imagefilteropacitynumberupdate();
        }

        function imagefilteropacityincrementload()
        {
            const br = document.createElement("br");
            imagefilteropacity.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilteropacityincrementupdate);
                imagefilteropacity.append(button);
            }
        }
        addEventListener("load", imagefilteropacityincrementload);

        function imagefilteropacityincrementupdate(e)
        {
            const v = Number(imagefilteropacitynumber.value) + Number(e.target.value);

            if((imagefilteropacitynumber.min <= v) && (v <= imagefilteropacitynumber.max))
            {
                imagefilteropacitynumber.value = v;

                imagefilteropacitynumberupdate();
            }
        }



        function imagefiltersaturateload()
        {
            const div = document.createElement("div");
            div.id = "imagefiltersaturate";
            div.innerHTML = "filter-saturate";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefiltersaturateload);

        function imagefiltersaturatenumberload()
        {
            const br = document.createElement("br");
            imagefiltersaturate.append(br);

            const input = document.createElement("input");
            input.id = "imagefiltersaturatenumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", imagefiltersaturatenumberupdate);
            imagefiltersaturate.append(input);

            //imagefiltersaturatenumberset();
        }
        addEventListener("load", imagefiltersaturatenumberload);

        function imagefiltersaturatenumberset()
        {
            const v = imagefiltersaturatenumber.value;

            imagefiltersaturaterange.value = v;
            image.filtersaturate = v;
        }

        function imagefiltersaturatenumberupdate()
        {
            imagefiltersaturatenumberset();
            svgupdate();
        }

        function imagefiltersaturaterangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefiltersaturaterange";
            input.max = imagefiltersaturatenumber.max;
            input.min = imagefiltersaturatenumber.min;
            input.step = imagefiltersaturatenumber.step;
            input.type = "range";
            input.value = imagefiltersaturatenumber.value;
            input.addEventListener("input", imagefiltersaturaterangeupdate);
            imagefiltersaturate.append(input);

            imagefiltersaturaterangeset();
        }
        addEventListener("load", imagefiltersaturaterangeload);

        function imagefiltersaturaterangeset()
        {
            const v = imagefiltersaturaterange.value;

            imagefiltersaturatenumber.value = v;
            image.filtersaturate = v;
        }

        function imagefiltersaturaterangeupdate()
        {
            imagefiltersaturaterangeset();
            svgupdate();
        }

        function imagefiltersaturateexactload()
        {
            const br = document.createElement("br");
            imagefiltersaturate.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltersaturateexactupdate);
                imagefiltersaturate.append(button);
            }
        }
        addEventListener("load", imagefiltersaturateexactload);

        function imagefiltersaturateexactupdate(e)
        {
            imagefiltersaturatenumber.value = Number(e.target.value);

            imagefiltersaturatenumberupdate();
        }

        function imagefiltersaturateincrementload()
        {
            const br = document.createElement("br");
            imagefiltersaturate.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltersaturateincrementupdate);
                imagefiltersaturate.append(button);
            }
        }
        addEventListener("load", imagefiltersaturateincrementload);

        function imagefiltersaturateincrementupdate(e)
        {
            const v = Number(imagefiltersaturatenumber.value) + Number(e.target.value);

            if((imagefiltersaturatenumber.min <= v) && (v <= imagefiltersaturatenumber.max))
            {
                imagefiltersaturatenumber.value = v;

                imagefiltersaturatenumberupdate();
            }
        }



        function imagefiltersepiaload()
        {
            const div = document.createElement("div");
            div.id = "imagefiltersepia";
            div.innerHTML = "filter-sepia";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefiltersepiaload);

        function imagefiltersepianumberload()
        {
            const br = document.createElement("br");
            imagefiltersepia.append(br);

            const input = document.createElement("input");
            input.id = "imagefiltersepianumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagefiltersepianumberupdate);
            imagefiltersepia.append(input);

            //imagefiltersepianumberset();
        }
        addEventListener("load", imagefiltersepianumberload);

        function imagefiltersepianumberset()
        {
            const v = imagefiltersepianumber.value;

            imagefiltersepiarange.value = v;
            image.filtersepia = v;
        }

        function imagefiltersepianumberupdate()
        {
            imagefiltersepianumberset();
            svgupdate();
        }

        function imagefiltersepiarangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefiltersepiarange";
            input.max = imagefiltersepianumber.max;
            input.min = imagefiltersepianumber.min;
            input.step = imagefiltersepianumber.step;
            input.type = "range";
            input.value = imagefiltersepianumber.value;
            input.addEventListener("input", imagefiltersepiarangeupdate);
            imagefiltersepia.append(input);

            imagefiltersepiarangeset();
        }
        addEventListener("load", imagefiltersepiarangeload);

        function imagefiltersepiarangeset()
        {
            const v = imagefiltersepiarange.value;

            imagefiltersepianumber.value = v;
            image.filtersepia = v;
        }

        function imagefiltersepiarangeupdate()
        {
            imagefiltersepiarangeset();
            svgupdate();
        }

        function imagefiltersepiaexactload()
        {
            const br = document.createElement("br");
            imagefiltersepia.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltersepiaexactupdate);
                imagefiltersepia.append(button);
            }
        }
        addEventListener("load", imagefiltersepiaexactload);

        function imagefiltersepiaexactupdate(e)
        {
            imagefiltersepianumber.value = Number(e.target.value);

            imagefiltersepianumberupdate();
        }

        function imagefiltersepiaincrementload()
        {
            const br = document.createElement("br");
            imagefiltersepia.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltersepiaincrementupdate);
                imagefiltersepia.append(button);
            }
        }
        addEventListener("load", imagefiltersepiaincrementload);

        function imagefiltersepiaincrementupdate(e)
        {
            const v = Number(imagefiltersepianumber.value) + Number(e.target.value);

            if((imagefiltersepianumber.min <= v) && (v <= imagefiltersepianumber.max))
            {
                imagefiltersepianumber.value = v;

                imagefiltersepianumberupdate();
            }
        }



/*
        function imagemargintopload()
        {
            const div = document.createElement("div");
            div.id = "imagemargintop";
            div.innerHTML = "margin-top";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagemargintopload);

        function imagemargintopnumberload()
        {
            const br = document.createElement("br");
            imagemargintop.append(br);

            const input = document.createElement("input");
            input.id = "imagemargintopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagemargintopnumberupdate);
            imagemargintop.append(input);

            //imagemargintopnumberset();
        }
        addEventListener("load", imagemargintopnumberload);

        function imagemargintopnumberset()
        {
            const v = Number(imagemargintopnumber.value);

            imagemargintoprange.value = v;
            image.margintop = v;
        }

        function imagemargintopnumberupdate()
        {
            imagemargintopnumberset();

            svgupdate();
        }

        function imagemargintoprangeload()
        {
            const input = document.createElement("input");
            input.id = "imagemargintoprange";
            input.max = imagemargintopnumber.max;
            input.min = imagemargintopnumber.min;
            input.type = "range";
            input.value = imagemargintopnumber.value;
            input.addEventListener("input", imagemargintoprangeupdate);
            imagemargintop.append(input);

            imagemargintoprangeset();
        }
        addEventListener("load", imagemargintoprangeload);

        function imagemargintoprangeset()
        {
            const v = Number(imagemargintoprange.value);

            imagemargintopnumber.value = v;
            image.margintop = v;
        }

        function imagemargintoprangeupdate()
        {
            imagemargintoprangeset();

            svgupdate();
        }



        function imagemarginbottomload()
        {
            const div = document.createElement("div");
            div.id = "imagemarginbottom";
            div.innerHTML = "margin-bottom";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagemarginbottomload);

        function imagemarginbottomnumberload()
        {
            const br = document.createElement("br");
            imagemarginbottom.append(br);

            const input = document.createElement("input");
            input.id = "imagemarginbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagemarginbottomnumberupdate);
            imagemarginbottom.append(input);

            //imagemarginbottomnumberset();
        }
        addEventListener("load", imagemarginbottomnumberload);

        function imagemarginbottomnumberset()
        {
            const v = Number(imagemarginbottomnumber.value);

            imagemarginbottomrange.value = v;
            image.marginbottom = v;
        }

        function imagemarginbottomnumberupdate()
        {
            imagemarginbottomnumberset();

            svgupdate();
        }

        function imagemarginbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagemarginbottomrange";
            input.max = imagemarginbottomnumber.max;
            input.min = imagemarginbottomnumber.min;
            input.type = "range";
            input.value = imagemarginbottomnumber.value;
            input.addEventListener("input", imagemarginbottomrangeupdate);
            imagemarginbottom.append(input);

            imagemarginbottomrangeset();
        }
        addEventListener("load", imagemarginbottomrangeload);

        function imagemarginbottomrangeset()
        {
            const v = Number(imagemarginbottomrange.value);

            imagemarginbottomnumber.value = v;
            image.marginbottom = v;
        }

        function imagemarginbottomrangeupdate()
        {
            imagemarginbottomrangeset();

            svgupdate();
        }



        function imagemarginleftload()
        {
            const div = document.createElement("div");
            div.id = "imagemarginleft";
            div.innerHTML = "margin-left";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagemarginleftload);

        function imagemarginleftnumberload()
        {
            const br = document.createElement("br");
            imagemarginleft.append(br);

            const input = document.createElement("input");
            input.id = "imagemarginleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagemarginleftnumberupdate);
            imagemarginleft.append(input);

            //imagemarginleftnumberset();
        }
        addEventListener("load", imagemarginleftnumberload);

        function imagemarginleftnumberset()
        {
            const v = Number(imagemarginleftnumber.value);

            imagemarginleftrange.value = v;
            image.marginleft = v;
        }

        function imagemarginleftnumberupdate()
        {
            imagemarginleftnumberset();

            svgupdate();
        }

        function imagemarginleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagemarginleftrange";
            input.max = imagemarginleftnumber.max;
            input.min = imagemarginleftnumber.min;
            input.type = "range";
            input.value = imagemarginleftnumber.value;
            input.addEventListener("input", imagemarginleftrangeupdate);
            imagemarginleft.append(input);

            imagemarginleftrangeset();
        }
        addEventListener("load", imagemarginleftrangeload);

        function imagemarginleftrangeset()
        {
            const v = Number(imagemarginleftrange.value);

            imagemarginleftnumber.value = v;
            image.marginleft = v;
        }

        function imagemarginleftrangeupdate()
        {
            imagemarginleftrangeset();

            svgupdate();
        }



        function imagemarginrightload()
        {
            const div = document.createElement("div");
            div.id = "imagemarginright";
            div.innerHTML = "margin-right";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagemarginrightload);

        function imagemarginrightnumberload()
        {
            const br = document.createElement("br");
            imagemarginright.append(br);

            const input = document.createElement("input");
            input.id = "imagemarginrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagemarginrightnumberupdate);
            imagemarginright.append(input);

            //imagemarginrightnumberset();
        }
        addEventListener("load", imagemarginrightnumberload);

        function imagemarginrightnumberset()
        {
            const v = Number(imagemarginrightnumber.value);

            imagemarginrightrange.value = v;
            image.marginright = v;
        }

        function imagemarginrightnumberupdate()
        {
            imagemarginrightnumberset();

            svgupdate();
        }

        function imagemarginrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagemarginrightrange";
            input.max = imagemarginrightnumber.max;
            input.min = imagemarginrightnumber.min;
            input.type = "range";
            input.value = imagemarginrightnumber.value;

            input.addEventListener("input", imagemarginrightrangeupdate);
            imagemarginright.append(input);

            imagemarginrightrangeset();
        }
        addEventListener("load", imagemarginrightrangeload);

        function imagemarginrightrangeset()
        {
            const v = Number(imagemarginrightrange.value);

            imagemarginrightnumber.value = v;
            image.marginright = v;
        }

        function imagemarginrightrangeupdate()
        {
            imagemarginrightrangeset();

            svgupdate();
        }



        function imagepaddingtopload()
        {
            const div = document.createElement("div");
            div.id = "imagepaddingtop";
            div.innerHTML = "padding-top";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagepaddingtopload);

        function imagepaddingtopnumberload()
        {
            const br = document.createElement("br");
            imagepaddingtop.append(br);

            const input = document.createElement("input");
            input.id = "imagepaddingtopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagepaddingtopnumberupdate);
            imagepaddingtop.append(input);

            //imagepaddingtopnumberset();
        }
        addEventListener("load", imagepaddingtopnumberload);

        function imagepaddingtopnumberset()
        {
            const v = Number(imagepaddingtopnumber.value);

            imagepaddingtoprange.value = v;
            image.paddingtop = v;
        }

        function imagepaddingtopnumberupdate()
        {
            imagepaddingtopnumberset();

            svgupdate();
        }

        function imagepaddingtoprangeload()
        {
            const input = document.createElement("input");
            input.id = "imagepaddingtoprange";
            input.max = imagepaddingtopnumber.max;
            input.min = imagepaddingtopnumber.min;
            input.type = "range";
            input.value = imagepaddingtopnumber.value;
            input.addEventListener("input", imagepaddingtoprangeupdate);
            imagepaddingtop.append(input);

            imagepaddingtoprangeset();
        }
        addEventListener("load", imagepaddingtoprangeload);

        function imagepaddingtoprangeset()
        {
            const v = Number(imagepaddingtoprange.value);

            imagepaddingtopnumber.value = v;
            image.paddingtop = v;
        }

        function imagepaddingtoprangeupdate()
        {
            imagepaddingtoprangeset();

            svgupdate();
        }



        function imagepaddingbottomload()
        {
            const div = document.createElement("div");
            div.id = "imagepaddingbottom";
            div.innerHTML = "padding-bottom";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagepaddingbottomload);

        function imagepaddingbottomnumberload()
        {
            const br = document.createElement("br");
            imagepaddingbottom.append(br);

            const input = document.createElement("input");
            input.id = "imagepaddingbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagepaddingbottomnumberupdate);
            imagepaddingbottom.append(input);

            //imagepaddingbottomnumberset();
        }
        addEventListener("load", imagepaddingbottomnumberload);

        function imagepaddingbottomnumberset()
        {
            const v = Number(imagepaddingbottomnumber.value);

            imagepaddingbottomrange.value = v;
            image.paddingbottom = v;
        }

        function imagepaddingbottomnumberupdate()
        {
            imagepaddingbottomnumberset();

            svgupdate();
        }

        function imagepaddingbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagepaddingbottomrange";
            input.max = imagepaddingbottomnumber.max;
            input.min = imagepaddingbottomnumber.min;
            input.type = "range";
            input.value = imagepaddingbottomnumber.value;
            input.addEventListener("input", imagepaddingbottomrangeupdate);
            imagepaddingbottom.append(input);

            imagepaddingbottomrangeset();
        }
        addEventListener("load", imagepaddingbottomrangeload);

        function imagepaddingbottomrangeset()
        {
            const v = Number(imagepaddingbottomrange.value);

            imagepaddingbottomnumber.value = v;
            image.paddingbottom = v;
        }

        function imagepaddingbottomrangeupdate()
        {
            imagepaddingbottomrangeset();

            svgupdate();
        }



        function imagepaddingleftload()
        {
            const div = document.createElement("div");
            div.id = "imagepaddingleft";
            div.innerHTML = "padding-left";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagepaddingleftload);

        function imagepaddingleftnumberload()
        {
            const br = document.createElement("br");
            imagepaddingleft.append(br);

            const input = document.createElement("input");
            input.id = "imagepaddingleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagepaddingleftnumberupdate);
            imagepaddingleft.append(input);

            //imagepaddingleftnumberset();
        }
        addEventListener("load", imagepaddingleftnumberload);

        function imagepaddingleftnumberset()
        {
            const v = Number(imagepaddingleftnumber.value);

            imagepaddingleftrange.value = v;
            image.paddingleft = v;
        }

        function imagepaddingleftnumberupdate()
        {
            imagepaddingleftnumberset();

            svgupdate();
        }

        function imagepaddingleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagepaddingleftrange";
            input.max = imagepaddingleftnumber.max;
            input.min = imagepaddingleftnumber.min;
            input.type = "range";
            input.value = imagepaddingleftnumber.value;
            input.addEventListener("input", imagepaddingleftrangeupdate);
            imagepaddingleft.append(input);

            imagepaddingleftrangeset();
        }
        addEventListener("load", imagepaddingleftrangeload);

        function imagepaddingleftrangeset()
        {
            const v = Number(imagepaddingleftrange.value);

            imagepaddingleftnumber.value = v;
            image.paddingleft = v;
        }

        function imagepaddingleftrangeupdate()
        {
            imagepaddingleftrangeset();

            svgupdate();
        }



        function imagepaddingrightload()
        {
            const div = document.createElement("div");
            div.id = "imagepaddingright";
            div.innerHTML = "padding-right";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagepaddingrightload);

        function imagepaddingrightnumberload()
        {
            const br = document.createElement("br");
            imagepaddingright.append(br);

            const input = document.createElement("input");
            input.id = "imagepaddingrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagepaddingrightnumberupdate);
            imagepaddingright.append(input);

            //imagepaddingrightnumberset();
        }
        addEventListener("load", imagepaddingrightnumberload);

        function imagepaddingrightnumberset()
        {
            const v = Number(imagepaddingrightnumber.value);

            imagepaddingrightrange.value = v;
            image.paddingright = v;
        }

        function imagepaddingrightnumberupdate()
        {
            imagepaddingrightnumberset();

            svgupdate();
        }

        function imagepaddingrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagepaddingrightrange";
            input.max = imagepaddingrightnumber.max;
            input.min = imagepaddingrightnumber.min;
            input.type = "range";
            input.value = imagepaddingrightnumber.value;
            input.addEventListener("input", imagepaddingrightrangeupdate);
            imagepaddingright.append(input);

            imagepaddingrightrangeset();
        }
        addEventListener("load", imagepaddingrightrangeload);

        function imagepaddingrightrangeset()
        {
            const v = Number(imagepaddingrightrange.value);

            imagepaddingrightnumber.value = v;
            image.paddingright = v;
        }

        function imagepaddingrightrangeupdate()
        {
            imagepaddingrightrangeset();

            svgupdate();
        }
//*/






        function messagetextload()
        {
            const div = document.createElement("div");
            div.id = "messagetext";
            div.innerHTML = "text";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagetextload);

        function messagetexttextareaload()
        {
            const br = document.createElement("br");
            messagetext.append(br);

            const textarea = document.createElement("textarea");
            textarea.id = "messagetexttextarea";
            textarea.addEventListener("input", messagetexttextareaupdate);
            messagetext.append(textarea);

            textarea.value = "Jesus loves you!";

            messagetexttextareaset();
        }
        addEventListener("load", messagetexttextareaload);

        function messagetexttextareaset()
        {
            text.messagetext = messagetexttextarea.value;
        }

        function messagetexttextareaupdate()
        {
            messagetexttextareaset();
            svgupdate();
        }



        function messagewidthload()
        {
            const div = document.createElement("div");
            div.id = "messagewidth";
            div.innerHTML = "width";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagewidthload);

        function messagewidthnumberload()
        {
            const br = document.createElement("br");
            messagewidth.append(br);

            const input = document.createElement("input");
            input.id = "messagewidthnumber";
            input.max = maxwidth;
            input.min = 0;
            input.type = "number";
            input.value = canvas.width - 100;
            input.addEventListener("input", messagewidthnumberupdate);
            messagewidth.append(input);

            //messagewidthnumberset();
        }
        addEventListener("load", messagewidthnumberload);

        function messagewidthnumberset()
        {
            const v = Number(messagewidthnumber.value);

            messagewidthrange.value = v;
            text.messagewidth = v;
        }

        function messagewidthnumberupdate()
        {
            messagewidthnumberset();
            svgupdate();
        }

        function messagewidthrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagewidthrange";
            input.max = messagewidthnumber.max;
            input.min = messagewidthnumber.min;
            input.type = "range";
            input.value = messagewidthnumber.value;
            input.addEventListener("input", messagewidthrangeupdate);
            messagewidth.append(input);

            messagewidthrangeset();
        }
        addEventListener("load", messagewidthrangeload);

        function messagewidthrangeset()
        {
            const v = Number(messagewidthrange.value);

            messagewidthnumber.value = v;
            text.messagewidth = v;
        }

        function messagewidthrangeupdate()
        {
            messagewidthrangeset();
            svgupdate();
        }

        function messagewidthexactload()
        {
            const br = document.createElement("br");
            messagewidth.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagewidthexactupdate);
                messagewidth.append(button);
            }
        }
        addEventListener("load", messagewidthexactload);

        function messagewidthexactupdate(e)
        {
            messagewidthnumber.value = canvas.width * Number(e.target.value);

            messagewidthnumberupdate();
        }

        function messagewidthincrementload()
        {
            const br = document.createElement("br");
            messagewidth.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagewidthincrementupdate);
                messagewidth.append(button);
            }
        }
        addEventListener("load", messagewidthincrementload);

        function messagewidthincrementupdate(e)
        {
            const v = Number(messagewidthnumber.value) + Number(e.target.value);

            if((messagewidthnumber.min <= v) && (v <= messagewidthnumber.max))
            {
                messagewidthnumber.value = v;

                messagewidthnumberupdate();
            }
        }



        function messageheightload()
        {
            const div = document.createElement("div");
            div.id = "messageheight";
            div.innerHTML = "height";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messageheightload);

        function messageheightnumberload()
        {
            const br = document.createElement("br");
            messageheight.append(br);

            const input = document.createElement("input");
            input.id = "messageheightnumber";
            input.max = maxheight;
            input.min = 0;
            input.type = "number";
            input.value = 300;
            input.addEventListener("input", messageheightnumberupdate);
            messageheight.append(input);

            //messageheightnumberset();
        }
        addEventListener("load", messageheightnumberload);

        function messageheightnumberset()
        {
            const v = Number(messageheightnumber.value);

            messageheightrange.value = v;
            text.messageheight = v;
        }

        function messageheightnumberupdate()
        {
            messageheightnumberset();
            svgupdate();
        }

        function messageheightrangeload()
        {
            const input = document.createElement("input");
            input.id = "messageheightrange";
            input.max = messageheightnumber.max;
            input.min = messageheightnumber.min;
            input.type = "range";
            input.value = messageheightnumber.value;
            input.addEventListener("input", messageheightrangeupdate);
            messageheight.append(input);

            messageheightrangeset();
        }
        addEventListener("load", messageheightrangeload);

        function messageheightrangeset()
        {
            const v = Number(messageheightrange.value);

            messageheightnumber.value = v;
            text.messageheight = v;
        }

        function messageheightrangeupdate()
        {
            messageheightrangeset();
            svgupdate();
        }

        function messageheightexactload()
        {
            const br = document.createElement("br");
            messageheight.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageheightexactupdate);
                messageheight.append(button);
            }
        }
        addEventListener("load", messageheightexactload);

        function messageheightexactupdate(e)
        {
            messageheightnumber.value = canvas.height * Number(e.target.value);

            messageheightnumberupdate();
        }

        function messageheightincrementload()
        {
            const br = document.createElement("br");
            messageheight.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageheightincrementupdate);
                messageheight.append(button);
            }
        }
        addEventListener("load", messageheightincrementload);

        function messageheightincrementupdate(e)
        {
            const v = Number(messageheightnumber.value) + Number(e.target.value);

            if((messageheightnumber.min <= v) && (v <= messageheightnumber.max))
            {
                messageheightnumber.value = v;

                messageheightnumberupdate();
            }
        }



        function messagexload()
        {
            const div = document.createElement("div");
            div.id = "messagex";
            div.innerHTML = "x";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagexload);

        function messagexnumberload()
        {
            const br = document.createElement("br");
            messagex.append(br);

            const input = document.createElement("input");
            input.id = "messagexnumber";
            input.max = maxwidth;
            input.min = -maxwidth;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", messagexnumberupdate);
            messagex.append(input);

            //messagexnumberset();
        }
        addEventListener("load", messagexnumberload);

        function messagexnumberset()
        {
            const v = Number(messagexnumber.value);

            messagexrange.value = v;
            text.messagex = v;
        }

        function messagexnumberupdate()
        {
            messagexnumberset();
            svgupdate();
        }

        function messagexrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagexrange";
            input.max = messagexnumber.max;
            input.min = messagexnumber.min;
            input.type = "range";
            input.value = messagexnumber.value;
            input.addEventListener("input", messagexrangeupdate);
            messagex.append(input);

            messagexrangeset();
        }
        addEventListener("load", messagexrangeload);

        function messagexrangeset()
        {
            const v = Number(messagexrange.value);

            messagexnumber.value = v;
            text.messagex = v;
        }

        function messagexrangeupdate()
        {
            messagexrangeset();
            svgupdate();
        }

        function messagexexactload()
        {
            const br = document.createElement("br");
            messagex.append(br);

            const array =
            [
                ["left",0],
                ["center",0.5],
                ["right",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagexexactupdate);
                messagex.append(button);
            }
        }
        addEventListener("load", messagexexactload);

        function messagexexactupdate(e)
        {
            //messagexnumber.value = (canvas.width - text.messagewidth - text.messagepaddingleft - text.messagepaddingright) * Number(e.target.value);
            messagexnumber.value = (canvas.width - text.messagewidth) * Number(e.target.value);

            messagexnumberupdate();
        }

        function messagexincrementload()
        {
            const br = document.createElement("br");
            messagex.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagexincrementupdate);
                messagex.append(button);
            }
        }
        addEventListener("load", messagexincrementload);

        function messagexincrementupdate(e)
        {
            const v = Number(messagexnumber.value) + Number(e.target.value);

            if((messagexnumber.min <= v) && (v <= messagexnumber.max))
            {
                messagexnumber.value = v;

                messagexnumberupdate();
            }
        }



        function messageyload()
        {
            const div = document.createElement("div");
            div.id = "messagey";
            div.innerHTML = "y";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messageyload);

        function messageynumberload()
        {
            const br = document.createElement("br");
            messagey.append(br);

            const input = document.createElement("input");
            input.id = "messageynumber";
            input.max = maxheight;
            input.min = -maxheight;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", messageynumberupdate);
            messagey.append(input);

            //messageynumberset();
        }
        addEventListener("load", messageynumberload);

        function messageynumberset()
        {
            const v = Number(messageynumber.value);

            messageyrange.value = v;
            text.messagey = v;
        }

        function messageynumberupdate()
        {
            messageynumberset();
            svgupdate();
        }

        function messageyrangeload()
        {
            const input = document.createElement("input");
            input.id = "messageyrange";
            input.max = messageynumber.max;
            input.min = messageynumber.min;
            input.type = "range";
            input.value = messageynumber.value;
            input.addEventListener("input", messageyrangeupdate);
            messagey.append(input);

            messageyrangeset();
        }
        addEventListener("load", messageyrangeload);

        function messageyrangeset()
        {
            const v = Number(messageyrange.value);

            messageynumber.value = v;
            text.messagey = v;
        }

        function messageyrangeupdate()
        {
            messageyrangeset();
            svgupdate();
        }

        function messageyexactload()
        {
            const br = document.createElement("br");
            messagey.append(br);

            const array =
            [
                ["top",0],
                ["center",0.5],
                ["bottom",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageyexactupdate);
                messagey.append(button);
            }
        }
        addEventListener("load", messageyexactload);

        function messageyexactupdate(e)
        {
            //messageynumber.value = (canvas.height - text.messageheight - text.messagepaddingtop - text.messagepaddingbottom) * Number(e.target.value);
            messageynumber.value = (canvas.height - text.messageheight) * Number(e.target.value);

            messageynumberupdate();
        }

        function messageyincrementload()
        {
            const br = document.createElement("br");
            messagey.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageyincrementupdate);
                messagey.append(button);
            }
        }
        addEventListener("load", messageyincrementload);

        function messageyincrementupdate(e)
        {
            const v = Number(messageynumber.value) + Number(e.target.value);

            if((messageynumber.min <= v) && (v <= messageynumber.max))
            {
                messageynumber.value = v;

                messageynumberupdate();
            }
        }



        function messagebackgroundcolorload()
        {
            const div = document.createElement("div");
            div.id = "messagebackgroundcolor";
            div.innerHTML = "background-color";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagebackgroundcolorload);

        function messagebackgroundcolorcolorload()
        {
            const br = document.createElement("br");
            messagebackgroundcolor.append(br);

            const input = document.createElement("input");
            input.id = "messagebackgroundcolorcolor";
            input.type = "color";
            input.value = "#ffffff";
            input.addEventListener("input", messagebackgroundcolorcolorupdate);
            messagebackgroundcolor.append(input);

            //messagebackgroundcolorcolorset();
        }
        addEventListener("load", messagebackgroundcolorcolorload);

        function messagebackgroundcolorcolorset()
        {
            const c = messagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagebackgroundalphanumber.value;

            text.messagebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagebackgroundcolorcolorupdate()
        {
            messagebackgroundcolorcolorset();
            svgupdate();
        }

        function messagebackgroundcolorexactload()
        {
            const br = document.createElement("br");
            messagebackgroundcolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagebackgroundcolorexactupdate);
                messagebackgroundcolor.append(button);
            }
        }
        addEventListener("load", messagebackgroundcolorexactload);

        function messagebackgroundcolorexactupdate(e)
        {
            messagebackgroundcolorcolor.value = e.target.value;

            messagebackgroundcolorcolorupdate();
        }



        function messagebackgroundalphaload()
        {
            const div = document.createElement("div");
            div.id = "messagebackgroundalpha";
            div.innerHTML = "background-alpha";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagebackgroundalphaload);

        function messagebackgroundalphanumberload()
        {
            const br = document.createElement("br");
            messagebackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "messagebackgroundalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 0.5;
            input.addEventListener("input", messagebackgroundalphanumberupdate);
            messagebackgroundalpha.append(input);

            //messagebackgroundalphanumberset();
        }
        addEventListener("load", messagebackgroundalphanumberload);

        function messagebackgroundalphanumberset()
        {
            const c = messagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagebackgroundalphanumber.value;

            messagebackgroundalpharange.value = a;
            text.messagebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagebackgroundalphanumberupdate()
        {
            messagebackgroundalphanumberset();
            svgupdate();
        }

        function messagebackgroundalpharangeload()
        {
            const input = document.createElement("input");
            input.id = "messagebackgroundalpharange";
            input.max = messagebackgroundalphanumber.max;
            input.min = messagebackgroundalphanumber.min;
            input.step = messagebackgroundalphanumber.step;
            input.type = "range";
            input.value = messagebackgroundalphanumber.value;
            input.addEventListener("input", messagebackgroundalpharangeupdate);
            messagebackgroundalpha.append(input);

            messagebackgroundalpharangeset();
        }
        addEventListener("load", messagebackgroundalpharangeload);

        function messagebackgroundalpharangeset()
        {
            const c = messagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagebackgroundalpharange.value;

            messagebackgroundalphanumber.value = a;
            text.messagebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagebackgroundalpharangeupdate()
        {
            messagebackgroundalpharangeset();
            svgupdate();
        }

        function messagebackgroundalphaexactload()
        {
            const br = document.createElement("br");
            messagebackgroundalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagebackgroundalphaexactupdate);
                messagebackgroundalpha.append(button);
            }
        }
        addEventListener("load", messagebackgroundalphaexactload);

        function messagebackgroundalphaexactupdate(e)
        {
            messagebackgroundalphanumber.value = Number(e.target.value);

            messagebackgroundalphanumberupdate();
        }

        function messagebackgroundalphaincrementload()
        {
            const br = document.createElement("br");
            messagebackgroundalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagebackgroundalphaincrementupdate);
                messagebackgroundalpha.append(button);
            }
        }
        addEventListener("load", messagebackgroundalphaincrementload);

        function messagebackgroundalphaincrementupdate(e)
        {
            let v = Number(messagebackgroundalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((messagebackgroundalphanumber.min <= v) && (v <= messagebackgroundalphanumber.max))
            {
                messagebackgroundalphanumber.value = v;

                messagebackgroundalphanumberupdate();
            }
        }



        function messagebordercolorload()
        {
            const div = document.createElement("div");
            div.id = "messagebordercolor";
            div.innerHTML = "border-color";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagebordercolorload);

        function messagebordercolorcolorload()
        {
            const br = document.createElement("br");
            messagebordercolor.append(br);

            const input = document.createElement("input");
            input.id = "messagebordercolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", messagebordercolorcolorupdate);
            messagebordercolor.append(input);

            //messagebordercolorcolorset();
        }
        addEventListener("load", messagebordercolorcolorload);

        function messagebordercolorcolorset()
        {
            const c = messagebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messageborderalphanumber.value;

            text.messagebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagebordercolorcolorupdate()
        {
            messagebordercolorcolorset();
            svgupdate();
        }

        function messagebordercolorexactload()
        {
            const br = document.createElement("br");
            messagebordercolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagebordercolorexactupdate);
                messagebordercolor.append(button);
            }
        }
        addEventListener("load", messagebordercolorexactload);

        function messagebordercolorexactupdate(e)
        {
            messagebordercolorcolor.value = e.target.value;

            messagebordercolorcolorupdate();
        }



        function messageborderalphaload()
        {
            const div = document.createElement("div");
            div.id = "messageborderalpha";
            div.innerHTML = "border-alpha";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messageborderalphaload);

        function messageborderalphanumberload()
        {
            const br = document.createElement("br");
            messageborderalpha.append(br);

            const input = document.createElement("input");
            input.id = "messageborderalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", messageborderalphanumberupdate);
            messageborderalpha.append(input);

            //messageborderalphanumberset();
        }
        addEventListener("load", messageborderalphanumberload);

        function messageborderalphanumberset()
        {
            const c = messagebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messageborderalphanumber.value;

            messageborderalpharange.value = a;
            text.messagebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messageborderalphanumberupdate()
        {
            messageborderalphanumberset();
            svgupdate();
        }

        function messageborderalpharangeload()
        {
            const input = document.createElement("input");
            input.id = "messageborderalpharange";
            input.max = messageborderalphanumber.max;
            input.min = messageborderalphanumber.min;
            input.step = messageborderalphanumber.step;
            input.type = "range";
            input.value = messageborderalphanumber.value;
            input.addEventListener("input", messageborderalpharangeupdate);
            messageborderalpha.append(input);

            messageborderalpharangeset();
        }
        addEventListener("load", messageborderalpharangeload);

        function messageborderalpharangeset()
        {
            const c = messagebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messageborderalpharange.value;

            messageborderalphanumber.value = a;
            text.messagebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messageborderalpharangeupdate()
        {
            messageborderalpharangeset();
            svgupdate();
        }

        function messageborderalphaexactload()
        {
            const br = document.createElement("br");
            messageborderalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderalphaexactupdate);
                messageborderalpha.append(button);
            }
        }
        addEventListener("load", messageborderalphaexactload);

        function messageborderalphaexactupdate(e)
        {
            messageborderalphanumber.value = Number(e.target.value);

            messageborderalphanumberupdate();
        }

        function messageborderalphaincrementload()
        {
            const br = document.createElement("br");
            messageborderalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderalphaincrementupdate);
                messageborderalpha.append(button);
            }
        }
        addEventListener("load", messageborderalphaincrementload);

        function messageborderalphaincrementupdate(e)
        {
            let v = Number(messageborderalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((messageborderalphanumber.min <= v) && (v <= messageborderalphanumber.max))
            {
                messageborderalphanumber.value = v;

                messageborderalphanumberupdate();
            }
        }



        function messageborderradiusload()
        {
            const div = document.createElement("div");
            div.id = "messageborderradius";
            div.innerHTML = "border-radius";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messageborderradiusload);

        function messageborderradiusnumberload()
        {
            const br = document.createElement("br");
            messageborderradius.append(br);

            const input = document.createElement("input");
            input.id = "messageborderradiusnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", messageborderradiusnumberupdate);
            messageborderradius.append(input);

            //messageborderradiusnumberset();
        }
        addEventListener("load", messageborderradiusnumberload);

        function messageborderradiusnumberset()
        {
            const v = Number(messageborderradiusnumber.value);

            messageborderradiusrange.value = v;
            text.messageborderradius = v;
        }

        function messageborderradiusnumberupdate()
        {
            messageborderradiusnumberset();
            svgupdate();
        }

        function messageborderradiusrangeload()
        {
            const input = document.createElement("input");
            input.id = "messageborderradiusrange";
            input.max = messageborderradiusnumber.max;
            input.min = messageborderradiusnumber.min;
            input.type = "range";
            input.value = messageborderradiusnumber.value;
            input.addEventListener("input", messageborderradiusrangeupdate);
            messageborderradius.append(input);

            messageborderradiusrangeset();
        }
        addEventListener("load", messageborderradiusrangeload);

        function messageborderradiusrangeset()
        {
            const v = Number(messageborderradiusrange.value);

            messageborderradiusnumber.value = v;
            text.messageborderradius = v;
        }

        function messageborderradiusrangeupdate()
        {
            messageborderradiusrangeset();
            svgupdate();
        }

        function messageborderradiusexactload()
        {
            const br = document.createElement("br");
            messageborderradius.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderradiusexactupdate);
                messageborderradius.append(button);
            }
        }
        addEventListener("load", messageborderradiusexactload);

        function messageborderradiusexactupdate(e)
        {
            messageborderradiusnumber.value = Number(e.target.value);

            messageborderradiusnumberupdate();
        }

        function messageborderradiusincrementload()
        {
            const br = document.createElement("br");
            messageborderradius.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderradiusincrementupdate);
                messageborderradius.append(button);
            }
        }
        addEventListener("load", messageborderradiusincrementload);

        function messageborderradiusincrementupdate(e)
        {
            const v = Number(messageborderradiusnumber.value) + Number(e.target.value);

            if((messageborderradiusnumber.min <= v) && (v <= messageborderradiusnumber.max))
            {
                messageborderradiusnumber.value = v;

                messageborderradiusnumberupdate();
            }
        }



        function messageborderstyleload()
        {
            const div = document.createElement("div");
            div.id = "messageborderstyle";
            div.innerHTML = "border-style";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messageborderstyleload);

        function messageborderstyleselectload()
        {
            const br = document.createElement("br");
            messageborderstyle.append(br);

            const select = document.createElement("select");
            select.id = "messageborderstyleselect";
            select.addEventListener("input", messageborderstyleselectupdate);
            messageborderstyle.append(select);

            for(const value of borderstylearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
    
10000
        }

            //select.value = borderstylearray[8];

            messageborderstyleselectset();
        }
        addEventListener("load", messageborderstyleselectload);

        function messageborderstyleselectset()
        {
            text.messageborderstyle = messageborderstyleselect.value;
        }

        function messageborderstyleselectupdate()
        {
            messageborderstyleselectset();
            svgupdate();
        }



        function messageborderwidthload()
        {
            const div = document.createElement("div");
            div.id = "messageborderwidth";
            div.innerHTML = "border-width";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messageborderwidthload);

        function messageborderwidthnumberload()
        {
            const br = document.createElement("br");
            messageborderwidth.append(br);

            const input = document.createElement("input");
            input.id = "messageborderwidthnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 25;
            input.addEventListener("input", messageborderwidthnumberupdate);
            messageborderwidth.append(input);

            //messageborderwidthnumberset();
        }
        addEventListener("load", messageborderwidthnumberload);

        function messageborderwidthnumberset()
        {
            const v = Number(messageborderwidthnumber.value);

            messageborderwidthrange.value = v;
            text.messageborderwidth = v;
        }

        function messageborderwidthnumberupdate()
        {
            messageborderwidthnumberset();
            svgupdate();
        }

        function messageborderwidthrangeload()
        {
            const input = document.createElement("input");
            input.id = "messageborderwidthrange";
            input.max = messageborderwidthnumber.max;
            input.min = messageborderwidthnumber.min;
            input.type = "range";
            input.value = messageborderwidthnumber.value;
            input.addEventListener("input", messageborderwidthrangeupdate);
            messageborderwidth.append(input);

            messageborderwidthrangeset();
        }
        addEventListener("load", messageborderwidthrangeload);

        function messageborderwidthrangeset()
        {
            const v = Number(messageborderwidthrange.value);

            messageborderwidthnumber.value = v;
            text.messageborderwidth = v;
        }

        function messageborderwidthrangeupdate()
        {
            messageborderwidthrangeset();
            svgupdate();
        }

        function messageborderwidthexactload()
        {
            const br = document.createElement("br");
            messageborderwidth.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderwidthexactupdate);
                messageborderwidth.append(button);
            }
        }
        addEventListener("load", messageborderwidthexactload);

        function messageborderwidthexactupdate(e)
        {
            messageborderwidthnumber.value = Number(e.target.value);

            messageborderwidthnumberupdate();
        }

        function messageborderwidthincrementload()
        {
            const br = document.createElement("br");
            messageborderwidth.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderwidthincrementupdate);
                messageborderwidth.append(button);
            }
        }
        addEventListener("load", messageborderwidthincrementload);

        function messageborderwidthincrementupdate(e)
        {
            const v = Number(messageborderwidthnumber.value) + Number(e.target.value);

            if((messageborderwidthnumber.min <= v) && (v <= messageborderwidthnumber.max))
            {
                messageborderwidthnumber.value = v;

                messageborderwidthnumberupdate();
            }
        }



        function messagehorizontalload()
        {
            const div = document.createElement("div");
            div.id = "messagehorizontal";
            div.innerHTML = "horizontal";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagehorizontalload);

        function messagehorizontalselectload()
        {
            const br = document.createElement("br");
            messagehorizontal.append(br);

            const select = document.createElement("select");
            select.id = "messagehorizontalselect";
            select.addEventListener("input", messagehorizontalselectupdate);
            messagehorizontal.append(select);

            for(const value of horizontalarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            select.value = horizontalarray[1];

            messagehorizontalselectset();
        }
        addEventListener("load", messagehorizontalselectload);

        function messagehorizontalselectset()
        {
            text.messagehorizontal = messagehorizontalselect.value;
        }

        function messagehorizontalselectupdate()
        {
            messagehorizontalselectset();
            svgupdate();
        }



        function messageverticalload()
        {
            const div = document.createElement("div");
            div.id = "messagevertical";
            div.innerHTML = "vertical";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messageverticalload);

        function messageverticalselectload()
        {
            const br = document.createElement("br");
            messagevertical.append(br);

            const select = document.createElement("select");
            select.id = "messageverticalselect";
            select.addEventListener("input", messageverticalselectupdate);
            messagevertical.append(select);

            for(const value of verticalarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            select.value = verticalarray[1];

            messageverticalselectset();
        }
        addEventListener("load", messageverticalselectload);

        function messageverticalselectset()
        {
            text.messagevertical = messageverticalselect.value;
        }

        function messageverticalselectupdate()
        {
            messageverticalselectset();
            svgupdate();
        }



        function messagewritingmodeload()
        {
            const div = document.createElement("div");
            div.id = "messagewritingmode";
            div.innerHTML = "writing-mode";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagewritingmodeload);

        function messagewritingmodeselectload()
        {
            const br = document.createElement("br");
            messagewritingmode.append(br);

            const select = document.createElement("select");
            select.id = "messagewritingmodeselect";
            select.addEventListener("input", messagewritingmodeselectupdate);
            messagewritingmode.append(select);

            for(const value of writingmodearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            messagewritingmodeselectset();
        }
        addEventListener("load", messagewritingmodeselectload);

        function messagewritingmodeselectset()
        {
            text.messagewritingmode = messagewritingmodeselect.value;
        }

        function messagewritingmodeselectupdate()
        {
            messagewritingmodeselectset();
            svgupdate();
        }



        function messagefontfamilyload()
        {
            const div = document.createElement("div");
            div.id = "messagefontfamily";
            div.innerHTML = "font-family";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagefontfamilyload);

        function messagefontfamilyselectload()
        {
            const br = document.createElement("br");
            messagefontfamily.append(br);

            const select = document.createElement("select");
            select.id = "messagefontfamilyselect";
            select.addEventListener("input", messagefontfamilyselectupdate);
            messagefontfamily.append(select);

            for(const value of fontfamilyarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            messagefontfamilyselectset();
        }
        addEventListener("load", messagefontfamilyselectload);

        function messagefontfamilyselectset()
        {
            text.messagefontfamily = messagefontfamilyselect.value;
        }

        function messagefontfamilyselectupdate()
        {
            messagefontfamilyselectset();
            svgupdate();
        }




function messagefontsizeload()
        {
            const div = document.createElement("div");
            div.id = "messagefontsize";
            div.innerHTML = "font-size";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagefontsizeload);

        function messagefontsizenumberload()
        {
            const br = document.createElement("br");
            messagefontsize.append(br);

            const input = document.createElement("input");
            input.id = "messagefontsizenumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 140;
            input.addEventListener("input", messagefontsizenumberupdate);
            messagefontsize.append(input);

            //messagefontsizenumberset();
        }
        addEventListener("load", messagefontsizenumberload);

        function messagefontsizenumberset()
        {
            const v = Number(messagefontsizenumber.value);

            messagefontsizerange.value = v;
            text.messagefontsize = v;
        }

        function messagefontsizenumberupdate()
        {
            messagefontsizenumberset();
            svgupdate();
        }

        function messagefontsizerangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefontsizerange";
            input.max = messagefontsizenumber.max;
            input.min = messagefontsizenumber.min;
            input.type = "range";
            input.value = messagefontsizenumber.value;
            input.addEventListener("input", messagefontsizerangeupdate);
            messagefontsize.append(input);

            messagefontsizerangeset();
        }
        addEventListener("load", messagefontsizerangeload);

        function messagefontsizerangeset()
        {
            const v = Number(messagefontsizerange.value);

            messagefontsizenumber.value = v;
            text.messagefontsize = v;
        }

        function messagefontsizerangeupdate()
        {
            messagefontsizerangeset();
            svgupdate();
        }

        function messagefontsizeexactload()
        {
            const br = document.createElement("br");
            messagefontsize.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefontsizeexactupdate);
                messagefontsize.append(button);
            }
        }
        addEventListener("load", messagefontsizeexactload);

        function messagefontsizeexactupdate(e)
        {
            messagefontsizenumber.value = Number(e.target.value);

            messagefontsizenumberupdate();
        }

        function messagefontsizeincrementload()
        {
            const br = document.createElement("br");
            messagefontsize.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefontsizeincrementupdate);
                messagefontsize.append(button);
            }
        }
        addEventListener("load", messagefontsizeincrementload);

        function messagefontsizeincrementupdate(e)
        {
            const v = Number(messagefontsizenumber.value) + Number(e.target.value);

            if((messagefontsizenumber.min <= v) && (v <= messagefontsizenumber.max))
            {
                messagefontsizenumber.value = v;

                messagefontsizenumberupdate();
            }
        }

/*
        function messagefontsizefitload()
        {
            const button = document.createElement("button");
            button.innerHTML = "fit";
            button.addEventListener("click", messagefontsizefitupdate);
            messagefontsize.append(button);
        }
        addEventListener("load", messagefontsizefitload);

        function messagefontsizefitupdate()
        {
            const t = document.createElement("div");
            messagefontsize.append(t);
            t.innerHTML = text.bookname;
            t.style.fontSize = `${messagefontsizenumber.value}px`;

            const h1 = text.messagewidth;
            const h2 = text.messageheight;
            const h3 = t.offsetWidth;
            const h4 = t.offsetHeight;
            const h5 = messagefontsizenumber.value;

            //const h4 = t.offsetParent;//t.style.fontSize;
            //const h5 = t.clientHeight;//text.style.height;
            //const h6 = text.height;
            //const h7 = text.getBoundingClientRect().height;
            //const h8 = text.style.lineHeight;
            //const h9 = canvas.getBoundingClientRect().height;
            console.log(h1, h2, h3, h4, h5);
            //t.hidden = true;

            if(h2 < h4)
            {
                messagefontsizenumber.value -= 1;
                messagefit();
            }

            messagefontsizenumberupdate();
        }
//*/



        function messagefontstyleload()
        {
            const div = document.createElement("div");
            div.id = "messagefontstyle";
            div.innerHTML = "font-style";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagefontstyleload);

        function messagefontstyleselectload()
        {
            const br = document.createElement("br");
            messagefontstyle.append(br);

            const select = document.createElement("select");
            select.id = "messagefontstyleselect";
            select.addEventListener("input", messagefontstyleselectupdate);
            messagefontstyle.append(select);

            for(const value of fontstylearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            messagefontstyleselectset();
        }
        addEventListener("load", messagefontstyleselectload);

        function messagefontstyleselectset()
        {
            text.messagefontstyle = messagefontstyleselect.value;
        }

        function messagefontstyleselectupdate()
        {
            messagefontstyleselectset();
            svgupdate();
        }



        function messagefontvariantload()
        {
            const div = document.createElement("div");
            div.id = "messagefontvariant";
            div.innerHTML = "font-variant";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagefontvariantload);

        function messagefontvariantselectload()
        {
            const br = document.createElement("br");
            messagefontvariant.append(br);

            const select = document.createElement("select");
            select.id = "messagefontvariantselect";
            select.addEventListener("input", messagefontvariantselectupdate);
            messagefontvariant.append(select);

            for(const value of fontvariantarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            messagefontvariantselectset();
        }
        addEventListener("load", messagefontvariantselectload);

        function messagefontvariantselectset()
        {
            text.messagefontvariant = messagefontvariantselect.value;
        }

        function messagefontvariantselectupdate()
        {
            messagefontvariantselectset();
            svgupdate();
        }



        function messagefontweightload()
        {
            const div = document.createElement("div");
            div.id = "messagefontweight";
            div.innerHTML = "font-weight";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagefontweightload);

        function messagefontweightselectload()
        {
            const br = document.createElement("br");
            messagefontweight.append(br);

            const select = document.createElement("select");
            select.id = "messagefontweightselect";
            select.addEventListener("input", messagefontweightselectupdate);
            messagefontweight.append(select);

            for(const value of fontweightarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            messagefontweightselectset();
        }
        addEventListener("load", messagefontweightselectload);

        function messagefontweightselectset()
        {
            text.messagefontweight = messagefontweightselect.value;
        }

        function messagefontweightselectupdate()
        {
            messagefontweightselectset();
            svgupdate();
        }



        function messagecolorload()
        {
            const div = document.createElement("div");
            div.id = "messagecolor";
            div.innerHTML = "color";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagecolorload);

        function messagecolorcolorload()
        {
            const br = document.createElement("br");
            messagecolor.append(br);

            const input = document.createElement("input");
            input.id = "messagecolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", messagecolorcolorupdate);
            messagecolor.append(input);

            //messagecolorcolorset();
        }
        addEventListener("load", messagecolorcolorload);

        function messagecolorcolorset()
        {
            const c = messagecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagealphanumber.value;

            text.messagecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagecolorcolorupdate()
        {
            messagecolorcolorset();
            svgupdate();
        }

        function messagecolorexactload()
        {
            const br = document.createElement("br");
            messagecolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagecolorexactupdate);
                messagecolor.append(button);
            }
        }
        addEventListener("load", messagecolorexactload);

        function messagecolorexactupdate(e)
        {
            messagecolorcolor.value = e.target.value;

            messagecolorcolorupdate();
        }



        function messagealphaload()
        {
            const div = document.createElement("div");
            div.id = "messagealpha";
            div.innerHTML = "alpha";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagealphaload);

        function messagealphanumberload()
        {
            const br = document.createElement("br");
            messagealpha.append(br);

            const input = document.createElement("input");
            input.id = "messagealphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", messagealphanumberupdate);
            messagealpha.append(input);

            //messagealphanumberset();
        }
        addEventListener("load", messagealphanumberload);

        function messagealphanumberset()
        {
            const c = messagecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagealphanumber.value;

            messagealpharange.value = a;
            text.messagecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagealphanumberupdate()
        {
            messagealphanumberset();
            svgupdate();
        }

        function messagealpharangeload()
        {
            const input = document.createElement("input");
            input.id = "messagealpharange";
            input.max = messagealphanumber.max;
            input.min = messagealphanumber.min;
            input.step = messagealphanumber.step;
            input.type = "range";
            input.value = messagealphanumber.value;
            input.addEventListener("input", messagealpharangeupdate);
            messagealpha.append(input);

            messagealpharangeset();
        }
        addEventListener("load", messagealpharangeload);

        function messagealpharangeset()
        {
            const c = messagecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagealpharange.value;

            messagealphanumber.value = a;
            text.messagecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagealpharangeupdate()
        {
            messagealpharangeset();
            svgupdate();
        }

        function messagealphaexactload()
        {
            const br = document.createElement("br");
            messagealpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagealphaexactupdate);
                messagealpha.append(button);
            }
        }
        addEventListener("load", messagealphaexactload);

        function messagealphaexactupdate(e)
        {
            messagealphanumber.value = Number(e.target.value);

            messagealphanumberupdate();
        }

        function messagealphaincrementload()
        {
            const br = document.createElement("br");
            messagealpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagealphaincrementupdate);
                messagealpha.append(button);
            }
        }
        addEventListener("load", messagealphaincrementload);

        function messagealphaincrementupdate(e)
        {
            let v = Number(messagealphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((messagealphanumber.min <= v) && (v <= messagealphanumber.max))
            {
                messagealphanumber.value = v;

                messagealphanumberupdate();
            }
        }



/*leftoff
        function messagefilterblurload()
        {
            const div = document.createElement("div");
            div.id = "messagefilterblur";
            div.innerHTML = "filter-blur";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefilterblurload);

        function messagefilterblurnumberload()
        {
            const br = document.createElement("br");
            messagefilterblur.append(br);

            const input = document.createElement("input");
            input.id = "messagefilterblurnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagefilterblurnumberupdate);
            messagefilterblur.append(input);

            //messagefilterblurnumberset();
        }
        addEventListener("load", messagefilterblurnumberload);

        function messagefilterblurnumberset()
        {
            const v = messagefilterblurnumber.value;

            messagefilterblurrange.value = v;
            text.messagebackdropfilterblur = v;
        }

        function messagefilterblurnumberupdate()
        {
            messagefilterblurnumberset();
            svgupdate();
        }

        function messagefilterblurrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefilterblurrange";
            input.max = messagefilterblurnumber.max;
            input.min = messagefilterblurnumber.min;
            input.step = messagefilterblurnumber.step;
            input.type = "range";
            input.value = messagefilterblurnumber.value;
            input.addEventListener("input", messagefilterblurrangeupdate);
            messagefilterblur.append(input);

            messagefilterblurrangeset();
        }
        addEventListener("load", messagefilterblurrangeload);

        function messagefilterblurrangeset()
        {
            const v = messagefilterblurrange.value;

            messagefilterblurnumber.value = v;
            text.messagebackdropfilterblur = v;
        }

        function messagefilterblurrangeupdate()
        {
            messagefilterblurrangeset();
            svgupdate();
        }

        function messagefilterblurexactload()
        {
            const br = document.createElement("br");
            messagefilterblur.append(br);

            const array =
            [
                ["0",0],
                ["2",2],
                ["4",4],
                ["8",8],
                ["16",16],
                ["32",32],
                ["64",64],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterblurexactupdate);
                messagefilterblur.append(button);
            }
        }
        addEventListener("load", messagefilterblurexactload);

        function messagefilterblurexactupdate(e)
        {
            messagefilterblurnumber.value = Number(e.target.value);

            messagefilterblurnumberupdate();
        }

        function messagefilterblurincrementload()
        {
            const br = document.createElement("br");
            messagefilterblur.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterblurincrementupdate);
                messagefilterblur.append(button);
            }
        }
        addEventListener("load", messagefilterblurincrementload);

        function messagefilterblurincrementupdate(e)
        {
            const v = Number(messagefilterblurnumber.value) + Number(e.target.value);

            if((messagefilterblurnumber.min <= v) && (v <= messagefilterblurnumber.max))
            {
                messagefilterblurnumber.value = v;

                messagefilterblurnumberupdate();
            }
        }



        function messagefilterbrightnessload()
        {
            const div = document.createElement("div");
            div.id = "messagefilterbrightness";
            div.innerHTML = "filter-brightness";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefilterbrightnessload);

        function messagefilterbrightnessnumberload()
        {
            const br = document.createElement("br");
            messagefilterbrightness.append(br);

            const input = document.createElement("input");
            input.id = "messagefilterbrightnessnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", messagefilterbrightnessnumberupdate);
            messagefilterbrightness.append(input);

            //messagefilterbrightnessnumberset();
        }
        addEventListener("load", messagefilterbrightnessnumberload);

        function messagefilterbrightnessnumberset()
        {
            const v = messagefilterbrightnessnumber.value;

            messagefilterbrightnessrange.value = v;
            text.messagebackdropfilterbrightness = v;
        }

        function messagefilterbrightnessnumberupdate()
        {
            messagefilterbrightnessnumberset();
            svgupdate();
        }

        function messagefilterbrightnessrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefilterbrightnessrange";
            input.max = messagefilterbrightnessnumber.max;
            input.min = messagefilterbrightnessnumber.min;
            input.step = messagefilterbrightnessnumber.step;
            input.type = "range";
            input.value = messagefilterbrightnessnumber.value;
            input.addEventListener("input", messagefilterbrightnessrangeupdate);
            messagefilterbrightness.append(input);

            messagefilterbrightnessrangeset();
        }
        addEventListener("load", messagefilterbrightnessrangeload);

        function messagefilterbrightnessrangeset()
        {
            const v = messagefilterbrightnessrange.value;

            messagefilterbrightnessnumber.value = v;
            text.messagebackdropfilterbrightness = v;
        }

        function messagefilterbrightnessrangeupdate()
        {
            messagefilterbrightnessrangeset();
            svgupdate();
        }

        function messagefilterbrightnessexactload()
        {
            const br = document.createElement("br");
            messagefilterbrightness.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterbrightnessexactupdate);
                messagefilterbrightness.append(button);
            }
        }
        addEventListener("load", messagefilterbrightnessexactload);

        function messagefilterbrightnessexactupdate(e)
        {
            messagefilterbrightnessnumber.value = Number(e.target.value);

            messagefilterbrightnessnumberupdate();
        }

        function messagefilterbrightnessincrementload()
        {
            const br = document.createElement("br");
            messagefilterbrightness.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterbrightnessincrementupdate);
                messagefilterbrightness.append(button);
            }
        }
        addEventListener("load", messagefilterbrightnessincrementload);

        function messagefilterbrightnessincrementupdate(e)
        {
            const v = Number(messagefilterbrightnessnumber.value) + Number(e.target.value);

            if((messagefilterbrightnessnumber.min <= v) && (v <= messagefilterbrightnessnumber.max))
            {
                messagefilterbrightnessnumber.value = v;

                messagefilterbrightnessnumberupdate();
            }
        }



        function messagefiltercontrastload()
        {
            const div = document.createElement("div");
            div.id = "messagefiltercontrast";
            div.innerHTML = "filter-contrast";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefiltercontrastload);

        function messagefiltercontrastnumberload()
        {
            const br = document.createElement("br");
            messagefiltercontrast.append(br);

            const input = document.createElement("input");
            input.id = "messagefiltercontrastnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", messagefiltercontrastnumberupdate);
            messagefiltercontrast.append(input);

            //messagefiltercontrastnumberset();
        }
        addEventListener("load", messagefiltercontrastnumberload);

        function messagefiltercontrastnumberset()
        {
            const v = messagefiltercontrastnumber.value;

            messagefiltercontrastrange.value = v;
            text.messagebackdropfiltercontrast = v;
        }

        function messagefiltercontrastnumberupdate()
        {
            messagefiltercontrastnumberset();
            svgupdate();
        }

        function messagefiltercontrastrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefiltercontrastrange";
            input.max = messagefiltercontrastnumber.max;
            input.min = messagefiltercontrastnumber.min;
            input.step = messagefiltercontrastnumber.step;
            input.type = "range";
            input.value = messagefiltercontrastnumber.value;
            input.addEventListener("input", messagefiltercontrastrangeupdate);
            messagefiltercontrast.append(input);

            messagefiltercontrastrangeset();
        }
        addEventListener("load", messagefiltercontrastrangeload);

        function messagefiltercontrastrangeset()
        {
            const v = messagefiltercontrastrange.value;

            messagefiltercontrastnumber.value = v;
            text.messagebackdropfiltercontrast = v;
        }

        function messagefiltercontrastrangeupdate()
        {
            messagefiltercontrastrangeset();
            svgupdate();
        }

        function messagefiltercontrastexactload()
        {
            const br = document.createElement("br");
            messagefiltercontrast.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltercontrastexactupdate);
                messagefiltercontrast.append(button);
            }
        }
        addEventListener("load", messagefiltercontrastexactload);

        function messagefiltercontrastexactupdate(e)
        {
            messagefiltercontrastnumber.value = Number(e.target.value);

            messagefiltercontrastnumberupdate();
        }

        function messagefiltercontrastincrementload()
        {
            const br = document.createElement("br");
            messagefiltercontrast.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltercontrastincrementupdate);
                messagefiltercontrast.append(button);
            }
        }
        addEventListener("load", messagefiltercontrastincrementload);

        function messagefiltercontrastincrementupdate(e)
        {
            const v = Number(messagefiltercontrastnumber.value) + Number(e.target.value);

            if((messagefiltercontrastnumber.min <= v) && (v <= messagefiltercontrastnumber.max))
            {
                messagefiltercontrastnumber.value = v;

                messagefiltercontrastnumberupdate();
            }
        }



        function messagefiltergrayscaleload()
        {
            const div = document.createElement("div");
            div.id = "messagefiltergrayscale";
            div.innerHTML = "filter-grayscale";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefiltergrayscaleload);

        function messagefiltergrayscalenumberload()
        {
            const br = document.createElement("br");
            messagefiltergrayscale.append(br);

            const input = document.createElement("input");
            input.id = "messagefiltergrayscalenumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagefiltergrayscalenumberupdate);
            messagefiltergrayscale.append(input);

            //messagefiltergrayscalenumberset();
        }
        addEventListener("load", messagefiltergrayscalenumberload);

        function messagefiltergrayscalenumberset()
        {
            const v = messagefiltergrayscalenumber.value;

            messagefiltergrayscalerange.value = v;
            text.messagebackdropfiltergrayscale = v;
        }

        function messagefiltergrayscalenumberupdate()
        {
            messagefiltergrayscalenumberset();
            svgupdate();
        }

        function messagefiltergrayscalerangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefiltergrayscalerange";
            input.max = messagefiltergrayscalenumber.max;
            input.min = messagefiltergrayscalenumber.min;
            input.step = messagefiltergrayscalenumber.step;
            input.type = "range";
            input.value = messagefiltergrayscalenumber.value;
            input.addEventListener("input", messagefiltergrayscalerangeupdate);
            messagefiltergrayscale.append(input);

            messagefiltergrayscalerangeset();
        }
        addEventListener("load", messagefiltergrayscalerangeload);

        function messagefiltergrayscalerangeset()
        {
            const v = messagefiltergrayscalerange.value;

            messagefiltergrayscalenumber.value = v;
            text.messagebackdropfiltergrayscale = v;
        }

        function messagefiltergrayscalerangeupdate()
        {
            messagefiltergrayscalerangeset();
            svgupdate();
        }

        function messagefiltergrayscaleexactload()
        {
            const br = document.createElement("br");
            messagefiltergrayscale.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltergrayscaleexactupdate);
                messagefiltergrayscale.append(button);
            }
        }
        addEventListener("load", messagefiltergrayscaleexactload);

        function messagefiltergrayscaleexactupdate(e)
        {
            messagefiltergrayscalenumber.value = Number(e.target.value);

            messagefiltergrayscalenumberupdate();
        }

        function messagefiltergrayscaleincrementload()
        {
            const br = document.createElement("br");
            messagefiltergrayscale.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltergrayscaleincrementupdate);
                messagefiltergrayscale.append(button);
            }
        }
        addEventListener("load", messagefiltergrayscaleincrementload);

        function messagefiltergrayscaleincrementupdate(e)
        {
            const v = Number(messagefiltergrayscalenumber.value) + Number(e.target.value);

            if((messagefiltergrayscalenumber.min <= v) && (v <= messagefiltergrayscalenumber.max))
            {
                messagefiltergrayscalenumber.value = v;

                messagefiltergrayscalenumberupdate();
            }
        }



        function messagefilterhuerotateload()
        {
            const div = document.createElement("div");
            div.id = "messagefilterhuerotate";
            div.innerHTML = "filter-hue-rotate";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefilterhuerotateload);

        function messagefilterhuerotatenumberload()
        {
            const br = document.createElement("br");
            messagefilterhuerotate.append(br);

            const input = document.createElement("input");
            input.id = "messagefilterhuerotatenumber";
            input.max = 360;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagefilterhuerotatenumberupdate);
            messagefilterhuerotate.append(input);

            //messagefilterhuerotatenumberset();
        }
        addEventListener("load", messagefilterhuerotatenumberload);

        function messagefilterhuerotatenumberset()
        {
            const v = messagefilterhuerotatenumber.value;

            messagefilterhuerotaterange.value = v;
            text.messagebackdropfilterhuerotate = v;
        }

        function messagefilterhuerotatenumberupdate()
        {
            messagefilterhuerotatenumberset();
            svgupdate();
        }

        function messagefilterhuerotaterangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefilterhuerotaterange";
            input.max = messagefilterhuerotatenumber.max;
            input.min = messagefilterhuerotatenumber.min;
            input.step = messagefilterhuerotatenumber.step;
            input.type = "range";
            input.value = messagefilterhuerotatenumber.value;
            input.addEventListener("input", messagefilterhuerotaterangeupdate);
            messagefilterhuerotate.append(input);

            messagefilterhuerotaterangeset();
        }
        addEventListener("load", messagefilterhuerotaterangeload);

        function messagefilterhuerotaterangeset()
        {
            const v = messagefilterhuerotaterange.value;

            messagefilterhuerotatenumber.value = v;
            text.messagebackdropfilterhuerotate = v;
        }

        function messagefilterhuerotaterangeupdate()
        {
            messagefilterhuerotaterangeset();
            svgupdate();
        }

        function messagefilterhuerotateexactload()
        {
            const br = document.createElement("br");
            messagefilterhuerotate.append(br);

            const array =
            [
                ["0",0],
                ["90",90],
                ["180",180],
                ["270",270],
                ["360",360],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterhuerotateexactupdate);
                messagefilterhuerotate.append(button);
            }
        }
        addEventListener("load", messagefilterhuerotateexactload);

        function messagefilterhuerotateexactupdate(e)
        {
            messagefilterhuerotatenumber.value = Number(e.target.value);

            messagefilterhuerotatenumberupdate();
        }

        function messagefilterhuerotateincrementload()
        {
            const br = document.createElement("br");
            messagefilterhuerotate.append(br);

            const array =
            [
                //["-90",-90],
                ["-45",-45],
                ["-15",-15],
                ["-1",-1],
                ["+1",1],
                ["+15",15],
                ["+45",45],
                //["+90",90],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterhuerotateincrementupdate);
                messagefilterhuerotate.append(button);
            }
        }
        addEventListener("load", messagefilterhuerotateincrementload);

        function messagefilterhuerotateincrementupdate(e)
        {
            const v = Number(messagefilterhuerotatenumber.value) + Number(e.target.value);

            if((messagefilterhuerotatenumber.min <= v) && (v <= messagefilterhuerotatenumber.max))
            {
                messagefilterhuerotatenumber.value = v;

                messagefilterhuerotatenumberupdate();
            }
        }



        function messagefilterinvertload()
        {
            const div = document.createElement("div");
            div.id = "messagefilterinvert";
            div.innerHTML = "filter-invert";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefilterinvertload);

        function messagefilterinvertnumberload()
        {
            const br = document.createElement("br");
            messagefilterinvert.append(br);

            const input = document.createElement("input");
            input.id = "messagefilterinvertnumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagefilterinvertnumberupdate);
            messagefilterinvert.append(input);

            //messagefilterinvertnumberset();
        }
        addEventListener("load", messagefilterinvertnumberload);

        function messagefilterinvertnumberset()
        {
            const v = messagefilterinvertnumber.value;

            messagefilterinvertrange.value = v;
            text.messagebackdropfilterinvert = v;
        }

        function messagefilterinvertnumberupdate()
        {
            messagefilterinvertnumberset();
            svgupdate();
        }

        function messagefilterinvertrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefilterinvertrange";
            input.max = messagefilterinvertnumber.max;
            input.min = messagefilterinvertnumber.min;
            input.step = messagefilterinvertnumber.step;
            input.type = "range";
            input.value = messagefilterinvertnumber.value;
            input.addEventListener("input", messagefilterinvertrangeupdate);
            messagefilterinvert.append(input);

            messagefilterinvertrangeset();
        }
        addEventListener("load", messagefilterinvertrangeload);

        function messagefilterinvertrangeset()
        {
            const v = messagefilterinvertrange.value;

            messagefilterinvertnumber.value = v;
            text.messagebackdropfilterinvert = v;
        }

        function messagefilterinvertrangeupdate()
        {
            messagefilterinvertrangeset();
            svgupdate();
        }

        function messagefilterinvertexactload()
        {
            const br = document.createElement("br");
            messagefilterinvert.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterinvertexactupdate);
                messagefilterinvert.append(button);
            }
        }
        addEventListener("load", messagefilterinvertexactload);

        function messagefilterinvertexactupdate(e)
        {
            messagefilterinvertnumber.value = Number(e.target.value);

            messagefilterinvertnumberupdate();
        }

        function messagefilterinvertincrementload()
        {
            const br = document.createElement("br");
            messagefilterinvert.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterinvertincrementupdate);
                messagefilterinvert.append(button);
            }
        }
        addEventListener("load", messagefilterinvertincrementload);

        function messagefilterinvertincrementupdate(e)
        {
            const v = Number(messagefilterinvertnumber.value) + Number(e.target.value);

            if((messagefilterinvertnumber.min <= v) && (v <= messagefilterinvertnumber.max))
            {
                messagefilterinvertnumber.value = v;

                messagefilterinvertnumberupdate();
            }
        }



        function messagefiltersaturateload()
        {
            const div = document.createElement("div");
            div.id = "messagefiltersaturate";
            div.innerHTML = "filter-saturate";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefiltersaturateload);

        function messagefiltersaturatenumberload()
        {
            const br = document.createElement("br");
            messagefiltersaturate.append(br);

            const input = document.createElement("input");
            input.id = "messagefiltersaturatenumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", messagefiltersaturatenumberupdate);
            messagefiltersaturate.append(input);

            //messagefiltersaturatenumberset();
        }
        addEventListener("load", messagefiltersaturatenumberload);

        function messagefiltersaturatenumberset()
        {
            const v = messagefiltersaturatenumber.value;

            messagefiltersaturaterange.value = v;
            text.messagebackdropfiltersaturate = v;
        }

        function messagefiltersaturatenumberupdate()
        {
            messagefiltersaturatenumberset();
            svgupdate();
        }

        function messagefiltersaturaterangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefiltersaturaterange";
            input.max = messagefiltersaturatenumber.max;
            input.min = messagefiltersaturatenumber.min;
            input.step = messagefiltersaturatenumber.step;
            input.type = "range";
            input.value = messagefiltersaturatenumber.value;
            input.addEventListener("input", messagefiltersaturaterangeupdate);
            messagefiltersaturate.append(input);

            messagefiltersaturaterangeset();
        }
        addEventListener("load", messagefiltersaturaterangeload);

        function messagefiltersaturaterangeset()
        {
            const v = messagefiltersaturaterange.value;

            messagefiltersaturatenumber.value = v;
            text.messagebackdropfiltersaturate = v;
        }

        function messagefiltersaturaterangeupdate()
        {
            messagefiltersaturaterangeset();
            svgupdate();
        }

        function messagefiltersaturateexactload()
        {
            const br = document.createElement("br");
            messagefiltersaturate.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltersaturateexactupdate);
                messagefiltersaturate.append(button);
            }
        }
        addEventListener("load", messagefiltersaturateexactload);

        function messagefiltersaturateexactupdate(e)
        {
            messagefiltersaturatenumber.value = Number(e.target.value);

            messagefiltersaturatenumberupdate();
        }

        function messagefiltersaturateincrementload()
        {
            const br = document.createElement("br");
            messagefiltersaturate.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltersaturateincrementupdate);
                messagefiltersaturate.append(button);
            }
        }
        addEventListener("load", messagefiltersaturateincrementload);

        function messagefiltersaturateincrementupdate(e)
        {
            const v = Number(messagefiltersaturatenumber.value) + Number(e.target.value);

            if((messagefiltersaturatenumber.min <= v) && (v <= messagefiltersaturatenumber.max))
            {
                messagefiltersaturatenumber.value = v;

                messagefiltersaturatenumberupdate();
            }
        }



        function messagefiltersepiaload()
        {
            const div = document.createElement("div");
            div.id = "messagefiltersepia";
            div.innerHTML = "filter-sepia";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefiltersepiaload);

        function messagefiltersepianumberload()
        {
            const br = document.createElement("br");
            messagefiltersepia.append(br);

            const input = document.createElement("input");
            input.id = "messagefiltersepianumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagefiltersepianumberupdate);
            messagefiltersepia.append(input);

            //messagefiltersepianumberset();
        }
        addEventListener("load", messagefiltersepianumberload);

        function messagefiltersepianumberset()
        {
            const v = messagefiltersepianumber.value;

            messagefiltersepiarange.value = v;
            text.messagebackdropfiltersepia = v;
        }

        function messagefiltersepianumberupdate()
        {
            messagefiltersepianumberset();
            svgupdate();
        }

        function messagefiltersepiarangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefiltersepiarange";
            input.max = messagefiltersepianumber.max;
            input.min = messagefiltersepianumber.min;
            input.step = messagefiltersepianumber.step;
            input.type = "range";
            input.value = messagefiltersepianumber.value;
            input.addEventListener("input", messagefiltersepiarangeupdate);
            messagefiltersepia.append(input);

            messagefiltersepiarangeset();
        }
        addEventListener("load", messagefiltersepiarangeload);

        function messagefiltersepiarangeset()
        {
            const v = messagefiltersepiarange.value;

            messagefiltersepianumber.value = v;
            text.messagebackdropfiltersepia = v;
        }

        function messagefiltersepiarangeupdate()
        {
            messagefiltersepiarangeset();
            svgupdate();
        }

        function messagefiltersepiaexactload()
        {
            const br = document.createElement("br");
            messagefiltersepia.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltersepiaexactupdate);
                messagefiltersepia.append(button);
            }
        }
        addEventListener("load", messagefiltersepiaexactload);

        function messagefiltersepiaexactupdate(e)
        {
            messagefiltersepianumber.value = Number(e.target.value);

            messagefiltersepianumberupdate();
        }

        function messagefiltersepiaincrementload()
        {
            const br = document.createElement("br");
            messagefiltersepia.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltersepiaincrementupdate);
                messagefiltersepia.append(button);
            }
        }
        addEventListener("load", messagefiltersepiaincrementload);

        function messagefiltersepiaincrementupdate(e)
        {
            const v = Number(messagefiltersepianumber.value) + Number(e.target.value);

            if((messagefiltersepianumber.min <= v) && (v <= messagefiltersepianumber.max))
            {
                messagefiltersepianumber.value = v;

                messagefiltersepianumberupdate();
            }
        }
//*/



/*
        function messagemargintopload()
        {
            const div = document.createElement("div");
            div.id = "messagemargintop";
            div.innerHTML = "margin-top";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagemargintopload);

        function messagemargintopnumberload()
        {
            const br = document.createElement("br");
            messagemargintop.append(br);

            const input = document.createElement("input");
            input.id = "messagemargintopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagemargintopnumberupdate);
            messagemargintop.append(input);

            //messagemargintopnumberset();
        }
        addEventListener("load", messagemargintopnumberload);

        function messagemargintopnumberset()
        {
            const v = Number(messagemargintopnumber.value);

            messagemargintoprange.value = v;
            text.messagemargintop = v;
        }

        function messagemargintopnumberupdate()
        {
            messagemargintopnumberset();

            svgupdate();
        }

        function messagemargintoprangeload()
        {
            const input = document.createElement("input");
            input.id = "messagemargintoprange";
            input.max = messagemargintopnumber.max;
            input.min = messagemargintopnumber.min;
            input.type = "range";
            input.value = messagemargintopnumber.value;
            input.addEventListener("input", messagemargintoprangeupdate);
            messagemargintop.append(input);

            messagemargintoprangeset();
        }
        addEventListener("load", messagemargintoprangeload);

        function messagemargintoprangeset()
        {
            const v = Number(messagemargintoprange.value);

            messagemargintopnumber.value = v;
            text.messagemargintop = v;
        }

        function messagemargintoprangeupdate()
        {
            messagemargintoprangeset();

            svgupdate();
        }



        function messagemarginbottomload()
        {
            const div = document.createElement("div");
            div.id = "messagemarginbottom";
            div.innerHTML = "margin-bottom";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagemarginbottomload);

        function messagemarginbottomnumberload()
        {
            const br = document.createElement("br");
            messagemarginbottom.append(br);

            const input = document.createElement("input");
            input.id = "messagemarginbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagemarginbottomnumberupdate);
            messagemarginbottom.append(input);

            //messagemarginbottomnumberset();
        }
        addEventListener("load", messagemarginbottomnumberload);

        function messagemarginbottomnumberset()
        {
            const v = Number(messagemarginbottomnumber.value);

            messagemarginbottomrange.value = v;
            text.messagemarginbottom = v;
        }

        function messagemarginbottomnumberupdate()
        {
            messagemarginbottomnumberset();

            svgupdate();
        }

        function messagemarginbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagemarginbottomrange";
            input.max = messagemarginbottomnumber.max;
            input.min = messagemarginbottomnumber.min;
            input.type = "range";
            input.value = messagemarginbottomnumber.value;
            input.addEventListener("input", messagemarginbottomrangeupdate);
            messagemarginbottom.append(input);

            messagemarginbottomrangeset();
        }
        addEventListener("load", messagemarginbottomrangeload);

        function messagemarginbottomrangeset()
        {
            const v = Number(messagemarginbottomrange.value);

            messagemarginbottomnumber.value = v;
            text.messagemarginbottom = v;
        }

        function messagemarginbottomrangeupdate()
        {
            messagemarginbottomrangeset();

            svgupdate();
        }



        function messagemarginleftload()
        {
            const div = document.createElement("div");
            div.id = "messagemarginleft";
            div.innerHTML = "margin-left";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagemarginleftload);

        function messagemarginleftnumberload()
        {
            const br = document.createElement("br");
            messagemarginleft.append(br);

            const input = document.createElement("input");
            input.id = "messagemarginleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagemarginleftnumberupdate);
            messagemarginleft.append(input);

            //messagemarginleftnumberset();
        }
        addEventListener("load", messagemarginleftnumberload);

        function messagemarginleftnumberset()
        {
            const v = Number(messagemarginleftnumber.value);

            messagemarginleftrange.value = v;
            text.messagemarginleft = v;
        }

        function messagemarginleftnumberupdate()
        {
            messagemarginleftnumberset();

            svgupdate();
        }

        function messagemarginleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagemarginleftrange";
            input.max = messagemarginleftnumber.max;
            input.min = messagemarginleftnumber.min;
            input.type = "range";
            input.value = messagemarginleftnumber.value;
            input.addEventListener("input", messagemarginleftrangeupdate);
            messagemarginleft.append(input);

            messagemarginleftrangeset();
        }
        addEventListener("load", messagemarginleftrangeload);

        function messagemarginleftrangeset()
        {
            const v = Number(messagemarginleftrange.value);

            messagemarginleftnumber.value = v;
            text.messagemarginleft = v;
        }

        function messagemarginleftrangeupdate()
        {
            messagemarginleftrangeset();

            svgupdate();
        }



        function messagemarginrightload()
        {
            const div = document.createElement("div");
            div.id = "messagemarginright";
            div.innerHTML = "margin-right";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagemarginrightload);

        function messagemarginrightnumberload()
        {
            const br = document.createElement("br");
            messagemarginright.append(br);

            const input = document.createElement("input");
            input.id = "messagemarginrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagemarginrightnumberupdate);
            messagemarginright.append(input);

            //messagemarginrightnumberset();
        }
        addEventListener("load", messagemarginrightnumberload);

        function messagemarginrightnumberset()
        {
            const v = Number(messagemarginrightnumber.value);

            messagemarginrightrange.value = v;
            text.messagemarginright = v;
        }

        function messagemarginrightnumberupdate()
        {
            messagemarginrightnumberset();

            svgupdate();
        }

        function messagemarginrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagemarginrightrange";
            input.max = messagemarginrightnumber.max;
            input.min = messagemarginrightnumber.min;
            input.type = "range";
            input.value = messagemarginrightnumber.value;
            input.addEventListener("input", messagemarginrightrangeupdate);
            messagemarginright.append(input);

            messagemarginrightrangeset();
        }
        addEventListener("load", messagemarginrightrangeload);

        function messagemarginrightrangeset()
        {
            const v = Number(messagemarginrightrange.value);

            messagemarginrightnumber.value = v;
            text.messagemarginright = v;
        }

        function messagemarginrightrangeupdate()
        {
            messagemarginrightrangeset();

            svgupdate();
        }



        function messagepaddingtopload()
        {
            const div = document.createElement("div");
            div.id = "messagepaddingtop";
            div.innerHTML = "padding-top";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagepaddingtopload);

        function messagepaddingtopnumberload()
        {
            const br = document.createElement("br");
            messagepaddingtop.append(br);

            const input = document.createElement("input");
            input.id = "messagepaddingtopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagepaddingtopnumberupdate);
            messagepaddingtop.append(input);

            //messagepaddingtopnumberset();
        }
        addEventListener("load", messagepaddingtopnumberload);

        function messagepaddingtopnumberset()
        {
            const v = Number(messagepaddingtopnumber.value);

            messagepaddingtoprange.value = v;
            text.messagepaddingtop = v;
        }

        function messagepaddingtopnumberupdate()
        {
            messagepaddingtopnumberset();

            svgupdate();
        }

        function messagepaddingtoprangeload()
        {
            const input = document.createElement("input");
            input.id = "messagepaddingtoprange";
            input.max = messagepaddingtopnumber.max;
            input.min = messagepaddingtopnumber.min;
            input.type = "range";
            input.value = messagepaddingtopnumber.value;
            input.addEventListener("input", messagepaddingtoprangeupdate);
            messagepaddingtop.append(input);

            messagepaddingtoprangeset();
        }
        addEventListener("load", messagepaddingtoprangeload);

        function messagepaddingtoprangeset()
        {
            const v = Number(messagepaddingtoprange.value);

            messagepaddingtopnumber.value = v;
            text.messagepaddingtop = v;
        }

        function messagepaddingtoprangeupdate()
        {
            messagepaddingtoprangeset();

            svgupdate();
        }



        function messagepaddingbottomload()
        {
            const div = document.createElement("div");
            div.id = "messagepaddingbottom";
            div.innerHTML = "padding-bottom";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagepaddingbottomload);

        function messagepaddingbottomnumberload()
        {
            const br = document.createElement("br");
            messagepaddingbottom.append(br);

            const input = document.createElement("input");
            input.id = "messagepaddingbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagepaddingbottomnumberupdate);
            messagepaddingbottom.append(input);

            //messagepaddingbottomnumberset();
        }
        addEventListener("load", messagepaddingbottomnumberload);

        function messagepaddingbottomnumberset()
        {
            const v = Number(messagepaddingbottomnumber.value);

            messagepaddingbottomrange.value = v;
            text.messagepaddingbottom = v;
        }

        function messagepaddingbottomnumberupdate()
        {
            messagepaddingbottomnumberset();

            svgupdate();
        }

        function messagepaddingbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagepaddingbottomrange";
            input.max = messagepaddingbottomnumber.max;
            input.min = messagepaddingbottomnumber.min;
            input.type = "range";
            input.value = messagepaddingbottomnumber.value;
            input.addEventListener("input", messagepaddingbottomrangeupdate);
            messagepaddingbottom.append(input);

            messagepaddingbottomrangeset();
        }
        addEventListener("load", messagepaddingbottomrangeload);

        function messagepaddingbottomrangeset()
        {
            const v = Number(messagepaddingbottomrange.value);

            messagepaddingbottomnumber.value = v;
            text.messagepaddingbottom = v;
        }

        function messagepaddingbottomrangeupdate()
        {
            messagepaddingbottomrangeset();

            svgupdate();
        }



        function messagepaddingleftload()
        {
            const div = document.createElement("div");
            div.id = "messagepaddingleft";
            div.innerHTML = "padding-left";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagepaddingleftload);

        function messagepaddingleftnumberload()
        {
            const br = document.createElement("br");
            messagepaddingleft.append(br);

            const input = document.createElement("input");
            input.id = "messagepaddingleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagepaddingleftnumberupdate);
            messagepaddingleft.append(input);

            //messagepaddingleftnumberset();
        }
        addEventListener("load", messagepaddingleftnumberload);

        function messagepaddingleftnumberset()
        {
            const v = Number(messagepaddingleftnumber.value);

            messagepaddingleftrange.value = v;
            text.messagepaddingleft = v;
        }

        function messagepaddingleftnumberupdate()
        {
            messagepaddingleftnumberset();

            svgupdate();
        }

        function messagepaddingleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagepaddingleftrange";
            input.max = messagepaddingleftnumber.max;
            input.min = messagepaddingleftnumber.min;
            input.type = "range";
            input.value = messagepaddingleftnumber.value;
            input.addEventListener("input", messagepaddingleftrangeupdate);
            messagepaddingleft.append(input);

            messagepaddingleftrangeset();
        }
        addEventListener("load", messagepaddingleftrangeload);


        function messagepaddingleftrangeset()
        {
            const v = Number(messagepaddingleftrange.value);

            messagepaddingleftnumber.value = v;
            text.messagepaddingleft = v;
        }

        function messagepaddingleftrangeupdate()
        {
            messagepaddingleftrangeset();

            svgupdate();
        }



        function messagepaddingrightload()
        {
            const div = document.createElement("div");
            div.id = "messagepaddingright";
            div.innerHTML = "padding-right";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagepaddingrightload);

        function messagepaddingrightnumberload()
        {
            const br = document.createElement("br");
            messagepaddingright.append(br);

            const input = document.createElement("input");
            input.id = "messagepaddingrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagepaddingrightnumberupdate);
            messagepaddingright.append(input);

            //messagepaddingrightnumberset();
        }
        addEventListener("load", messagepaddingrightnumberload);

        function messagepaddingrightnumberset()
        {
            const v = Number(messagepaddingrightnumber.value);

            messagepaddingrightrange.value = v;
            text.messagepaddingright = v;
        }

        function messagepaddingrightnumberupdate()
        {
            messagepaddingrightnumberset();

            svgupdate();
        }

        function messagepaddingrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagepaddingrightrange";
            input.max = messagepaddingrightnumber.max;
            input.min = messagepaddingrightnumber.min;
            input.type = "range";
            input.value = messagepaddingrightnumber.value;
            input.addEventListener("input", messagepaddingrightrangeupdate);
            messagepaddingright.append(input);

            messagepaddingrightrangeset();
        }
        addEventListener("load", messagepaddingrightrangeload);

        function messagepaddingrightrangeset()
        {
            const v = Number(messagepaddingrightrange.value);

            messagepaddingrightnumber.value = v;
            text.messagepaddingright = v;
        }

        function messagepaddingrightrangeupdate()
        {
            messagepaddingrightrangeset();

            svgupdate();
        }
//*/






        function referenceversionload()
        {
            const div = document.createElement("div");
            div.id = "referenceversion";
            div.innerHTML = "version";
            tabcontentreference.append(div);
        }
        addEventListener("load", referenceversionload);

        function referenceversionselectload()
        {
            const br = document.createElement("br");
            referenceversion.append(br);

            const select = document.createElement("select");
            select.id = "referenceversionselect";
            select.addEventListener("input", referenceversionselectupdate);
            referenceversion.append(select);

            referenceversionselectload2();
        }
        addEventListener("load", referenceversionselectload);

        function referenceversionselectload2()
        {
            for(const value of Bibleversionarray)
            {
                const optgroup = docum
8ea8
ent.createElement("optgroup");
                optgroup.label = value[0];
                referenceversionselect.append(optgroup);

                for(const v of value[1])
                {
                    const option = document.createElement("option");
                    option.innerHTML = v[1];
                    option.value = v[0];
                    optgroup.append(option);
                }
            }

            referenceversionselect.value = Bibleversionarray[4][1][1][0];

            referenceversionselectset();
        }

        function referenceversionselectset()
        {
            text.version = referenceversionselect.options.selectedIndex + 1;
            text.versionname = referenceversionselect.value;

            text.referencetextversion = "";
            if(text.versionbool)
            {
                text.referencetextversion = ` ${text.versionname}`;
            }
        }

        function referenceversionselectupdate()
        {
            referenceversionselectset();
            /*
            referencebookselectload2();
            referencechapterselectload2();
            referenceverseselectload2();
            referenceverseendselectload2();
            svgupdate();
            //*/
            Bibleload();
        }

        function referenceversioncheckboxload()
        {
            const input = document.createElement("input");
            input.type = "checkbox";
            input.addEventListener("click", referenceversioncheckboxupdate);
            referenceversion.append(input);
        }
        addEventListener("load", referenceversioncheckboxload);

        function referenceversioncheckboxupdate()
        {
            text.versionbool = !text.versionbool;

            //referenceversionselectupdate();
            referenceversionselectset();
            svgupdate();
        }



        function Bibleload()
        {
            //console.log("Bibleload");
            fetch(`/assets/txt/new/${text.versionname}.txt`)
            .then(r => r.text())
            .then(t =>
            {
                const split = t.split("@");
                //console.log(split);

                const b = split[1].trim();
                //console.log(b);
                const c = b.split("\n");
                //console.log(c);
                for(const [key, value] of c.entries())
                {
                    const split = value.split("#");
                    const b = split[1];
                    Biblebookarray[key] = b;
                    //console.log(Biblebookarray[key]);
                }

                const v = split[2].trim();
                //console.log(v);
                const w = v.split("\n");
                //console.log(w);
                for(const value of w)
                {
                    const split = value.split("#");
                    const b = Number(split[0]);
                    const c = Number(split[1]);
                    const v = Number(split[2]);
                    const t = split[3];
                    if(!Array.isArray(Bibleversearray[b]))
                    {
                        Bibleversearray[b] = [];
                    }
                    if(!Array.isArray(Bibleversearray[b][c]))
                    {
                        Bibleversearray[b][c] = [];
                    }
                    Bibleversearray[b][c][v] = t;
                    //console.log(b, c, v, t);
                }

                //imageload2();
                //referenceversionselectload2();
                //*
                referencebookselectload2();
                referencechapterselectload2()
                referenceverseselectload2();
                referenceverseendselectload2();
                //*/
                //canvasupdate();
                svgupdate();
            });
        }
        addEventListener("load", Bibleload);

        function referencebookload()
        {
            const div = document.createElement("div");
            div.id = "referencebook";
            div.innerHTML = "book";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencebookload);

        function referencebookselectload()
        {
            const br = document.createElement("br");
            referencebook.append(br);

            const select = document.createElement("select");
            select.id = "referencebookselect";
            select.addEventListener("input", referencebookselectupdate);
            referencebook.append(select);

            text.referencetextbook = "Genesis";

            //referencebookselectload2();
        }
        addEventListener("load", referencebookselectload);

        function referencebookselectload2()
        {
            for(let i = referencebookselect.options.length - 1; i >= 0; --i)
            {
                referencebookselect.remove(i);
            }

            for(const value of Biblebookarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                referencebookselect.add(option);
            }

            //referencebookselect.value = Biblebookarray[42];

            referencebookselectset();
        }

        function referencebookselectset()
        {
            text.book = referencebookselect.options.selectedIndex + 1;
            text.bookname = referencebookselect.value;

            text.referencetextbook = text.bookname;
        }

        function referencebookselectupdate()
        {
            referencebookselectset();
            referencechapterselectload2();
            referenceverseselectload2();
            referenceverseendselectload2();
            svgupdate();
        }



        function referencechapterload()
        {
            const div = document.createElement("div");
            div.id = "referencechapter";
            div.innerHTML = "chapter";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencechapterload);

        function referencechapterselectload()
        {
            const br = document.createElement("br");
            referencechapter.append(br);

            const select = document.createElement("select");
            select.id = "referencechapterselect";
            select.addEventListener("input", referencechapterselectupdate);
            referencechapter.append(select);

            text.referencetextchapter = " 1";

            //referencechapterselectload2();
        }
        addEventListener("load", referencechapterselectload);

        function referencechapterselectload2()
        {
            for(let i = referencechapterselect.options.length - 1; i >= 0; --i)
            {
                referencechapterselect.remove(i);
            }

            for(let i = 1; i < Bibleversearray[text.book].length; ++i)
            {
                const option = document.createElement("option");
                option.innerHTML = i;
                referencechapterselect.add(option);
            }

            referencechapterselect.value = 1;

            referencechapterselectset();
        }

        function referencechapterselectset()
        {
            text.chapter = referencechapterselect.value;

            text.referencetextchapter = ` ${text.chapter}`;
        }

        function referencechapterselectupdate()
        {
            referencechapterselectset();
            referenceverseselectload2();
            referenceverseendselectload2();
            svgupdate();
        }



        function referenceverseload()
        {
            const div = document.createElement("div");
            div.id = "referenceverse";
            div.innerHTML = "verse-start";
            tabcontentreference.append(div);
        }
        addEventListener("load", referenceverseload);

        function referenceverseselectload()
        {
            const br = document.createElement("br");
            referenceverse.append(br);

            const select = document.createElement("select");
            select.id = "referenceverseselect";
            select.addEventListener("input", referenceverseselectupdate);
            referenceverse.append(select);

            text.referencetextverse = ":1";
            text.passagetextverse = "In the beginning God created the heaven and the earth.";

            //referenceverseselectload2();
        }
        addEventListener("load", referenceverseselectload);

        function referenceverseselectload2()
        {
            for(let i = referenceverseselect.options.length - 1; i >= 0; --i)
            {
                referenceverseselect.remove(i);
            }

            for(let i = 1; i < Bibleversearray[text.book][text.chapter].length; ++i)
            {
                const option = document.createElement("option");
                option.innerHTML = i;
                referenceverseselect.add(option);
            }

            referenceverseselect.value = 1;

            referenceverseselectset();
        }

        function referenceverseselectset()
        {
            text.verse = referenceverseselect.value;

            text.referencetextverse = `:${text.verse}`;
            text.passagetextverse = Bibleversearray[text.book][text.chapter][text.verse];
        }

        function referenceverseselectupdate()
        {
            referenceverseselectset();
            referenceverseendselectload2();
            svgupdate();
        }



        function referenceverseendload()
        {
            const div = document.createElement("div");
            div.id = "referenceverseend";
            div.innerHTML = "verse-end";
            tabcontentreference.append(div);
        }
        addEventListener("load", referenceverseendload);

        function referenceverseendselectload()
        {
            const br = document.createElement("br");
            referenceverseend.append(br);

            const select = document.createElement("select");
            select.id = "referenceverseendselect";
            select.addEventListener("input", referenceverseendselectupdate);
            referenceverseend.append(select);

            text.referencetextverseend = "";
            text.passagetextverseend = "";

            //referenceverseendselectload2();
        }
        addEventListener("load", referenceverseendselectload);

        function referenceverseendselectload2()
        {
            for(let i = referenceverseendselect.options.length - 1; i >= 0; --i)
            {
                referenceverseendselect.remove(i);
            }

            for(let i = referenceverseselect.value; i < Bibleversearray[text.book][text.chapter].length; ++i)
            {
                const option = document.createElement("option");
                option.innerHTML = i;
                referenceverseendselect.add(option);
            }

            referenceverseendselect.value = referenceverseselect.value;

            referenceverseendselectset();
        }

        function referenceverseendselectset()
        {
            text.verseend = referenceverseendselect.value;

            //text.referencetext = `${text.bookname} ${text.chapter}:${text.verse}`;
            //text.passagetext = `${Bibleversearray[text.book][text.chapter][text.verse]}`;
            text.referencetextverseend = "";
            text.passagetextverseend = "";

            if(text.verse != text.verseend)
            {
                //text.referencetext += `-${text.verseend}`;
                text.referencetextverseend = `-${text.verseend}`;

                for(let i = Number(text.verse) + 1; i <= text.verseend; ++i)
                {
                    //text.passagetext += ` ${Bibleversearray[text.book][text.chapter][i]}`;
                    text.passagetextverseend += ` ${Bibleversearray[text.book][text.chapter][i]}`;
                }
            }

            //if(text.versionbool)
            //{
            //    text.referencetext += ` ${text.versionname}`;
            //}
            //console.log(text.referencetext);
            //console.log(text.passagetext);
        }

        function referenceverseendselectupdate()
        {
            referenceverseendselectset();
            svgupdate();
        }



        function referencewidthload()
        {
            const div = document.createElement("div");
            div.id = "referencewidth";
            div.innerHTML = "width";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencewidthload);

        function referencewidthnumberload()
        {
            const br = document.createElement("br");
            referencewidth.append(br);

            const input = document.createElement("input");
            input.id = "referencewidthnumber";
            input.max = maxwidth;
            input.min = 0;
            input.type = "number";
            input.value = canvas.width - 100;
            input.addEventListener("input", referencewidthnumberupdate);
            referencewidth.append(input);

            //referencewidthnumberset();
        }
        addEventListener("load", referencewidthnumberload);

        function referencewidthnumberset()
        {
            const v = Number(referencewidthnumber.value);

            referencewidthrange.value = v;
            text.referencewidth = v;
        }

        function referencewidthnumberupdate()
        {
            referencewidthnumberset();
            svgupdate();
        }

        function referencewidthrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencewidthrange";
            input.max = referencewidthnumber.max;
            input.min = referencewidthnumber.min;
            input.type = "range";
            input.value = referencewidthnumber.value;
            input.addEventListener("input", referencewidthrangeupdate);
            referencewidth.append(input);

            referencewidthrangeset();
        }
        addEventListener("load", referencewidthrangeload);

        function referencewidthrangeset()
        {
            const v = Number(referencewidthrange.value);

            referencewidthnumber.value = v;
            text.referencewidth = v;
        }

        function referencewidthrangeupdate()
        {
            referencewidthrangeset();
            svgupdate();
        }

        function referencewidthexactload()
        {
            const br = document.createElement("br");
            referencewidth.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencewidthexactupdate);
                referencewidth.append(button);
            }
        }
        addEventListener("load", referencewidthexactload);

        function referencewidthexactupdate(e)
        {
            referencewidthnumber.value = canvas.width * Number(e.target.value);

            referencewidthnumberupdate();
        }

        function referencewidthincrementload()
        {
            const br = document.createElement("br");
            referencewidth.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencewidthincrementupdate);
                referencewidth.append(button);
            }
        }
        addEventListener("load", referencewidthincrementload);

        function referencewidthincrementupdate(e)
        {
            const v = Number(referencewidthnumber.value) + Number(e.target.value);

            if((referencewidthnumber.min <= v) && (v <= referencewidthnumber.max))
            {
                referencewidthnumber.value = v;

                referencewidthnumberupdate();
            }
        }



        function referenceheightload()
        {
            const div = document.createElement("div");
            div.id = "referenceheight";
            div.innerHTML = "height";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referenceheightload);

        function referenceheightnumberload()
        {
            const br = document.createElement("br");
            referenceheight.append(br);

            const input = document.createElement("input");
            input.id = "referenceheightnumber";
            input.max = maxheight;
            input.min = 0;
            input.type = "number";
            input.value = 280;
            input.addEventListener("input", referenceheightnumberupdate);
            referenceheight.append(input);

            //referenceheightnumberset();
        }
        addEventListener("load", referenceheightnumberload);

        function referenceheightnumberset()
        {
            const v = Number(referenceheightnumber.value);

            referenceheightrange.value = v;
            text.referenceheight = v;
        }

        function referenceheightnumberupdate()
        {
            referenceheightnumberset();
            svgupdate();
        }

        function referenceheightrangeload()
        {
            const input = document.createElement("input");
            input.id = "referenceheightrange";
            input.max = referenceheightnumber.max;
            input.min = referenceheightnumber.min;
            input.type = "range";
            input.value = referenceheightnumber.value;
            input.addEventListener("input", referenceheightrangeupdate);
            referenceheight.append(input);

            referenceheightrangeset();
        }
        addEventListener("load", referenceheightrangeload);

        function referenceheightrangeset()
        {
            const v = Number(referenceheightrange.value);

            referenceheightnumber.value = v;
            text.referenceheight = v;
        }

        function referenceheightrangeupdate()
        {
            referenceheightrangeset();
            svgupdate();
        }

        function referenceheightexactload()
        {
            const br = document.createElement("br");
            referenceheight.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceheightexactupdate);
                referenceheight.append(button);
            }
        }
        addEventListener("load", referenceheightexactload);

        function referenceheightexactupdate(e)
        {
            referenceheightnumber.value = canvas.height * Number(e.target.value);

            referenceheightnumberupdate();
        }

        function referenceheightincrementload()
        {
            const br = document.createElement("br");
            referenceheight.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceheightincrementupdate);
                referenceheight.append(button);
            }
        }
        addEventListener("load", referenceheightincrementload);

        function referenceheightincrementupdate(e)
        {
            const v = Number(referenceheightnumber.value) + Number(e.target.value);

            if((referenceheightnumber.min <= v) && (v <= referenceheightnumber.max))
            {
                referenceheightnumber.value = v;

                referenceheightnumberupdate();
            }
        }



        function referencexload()
        {
            const div = document.createElement("div");
            div.id = "referencex";
            div.innerHTML = "x";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencexload);

        function referencexnumberload()
        {
            const br = document.createElement("br");
            referencex.append(br);

            const input = document.createElement("input");
            input.id = "referencexnumber";
            input.max = maxwidth;
            input.min = -maxwidth;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", referencexnumberupdate);
            referencex.append(input);

            //referencexnumberset();
        }
        addEventListener("load", referencexnumberload);

        function referencexnumberset()
        {
            const v = Number(referencexnumber.value);

            referencexrange.value = v;
            text.referencex = v;
        }

        function referencexnumberupdate()
        {
            referencexnumberset();
            svgupdate();
        }

        function referencexrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencexrange";
            input.max = referencexnumber.max;
            input.min = referencexnumber.min;
            input.type = "range";
            input.value = referencexnumber.value;
            input.addEventListener("input", referencexrangeupdate);
            referencex.append(input);

            referencexrangeset();
        }
        addEventListener("load", referencexrangeload);

        function referencexrangeset()
        {
            const v = Number(referencexrange.value);

            referencexnumber.value = v;
            text.referencex = v;
        }

        function referencexrangeupdate()
        {
            referencexrangeset();
            svgupdate();
        }

        function referencexexactload()
        {
            const br = document.createElement("br");
            referencex.append(br);

            const array =
            [
                ["left",0],
                ["center",0.5],
                ["right",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencexexactupdate);
                referencex.append(button);
            }
        }
        addEventListener("load", referencexexactload);

        function referencexexactupdate(e)
        {
            //referencexnumber.value = (canvas.width - text.referencewidth - text.referencepaddingleft - text.referencepaddingright) * Number(e.target.value);
            referencexnumber.value = (canvas.width - text.referencewidth) * Number(e.target.value);

            referencexnumberupdate();
        }

        function referencexincrementload()
        {
            const br = document.createElement("br");
            referencex.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencexincrementupdate);
                referencex.append(button);
            }
        }
        addEventListener("load", referencexincrementload);

        function referencexincrementupdate(e)
        {
            const v = Number(referencexnumber.value) + Number(e.target.value);

            if((referencexnumber.min <= v) && (v <= referencexnumber.max))
            {
                referencexnumber.value = v;

                referencexnumberupdate();
            }
        }



        function referenceyload()
        {
            const div = document.createElement("div");
            div.id = "referencey";
            div.innerHTML = "y";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referenceyload);

        function referenceynumberload()
        {
            const br = document.createElement("br");
            referencey.append(br);

            const input = document.createElement("input");
            input.id = "referenceynumber";
            input.max = maxheight;
            input.min = -maxheight;
            input.type = "number";
            input.value = 400;
            input.addEventListener("input", referenceynumberupdate);
            referencey.append(input);

            //referenceynumberset();
        }
        addEventListener("load", referenceynumberload);

        function referenceynumberset()
        {
            const v = Number(referenceynumber.value);

            referenceyrange.value = v;
            text.referencey = v;
        }

        function referenceynumberupdate()
        {
            referenceynumberset();
            svgupdate();
        }

        function referenceyrangeload()
        {
            const input = document.createElement("input");
            input.id = "referenceyrange";
            input.max = referenceynumber.max;
            input.min = referenceynumber.min;
            input.type = "range";
            input.value = referenceynumber.value;
            input.addEventListener("input", referenceyrangeupdate);
            referencey.append(input);

            referenceyrangeset();
        }
        addEventListener("load", referenceyrangeload);

        function referenceyrangeset()
        {
            const v = Number(referenceyrange.value);

            referenceynumber.value = v;
            text.referencey = v;
        }

        function referenceyrangeupdate()
        {
            referenceyrangeset();
            svgupdate();
        }

        function referenceyexactload()
        {
            const br = document.createElement("br");
            referencey.append(br);

            const array =
            [
                ["top",0],
                ["center",0.5],
                ["bottom",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceyexactupdate);
                referencey.append(button);
            }
        }
        addEventListener("load", referenceyexactload);

        function referenceyexactupdate(e)
        {
            //referenceynumber.value = (canvas.height - text.referenceheight - text.referencepaddingtop - text.referencepaddingbottom) * Number(e.target.value);
            referenceynumber.value = (canvas.height - text.referenceheight) * Number(e.target.value);

            referenceynumberupdate();
        }

        function referenceyincrementload()
        {
            const br = document.createElement("br");
            referencey.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceyincrementupdate);
                referencey.append(button);
            }
        }
        addEventListener("load", referenceyincrementload);

        function referenceyincrementupdate(e)
        {
            const v = Number(referenceynumber.value) + Number(e.target.value);

            if((referenceynumber.min <= v) && (v <= referenceynumber.max))
            {
                referenceynumber.value = v;

                referenceynumberupdate();
            }
        }



        function referencebackgroundcolorload()
        {
            const div = document.createElement("div");
            div.id = "referencebackgroundcolor";
            div.innerHTML = "background-color";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencebackgroundcolorload);

        function referencebackgroundcolorcolorload()
        {
            const br = document.createElement("br");
            referencebackgroundcolor.append(br);

            const input = document.createElement("input");
            input.id = "referencebackgroundcolorcolor";
            input.type = "color";
            input.value = "#ffffff";
            input.addEventListener("input", referencebackgroundcolorcolorupdate);
            referencebackgroundcolor.append(input);

            //referencebackgroundcolorcolorset();
        }
        addEventListener("load", referencebackgroundcolorcolorload);

        function referencebackgroundcolorcolorset()
        {
            const c = referencebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referencebackgroundalphanumber.value;

            text.referencebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencebackgroundcolorcolorupdate()
        {
            referencebackgroundcolorcolorset();
            svgupdate();
        }

        function referencebackgroundcolorexactload()
        {
            const br = document.createElement("br");
            referencebackgroundcolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencebackgroundcolorexactupdate);
                referencebackgroundcolor.append(button);
            }
        }
        addEventListener("load", referencebackgroundcolorexactload);

        function referencebackgroundcolorexactupdate(e)
        {
            referencebackgroundcolorcolor.value = e.target.value;

            referencebackgroundcolorcolorupdate();
        }



        function referencebackgroundalphaload()
        {
            const div = document.createElement("div");
            div.id = "referencebackgroundalpha";
            div.innerHTML = "background-alpha";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencebackgroundalphaload);

        function referencebackgroundalphanumberload()
        {
            const br = document.createElement("br");
            referencebackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "referencebackgroundalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 0.5;
            input.addEventListener("input", referencebackgroundalphanumberupdate);
            referencebackgroundalpha.append(input);

            //referencebackgroundalphanumberset();
        }
        addEventListener("load", referencebackgroundalphanumberload);

        function referencebackgroundalphanumberset()
        {
            const c = referencebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referencebackgroundalphanumber.value;

            referencebackgroundalpharange.value = a;
            text.referencebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencebackgroundalphanumberupdate()
        {
            referencebackgroundalphanumberset();
            svgupdate();
        }

        function referencebackgroundalpharangeload()
        {
            const input = document.createElement("input");
            input.id = "referencebackgroundalpharange";
            input.max = referencebackgroundalphanumber.max;
            input.min = referencebackgroundalphanumber.min;
            input.step = referencebackgroundalphanumber.step;
            input.type = "range";
            input.value = referencebackgroundalphanumber.value;
            input.addEventListener("input", referencebackgroundalpharangeupdate);
            referencebackgroundalpha.append(input);

            referencebackgroundalpharangeset();
        }
        addEventListener("load", referencebackgroundalpharangeload);

        function referencebackgroundalpharangeset()
        {
            const c = referencebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referencebackgroundalpharange.value;

            referencebackgroundalphanumber.value = a;
            text.referencebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencebackgroundalpharangeupdate()
        {
            referencebackgroundalpharangeset();
            svgupdate();
        }

        function referencebackgroundalphaexactload()
        {
            const br = document.createElement("br");
            referencebackgroundalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencebackgroundalphaexactupdate);
                referencebackgroundalpha.append(button);
            }
        }
        addEventListener("load", referencebackgroundalphaexactload);

        function referencebackgroundalphaexactupdate(e)
        {
            referencebackgroundalphanumber.value = Number(e.target.value);

            referencebackgroundalphanumberupdate();
        }

        function referencebackgroundalphaincrementload()
        {
            const br = document.createElement("br");
            referencebackgroundalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencebackgroundalphaincrementupdate);
                referencebackgroundalpha.append(button);
            }
        }
        addEventListener("load", referencebackgroundalphaincrementload);

        function referencebackgroundalphaincrementupdate(e)
        {
            let v = Number(referencebackgroundalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((referencebackgroundalphanumber.min <= v) && (v <= referencebackgroundalphanumber.max))
            {
                referencebackgroundalphanumber.value = v;

                referencebackgroundalphanumberupdate();
            }
        }



        function referencebordercolorload()
        {
            const div = document.createElement("div");
            div.id = "referencebordercolor";
            div.innerHTML = "border-color";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencebordercolorload);

        function referencebordercolorcolorload()
        {
            const br = document.createElement("br");
            referencebordercolor.append(br);

            const input = document.createElement("input");
            input.id = "referencebordercolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", referencebordercolorcolorupdate);
            referencebordercolor.append(input);

            //referencebordercolorcolorset();
        }
        addEventListener("load", referencebordercolorcolorload);

        function referencebordercolorcolorset()
        {
            const c = referencebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referenceborderalphanumber.value;

            text.referencebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencebordercolorcolorupdate()
        {
            referencebordercolorcolorset();
            svgupdate();
        }

        function referencebordercolorexactload()
        {
            const br = document.createElement("br");
            referencebordercolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencebordercolorexactupdate);
                referencebordercolor.append(button);
            }
        }
        addEventListener("load", referencebordercolorexactload);

        function referencebordercolorexactupdate(e)
        {
            referencebordercolorcolor.value = e.target.value;

            referencebordercolorcolorupdate();
        }



        function referenceborderalphaload()
        {
            const div = document.createElement("div");
            div.id = "referenceborderalpha";
            div.innerHTML = "border-alpha";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referenceborderalphaload);

        function referenceborderalphanumberload()
        {
            const br = document.createElement("br");
            referenceborderalpha.append(br);

            const input = document.createElement("input");
            input.id = "referenceborderalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", referenceborderalphanumberupdate);
            referenceborderalpha.append(input);

            //referenceborderalphanumberset();
        }
        addEventListener("load", referenceborderalphanumberload);

        function referenceborderalphanumberset()
        {
            const c = referencebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referenceborderalphanumber.value;

            referenceborderalpharange.value = a;
            text.referencebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referenceborderalphanumberupdate()
        {
            referenceborderalphanumberset();
            svgupdate();
        }

        function referenceborderalpharangeload()
        {
            const input = document.createElement("input");
            input.id = "referenceborderalpharange";
            input.max = referenceborderalphanumber.max;
            input.min = referenceborderalphanumber.min;
            input.step = referenceborderalphanumber.step;
            input.type = "range";
            input.value = referenceborderalphanumber.value;
            input.addEventListener("input", referenceborderalpharangeupdate);
            referenceborderalpha.append(input);

            referenceborderalpharangeset();
        }
        addEventListener("load", referenceborderalpharangeload);

        function referenceborderalpharangeset()
        {
            const c = referencebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referenceborderalpharange.value;

            referenceborderalphanumber.value = a;
            text.referencebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referenceborderalpharangeupdate()
        {
            referenceborderalpharangeset();
            svgupdate();
        }

        function referenceborderalphaexactload()
        {
            const br = document.createElement("br");
            referenceborderalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceborderalphaexactupdate);
                referenceborderalpha.append(button);
            }
        }
        addEventListener("load", referenceborderalphaexactload);

        function referenceborderalphaexactupdate(e)
        {
            referenceborderalphanumber.value = Number(e.target.value);

            referenceborderalphanumberupdate();
        }

        function referenceborderalphaincrementload()
        {
            const br = document.createElement("br");
            referenceborderalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceborderalphaincrementupdate);
                referenceborderalpha.append(button);
            }
        }
        addEventListener("load", referenceborderalphaincrementload);

        function referenceborderalphaincrementupdate(e)
        {
            let v = Number(referenceborderalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((referenceborderalphanumber.min <= v) && (v <= referenceborderalphanumber.max))
            {
                referenceborderalphanumber.value = v;

                referenceborderalphanumberupdate();
            }
        }



        function referenceborderradiusload()
        {
            const div = document.createElement("div");
            div.id = "referenceborderradius";
            div.innerHTML = "border-radius";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referenceborderradiusload);

        function referenceborderradiusnumberload()
        {
            const br = document.createElement("br");
            referenceborderradius.append(br);

            const input = document.createElement("input");
            input.id = "referenceborderradiusnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", referenceborderradiusnumberupdate);
            referenceborderradius.append(input);

            //referenceborderradiusnumberset();
        }
        addEventListener("load", referenceborderradiusnumberload);

        function referenceborderradiusnumberset()
        {
            const v = Number(referenceborderradiusnumber.value);

            referenceborderradiusrange.value = v;
            text.referenceborderradius = v;
        }

        function referenceborderradiusnumberupdate()
        {
            referenceborderradiusnumberset();
            svgupdate();
        }

        function referenceborderradiusrangeload()
        {
            const input = document.createElement("input");
            input.id = "referenceborderradiusrange";
            input.max = referenceborderradiusnumber.max;
            input.min = referenceborderradiusnumber.min;
            input.type = "range";
            input.value = referenceborderradiusnumber.value;
            input.addEventListener("input", referenceborderradiusrang
10000
eupdate);
            referenceborderradius.append(input);

            referenceborderradiusrangeset();
        }
        addEventListener("load", referenceborderradiusrangeload);

        function referenceborderradiusrangeset()
        {
            const v = Number(referenceborderradiusrange.value);

            referenceborderradiusnumber.value = v;
            text.referenceborderradius = v;
        }

        function referenceborderradiusrangeupdate()
        {
            referenceborderradiusrangeset();
            svgupdate();
        }

        function referenceborderradiusexactload()
        {
            const br = document.createElement("br");
            referenceborderradius.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceborderradiusexactupdate);
                referenceborderradius.append(button);
            }
        }
        addEventListener("load", referenceborderradiusexactload);

        function referenceborderradiusexactupdate(e)
        {
            referenceborderradiusnumber.value = Number(e.target.value);

            referenceborderradiusnumberupdate();
        }

        function referenceborderradiusincrementload()
        {
            const br = document.createElement("br");
            referenceborderradius.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceborderradiusincrementupdate);
                referenceborderradius.append(button);
            }
        }
        addEventListener("load", referenceborderradiusincrementload);

        function referenceborderradiusincrementupdate(e)
        {
            const v = Number(referenceborderradiusnumber.value) + Number(e.target.value);

            if((referenceborderradiusnumber.min <= v) && (v <= referenceborderradiusnumber.max))
            {
                referenceborderradiusnumber.value = v;

                referenceborderradiusnumberupdate();
            }
        }



        function referenceborderstyleload()
        {
            const div = document.createElement("div");
            div.id = "referenceborderstyle";
            div.innerHTML = "border-style";
            tabcontentreference.append(div);
        }
        addEventListener("load", referenceborderstyleload);

        function referenceborderstyleselectload()
        {
            const br = document.createElement("br");
            referenceborderstyle.append(br);

            const select = document.createElement("select");
            select.id = "referenceborderstyleselect";
            select.addEventListener("input", referenceborderstyleselectupdate);
            referenceborderstyle.append(select);

            for(const value of borderstylearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            //select.value = borderstylearray[8];

            referenceborderstyleselectset();
        }
        addEventListener("load", referenceborderstyleselectload);

        function referenceborderstyleselectset()
        {
            text.referenceborderstyle = referenceborderstyleselect.value;
        }

        function referenceborderstyleselectupdate()
        {
            referenceborderstyleselectset();
            svgupdate();
        }



        function referenceborderwidthload()
        {
            const div = document.createElement("div");
            div.id = "referenceborderwidth";
            div.innerHTML = "border-width";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referenceborderwidthload);

        function referenceborderwidthnumberload()
        {
            const br = document.createElement("br");
            referenceborderwidth.append(br);

            const input = document.createElement("input");
            input.id = "referenceborderwidthnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 25;
            input.addEventListener("input", referenceborderwidthnumberupdate);
            referenceborderwidth.append(input);

            //referenceborderwidthnumberset();
        }
        addEventListener("load", referenceborderwidthnumberload);

        function referenceborderwidthnumberset()
        {
            const v = Number(referenceborderwidthnumber.value);

            referenceborderwidthrange.value = v;
            text.referenceborderwidth = v;
        }

        function referenceborderwidthnumberupdate()
        {
            referenceborderwidthnumberset();
            svgupdate();
        }

        function referenceborderwidthrangeload()
        {
            const input = document.createElement("input");
            input.id = "referenceborderwidthrange";
            input.max = referenceborderwidthnumber.max;
            input.min = referenceborderwidthnumber.min;
            input.type = "range";
            input.value = referenceborderwidthnumber.value;
            input.addEventListener("input", referenceborderwidthrangeupdate);
            referenceborderwidth.append(input);

            referenceborderwidthrangeset();
        }
        addEventListener("load", referenceborderwidthrangeload);

        function referenceborderwidthrangeset()
        {
            const v = Number(referenceborderwidthrange.value);

            referenceborderwidthnumber.value = v;
            text.referenceborderwidth = v;
        }

        function referenceborderwidthrangeupdate()
        {
            referenceborderwidthrangeset();
            svgupdate();
        }

        function referenceborderwidthexactload()
        {
            const br = document.createElement("br");
            referenceborderwidth.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceborderwidthexactupdate);
                referenceborderwidth.append(button);
            }
        }
        addEventListener("load", referenceborderwidthexactload);

        function referenceborderwidthexactupdate(e)
        {
            referenceborderwidthnumber.value = Number(e.target.value);

            referenceborderwidthnumberupdate();
        }

        function referenceborderwidthincrementload()
        {
            const br = document.createElement("br");
            referenceborderwidth.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceborderwidthincrementupdate);
                referenceborderwidth.append(button);
            }
        }
        addEventListener("load", referenceborderwidthincrementload);

        function referenceborderwidthincrementupdate(e)
        {
            const v = Number(referenceborderwidthnumber.value) + Number(e.target.value);

            if((referenceborderwidthnumber.min <= v) && (v <= referenceborderwidthnumber.max))
            {
                referenceborderwidthnumber.value = v;

                referenceborderwidthnumberupdate();
            }
        }



        function referencehorizontalload()
        {
            const div = document.createElement("div");
            div.id = "referencehorizontal";
            div.innerHTML = "horizontal";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencehorizontalload);

        function referencehorizontalselectload()
        {
            const br = document.createElement("br");
            referencehorizontal.append(br);

            const select = document.createElement("select");
            select.id = "referencehorizontalselect";
            select.addEventListener("input", referencehorizontalselectupdate);
            referencehorizontal.append(select);

            for(const value of horizontalarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            select.value = horizontalarray[1];

            referencehorizontalselectset();
        }
        addEventListener("load", referencehorizontalselectload);

        function referencehorizontalselectset()
        {
            text.referencehorizontal = referencehorizontalselect.value;
        }

        function referencehorizontalselectupdate()
        {
            referencehorizontalselectset();
            svgupdate();
        }



        function referenceverticalload()
        {
            const div = document.createElement("div");
            div.id = "referencevertical";
            div.innerHTML = "vertical";
            tabcontentreference.append(div);
        }
        addEventListener("load", referenceverticalload);

        function referenceverticalselectload()
        {
            const br = document.createElement("br");
            referencevertical.append(br);

            const select = document.createElement("select");
            select.id = "referenceverticalselect";
            select.addEventListener("input", referenceverticalselectupdate);
            referencevertical.append(select);

            for(const value of verticalarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            select.value = verticalarray[1];

            referenceverticalselectset();
        }
        addEventListener("load", referenceverticalselectload);

        function referenceverticalselectset()
        {
            text.referencevertical = referenceverticalselect.value;
        }

        function referenceverticalselectupdate()
        {
            referenceverticalselectset();
            svgupdate();
        }



        function referencewritingmodeload()
        {
            const div = document.createElement("div");
            div.id = "referencewritingmode";
            div.innerHTML = "writing-mode";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencewritingmodeload);

        function referencewritingmodeselectload()
        {
            const br = document.createElement("br");
            referencewritingmode.append(br);

            const select = document.createElement("select");
            select.id = "referencewritingmodeselect";
            select.addEventListener("input", referencewritingmodeselectupdate);
            referencewritingmode.append(select);

            for(const value of writingmodearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            referencewritingmodeselectset();
        }
        addEventListener("load", referencewritingmodeselectload);

        function referencewritingmodeselectset()
        {
            text.referencewritingmode = referencewritingmodeselect.value;
        }

        function referencewritingmodeselectupdate()
        {
            referencewritingmodeselectset();
            svgupdate();
        }



        function referencefontfamilyload()
        {
            const div = document.createElement("div");
            div.id = "referencefontfamily";
            div.innerHTML = "font-family";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencefontfamilyload);

        function referencefontfamilyselectload()
        {
            const br = document.createElement("br");
            referencefontfamily.append(br);

            const select = document.createElement("select");
            select.id = "referencefontfamilyselect";
            select.addEventListener("input", referencefontfamilyselectupdate);
            referencefontfamily.append(select);

            for(const value of fontfamilyarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            referencefontfamilyselectset();
        }
        addEventListener("load", referencefontfamilyselectload);

        function referencefontfamilyselectset()
        {
            text.referencefontfamily = referencefontfamilyselect.value;
        }

        function referencefontfamilyselectupdate()
        {
            referencefontfamilyselectset();
            svgupdate();
        }



        function referencefontsizeload()
        {
            const div = document.createElement("div");
            div.id = "referencefontsize";
            div.innerHTML = "font-size";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencefontsizeload);

        function referencefontsizenumberload()
        {
            const br = document.createElement("br");
            referencefontsize.append(br);

            const input = document.createElement("input");
            input.id = "referencefontsizenumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", referencefontsizenumberupdate);
            referencefontsize.append(input);

            //referencefontsizenumberset();
        }
        addEventListener("load", referencefontsizenumberload);

        function referencefontsizenumberset()
        {
            const v = Number(referencefontsizenumber.value);

            referencefontsizerange.value = v;
            text.referencefontsize = v;
        }

        function referencefontsizenumberupdate()
        {
            referencefontsizenumberset();
            svgupdate();
        }

        function referencefontsizerangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefontsizerange";
            input.max = referencefontsizenumber.max;
            input.min = referencefontsizenumber.min;
            input.type = "range";
            input.value = referencefontsizenumber.value;
            input.addEventListener("input", referencefontsizerangeupdate);
            referencefontsize.append(input);

            referencefontsizerangeset();
        }
        addEventListener("load", referencefontsizerangeload);

        function referencefontsizerangeset()
        {
            const v = Number(referencefontsizerange.value);

            referencefontsizenumber.value = v;
            text.referencefontsize = v;
        }

        function referencefontsizerangeupdate()
        {
            referencefontsizerangeset();
            svgupdate();
        }

        function referencefontsizeexactload()
        {
            const br = document.createElement("br");
            referencefontsize.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefontsizeexactupdate);
                referencefontsize.append(button);
            }
        }
        addEventListener("load", referencefontsizeexactload);

        function referencefontsizeexactupdate(e)
        {
            referencefontsizenumber.value = Number(e.target.value);

            referencefontsizenumberupdate();
        }

        function referencefontsizeincrementload()
        {
            const br = document.createElement("br");
            referencefontsize.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefontsizeincrementupdate);
                referencefontsize.append(button);
            }
        }
        addEventListener("load", referencefontsizeincrementload);

        function referencefontsizeincrementupdate(e)
        {
            const v = Number(referencefontsizenumber.value) + Number(e.target.value);

            if((referencefontsizenumber.min <= v) && (v <= referencefontsizenumber.max))
            {
                referencefontsizenumber.value = v;

                referencefontsizenumberupdate();
            }
        }

/*
        function referencefontsizefitload()
        {
            const button = document.createElement("button");
            button.innerHTML = "fit";
            button.addEventListener("click", referencefontsizefitupdate);
            referencefontsize.append(button);
        }
        addEventListener("load", referencefontsizefitload);

        function referencefontsizefitupdate()
        {
            const t = document.createElement("div");
            referencefontsize.append(t);
            t.innerHTML = text.bookname;
            t.style.fontSize = `${referencefontsizenumber.value}px`;

            const h1 = text.referencewidth;
            const h2 = text.referenceheight;
            const h3 = t.offsetWidth;
            const h4 = t.offsetHeight;
            const h5 = referencefontsizenumber.value;

            //const h4 = t.offsetParent;//t.style.fontSize;
            //const h5 = t.clientHeight;//text.style.height;
            //const h6 = text.height;
            //const h7 = text.getBoundingClientRect().height;
            //const h8 = text.style.lineHeight;
            //const h9 = canvas.getBoundingClientRect().height;
            console.log(h1, h2, h3, h4, h5);
            //t.hidden = true;

            if(h2 < h4)
            {
                referencefontsizenumber.value -= 1;
                referencefit();
            }

            referencefontsizenumberupdate();
        }
//*/



        function referencefontstyleload()
        {
            const div = document.createElement("div");
            div.id = "referencefontstyle";
            div.innerHTML = "font-style";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencefontstyleload);

        function referencefontstyleselectload()
        {
            const br = document.createElement("br");
            referencefontstyle.append(br);

            const select = document.createElement("select");
            select.id = "referencefontstyleselect";
            select.addEventListener("input", referencefontstyleselectupdate);
            referencefontstyle.append(select);

            for(const value of fontstylearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            referencefontstyleselectset();
        }
        addEventListener("load", referencefontstyleselectload);

        function referencefontstyleselectset()
        {
            text.referencefontstyle = referencefontstyleselect.value;
        }

        function referencefontstyleselectupdate()
        {
            referencefontstyleselectset();
            svgupdate();
        }



        function referencefontvariantload()
        {
            const div = document.createElement("div");
            div.id = "referencefontvariant";
            div.innerHTML = "font-variant";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencefontvariantload);

        function referencefontvariantselectload()
        {
            const br = document.createElement("br");
            referencefontvariant.append(br);

            const select = document.createElement("select");
            select.id = "referencefontvariantselect";
            select.addEventListener("input", referencefontvariantselectupdate);
            referencefontvariant.append(select);

            for(const value of fontvariantarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            referencefontvariantselectset();
        }
        addEventListener("load", referencefontvariantselectload);

        function referencefontvariantselectset()
        {
            text.referencefontvariant = referencefontvariantselect.value;
        }

        function referencefontvariantselectupdate()
        {
            referencefontvariantselectset();
            svgupdate();
        }



        function referencefontweightload()
        {
            const div = document.createElement("div");
            div.id = "referencefontweight";
            div.innerHTML = "font-weight";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencefontweightload);

        function referencefontweightselectload()
        {
            const br = document.createElement("br");
            referencefontweight.append(br);

            const select = document.createElement("select");
            select.id = "referencefontweightselect";
            select.addEventListener("input", referencefontweightselectupdate);
            referencefontweight.append(select);

            for(const value of fontweightarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            referencefontweightselectset();
        }
        addEventListener("load", referencefontweightselectload);

        function referencefontweightselectset()
        {
            text.referencefontweight = referencefontweightselect.value;
        }

        function referencefontweightselectupdate()
        {
            referencefontweightselectset();
            svgupdate();
        }



        function referencecolorload()
        {
            const div = document.createElement("div");
            div.id = "referencecolor";
            div.innerHTML = "color";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencecolorload);

        function referencecolorcolorload()
        {
            const br = document.createElement("br");
            referencecolor.append(br);

            const input = document.createElement("input");
            input.id = "referencecolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", referencecolorcolorupdate);
            referencecolor.append(input);

            //referencecolorcolorset();
        }
        addEventListener("load", referencecolorcolorload);

        function referencecolorcolorset()
        {
            const c = referencecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referencealphanumber.value;

            text.referencecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencecolorcolorupdate()
        {
            referencecolorcolorset();
            svgupdate();
        }

        function referencecolorexactload()
        {
            const br = document.createElement("br");
            referencecolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencecolorexactupdate);
                referencecolor.append(button);
            }
        }
        addEventListener("load", referencecolorexactload);

        function referencecolorexactupdate(e)
        {
            referencecolorcolor.value = e.target.value;

            referencecolorcolorupdate();
        }



        function referencealphaload()
        {
            const div = document.createElement("div");
            div.id = "referencealpha";
            div.innerHTML = "alpha";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencealphaload);

        function referencealphanumberload()
        {
            const br = document.createElement("br");
            referencealpha.append(br);

            const input = document.createElement("input");
            input.id = "referencealphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", referencealphanumberupdate);
            referencealpha.append(input);

            //referencealphanumberset();
        }
        addEventListener("load", referencealphanumberload);

        function referencealphanumberset()
        {
            const c = referencecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referencealphanumber.value;

            referencealpharange.value = a;
            text.referencecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencealphanumberupdate()
        {
            referencealphanumberset();
            svgupdate();
        }

        function referencealpharangeload()
        {
            const input = document.createElement("input");
            input.id = "referencealpharange";
            input.max = referencealphanumber.max;
            input.min = referencealphanumber.min;
            input.step = referencealphanumber.step;
            input.type = "range";
            input.value = referencealphanumber.value;
            input.addEventListener("input", referencealpharangeupdate);
            referencealpha.append(input);

            referencealpharangeset();
        }
        addEventListener("load", referencealpharangeload);

        function referencealpharangeset()
        {
            const c = referencecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referencealpharange.value;

            referencealphanumber.value = a;
            text.referencecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencealpharangeupdate()
        {
            referencealpharangeset();
            svgupdate();
        }

        function referencealphaexactload()
        {
            const br = document.createElement("br");
            referencealpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencealphaexactupdate);
                referencealpha.append(button);
            }
        }
        addEventListener("load", referencealphaexactload);

        function referencealphaexactupdate(e)
        {
            referencealphanumber.value = Number(e.target.value);

            referencealphanumberupdate();
        }

        function referencealphaincrementload()
        {
            const br = document.createElement("br");
            referencealpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencealphaincrementupdate);
                referencealpha.append(button);
            }
        }
        addEventListener("load", referencealphaincrementload);

        function referencealphaincrementupdate(e)
        {
            let v = Number(referencealphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((referencealphanumber.min <= v) && (v <= referencealphanumber.max))
            {
                referencealphanumber.value = v;

                referencealphanumberupdate();
            }
        }



/*leftoff
        function referencefilterblurload()
        {
            const div = document.createElement("div");
            div.id = "referencefilterblur";
            div.innerHTML = "filter-blur";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefilterblurload);

        function referencefilterblurnumberload()
        {
            const br = document.createElement("br");
            referencefilterblur.append(br);

            const input = document.createElement("input");
            input.id = "referencefilterblurnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencefilterblurnumberupdate);
            referencefilterblur.append(input);

            //referencefilterblurnumberset();
        }
        addEventListener("load", referencefilterblurnumberload);

        function referencefilterblurnumberset()
        {
            const v = referencefilterblurnumber.value;

            referencefilterblurrange.value = v;
            text.referencebackdropfilterblur = v;
        }

        function referencefilterblurnumberupdate()
        {
            referencefilterblurnumberset();
            svgupdate();
        }

        function referencefilterblurrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefilterblurrange";
            input.max = referencefilterblurnumber.max;
            input.min = referencefilterblurnumber.min;
            input.step = referencefilterblurnumber.step;
            input.type = "range";
            input.value = referencefilterblurnumber.value;
            input.addEventListener("input", referencefilterblurrangeupdate);
            referencefilterblur.append(input);

            referencefilterblurrangeset();
        }
        addEventListener("load", referencefilterblurrangeload);

        function referencefilterblurrangeset()
        {
            const v = referencefilterblurrange.value;

            referencefilterblurnumber.value = v;
            text.referencebackdropfilterblur = v;
        }

        function referencefilterblurrangeupdate()
        {
            referencefilterblurrangeset();
            svgupdate();
        }

        function referencefilterblurexactload()
        {
            const br = document.createElement("br");
            referencefilterblur.append(br);

            const array =
            [
                ["0",0],
                ["2",2],
                ["4",4],
                ["8",8],
                ["16",16],
                ["32",32],
                ["64",64],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterblurexactupdate);
                referencefilterblur.append(button);
            }
        }
        addEventListener("load", referencefilterblurexactload);

        function referencefilterblurexactupdate(e)
        {
            referencefilterblurnumber.value = Number(e.target.value);

            referencefilterblurnumberupdate();
        }

        function referencefilterblurincrementload()
        {
            const br = document.createElement("br");
            referencefilterblur.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterblurincrementupdate);
                referencefilterblur.append(button);
            }
        }
        addEventListener("load", referencefilterblurincrementload);

        function referencefilterblurincrementupdate(e)
        {
            const v = Number(referencefilterblurnumber.value) + Number(e.target.value);

            if((referencefilterblurnumber.min <= v) && (v <= referencefilterblurnumber.max))
            {
                referencefilterblurnumber.value = v;

                referencefilterblurnumberupdate();
            }
        }



        function referencefilterbrightnessload()
        {
            const div = document.createElement("div");
            div.id = "referencefilterbrightness";
            div.innerHTML = "filter-brightness";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefilterbrightnessload);

        function referencefilterbrightnessnumberload()
        {
            const br = document.createElement("br");
            referencefilterbrightness.append(br);

            const input = document.createElement("input");
            input.id = "referencefilterbrightnessnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", referencefilterbrightnessnumberupdate);
            referencefilterbrightness.append(input);

            //referencefilterbrightnessnumberset();
        }
        addEventListener("load", referencefilterbrightnessnumberload);

        function referencefilterbrightnessnumberset()
        {
            const v = referencefilterbrightnessnumber.value;

            referencefilterbrightnessrange.value = v;
            text.referencebackdropfilterbrightness = v;
        }

        function referencefilterbrightnessnumberupdate()
        {
            referencefilterbrightnessnumberset();
            svgupdate();
        }

        function referencefilterbrightnessrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefilterbrightnessrange";
            input.max = referencefilterbrightnessnumber.max;
            input.min = referencefilterbrightnessnumber.min;
            input.step = referencefilterbrightnessnumber.step;
            input.type = "range";
            input.value = referencefilterbrightnessnumber.value;
            input.addEventListener("input", referencefilterbrightnessrangeupdate);
            referencefilterbrightness.append(input);

            referencefilterbrightnessrangeset();
        }
        addEventListener("load", referencefilterbrightnessrangeload);

        function referencefilterbrightnessrangeset()
        {
            const v = referencefilterbrightnessrange.value;

            referencefilterbrightnessnumber.value = v;
            text.referencebackdropfilterbrightness = v;
        }

        function referencefilterbrightnessrangeupdate()
        {
            referencefilterbrightnessrangeset();
            svgupdate();
        }

        function referencefilterbrightnessexactload()
        {
            const br = document.createElement("br");
            referencefilterbrightness.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterbrightnessexactupdate);
                referencefilterbrightness.append(button);
            }
        }
        addEventListener("load", referencefilterbrightnessexactload);

        function referencefilterbrightnessexactupdate(e)
        {
            referencefilterbrightnessnumber.value = Number(e.target.value);

            referencefilterbrightnessnumberupdate();
        }

        function referencefilterbrightnessincrementload()
        {
            const br = document.createElement("br");
            referencefilterbrightness.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterbrightnessincrementupdate);
                referencefilterbrightness.append(button);
            }
        }
        addEventListener("load", referencefilterbrightnessincrementload);

        function referencefilterbrightnessincrementupdate(e)
        {
            const v = Number(referencefilterbrightnessnumber.value) + Number(e.target.value);

            if((referencefilterbrightnessnumber.min <= v) && (v <= referencefilterbrightnessnumber.max))
            {
                referencefilterbrightnessnumber.value = v;

                referencefilterbrightnessnumberupdate();
            }
        }



        function referencefiltercontrastload()
        {
            const div = document.createElement("div");
            div.id = "referencefiltercontrast";
            div.innerHTML = "filter-contrast";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefiltercontrastload);

        function referencefiltercontrastnumberload()
        {
            const br = document.createElement("br");
            referencefiltercontrast.append(br);

            const input = document.createElement("input");
            input.id = "referencefiltercontrastnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", referencefiltercontrastnumberupdate);
            referencefiltercontrast.append(input);

            //referencefiltercontrastnumberset();
        }
        addEventListener("load", referencefiltercontrastnumberload);

        function referencefiltercontrastnumberset()
        {
            const v = referencefiltercontrastnumber.value;

            referencefiltercontrastrange.value = v;
            text.referencebackdropfiltercontrast = v;
        }

        function referencefiltercontrastnumberupdate()
        {
            referencefiltercontrastnumberset();
            svgupdate();
        }

        function referencefiltercontrastrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefiltercontrastrange";
            input.max = referencefiltercontrastnumber.max;
            input.min = referencefiltercontrastnumber.min;
            input.step = referencefiltercontrastnumber.step;
            input.type = "range";
            input.value = referencefiltercontrastnumber.value;
            input.addEventListener("input", referencefiltercontrastrangeupdate);
            referencefiltercontrast.append(input);

            referencefiltercontrastrangeset();
        }
        addEventListener("load", referencefiltercontrastrangeload);

        function referencefiltercontrastrangeset()
        {
            const v = referencefiltercontrastrange.value;

            referencefiltercontrastnumber.value = v;
            text.referencebackdropfiltercontrast = v;
        }

        function referencefiltercontrastrangeupdate()
        {
            referencefiltercontrastrangeset();
            svgupdate();
        }

        function referencefiltercontrastexactload()
        {
            const br = document.createElement("br");
            referencefiltercontrast.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltercontrastexactupdate);
                referencefiltercontrast.append(button);
            }
        }
        addEventListener("load", referencefiltercontrastexactload);

        function referencefiltercontrastexactupdate(e)
        {
            referencefiltercontrastnumber.value = Number(e.target.value);

            referencefiltercontrastnumberupdate();
        }

        function referencefiltercontrastincrementload()
        {
            const br = document.createElement("br");
            referencefiltercontrast.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltercontrastincrementupdate);
                referencefiltercontrast.append(button);
            }
        }
        addEventListener("load", referencefiltercontrastincrementload);

        function referencefiltercontrastincrementupdate(e)
        {
            const v = Number(referencefiltercontrastnumber.value) + Number(e.target.value);

            if((referencefiltercontrastnumber.min <= v) && (v <= referencefiltercontrastnumber.max))
            {
                referencefiltercontrastnumber.value = v;

                referencefiltercontrastnumberupdate();
            }
        }



        function referencefiltergrayscaleload()
        {
            const div = document.createElement("div");
            div.id = "referencefiltergrayscale";
            div.innerHTML = "filter-grayscale";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefiltergrayscaleload);

        function referencefiltergrayscalenumberload()
        {
            const br = document.createElement("br");
            referencefiltergrayscale.append(br);

            const input = document.createElement("input");
            input.id = "referencefiltergrayscalenumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencefiltergrayscalenumberupdate);
            referencefiltergrayscale.append(input);

            //referencefiltergrayscalenumberset();
        }
        addEventListener("load", referencefiltergrayscalenumberload);

        function referencefiltergrayscalenumberset()
        {
            const v = referencefiltergrayscalenumber.value;

            referencefiltergrayscalerange.value = v;
            text.referencebackdropfiltergrayscale = v;
        }

        function referencefiltergrayscalenumberupdate()
        {
            referencefiltergrayscalenumberset();
            svgupdate();
        }

        function referencefiltergrayscalerangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefiltergrayscalerange";
            input.max = referencefiltergrayscalenumber.max;
            input.min = referencefiltergrayscalenumber.min;
            input.step = referencefiltergrayscalenumber.step;
            input.type = "range";
            input.value = referencefiltergrayscalenumber.value;
            input.addEventListener("input", referencefiltergrayscalerangeupdate);
            referencefiltergrayscale.append(input);

            referencefiltergrayscalerangeset();
        }
        addEventListener("load", referencefiltergrayscalerangeload);

        function referencefiltergrayscalerangeset()
        {
            const v = referencefiltergrayscalerange.value;

            referencefiltergrayscalenumber.value = v;
            text.referencebackdropfiltergrayscale = v;
        }

        function referencefiltergrayscalerangeupdate()
        {
            referencefiltergrayscalerangeset();
            svgupdate();
        }

        function referencefiltergrayscaleexactload()
        {
            const br = document.createElement("br");
            referencefiltergrayscale.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltergrayscaleexactupdate);
                referencefiltergrayscale.append(button);
            }
        }
        addEventListener("load", referencefiltergrayscaleexactload);

        function referencefiltergrayscaleexactupdate(e)
        {
            referencefiltergrayscalenumber.value = Number(e.target.value);

            referencefiltergrayscalenumberupdate();
        }

        function referencefiltergrayscaleincrementload()
        {
            const br = document.createElement("br");
            referencefiltergrayscale.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltergrayscaleincrementupdate);
                referencefiltergrayscale.append(button);
            }
        }
        addEventListener("load", referencefiltergrayscaleincrementload);

        function referencefiltergrayscaleincrementupdate(e)
        {
            const v = Number(referencefiltergrayscalenumber.value) + Number(e.target.value);

            if((referencefiltergrayscalenumber.min <= v) && (v <= referencefiltergrayscalenumber.max))
            {
                referencefiltergrayscalenumber.value = v;

                referencefiltergrayscalenumberupdate();
            }
        }



        function referencefilterhuerotateload()
        {
            const div = document.createElement("div");
            div.id = "referencefilterhuerotate";
            div.innerHTML = "filter-hue-rotate";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefilterhuerotateload);

        function referencefilterhuerotatenumberload()
        {
            const br = document.createElement("br");
            referencefilterhuerotate.append(br);

            const input = document.createElement("input");
            input.id = "referencefilterhuerotatenumber";
            input.max = 360;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencefilterhuerotatenumberupdate);
            referencefilterhuerotate.append(input);

            //referencefilterhuerotatenumberset();
        }
        addEventListener("load", referencefilterhuerotatenumberload);

        function referencefilterhuerotatenumberset()
        {
            const v = referencefilterhuerotatenumber.value;

            referencefilterhuerotaterange.value = v;
            text.referencebackdropfilterhuerotate = v;
        }

        function referencefilterhuerotatenumberupdate()
        {
            referencefilterhuerotatenumberset();
            svgupdate();
        }

        function referencefilterhuerotaterangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefilterhuerotaterange";
            input.max = referencefilterhuerotatenumber.max;
            input.min = referencefilterhuerotatenumber.min;
            input.step = referencefilterhuerotatenumber.step;
            input.type = "range";
            input.value = referencefilterhuerotatenumber.value;
            input.addEventListener("input", referencefilterhuerotaterangeupdate);
            referencefilterhuerotate.append(input);

            referencefilterhuerotaterangeset();
        }
        addEventListener("load", referencefilterhuerotaterangeload);

        function referencefilterhuerotaterangeset()
        {
            const v = referencefilterhuerotaterange.value;

            referencefilterhuerotatenumber.value = v;
            text.referencebackdropfilterhuerotate = v;
        }

        function referencefilterhuerotaterangeupdate()
        {
            referencefilterhuerotaterangeset();
            svgupdate();
        }

        function referencefilterhuerotateexactload()
        {
            const br = document.createElement("br");
            referencefilterhuerotate.append(br);

            const array =
            [
                ["0",0],
                ["90",90],
                ["180",180],
                ["270",270],
                ["360",360],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterhuerotateexactupdate);
                referencefilterhuerotate.append(button);
            }
        }
        addEventListener("load", referencefilterhuerotateexactload);

        function referencefilterhuerotateexactupdate(e)
        {
            referencefilterhuerotatenumber.value = Number(e.target.value);

            referencefilterhuerotatenumberupdate();
        }

        function referencefilterhuerotateincrementload()
        {
            const br = document.createElement("br");
            referencefilterhuerotate.append(br);

            const array =
            [
                //["-90",-90],
                ["-45",-45],
                ["-15",-15],
                ["-1",-1],
                ["+1",1],
                ["+15",15],
                ["+45",45],
                //["+90",90],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterhuerotateincrementupdate);
                referencefilterhuerotate.append(button);
            }
        }
        addEventListener("load", referencefilterhuerotateincrementload);

        function referencefilterhuerotateincrementupdate(e)
        {
            const v = Number(referencefilterhuerotatenumber.value) + Number(e.target.value);

            if((referencefilterhuerotatenumber.min <= v) && (v <= referencefilterhuerotatenumber.max))
            {
                referencefilterhuerotatenumber.value = v;

                referencefilterhuerotatenumberupdate();
            }
        }



        function referencefilterinvertload()
        {
            const div = document.createElement("div");
            div.id = "referencefilterinvert";
            div.innerHTML = "filter-invert";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefilterinvertload);

        function referencefilterinvertnumberload()
        {
            const br = document.createElement("br");
            referencefilterinvert.append(br);

            const input = document.createElement("input");
            input.id = "referencefilterinvertnumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencefilterinvertnumberupdate);
            referencefilterinvert.append(input);

            //referencefilterinvertnumberset();
        }
        addEventListener("load", referencefilterinvertnumberload);

        function referencefilterinvertnumberset()
        {
            const v = referencefilterinvertnumber.value;

            referencefilterinvertrange.value = v;
            text.referencebackdropfilterinvert = v;
        }

        function referencefilterinvertnumberupdate()
        {
            referencefilterinvertnumberset();
            svgupdate();
        }

        function referencefilterinvertrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefilterinvertrange";
            input.max = referencefilterinvertnumber.max;
            input.min = referencefilterinvertnumber.min;
            input.step = referencefilterinvertnumber.step;
            input.type = "range";
            input.value = referencefilterinvertnumber.value;
            input.addEventListener("input", referencefilterinvertrangeupdate);
            referencefilterinvert.append(input);

            referencefilterinvertrangeset();
        }
        addEventListener("load", referencefilterinvertrangeload);

        function referencefilterinvertrangeset()
        {
            const v = referencefilterinvertrange.value;

            referencefilterinvertnumber.value = v;
            text.referencebackdropfilterinvert = v;
        }

        function referencefilterinvertrangeupdate()
        {
            referencefilterinvertrangeset();
            svgupdate();
        }

        function referencefilterinvertexactload()
        {
            const br = document.createElement("br");
            referencefilterinvert.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterinvertexactupdate);
                referencefilterinvert.append(button);
            }
        }
        addEventListener("load", referencefilterinvertexactload);

        function referencefilterinvertexactupdate(e)
        {
            referencefilterinvertnumber.value = Number(e.target.value);

            referencefilterinvertnumberupdate();
        }

        function referencefilterinvertincrementload()
        {
            const br = document.createElement("br");
            referencefilterinvert.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefilterinvertincrementupdate);
                referencefilterinvert.append(button);
            }
        }
        addEventListener("load", referencefilterinvertincrementload);

        function referencefilterinvertincrementupdate(e)
        {
            const v = Number(referencefilterinvertnumber.value) + Number(e.target.value);

            if((referencefilterinvertnumber.min <= v) && (v <= referencefilterinvertnumber.max))
            {
                referencefilterinvertnumber.value = v;

                referencefilterinvertnumberupdate();
            }
        }



        function referencefiltersaturateload()
        {
            const div = document.createElement("div");
            div.id = "referencefiltersaturate";
            div.innerHTML = "filter-saturate";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefiltersaturateload);

        function referencefiltersaturatenumberload()
        {
            const br = document.createElement("br");
            referencefiltersaturate.append(br);

            const input = document.createElement("input");
            input.id = "referencefiltersaturatenumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", referencefiltersaturatenumberupdate);
            referencefiltersaturate.append(input);

            //referencefiltersaturatenumberset();
        }
        addEventListener("load", referencefiltersaturatenumberload);

        function referencefiltersaturatenumberset()
        {
            const v = referencefiltersaturatenumber.value;

            referencefiltersaturaterange.value = v;
            text.referencebackdropfiltersaturate = v;
        }

        function referencefiltersaturatenumberupdate()
        {
            referencefiltersaturatenumberset();
            svgupdate();
        }

        function referencefiltersaturaterangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefiltersaturaterange";
            input.max = referencefiltersaturatenumber.max;
            input.min = referencefiltersaturatenumber.min;
            input.step = referencefiltersaturatenumber.step;
            input.type = "range";
            input.value = referencefiltersaturatenumber.value;
            input.addEventListener("input", referencefiltersaturaterangeupdate);
            referencefiltersaturate.append(input);

            referencefiltersaturaterangeset();
        }
        addEventListener("load", referencefiltersaturaterangeload);

        function referencefiltersaturaterangeset()
        {
            const v = referencefiltersaturaterange.value;

            referencefiltersaturatenumber.value = v;
            text.referencebackdropfiltersaturate = v;
        }

        function referencefiltersaturaterangeupdate()
        {
            referencefiltersaturaterangeset();
            svgupdate();
        }

        function referencefiltersaturateexactload()
        {
            const br = document.createElement("br");
            referencefiltersaturate.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltersaturateexactupdate);
                referencefiltersaturate.append(button);
            }
        }
        addEventListener("load", referencefiltersaturateexactload);

        function referencefiltersaturateexactupdate(e)
        {
            referencefiltersaturatenumber.value = Number(e.target.value);

            referencefiltersaturatenumberupdate();
        }

        function referencefiltersaturateincrementload()
        {
            const br = document.createElement("br");
            referencefiltersaturate.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltersaturateincrementupdate);
                referencefiltersaturate.append(button);
            }
        }
        addEventListener("load", referencefiltersaturateincrementload);

        function referencefiltersaturateincrementupdate(e)
        {
            const v = Number(referencefiltersaturatenumber.value) + Number(e.target.value);

            if((referencefiltersaturatenumber.min <= v) && (v <= referencefiltersaturatenumber.max))
            {
                referencefiltersaturatenumber.value = v;

                referencefiltersaturatenumberupdate();
            }
        }



        function referencefiltersepiaload()
        {
            const div = document.createElement("div");
            div.id = "referencefiltersepia";
            div.innerHTML = "filter-sepia";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencefiltersepiaload);

        function referencefiltersepianumberload()
        {
            const br = document.createElement("br");
            referencefiltersepia.append(br);

            const input = document.createElement("input");
            input.id = "referencefiltersepianumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencefiltersepianumberupdate);
            referencefiltersepia.append(input);

            //referencefiltersepianumberset();
        }
        addEventListener("load", referencefiltersepianumberload);

        function referencefiltersepianumberset()
        {
            const v = referencefiltersepianumber.value;

            referencefiltersepiarange.value = v;
            text.referencebackdropfiltersepia = v;
        }

        function referencefiltersepianumberupdate()
        {
            referencefiltersepianumberset();
            svgupdate();
        }

        function referencefiltersepiarangeload()
        {
            const input = document.createElement("input");
            input.id = "referencefiltersepiarange";
            input.max = referencefiltersepianumber.max;
            input.min = referencefiltersepianumber.min;
            input.step = referencefiltersepianumber.step;
            input.type = "range";
            input.value = referencefiltersepianumber.value;
            input.addEventListener("input", referencefiltersepiarangeupdate);
            referencefiltersepia.append(input);

            referencefiltersepiarangeset();
        }
        addEventListener("load", referencefiltersepiarangeload);

        function referencefiltersepiarangeset()
        {
            const v = referencefiltersepiarange.value;

            referencefiltersepianumber.value = v;
            text.referencebackdropfiltersepia = v;
        }

        function referencefiltersepiarangeupdate()
        {
            referencefiltersepiarangeset();
            svgupdate();
        }

        function referencefiltersepiaexactload()
        {
            const br = document.createElement("br");
            referencefiltersepia.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltersepiaexactupdate);
                referencefiltersepia.append(button);
            }
        }
        addEventListener("load", referencefiltersepiaexactload);

        function referencefiltersepiaexactupdate(e)
        {
            referencefiltersepianumber.value = Number(e.target.value);

            referencefiltersepianumberupdate();
        }

        function referencefiltersepiaincrementload()
        {
            const br = document.createElement("br");
            referencefiltersepia.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencefiltersepiaincrementupdate);
                referencefiltersepia.append(button);
            }
        }
        addEventListener("load", referencefiltersepiaincrementload);

        function referencefiltersepiaincrementupdate(e)
        {
            const v = Number(referencefiltersepianumber.value) + Number(e.target.value);

            if((referencefiltersepianumber.min <= v) && (v <= referencefiltersepianumber.max))
            {
                referencefiltersepianumber.value = v;

                referencefiltersepianumberupdate();
            }
        }
//*/



/*
        function referencemargintopload()
        {
            const div = document.createElement("div");
            div.id = "referencemargintop";
            div.innerHTML = "margin-top";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencemargintopload);

        function referencemargintopnumberload()
        {
            const br = document.createElement("br");
            referencemargintop.append(br);

            const input = document.createElement("input");
            input.id = "referencemargintopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencemargintopnumberupdate);
            referencemargintop.append(input);

            //referencemargintopnumberset();
        }
        addEventListener("load", referencemargintopnumberload);

        function referencemargintopnumberset()
        {
            const v = Number(referencemargintopnumber.value);

            referencemargintoprange.value = v;
            text.referencemargintop = v;
        }

        function referencemargintopnumberupdate()
        {
            referencemargintopnumberset();

            svgupdate();
        }

        function referencemargintoprangeload()
        {
            const input = document.createElement("input");
            input.id = "referencemargintoprange";
            input.max = referencemargintopnumber.max;
            input.min = referencemargintopnumber.min;
            input.type = "range";
            input.value = referencemargintopnumber.value;
            input.addEventListener("input", referencemargintoprangeupdate);
            referencemargintop.append(input);

            referencemargintoprangeset();
        }
        addEventListener("load", referencemargintoprangeload);

        function referencemargintoprangeset()
        {
            const v = Number(referencemargintoprange.value);

            referencemargintopnumber.value = v;
            text.referencemargintop = v;
        }

        function referencemargintoprangeupdate()
        {
            referencemargintoprangeset();

            svgupdate();
        }



        function referencemarginbottomload()
        {
            const div = document.createElement("div");
            div.id = "referencemarginbottom";
            div.innerHTML = "margin-bottom";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencemarginbottomload);

        function referencemarginbottomnumberload()
        {
            const br = document.createElement("br");
            referencemarginbottom.append(br);

            const input = document.createElement("input");
            input.id = "referencemarginbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencemarginbottomnumberupdate);
            referencemarginbottom.append(input);

            //referencemarginbottomnumberset();
        }
        addEventListener("load", referencemarginbottomnumberload);

        function referencemarginbottomnumberset()
        {
            const v = Number(referencemarginbottomnumber.value);

            referencemarginbottomrange.value = v;
            text.referencemarginbottom = v;
        }

        function referencemarginbottomnumberupdate()
        {
            referencemarginbottomnumberset();

            svgupdate();
        }

        function referencemarginbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencemarginbottomrange";
            input.max = referencemarginbottomnumber.max;
            input.min = referencemarginbottomnumber.min;
            input.type = "range";
            input.value = referencemarginbottomnumber.value;
            input.addEventListener("input", referencemarginbottomrangeupdate);
            referencemarginbottom.append(input);

            referencemarginbottomrangeset();
        }
        addEventListener("load", referencemarginbottomrangeload);

        function referencemarginbottomrangeset()
        {
            const v = Number(referencemarginbottomrange.value);

            referencemarginbottomnumber.value = v;
            text.referencemarginbottom = v;
        }

        function referencemarginbottomrangeupdate()
        {
            referencemarginbottomrangeset();

            svgupdate();
        }



        function referencemarginleftload()
        {
            const div = document.createElement("div");
            div.id = "referencemarginleft";
            div.innerHTML = "margin-left";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencemarginleftload);

        function referencemarginleftnumberload()
        {
            const br = document.createElement("br");
            referencemarginleft.append(br);

            const input = document.createElement("input");
            input.id = "referencemarginleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencemarginleftnumberupdate);
            referencemarginleft.append(input);

            //referencemarginleftnumberset();
        }
        addEventListener("load", referencemarginleftnumberload);

        function referencemarginleftnumberset()
        {
            const v = Number(referencemarginleftnumber.value);

            referencemarginleftrange.value = v;
            text.referencemarginleft = v;
        }

        function referencemarginleftnumberupdate()
        {
            referencemarginleftnumberset();

            svgupdate();
        }

        function referencemarginleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencemarginleftrange";
            input.max = referencemarginleftnumber.max;
            input.min = referencemarginleftnumber.min;
            input.type = "range";
            input.value = referencemarginleftnumber.value;
            input.addEventListener("input", referencemarginleftrangeupdate);
            referencemarginleft.append(input);

            referencemarginleftrangeset();
        }
        addEventListener("load", referencemarginleftrangeload);

        function referencemarginleftrangeset()
        {
            const v = Number(referencemarginleftrange.value);

            referencemarginleftnumber.value = v;
            text.referencemarginleft = v;
        }

        function referencemarginleftrangeupdate()
        {
            referencemarginleftrangeset();

            svgupdate();
        }



        function referencemarginrightload()
        {
            const div = document.createElement("div");
            div.id = "referencemarginright";
            div.innerHTML = "margin-right";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencemarginrightload);

        function referencemarginrightnumberload()
        {
            const br = document.createElement("br");
            referencemarginright.append(br);

            const input = document.createElement("input");
            input.id = "referencemarginrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencemarginrightnumberupdate);
            referencemarginright.append(input);

            //referencemarginrightnumberset();
        }
        addEventListener("load", referencemarginrightnumberload);

        function referencemarginrightnumberset()
        {
            const v = Number(referencemarginrightnumber.value);

            referencemarginrightrange.value = v;
            text.referencemarginright = v;
        }

        function referencemarginrightnumberupdate()
        {
            referencemarginrightnumberset();

            svgupdate();
        }

        function referencemarginrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencemarginrightrange";
            input.max = referencemarginrightnumber.max;
            input.min = referencemarginrightnumber.min;
            input.type = "range";
            input.value = referencemarginrightnumber.value;
            input.addEventListener("input", referencemarginrightrangeupdate);
            referencemarginright.append(input);

            referencemarginrightrangeset();
        }
        addEventListener("load", referencemarginrightrangeload);

        function referencemarginrightrangeset()
        {
            const v = Number(referencemarginrightrange.value);

            referencemarginrightnumber.value = v;
            text.referencemarginright = v;
        }

        function referencemarginrightrangeupdate()
        {
            referencemarginrightrangeset();

            svgupdate();
        }



        function referencepaddingtopload()
        {
            const div = document.createElement("div");
            div.id = "referencepaddingtop";
            div.innerHTML = "padding-top";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencepaddingtopload);

        function referencepaddingtopnumberload()
        {
            const br = document.createElement("br");
            referencepaddingtop.append(br);

            const input = document.createElement("input");
            input.id = "referencepaddingtopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencepaddingtopnumberupdate);
            referencepaddingtop.append(input);

            //referencepaddingtopnumberset();
        }
        addEventListener("load", referencepaddingtopnumberload);

        function referencepaddingtopnumberset()
        {
            const v = Number(referencepaddingtopnumber.value);

            referencepaddingtoprange.value = v;
            text.referencepaddingtop = v;
        }

        function referencepaddingtopnumberupdate()
        {
            referencepaddingtopnumberset();

            svgupdate();
        }

        function referencepaddingtoprangeload()
        {
            const input = document.createElement("input");
            input.id = "referencepaddingtoprange";
            input.max = referencepaddingtopnumber.max;
            input.min = referencepaddingtopnumber.min;
            input.type = "range";
            input.value = referencepaddingtopnumber.value;
            input.addEventListener("input", referencepaddingtoprangeupdate);
            referencepaddingtop.append(input);

            referencepaddingtoprangeset();
        }
        addEventListener("load", referencepaddingtoprangeload);

        function referencepaddingtoprangeset()
        {
            const v = Number(referencepaddingtoprange.value);

            referencepaddingtopnumber.value = v;
            text.referencepaddingtop = v;
        }

        function referencepaddingtoprangeupdate()
        {
            referencepaddingtoprangeset();

            svgupdate();
        }



        function referencepaddingbottomload()
        {
            const div = document.createElement("div");
            div.id = "referencepaddingbottom";
            div.innerHTML = "padding-bottom";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencepaddingbottomload);

        function referencepaddingbottomnumberload()
        {
            const br = document.createElement("br");
            referencepaddingbottom.append(br);

            const input = document.createElement("input");
            input.id = "referencepaddingbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencepaddingbottomnumberupdate);
            referencepaddingbottom.append(input);

            //referencepaddingbottomnumberset();
        }
        addEventListener("load", referencepaddingbottomnumberload);

        function referencepaddingbottomnumberset()
        {
            const v = Number(referencepaddingbottomnumber.value);

            referencepaddingbottomrange.value = v;
            text.referencepaddingbottom = v;
        }

        function referencepaddingbottomnumberupdate()
        {
            referencepaddingbottomnumberset();

            svgupdate();
        }

        function referencepaddingbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencepaddingbottomrange";
            input.max = referencepaddingbottomnumber.max;
            input.min = referencepaddingbottomnumber.min;
            input.type = "range";
            input.value = referencepaddingbottomnumber.value;
            input.addEventListener("input", referencepaddingbottomrangeupdate);
            referencepaddingbottom.append(input);

            referencepaddingbottomrangeset();
        }
        addEventListener("load", referencepaddingbottomrangeload);

        function re
10000
ferencepaddingbottomrangeset()
        {
            const v = Number(referencepaddingbottomrange.value);

            referencepaddingbottomnumber.value = v;
            text.referencepaddingbottom = v;
        }

        function referencepaddingbottomrangeupdate()
        {
            referencepaddingbottomrangeset();

            svgupdate();
        }



        function referencepaddingleftload()
        {
            const div = document.createElement("div");
            div.id = "referencepaddingleft";
            div.innerHTML = "padding-left";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencepaddingleftload);

        function referencepaddingleftnumberload()
        {
            const br = document.createElement("br");
            referencepaddingleft.append(br);

            const input = document.createElement("input");
            input.id = "referencepaddingleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencepaddingleftnumberupdate);
            referencepaddingleft.append(input);

            //referencepaddingleftnumberset();
        }
        addEventListener("load", referencepaddingleftnumberload);

        function referencepaddingleftnumberset()
        {
            const v = Number(referencepaddingleftnumber.value);

            referencepaddingleftrange.value = v;
            text.referencepaddingleft = v;
        }

        function referencepaddingleftnumberupdate()
        {
            referencepaddingleftnumberset();

            svgupdate();
        }

        function referencepaddingleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencepaddingleftrange";
            input.max = referencepaddingleftnumber.max;
            input.min = referencepaddingleftnumber.min;
            input.type = "range";
            input.value = referencepaddingleftnumber.value;
            input.addEventListener("input", referencepaddingleftrangeupdate);
            referencepaddingleft.append(input);

            referencepaddingleftrangeset();
        }
        addEventListener("load", referencepaddingleftrangeload);


        function referencepaddingleftrangeset()
        {
            const v = Number(referencepaddingleftrange.value);

            referencepaddingleftnumber.value = v;
            text.referencepaddingleft = v;
        }

        function referencepaddingleftrangeupdate()
        {
            referencepaddingleftrangeset();

            svgupdate();
        }



        function referencepaddingrightload()
        {
            const div = document.createElement("div");
            div.id = "referencepaddingright";
            div.innerHTML = "padding-right";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencepaddingrightload);

        function referencepaddingrightnumberload()
        {
            const br = document.createElement("br");
            referencepaddingright.append(br);

            const input = document.createElement("input");
            input.id = "referencepaddingrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", referencepaddingrightnumberupdate);
            referencepaddingright.append(input);

            //referencepaddingrightnumberset();
        }
        addEventListener("load", referencepaddingrightnumberload);

        function referencepaddingrightnumberset()
        {
            const v = Number(referencepaddingrightnumber.value);

            referencepaddingrightrange.value = v;
            text.referencepaddingright = v;
        }

        function referencepaddingrightnumberupdate()
        {
            referencepaddingrightnumberset();

            svgupdate();
        }

        function referencepaddingrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencepaddingrightrange";
            input.max = referencepaddingrightnumber.max;
            input.min = referencepaddingrightnumber.min;
            input.type = "range";
            input.value = referencepaddingrightnumber.value;
            input.addEventListener("input", referencepaddingrightrangeupdate);
            referencepaddingright.append(input);

            referencepaddingrightrangeset();
        }
        addEventListener("load", referencepaddingrightrangeload);

        function referencepaddingrightrangeset()
        {
            const v = Number(referencepaddingrightrange.value);

            referencepaddingrightnumber.value = v;
            text.referencepaddingright = v;
        }

        function referencepaddingrightrangeupdate()
        {
            referencepaddingrightrangeset();

            svgupdate();
        }
//*/






        function passagewidthload()
        {
            const div = document.createElement("div");
            div.id = "passagewidth";
            div.innerHTML = "width";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagewidthload);

        function passagewidthnumberload()
        {
            const br = document.createElement("br");
            passagewidth.append(br);

            const input = document.createElement("input");
            input.id = "passagewidthnumber";
            input.max = maxwidth;
            input.min = 0;
            input.type = "number";
            input.value = canvas.width - 100;
            input.addEventListener("input", passagewidthnumberupdate);
            passagewidth.append(input);

            //passagewidthnumberset();
        }
        addEventListener("load", passagewidthnumberload);

        function passagewidthnumberset()
        {
            const v = Number(passagewidthnumber.value);

            passagewidthrange.value = v;
            text.passagewidth = v;
        }

        function passagewidthnumberupdate()
        {
            passagewidthnumberset();
            svgupdate();
        }

        function passagewidthrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagewidthrange";
            input.max = passagewidthnumber.max;
            input.min = passagewidthnumber.min;
            input.type = "range";
            input.value = passagewidthnumber.value;
            input.addEventListener("input", passagewidthrangeupdate);
            passagewidth.append(input);

            passagewidthrangeset();
        }
        addEventListener("load", passagewidthrangeload);

        function passagewidthrangeset()
        {
            const v = Number(passagewidthrange.value);

            passagewidthnumber.value = v;
            text.passagewidth = v;
        }

        function passagewidthrangeupdate()
        {
            passagewidthrangeset();
            svgupdate();
        }

        function passagewidthexactload()
        {
            const br = document.createElement("br");
            passagewidth.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagewidthexactupdate);
                passagewidth.append(button);
            }
        }
        addEventListener("load", passagewidthexactload);

        function passagewidthexactupdate(e)
        {
            passagewidthnumber.value = canvas.width * Number(e.target.value);

            passagewidthnumberupdate();
        }

        function passagewidthincrementload()
        {
            const br = document.createElement("br");
            passagewidth.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagewidthincrementupdate);
                passagewidth.append(button);
            }
        }
        addEventListener("load", passagewidthincrementload);

        function passagewidthincrementupdate(e)
        {
            const v = Number(passagewidthnumber.value) + Number(e.target.value);

            if((passagewidthnumber.min <= v) && (v <= passagewidthnumber.max))
            {
                passagewidthnumber.value = v;

                passagewidthnumberupdate();
            }
        }



        function passageheightload()
        {
            const div = document.createElement("div");
            div.id = "passageheight";
            div.innerHTML = "height";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passageheightload);

        function passageheightnumberload()
        {
            const br = document.createElement("br");
            passageheight.append(br);

            const input = document.createElement("input");
            input.id = "passageheightnumber";
            input.max = maxheight;
            input.min = 0;
            input.type = "number";
            input.value = 300;
            input.addEventListener("input", passageheightnumberupdate);
            passageheight.append(input);

            //passageheightnumberset();
        }
        addEventListener("load", passageheightnumberload);

        function passageheightnumberset()
        {
            const v = Number(passageheightnumber.value);

            passageheightrange.value = v;
            text.passageheight = v;
        }

        function passageheightnumberupdate()
        {
            passageheightnumberset();
            svgupdate();
        }

        function passageheightrangeload()
        {
            const input = document.createElement("input");
            input.id = "passageheightrange";
            input.max = passageheightnumber.max;
            input.min = passageheightnumber.min;
            input.type = "range";
            input.value = passageheightnumber.value;
            input.addEventListener("input", passageheightrangeupdate);
            passageheight.append(input);

            passageheightrangeset();
        }
        addEventListener("load", passageheightrangeload);

        function passageheightrangeset()
        {
            const v = Number(passageheightrange.value);

            passageheightnumber.value = v;
            text.passageheight = v;
        }

        function passageheightrangeupdate()
        {
            passageheightrangeset();
            svgupdate();
        }

        function passageheightexactload()
        {
            const br = document.createElement("br");
            passageheight.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageheightexactupdate);
                passageheight.append(button);
            }
        }
        addEventListener("load", passageheightexactload);

        function passageheightexactupdate(e)
        {
            passageheightnumber.value = canvas.height * Number(e.target.value);

            passageheightnumberupdate();
        }

        function passageheightincrementload()
        {
            const br = document.createElement("br");
            passageheight.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageheightincrementupdate);
                passageheight.append(button);
            }
        }
        addEventListener("load", passageheightincrementload);

        function passageheightincrementupdate(e)
        {
            const v = Number(passageheightnumber.value) + Number(e.target.value);

            if((passageheightnumber.min <= v) && (v <= passageheightnumber.max))
            {
                passageheightnumber.value = v;

                passageheightnumberupdate();
            }
        }



        function passagexload()
        {
            const div = document.createElement("div");
            div.id = "passagex";
            div.innerHTML = "x";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagexload);

        function passagexnumberload()
        {
            const br = document.createElement("br");
            passagex.append(br);

            const input = document.createElement("input");
            input.id = "passagexnumber";
            input.max = maxwidth;
            input.min = -maxwidth;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", passagexnumberupdate);
            passagex.append(input);

            //passagexnumberset();
        }
        addEventListener("load", passagexnumberload);

        function passagexnumberset()
        {
            const v = Number(passagexnumber.value);

            passagexrange.value = v;
            text.passagex = v;
        }

        function passagexnumberupdate()
        {
            passagexnumberset();
            svgupdate();
        }

        function passagexrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagexrange";
            input.max = passagexnumber.max;
            input.min = passagexnumber.min;
            input.type = "range";
            input.value = passagexnumber.value;
            input.addEventListener("input", passagexrangeupdate);
            passagex.append(input);

            passagexrangeset();
        }
        addEventListener("load", passagexrangeload);

        function passagexrangeset()
        {
            const v = Number(passagexrange.value);

            passagexnumber.value = v;
            text.passagex = v;
        }

        function passagexrangeupdate()
        {
            passagexrangeset();
            svgupdate();
        }

        function passagexexactload()
        {
            const br = document.createElement("br");
            passagex.append(br);

            const array =
            [
                ["left",0],
                ["center",0.5],
                ["right",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagexexactupdate);
                passagex.append(button);
            }
        }
        addEventListener("load", passagexexactload);

        function passagexexactupdate(e)
        {
            //passagexnumber.value = (canvas.width - text.passagewidth - text.passagepaddingleft - text.passagepaddingright) * Number(e.target.value);
            passagexnumber.value = (canvas.width - text.passagewidth) * Number(e.target.value);

            passagexnumberupdate();
        }

        function passagexincrementload()
        {
            const br = document.createElement("br");
            passagex.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagexincrementupdate);
                passagex.append(button);
            }
        }
        addEventListener("load", passagexincrementload);

        function passagexincrementupdate(e)
        {
            const v = Number(passagexnumber.value) + Number(e.target.value);

            if((passagexnumber.min <= v) && (v <= passagexnumber.max))
            {
                passagexnumber.value = v;

                passagexnumberupdate();
            }
        }



        function passageyload()
        {
            const div = document.createElement("div");
            div.id = "passagey";
            div.innerHTML = "y";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passageyload);

        function passageynumberload()
        {
            const br = document.createElement("br");
            passagey.append(br);

            const input = document.createElement("input");
            input.id = "passageynumber";
            input.max = maxheight;
            input.min = -maxheight;
            input.type = "number";
            input.value = 730;
            input.addEventListener("input", passageynumberupdate);
            passagey.append(input);

            //passageynumberset();
        }
        addEventListener("load", passageynumberload);

        function passageynumberset()
        {
            const v = Number(passageynumber.value);

            passageyrange.value = v;
            text.passagey = v;
        }

        function passageynumberupdate()
        {
            passageynumberset();
            svgupdate();
        }

        function passageyrangeload()
        {
            const input = document.createElement("input");
            input.id = "passageyrange";
            input.max = passageynumber.max;
            input.min = passageynumber.min;
            input.type = "range";
            input.value = passageynumber.value;
            input.addEventListener("input", passageyrangeupdate);
            passagey.append(input);

            passageyrangeset();
        }
        addEventListener("load", passageyrangeload);

        function passageyrangeset()
        {
            const v = Number(passageyrange.value);

            passageynumber.value = v;
            text.passagey = v;
        }

        function passageyrangeupdate()
        {
            passageyrangeset();
            svgupdate();
        }

        function passageyexactload()
        {
            const br = document.createElement("br");
            passagey.append(br);

            const array =
            [
                ["top",0],
                ["center",0.5],
                ["bottom",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageyexactupdate);
                passagey.append(button);
            }
        }
        addEventListener("load", passageyexactload);

        function passageyexactupdate(e)
        {
            //passageynumber.value = (canvas.height - text.passageheight - text.passagepaddingtop - text.passagepaddingbottom) * Number(e.target.value);
            passageynumber.value = (canvas.height - text.passageheight) * Number(e.target.value);

            passageynumberupdate();
        }

        function passageyincrementload()
        {
            const br = document.createElement("br");
            passagey.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageyincrementupdate);
                passagey.append(button);
            }
        }
        addEventListener("load", passageyincrementload);

        function passageyincrementupdate(e)
        {
            const v = Number(passageynumber.value) + Number(e.target.value);

            if((passageynumber.min <= v) && (v <= passageynumber.max))
            {
                passageynumber.value = v;

                passageynumberupdate();
            }
        }



        function passagebackgroundcolorload()
        {
            const div = document.createElement("div");
            div.id = "passagebackgroundcolor";
            div.innerHTML = "background-color";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagebackgroundcolorload);

        function passagebackgroundcolorcolorload()
        {
            const br = document.createElement("br");
            passagebackgroundcolor.append(br);

            const input = document.createElement("input");
            input.id = "passagebackgroundcolorcolor";
            input.type = "color";
            input.value = "#ffffff";
            input.addEventListener("input", passagebackgroundcolorcolorupdate);
            passagebackgroundcolor.append(input);

            //passagebackgroundcolorcolorset();
        }
        addEventListener("load", passagebackgroundcolorcolorload);

        function passagebackgroundcolorcolorset()
        {
            const c = passagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passagebackgroundalphanumber.value;

            text.passagebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passagebackgroundcolorcolorupdate()
        {
            passagebackgroundcolorcolorset();
            svgupdate();
        }

        function passagebackgroundcolorexactload()
        {
            const br = document.createElement("br");
            passagebackgroundcolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagebackgroundcolorexactupdate);
                passagebackgroundcolor.append(button);
            }
        }
        addEventListener("load", passagebackgroundcolorexactload);

        function passagebackgroundcolorexactupdate(e)
        {
            passagebackgroundcolorcolor.value = e.target.value;

            passagebackgroundcolorcolorupdate();
        }



        function passagebackgroundalphaload()
        {
            const div = document.createElement("div");
            div.id = "passagebackgroundalpha";
            div.innerHTML = "background-alpha";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagebackgroundalphaload);

        function passagebackgroundalphanumberload()
        {
            const br = document.createElement("br");
            passagebackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "passagebackgroundalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 0.5;
            input.addEventListener("input", passagebackgroundalphanumberupdate);
            passagebackgroundalpha.append(input);

            //passagebackgroundalphanumberset();
        }
        addEventListener("load", passagebackgroundalphanumberload);

        function passagebackgroundalphanumberset()
        {
            const c = passagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passagebackgroundalphanumber.value;

            passagebackgroundalpharange.value = a;
            text.passagebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passagebackgroundalphanumberupdate()
        {
            passagebackgroundalphanumberset();
            svgupdate();
        }

        function passagebackgroundalpharangeload()
        {
            const input = document.createElement("input");
            input.id = "passagebackgroundalpharange";
            input.max = passagebackgroundalphanumber.max;
            input.min = passagebackgroundalphanumber.min;
            input.step = passagebackgroundalphanumber.step;
            input.type = "range";
            input.value = passagebackgroundalphanumber.value;
            input.addEventListener("input", passagebackgroundalpharangeupdate);
            passagebackgroundalpha.append(input);

            passagebackgroundalpharangeset();
        }
        addEventListener("load", passagebackgroundalpharangeload);

        function passagebackgroundalpharangeset()
        {
            const c = passagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passagebackgroundalpharange.value;

            passagebackgroundalphanumber.value = a;
            text.passagebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passagebackgroundalpharangeupdate()
        {
            passagebackgroundalpharangeset();
            svgupdate();
        }

        function passagebackgroundalphaexactload()
        {
            const br = document.createElement("br");
            passagebackgroundalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagebackgroundalphaexactupdate);
                passagebackgroundalpha.append(button);
            }
        }
        addEventListener("load", passagebackgroundalphaexactload);

        function passagebackgroundalphaexactupdate(e)
        {
            passagebackgroundalphanumber.value = Number(e.target.value);

            passagebackgroundalphanumberupdate();
        }

        function passagebackgroundalphaincrementload()
        {
            const br = document.createElement("br");
            passagebackgroundalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagebackgroundalphaincrementupdate);
                passagebackgroundalpha.append(button);
            }
        }
        addEventListener("load", passagebackgroundalphaincrementload);

        function passagebackgroundalphaincrementupdate(e)
        {
            let v = Number(passagebackgroundalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((passagebackgroundalphanumber.min <= v) && (v <= passagebackgroundalphanumber.max))
            {
                passagebackgroundalphanumber.value = v;

                passagebackgroundalphanumberupdate();
            }
        }



        function passagebordercolorload()
        {
            const div = document.createElement("div");
            div.id = "passagebordercolor";
            div.innerHTML = "border-color";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagebordercolorload);

        function passagebordercolorcolorload()
        {
            const br = document.createElement("br");
            passagebordercolor.append(br);

            const input = document.createElement("input");
            input.id = "passagebordercolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", passagebordercolorcolorupdate);
            passagebordercolor.append(input);

            //passagebordercolorcolorset();
        }
        addEventListener("load", passagebordercolorcolorload);

        function passagebordercolorcolorset()
        {
            const c = passagebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passageborderalphanumber.value;

            text.passagebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passagebordercolorcolorupdate()
        {
            passagebordercolorcolorset();
            svgupdate();
        }

        function passagebordercolorexactload()
        {
            const br = document.createElement("br");
            passagebordercolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagebordercolorexactupdate);
                passagebordercolor.append(button);
            }
        }
        addEventListener("load", passagebordercolorexactload);

        function passagebordercolorexactupdate(e)
        {
            passagebordercolorcolor.value = e.target.value;

            passagebordercolorcolorupdate();
        }



        function passageborderalphaload()
        {
            const div = document.createElement("div");
            div.id = "passageborderalpha";
            div.innerHTML = "border-alpha";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passageborderalphaload);

        function passageborderalphanumberload()
        {
            const br = document.createElement("br");
            passageborderalpha.append(br);

            const input = document.createElement("input");
            input.id = "passageborderalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", passageborderalphanumberupdate);
            passageborderalpha.append(input);

            //passageborderalphanumberset();
        }
        addEventListener("load", passageborderalphanumberload);

        function passageborderalphanumberset()
        {
            const c = passagebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passageborderalphanumber.value;

            passageborderalpharange.value = a;
            text.passagebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passageborderalphanumberupdate()
        {
            passageborderalphanumberset();
            svgupdate();
        }

        function passageborderalpharangeload()
        {
            const input = document.createElement("input");
            input.id = "passageborderalpharange";
            input.max = passageborderalphanumber.max;
            input.min = passageborderalphanumber.min;
            input.step = passageborderalphanumber.step;
            input.type = "range";
            input.value = passageborderalphanumber.value;
            input.addEventListener("input", passageborderalpharangeupdate);
            passageborderalpha.append(input);

            passageborderalpharangeset();
        }
        addEventListener("load", passageborderalpharangeload);

        function passageborderalpharangeset()
        {
            const c = passagebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passageborderalpharange.value;

            passageborderalphanumber.value = a;
            text.passagebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passageborderalpharangeupdate()
        {
            passageborderalpharangeset();
            svgupdate();
        }

        function passageborderalphaexactload()
        {
            const br = document.createElement("br");
            passageborderalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageborderalphaexactupdate);
                passageborderalpha.append(button);
            }
        }
        addEventListener("load", passageborderalphaexactload);

        function passageborderalphaexactupdate(e)
        {
            passageborderalphanumber.value = Number(e.target.value);

            passageborderalphanumberupdate();
        }

        function passageborderalphaincrementload()
        {
            const br = document.createElement("br");
            passageborderalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageborderalphaincrementupdate);
                passageborderalpha.append(button);
            }
        }
        addEventListener("load", passageborderalphaincrementload);

        function passageborderalphaincrementupdate(e)
        {
            let v = Number(passageborderalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((passageborderalphanumber.min <= v) && (v <= passageborderalphanumber.max))
            {
                passageborderalphanumber.value = v;

                passageborderalphanumberupdate();
            }
        }



        function passageborderradiusload()
        {
            const div = document.createElement("div");
            div.id = "passageborderradius";
            div.innerHTML = "border-radius";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passageborderradiusload);

        function passageborderradiusnumberload()
        {
            const br = document.createElement("br");
            passageborderradius.append(br);

            const input = document.createElement("input");
            input.id = "passageborderradiusnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", passageborderradiusnumberupdate);
            passageborderradius.append(input);

            //passageborderradiusnumberset();
        }
        addEventListener("load", passageborderradiusnumberload);

        function passageborderradiusnumberset()
        {
            const v = Number(passageborderradiusnumber.value);

            passageborderradiusrange.value = v;
            text.passageborderradius = v;
        }

        function passageborderradiusnumberupdate()
        {
            passageborderradiusnumberset();
            svgupdate();
        }

        function passageborderradiusrangeload()
        {
            const input = document.createElement("input");
            input.id = "passageborderradiusrange";
            input.max = passageborderradiusnumber.max;
            input.min = passageborderradiusnumber.min;
            input.type = "range";
            input.value = passageborderradiusnumber.value;
            input.addEventListener("input", passageborderradiusrangeupdate);
            passageborderradius.append(input);

            passageborderradiusrangeset();
        }
        addEventListener("load", passageborderradiusrangeload);

        function passageborderradiusrangeset()
        {
            const v = Number(passageborderradiusrange.value);

            passageborderradiusnumber.value = v;
            text.passageborderradius = v;
        }

        function passageborderradiusrangeupdate()
        {
            passageborderradiusrangeset();
            svgupdate();
        }

        function passageborderradiusexactload()
        {
            const br = document.createElement("br");
            passageborderradius.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageborderradiusexactupdate);
                passageborderradius.append(button);
            }
        }
        addEventListener("load", passageborderradiusexactload);

        function passageborderradiusexactupdate(e)
        {
            passageborderradiusnumber.value = Number(e.target.value);

            passageborderradiusnumberupdate();
        }

        function passageborderradiusincrementload()
        {
            const br = document.createElement("br");
            passageborderradius.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageborderradiusincrementupdate);
                passageborderradius.append(button);
            }
        }
        addEventListener("load", passageborderradiusincrementload);

        function passageborderradiusincrementupdate(e)
        {
            const v = Number(passageborderradiusnumber.value) + Number(e.target.value);

            if((passageborderradiusnumber.min <= v) && (v <= passageborderradiusnumber.max))
            {
                passageborderradiusnumber.value = v;

                passageborderradiusnumberupdate();
            }
        }



        function passageborderstyleload()
        {
            const div = document.createElement("div");
            div.id = "passageborderstyle";
            div.innerHTML = "border-style";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passageborderstyleload);

        function passageborderstyleselectload()
        {
            const br = document.createElement("br");
            passageborderstyle.append(br);

            const select = document.createElement("select");
            select.id = "passageborderstyleselect";
            select.addEventListener("input", passageborderstyleselectupdate);
            passageborderstyle.append(select);

            for(const value of borderstylearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            //select.value = borderstylearray[8];

            passageborderstyleselectset();
        }
        addEventListener("load", passageborderstyleselectload);

        function passageborderstyleselectset()
        {
            text.passageborderstyle = passageborderstyleselect.value;
        }

        function passageborderstyleselectupdate()
        {
            passageborderstyleselectset();
            svgupdate();
        }



        function passageborderwidthload()
        {
            const div = document.createElement("div");
            div.id = "passageborderwidth";
            div.innerHTML = "border-width";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passageborderwidthload);

        function passageborderwidthnumberload()
        {
            const br = document.createElement("br");
            passageborderwidth.append(br);

            const input = document.createElement("input");
            input.id = "passageborderwidthnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 25;
            input.addEventListener("input", passageborderwidthnumberupdate);
            passageborderwidth.append(input);

            //passageborderwidthnumberset();
        }
        addEventListener("load", passageborderwidthnumberload);

        function passageborderwidthnumberset()
        {
            const v = Number(passageborderwidthnumber.value);

            passageborderwidthrange.value = v;
            text.passageborderwidth = v;
        }

        function passageborderwidthnumberupdate()
        {
            passageborderwidthnumberset();
            svgupdate();
        }

        function passageborderwidthrangeload()
        {
            const input = document.createElement("input");
            input.id = "passageborderwidthrange";
            input.max = passageborderwidthnumber.max;
            input.min = passageborderwidthnumber.min;
            input.type = "range";
            input.value = passageborderwidthnumber.value;
            input.addEventListener("input", passageborderwidthrangeupdate);
            passageborderwidth.append(input);

            passageborderwidthrangeset();
        }
        addEventListener("load", passageborderwidthrangeload);

        function passageborderwidthrangeset()
        {
            const v = Number(passageborderwidthrange.value);

            passageborderwidthnumber.value = v;
            text.passageborderwidth = v;
        }

        function passageborderwidthrangeupdate()
        {
            passageborderwidthrangeset();
            svgupdate();
        }

        function passageborderwidthexactload()
        {
            const br = document.createElement("br");
            passageborderwidth.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageborderwidthexactupdate);
                passageborderwidth.append(button);
            }
        }
        addEventListener("load", passageborderwidthexactload);

        function passageborderwidthexactupdate(e)
        {
            passageborderwidthnumber.value = Number(e.target.value);

            passageborderwidthnumberupdate();
        }

        function passageborderwidthincrementload()
        {
            const br = document.createElement("br");
            passageborderwidth.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passageborderwidthincrementupdate);
                passageborderwidth.append(button);
            }
        }
        addEventListener("load", passageborderwidthincrementload);

        function passageborderwidthincrementupdate(e)
        {
            const v = Number(passageborderwidthnumber.value) + Number(e.target.value);

            if((passageborderwidthnumber.min <= v) && (v <= passageborderwidthnumber.max))
            {
                passageborderwidthnumber.value = v;

                passageborderwidthnumberupdate();
            }
        }



        function passagehorizontalload()
        {
            const div = document.createElement("div");
            div.id = "passagehorizontal";
            div.innerHTML = "horizontal";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagehorizontalload);

        function passagehorizontalselectload()
        {
            const br = document.createElement("br");
            passagehorizontal.append(br);

            const select = document.createElement("select");
            select.id = "passagehorizontalselect";
            select.addEventListener("input", passagehorizontalselectupdate);
            passagehorizontal.append(select);

            for(const value of horizontalarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            select.value = horizontalarray[1];

            passagehorizontalselectset();
        }
        addEventListener("load", passagehorizontalselectload);

        function passagehorizontalselectset()
        {
            text.passagehorizontal = passagehorizontalselect.value;
        }

        function passagehorizontalselectupdate()
        {
            passagehorizontalselectset();
            svgupdate();
        }



        function passageverticalload()
        {
            const div = document.createElement("div");
            div.id = "passagevertical";
            div.innerHTML = "vertical";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passageverticalload);

        function passageverticalselectload()
        {
            const br = document.createElement("br");
            passagevertical.append(br);

            const select = document.createElement("select");
            select.id = "passageverticalselect";
            select.addEventListener("input", passageverticalselectupdate);
            passagevertical.append(select);

            for(const value of verticalarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            select.value = verticalarray[1];

            passageverticalselectset();
        }
        addEventListener("load", passageverticalselectload);

        function passageverticalselectset()
        {
            text.passagevertical = passageverticalselect.value;
        }

        function passageverticalselectupdate()
        {
            passageverticalselectset();
            svgupdate();
        }



        function passagewritingmodeload()
        {
            const div = document.createElement("div");
            div.id = "passagewritingmode";
            div.innerHTML = "writing-mode";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagewritingmodeload);

        function passagewritingmodeselectload()
        {
            const br = document.createElement("br");
            passagewritingmode.append(br);

            const select = document.createElement("select");
            select.id = "passagewritingmodeselect";
            select.addEventListener("input", passagewritingmodeselectupdate);
            passagewritingmode.append(select);

            for(const value of writingmodearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            passagewritingmodeselectset();
        }
        addEventListener("load", passagewritingmodeselectload);

        function passagewritingmodeselectset()
        {
            text.passagewritingmode = passagewritingmodeselect.value;
        }

        function passagewritingmodeselectupdate()
        {
            passagewritingmodeselectset();
            svgupdate();
        }



        function passagefontfamilyload()
        {
            const div = document.createElement("div");
            div.id = "passagefontfamily";
            div.innerHTML = "font-family";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagefontfamilyload);

        function passagefontfamilyselectload()
        {
            const br = document.createElement("br");
            passagefontfamily.append(br);

            const select = document.createElement("select");
            select.id = "passagefontfamilyselect";
            select.addEventListener("input", passagefontfamilyselectupdate);
            passagefontfamily.append(select);

            for(const value of fontfamilyarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            passagefontfamilyselectset();
        }
        addEventListener("load", passagefontfamilyselectload);

        function passagefontfamilyselectset()
        {
            text.passagefontfamily = passagefontfamilyselect.value;
        }

        function passagefontfamilyselectupdate()
        {
            passagefontfamilyselectset();
            svgupdate();
        }



        function passagefontsizeload()
        {
            const div = document.createElement("div");
            div.id = "passagefontsize";
            div.innerHTML = "font-size";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagefontsizeload);

        function passagefontsizenumberload()
        {
            const br = document.createElement("br");
            passagefontsize.append(br);

            const input = document.createElement("input");
            input.id = "passagefontsizenumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 60;
            input.addEventListener("input", passagefontsizenumberupdate);
            passagefontsize.append(input);

            //passagefontsizenumberset();
        }
        addEventListener("load", passagefontsizenumberload);

        function passagefontsizenumberset()
        {
            const v = Number(passagefontsizenumber.value);

            passagefontsizerange.value = v;
            text.passagefontsize = v;
        }

        function passagefontsizenumberupdate()
        {
            passagefontsizenumberset();
            svgupdate();
        }

        function passagefontsizerangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefontsizerange";
            input.max = passagefontsizenumber.max;
            input.min = passagefontsizenumber.min;
            input.type = "range";
            input.value = passagefontsizenumber.value;
            input.addEventListener("input", passagefontsizerangeupdate);
            passagefontsize.append(input);

            passagefontsizerangeset();
        }
        addEventListener("load", passagefontsizerangeload);

        function passagefontsizerangeset()
        {
            const v = Number(passagefontsizerange.value);

            passagefontsizenumber.value = v;
            text.passagefontsize = v;
        }

        function passagefontsizerangeupdate()
        {
            passagefontsizerangeset();
            svgupdate();
        }

        function passagefontsizeexactload()
        {
            const br = document.createElement("br");
            passagefontsize.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefontsizeexactupdate);
                passagefontsize.append(button);
            }
        }
        addEventListener("load", passagefontsizeexactload);

        function passagefontsizeexactupdate(e)
        {
            passagefontsizenumber.value = Number(e.target.value);

            passagefontsizenumberupdate();
        }

        function passagefontsizeincrementload()
        {
            const br = document.createElement("br");
            passagefontsize.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefontsizeincrementupdate);
                passagefontsize.append(button);
            }
        }
        addEventListener("load", passagefontsizeincrementload);

        function passagefontsizeincrementupdate(e)
        {
            const v = Number(passagefontsizenumber.value) + Number(e.target.value);

            if((passagefontsizenumber.min <= v) && (v <= passagefontsizenumber.max))
            {
                passagefontsizenumber.value = v;

                passagefontsizenumberupdate();
            }
        }

/*
        function passagefontsizefitload()
        {
            const button = document.createElement("button");
            button.innerHTML = "fit";
            button.addEventListener("click", passagefontsizefitupdate);
            passagefontsize.append(button);
        }
        addEventListener("load", passagefontsizefitload);

        function passagefontsizefitupdate()
        {
            const t = document.createElement("div");
            passagefontsize.append(t);
            t.innerHTML = text.bookname;
            t.style.fontSize = `${passagefontsizenumber.value}px`;

            const h1 = text.passagewidth;
            const h2 = text.passageheight;
            const h3 = t.offsetWidth;
            const h4 = t.offsetHeight;
            const h5 = passagefontsizenumber.value;

            //const h4 = t.offsetParent;//t.style.fontSize;
            //const h5 = t.clientHeight;//text.style.height;
            //const h6 = text.height;
            //const h7 = text.getBoundingClientRect().height;
            //const h8 = text.style.lineHeight;
            //const h9 = canvas.getBoundingClientRect().height;
            console.log(h1, h2, h3, h4, h5);
            //t.hidden = true;

            if(h2 < h4)
            {
                passagefontsizenumber.value -= 1;
                passagefit();
            }

            passagefontsizenumberupdate();
        }
//*/



        function passagefontstyleload()
        {
            const div = document.createElement("div");
            div.id = "passagefontstyle";
            div.innerHTML = "font-style";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagefontstyleload);

        function passagefontstyleselectload()
        {
            const br = document.createElement("br");
            passagefontstyle.append(br);

            const select = document.createElement("select");
            select.id = "passagefontstyleselect";
            select.addEventListener("input", passagefontstyleselectupdate);
            passagefontstyle.append(select);

            for(const value of fontstylearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            passagefontstyleselectset();
        }
        addEventListener("load", passagefontstyleselectload);

        function passagefontstyleselectset()
        {
            text.passagefontstyle = passagefontstyleselect.value;
        }

        function passagefontstyleselectupdate()
        {
            passagefontstyleselectset();
            svgupdate();
        }



        function passagefontvariantload()
        {
            const div = document.createElement("div");
            div.id = "passagefontvariant";
            div.innerHTML = "font-variant";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagefontvariantload);

        function passagefontvariantselectload()
        {
            const br = document.createElement("br");
            passagefontvariant.append(br);

            const select = document.createElement("select");
            select.id = "passagefontvariantselect";
            select.addEventListener("input", passagefontvariantselectupdate);
            passagefontvariant.append(select);

            for(const value of fontvariantarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            passagefontvariantselectset();
        }
        addEventListener("load", passagefontvariantselectload);

        function passagefontvariantselectset()
        {
            text.passagefontvariant = passagefontvariantselect.value;
        }

        function passagefontvariantselectupdate()
        {
            passagefontvariantselectset();
            svgupdate();
        }



        function passagefontweightload()
        {
            const div = document.createElement("div");
            div.id = "passagefontweight";
            div.innerHTML = "font-weight";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagefontweightload);

        function passagefontweightselectload()
        {
            const br = document.createElement("br");
            passagefontweight.append(br);

            const select = document.createElement("select");
            select.id = "passagefontweightselect";
            select.addEventListener("input", passagefontweightselectupdate);
            passagefontweight.append(select);

            for(const value of fontweightarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            passagefontweightselectset();
        }
        addEventListener("load", passagefontweightselectload);

        function passagefontweightselectset()
        {
            text.passagefontweight = passagefontweightselect.value;
        }

        function passagefontweightselectupdate()
        {
            passagefontweightselectset();
            svgupdate();
        }



        function passagecolorload()
        {
            const div = document.createElement("div");
            div.id = "passagecolor";
            div.innerHTML = "color";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagecolorload);

        function passagecolorcolorload()
        {
            const br = document.createElement("br");
            passagecolor.append(br);

            const input = document.createElement("input");
            input.id = "passagecolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", passagecolorcolorupdate);
            passagecolor.append(input);

            //passagecolorcolorset();
        }
        addEventListener("load", passagecolorcolorload);

        function passagecolorcolorset()
        {
            const c = passagecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passagealphanumber.value;

            text.passagecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passagecolorcolorupdate()
        {
            passagecolorcolorset();
            svgupdate();
        }

        function passagecolorexactload()
        {
            const br = document.createElement("br");
            passagecolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagecolorexactupdate);
                passagecolor.append(button);
            }
        }
        addEventListener("load", passagecolorexactload);

        function passagecolorexactupdate(e)
        {
            passagecolorcolor.value = e.target.value;

            passagecolorcolorupdate();
        }



        function passagealphaload()
        {
            const div = document.createElement("div");
            div.id = "passagealpha";
            div.innerHTML = "alpha";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagealphaload);

        function passagealphanumberload()
        {
            const br = document.createElement("br");
            passagealpha.append(br);

            const input = document.createElement("input");
            input.id = "passagealphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", passagealphanumberupdate);
            passagealpha.append(input);

            //passagealphanumberset();
        }
        addEventListener("load", passagealphanumberload);

        function passagealphanumberset()
        {
            const c = passagecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passagealphanumber.value;

            passagealpharange.value = a;
            text.passagecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passagealphanumberupdate()
        {
            passagealphanumberset();
            svgupdate();
        }

        function passagealpharangeload()
        {
            const input = document.createElement("input");
            input.id = "passagealpharange";
            input.max = passagealphanumber.max;
            input.min = passagealphanumber.min;
            input.step = passagealphanumber.step;
            input.type = "range";
            input.value = passagealphanumber.value;
            input.addEventListener("input", passagealpharangeupdate);
            passagealpha.append(input);

            passagealpharangeset();
        }
        addEventListener("load", passagealpharangeload);

        function passagealpharangeset()
        {
            const c = passagecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = passagealpharange.value;

            passagealphanumber.value = a;
            text.passagecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function passagealpharangeupdate()
        {
            passagealpharangeset();
            svgupdate();
        }

        function passagealphaexactload()
        {
            const br = document.createElement("br");
            passagealpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagealphaexactupdate);
                passagealpha.append(button);
            }
        }
        addEventListener("load", passagealphaexactload);

        function passagealphaexactupdate(e)
        {
            passagealphanumber.value = Number(e.target.value);

            passagealphanumberupdate();
        }

        function passagealphaincrementload()
        {
            const br = document.createElement("br");
            passagealpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagealphaincrementupdate);
                passagealpha.append(button);
            }
        }
        addEventListener("load", passagealphaincrementload);

        function passagealphaincrementupdate(e)
        {
            let v = Number(passagealphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((passagealphanumber.min <= v) && (v <= passagealphanumber.max))
            {
                passagealphanumber.value = v;

                passagealphanumberupdate();
            }
        }



/*leftoff
        function passagefilterblurload()
        {
            const div = document.createElement("div");
            div.id = "passagefilterblur";
            div.innerHTML = "filter-blur";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefilterblurload);

        function passagefilterblurnumberload()
        {
            const br = document.createElement("br");
            passagefilterblur.append(br);

            const input = document.createElement("input");
            input.id = "passagefilterblurnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagefilterblurnumberupdate);
            passagefilterblur.append(input);

            //passagefilterblurnumberset();
        }
        addEventListener("load", passagefilterblurnumberload);

        function passagefilterblurnumberset()
        {
            const v = passagefilterblurnumber.value;

            passagefilterblurrange.value = v;
            text.passagebackdropfilterblur = v;
        }

        function passagefilterblurnumberupdate()
        {
            passagefilterblurnumberset();
            svgupdate();
        }

        function passagefilterblurrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefilterblurrange";
            input.max = passagefilterblurnumber.max;
            input.min = passagefilterblurnumber.min;
            input.step = passagefilterblurnumber.step;
            input.type = "range";
            input.value = passagefilterblurnumber.value;
            input.addEventListener("input", passagefilterblurrangeupdate);
            passagefilterblur.append(input);

            passagefilterblurrangeset();
        }
        addEventListener("load", passagefilterblurrangeload);

        function passagefilterblurrangeset()
        {
            const v = passagefilterblurrange.value;

            passagefilterblurnumber.value = v;
            text.passagebackdropfilterblur = v;
        }

        function passagefilterblurrangeupdate()
        {
            passagefilterblurrangeset();
            svgupdate();
        }

        function passagefilterblurexactload()
        {
            const br = document.createElement("br");
            passagefilterblur.append(br);

            const array =
            [
                ["0",0],
                ["2",2],
                ["4",4],
                ["8",8],
                ["16",16],
                ["32",32],
                ["64",64],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterblurexactupdate);
                passagefilterblur.append(button);
            }
        }
        addEventListener("load", passagefilterblurexactload);

        function passagefilterblurexactupdate(e)
        {
            passagefilterblurnumber.value = Number(e.target.value);

            passagefilterblurnumberupdate();
        }

        function passagefilterblurincrementload()
        {
            const br = document.createElement("br");
            passagefilterblur.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterblurincrementupdate);
                passagefilterblur.append(button);
            }
        }
        addEventListener("load", passagefilterblurincrementload);

        function passagefilterblurincrementupdate(e)
        {
            const v = Number(passagefilterblurnumber.value) + Number(e.target.value);

            if((passagefilterblurnumber.min <= v) && (v <= passagefilterblurnumber.max))
            {
                passagefilterblurnumber.value = v;

                passagefilterblurnumberupdate();
            }
        }



        function passagefilterbrightnessload()
        {
            const div = document.createElement("div");
            div.id = "passagefilterbrightness";
            div.innerHTML = "filter-brightness";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefilterbrightnessload);

        function passagefilterbrightnessnumberload()
        {
            const br = document.createElement("br");
            passagefilterbrightness.append(br);

            const input = document.createElement("input");
            input.id = "passagefilterbrightnessnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", passagefilterbrightnessnumberupdate);
            passagefilterbrightness.append(input);

            //passagefilterbrightnessnumberset();
        }
        addEventListener("load", passagefilterbrightnessnumberload);

        function passagefilterbrightnessnumberset()
        {
            const v = passagefilterbrightnessnumber.value;

            passagefilterbrightnessrange.value = v;
            text.passagebackdropfilterbrightness = v;
        }

        function passagefilterbrightnessnumberupdate()
        {
            passagefilterbrightnessnumberset();
            svgupdate();
        }

        function passagefilterbrightnessrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefilterbrightnessrange";
            input.max = passagefilterbrightnessnumber.max;
            input.min = passagefilterbrightnessnumber.min;
            input.step = passagefilterbrightnessnumber.step;
            input.type = "range";
            input.value = passagefilterbrightnessnumber.value;
            input.addEventListener("input", passagefilterbrightnessrangeupdate);
            passagefilterbrightness.append(input);

            passagefilterbrightnessrangeset();
        }
        addEventListener("load", passagefilterbrightnessrangeload);

        function passagefilterbrightnessrangeset()
        {
            const v = passagefilterbrightnessrange.value;

            passagefilterbrightnessnumber.value = v;
            text.passagebackdropfilterbrightness = v;
        }

        function passagefilterbrightnessrangeupdate()
        {
            passagefilterbrightnessrangeset();
            svgupdate();
        }

        function passagefilterbrightnessexactload()
        {
            const br = document.createElement("br");
            passagefilterbrightness.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterbrightnessexactupdate);
                passagefilterbrightness.append(button);
            }
        }
        addEventListener("load", passagefilterbrightnessexactload);

        function passagefilterbrightnessexactupdate(e)
        {
            passagefilterbrightnessnumber.value = Number(e.target.value);

            passagefilterbrightnessnumberupdate();
        }

        function passagefilterbrightnessincrementload()
        {
            const br = document.createElement("br");
            passagefilterbrightness.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterbrightnessincrementupdate);
                passagefilterbrightness.append(button);
            }
        }
        addEventListener("load", passagefilterbrightnessincrementload);

        function passagefilterbrightnessincrementupdate(e)
        {
            const v = Number(passagefilterbrightnessnumber.value) + Number(e.target.value);

            if((passagefilterbrightnessnumber.min <= v) && (v <= passagefilterbrightnessnumber.max))
            {
                passagefilterbrightnessnumber.value = v;

                passagefilterbrightnessnumberupdate();
            }
        }



        function passagefiltercontrastload()
        {
            const div = document.createElement("div");
            div.id = "passagefiltercontrast";
            div.innerHTML = "filter-contrast";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefiltercontrastload);

        function passagefiltercontrastnumberload()
        {
            const br = document.createElement("br");
            passagefiltercontrast.append(br);

            const input = document.createElement("input");
            input.id = "passagefiltercontrastnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", passagefiltercontrastnumberupdate);
            passagefiltercontrast.append(input);

            //passagefiltercontrastnumberset();
        }
        addEventListener("load", passagefiltercontrastnumberload);

        function passagefiltercontrastnumberset()
        {
            const v = passagefiltercontrastnumber.value;

            passagefiltercontrastrange.value = v;
            text.passagebackdropfiltercontrast = v;
        }

        function passagefiltercontrastnumberupdate()
        {
            passagefiltercontrastnumberset();
            svgupdate();
        }

        function passagefiltercontrastrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefiltercontrastrange";
            input.max = passagefiltercontrastnumber.max;
            input.min = passagefiltercontrastnumber.min;
            input.step = passagefiltercontrastnumber.step;
            input.type = "range";
            input.value = passagefiltercontrastnumber.value;
            input.addEventListener("input", passagefiltercontrastrangeupdate);
            passagefiltercontrast.append(input);

            passagefiltercontrastrangeset();
        }
        addEventListener("load", passagefiltercontrastrangeload);

        function passagefiltercontrastrangeset()
        {
            const v = passagefiltercontrastrange.value;

            passagefiltercontrastnumber.value = v;
            text.passagebackdropfiltercontrast = v;
        }

        function passagefiltercontrastrangeupdate()
        {
            passagefiltercontrastrangeset();
            svgupdate();
        }

        function passagefiltercontrastexactload()
        {
            const br = document.createElement("br");
            passagefiltercontrast.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltercontrastexactupdate);
                passagefiltercontrast.append(button);
            }
        }
        addEventListener("load", passagefiltercontrastexactload);

        function passagefiltercontrastexactupdate(e)
        {
            passagefiltercontrastnumber.value = Number(e.target.value);

            passagefiltercontrastnumberupdate();
        }

        function passagefiltercontrastincrementload()
        {
            const br = document.createElement("br");
            passagefiltercontrast.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltercontrastincrementupdate);
                passagefiltercontrast.append(button);
            }
        }
        addEventListener("load", passagefiltercontrastincrementload);

        function passagefiltercontrastincrementupdate(e)
        {
            const v = Number(passagefiltercontrastnumber.value) + Number(e.target.value);

            if((passagefiltercontrastnumber.min <= v) && (v <= passagefiltercontrastnumber.max))
            {
                passagefiltercontrastnumber.value = v;

                passagefiltercontrastnumberupdate();
            }
        }



        function passagefiltergrayscaleload()
        {
            const div = document.createElement("div");
            div.id = "passagefiltergrayscale";
            div.innerHTML = "filter-grayscale";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefiltergrayscaleload);

        function passagefiltergrayscalenumberload()
        {
            const br = document.createElement("br");
            passagefiltergrayscale.app
10000
end(br);

            const input = document.createElement("input");
            input.id = "passagefiltergrayscalenumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagefiltergrayscalenumberupdate);
            passagefiltergrayscale.append(input);

            //passagefiltergrayscalenumberset();
        }
        addEventListener("load", passagefiltergrayscalenumberload);

        function passagefiltergrayscalenumberset()
        {
            const v = passagefiltergrayscalenumber.value;

            passagefiltergrayscalerange.value = v;
            text.passagebackdropfiltergrayscale = v;
        }

        function passagefiltergrayscalenumberupdate()
        {
            passagefiltergrayscalenumberset();
            svgupdate();
        }

        function passagefiltergrayscalerangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefiltergrayscalerange";
            input.max = passagefiltergrayscalenumber.max;
            input.min = passagefiltergrayscalenumber.min;
            input.step = passagefiltergrayscalenumber.step;
            input.type = "range";
            input.value = passagefiltergrayscalenumber.value;
            input.addEventListener("input", passagefiltergrayscalerangeupdate);
            passagefiltergrayscale.append(input);

            passagefiltergrayscalerangeset();
        }
        addEventListener("load", passagefiltergrayscalerangeload);

        function passagefiltergrayscalerangeset()
        {
            const v = passagefiltergrayscalerange.value;

            passagefiltergrayscalenumber.value = v;
            text.passagebackdropfiltergrayscale = v;
        }

        function passagefiltergrayscalerangeupdate()
        {
            passagefiltergrayscalerangeset();
            svgupdate();
        }

        function passagefiltergrayscaleexactload()
        {
            const br = document.createElement("br");
            passagefiltergrayscale.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltergrayscaleexactupdate);
                passagefiltergrayscale.append(button);
            }
        }
        addEventListener("load", passagefiltergrayscaleexactload);

        function passagefiltergrayscaleexactupdate(e)
        {
            passagefiltergrayscalenumber.value = Number(e.target.value);

            passagefiltergrayscalenumberupdate();
        }

        function passagefiltergrayscaleincrementload()
        {
            const br = document.createElement("br");
            passagefiltergrayscale.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltergrayscaleincrementupdate);
                passagefiltergrayscale.append(button);
            }
        }
        addEventListener("load", passagefiltergrayscaleincrementload);

        function passagefiltergrayscaleincrementupdate(e)
        {
            const v = Number(passagefiltergrayscalenumber.value) + Number(e.target.value);

            if((passagefiltergrayscalenumber.min <= v) && (v <= passagefiltergrayscalenumber.max))
            {
                passagefiltergrayscalenumber.value = v;

                passagefiltergrayscalenumberupdate();
            }
        }



        function passagefilterhuerotateload()
        {
            const div = document.createElement("div");
            div.id = "passagefilterhuerotate";
            div.innerHTML = "filter-hue-rotate";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefilterhuerotateload);

        function passagefilterhuerotatenumberload()
        {
            const br = document.createElement("br");
            passagefilterhuerotate.append(br);

            const input = document.createElement("input");
            input.id = "passagefilterhuerotatenumber";
            input.max = 360;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagefilterhuerotatenumberupdate);
            passagefilterhuerotate.append(input);

            //passagefilterhuerotatenumberset();
        }
        addEventListener("load", passagefilterhuerotatenumberload);

        function passagefilterhuerotatenumberset()
        {
            const v = passagefilterhuerotatenumber.value;

            passagefilterhuerotaterange.value = v;
            text.passagebackdropfilterhuerotate = v;
        }

        function passagefilterhuerotatenumberupdate()
        {
            passagefilterhuerotatenumberset();
            svgupdate();
        }

        function passagefilterhuerotaterangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefilterhuerotaterange";
            input.max = passagefilterhuerotatenumber.max;
            input.min = passagefilterhuerotatenumber.min;
            input.step = passagefilterhuerotatenumber.step;
            input.type = "range";
            input.value = passagefilterhuerotatenumber.value;
            input.addEventListener("input", passagefilterhuerotaterangeupdate);
            passagefilterhuerotate.append(input);

            passagefilterhuerotaterangeset();
        }
        addEventListener("load", passagefilterhuerotaterangeload);

        function passagefilterhuerotaterangeset()
        {
            const v = passagefilterhuerotaterange.value;

            passagefilterhuerotatenumber.value = v;
            text.passagebackdropfilterhuerotate = v;
        }

        function passagefilterhuerotaterangeupdate()
        {
            passagefilterhuerotaterangeset();
            svgupdate();
        }

        function passagefilterhuerotateexactload()
        {
            const br = document.createElement("br");
            passagefilterhuerotate.append(br);

            const array =
            [
                ["0",0],
                ["90",90],
                ["180",180],
                ["270",270],
                ["360",360],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterhuerotateexactupdate);
                passagefilterhuerotate.append(button);
            }
        }
        addEventListener("load", passagefilterhuerotateexactload);

        function passagefilterhuerotateexactupdate(e)
        {
            passagefilterhuerotatenumber.value = Number(e.target.value);

            passagefilterhuerotatenumberupdate();
        }

        function passagefilterhuerotateincrementload()
        {
            const br = document.createElement("br");
            passagefilterhuerotate.append(br);

            const array =
            [
                //["-90",-90],
                ["-45",-45],
                ["-15",-15],
                ["-1",-1],
                ["+1",1],
                ["+15",15],
                ["+45",45],
                //["+90",90],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterhuerotateincrementupdate);
                passagefilterhuerotate.append(button);
            }
        }
        addEventListener("load", passagefilterhuerotateincrementload);

        function passagefilterhuerotateincrementupdate(e)
        {
            const v = Number(passagefilterhuerotatenumber.value) + Number(e.target.value);

            if((passagefilterhuerotatenumber.min <= v) && (v <= passagefilterhuerotatenumber.max))
            {
                passagefilterhuerotatenumber.value = v;

                passagefilterhuerotatenumberupdate();
            }
        }



        function passagefilterinvertload()
        {
            const div = document.createElement("div");
            div.id = "passagefilterinvert";
            div.innerHTML = "filter-invert";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefilterinvertload);

        function passagefilterinvertnumberload()
        {
            const br = document.createElement("br");
            passagefilterinvert.append(br);

            const input = document.createElement("input");
            input.id = "passagefilterinvertnumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagefilterinvertnumberupdate);
            passagefilterinvert.append(input);

            //passagefilterinvertnumberset();
        }
        addEventListener("load", passagefilterinvertnumberload);

        function passagefilterinvertnumberset()
        {
            const v = passagefilterinvertnumber.value;

            passagefilterinvertrange.value = v;
            text.passagebackdropfilterinvert = v;
        }

        function passagefilterinvertnumberupdate()
        {
            passagefilterinvertnumberset();
            svgupdate();
        }

        function passagefilterinvertrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefilterinvertrange";
            input.max = passagefilterinvertnumber.max;
            input.min = passagefilterinvertnumber.min;
            input.step = passagefilterinvertnumber.step;
            input.type = "range";
            input.value = passagefilterinvertnumber.value;
            input.addEventListener("input", passagefilterinvertrangeupdate);
            passagefilterinvert.append(input);

            passagefilterinvertrangeset();
        }
        addEventListener("load", passagefilterinvertrangeload);

        function passagefilterinvertrangeset()
        {
            const v = passagefilterinvertrange.value;

            passagefilterinvertnumber.value = v;
            text.passagebackdropfilterinvert = v;
        }

        function passagefilterinvertrangeupdate()
        {
            passagefilterinvertrangeset();
            svgupdate();
        }

        function passagefilterinvertexactload()
        {
            const br = document.createElement("br");
            passagefilterinvert.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterinvertexactupdate);
                passagefilterinvert.append(button);
            }
        }
        addEventListener("load", passagefilterinvertexactload);

        function passagefilterinvertexactupdate(e)
        {
            passagefilterinvertnumber.value = Number(e.target.value);

            passagefilterinvertnumberupdate();
        }

        function passagefilterinvertincrementload()
        {
            const br = document.createElement("br");
            passagefilterinvert.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");

                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefilterinvertincrementupdate);
                passagefilterinvert.append(button);
            }
        }
        addEventListener("load", passagefilterinvertincrementload);

        function passagefilterinvertincrementupdate(e)
        {
            const v = Number(passagefilterinvertnumber.value) + Number(e.target.value);

            if((passagefilterinvertnumber.min <= v) && (v <= passagefilterinvertnumber.max))
            {
                passagefilterinvertnumber.value = v;

                passagefilterinvertnumberupdate();
            }
        }



        function passagefiltersaturateload()
        {
            const div = document.createElement("div");
            div.id = "passagefiltersaturate";
            div.innerHTML = "filter-saturate";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefiltersaturateload);

        function passagefiltersaturatenumberload()
        {
            const br = document.createElement("br");
            passagefiltersaturate.append(br);

            const input = document.createElement("input");
            input.id = "passagefiltersaturatenumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", passagefiltersaturatenumberupdate);
            passagefiltersaturate.append(input);

            //passagefiltersaturatenumberset();
        }
        addEventListener("load", passagefiltersaturatenumberload);

        function passagefiltersaturatenumberset()
        {
            const v = passagefiltersaturatenumber.value;

            passagefiltersaturaterange.value = v;
            text.passagebackdropfiltersaturate = v;
        }

        function passagefiltersaturatenumberupdate()
        {
            passagefiltersaturatenumberset();
            svgupdate();
        }

        function passagefiltersaturaterangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefiltersaturaterange";
            input.max = passagefiltersaturatenumber.max;
            input.min = passagefiltersaturatenumber.min;
            input.step = passagefiltersaturatenumber.step;
            input.type = "range";
            input.value = passagefiltersaturatenumber.value;
            input.addEventListener("input", passagefiltersaturaterangeupdate);
            passagefiltersaturate.append(input);

            passagefiltersaturaterangeset();
        }
        addEventListener("load", passagefiltersaturaterangeload);

        function passagefiltersaturaterangeset()
        {
            const v = passagefiltersaturaterange.value;

            passagefiltersaturatenumber.value = v;
            text.passagebackdropfiltersaturate = v;
        }

        function passagefiltersaturaterangeupdate()
        {
            passagefiltersaturaterangeset();
            svgupdate();
        }

        function passagefiltersaturateexactload()
        {
            const br = document.createElement("br");
            passagefiltersaturate.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltersaturateexactupdate);
                passagefiltersaturate.append(button);
            }
        }
        addEventListener("load", passagefiltersaturateexactload);

        function passagefiltersaturateexactupdate(e)
        {
            passagefiltersaturatenumber.value = Number(e.target.value);

            passagefiltersaturatenumberupdate();
        }

        function passagefiltersaturateincrementload()
        {
            const br = document.createElement("br");
            passagefiltersaturate.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltersaturateincrementupdate);
                passagefiltersaturate.append(button);
            }
        }
        addEventListener("load", passagefiltersaturateincrementload);

        function passagefiltersaturateincrementupdate(e)
        {
            const v = Number(passagefiltersaturatenumber.value) + Number(e.target.value);

            if((passagefiltersaturatenumber.min <= v) && (v <= passagefiltersaturatenumber.max))
            {
                passagefiltersaturatenumber.value = v;

                passagefiltersaturatenumberupdate();
            }
        }



        function passagefiltersepiaload()
        {
            const div = document.createElement("div");
            div.id = "passagefiltersepia";
            div.innerHTML = "filter-sepia";
            tabcontentpassage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", passagefiltersepiaload);

        function passagefiltersepianumberload()
        {
            const br = document.createElement("br");
            passagefiltersepia.append(br);

            const input = document.createElement("input");
            input.id = "passagefiltersepianumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagefiltersepianumberupdate);
            passagefiltersepia.append(input);

            //passagefiltersepianumberset();
        }
        addEventListener("load", passagefiltersepianumberload);

        function passagefiltersepianumberset()
        {
            const v = passagefiltersepianumber.value;

            passagefiltersepiarange.value = v;
            text.passagebackdropfiltersepia = v;
        }

        function passagefiltersepianumberupdate()
        {
            passagefiltersepianumberset();
            svgupdate();
        }

        function passagefiltersepiarangeload()
        {
            const input = document.createElement("input");
            input.id = "passagefiltersepiarange";
            input.max = passagefiltersepianumber.max;
            input.min = passagefiltersepianumber.min;
            input.step = passagefiltersepianumber.step;
            input.type = "range";
            input.value = passagefiltersepianumber.value;
            input.addEventListener("input", passagefiltersepiarangeupdate);
            passagefiltersepia.append(input);

            passagefiltersepiarangeset();
        }
        addEventListener("load", passagefiltersepiarangeload);

        function passagefiltersepiarangeset()
        {
            const v = passagefiltersepiarange.value;

            passagefiltersepianumber.value = v;
            text.passagebackdropfiltersepia = v;
        }

        function passagefiltersepiarangeupdate()
        {
            passagefiltersepiarangeset();
            svgupdate();
        }

        function passagefiltersepiaexactload()
        {
            const br = document.createElement("br");
            passagefiltersepia.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltersepiaexactupdate);
                passagefiltersepia.append(button);
            }
        }
        addEventListener("load", passagefiltersepiaexactload);

        function passagefiltersepiaexactupdate(e)
        {
            passagefiltersepianumber.value = Number(e.target.value);

            passagefiltersepianumberupdate();
        }

        function passagefiltersepiaincrementload()
        {
            const br = document.createElement("br");
            passagefiltersepia.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", passagefiltersepiaincrementupdate);
                passagefiltersepia.append(button);
            }
        }
        addEventListener("load", passagefiltersepiaincrementload);

        function passagefiltersepiaincrementupdate(e)
        {
            const v = Number(passagefiltersepianumber.value) + Number(e.target.value);

            if((passagefiltersepianumber.min <= v) && (v <= passagefiltersepianumber.max))
            {
                passagefiltersepianumber.value = v;

                passagefiltersepianumberupdate();
            }
        }
//*/



/*
        function passagemargintopload()
        {
            const div = document.createElement("div");
            div.id = "passagemargintop";
            div.innerHTML = "margin-top";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagemargintopload);

        function passagemargintopnumberload()
        {
            const br = document.createElement("br");
            passagemargintop.append(br);

            const input = document.createElement("input");
            input.id = "passagemargintopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagemargintopnumberupdate);
            passagemargintop.append(input);

            //passagemargintopnumberset();
        }
        addEventListener("load", passagemargintopnumberload);

        function passagemargintopnumberset()
        {
            const v = Number(passagemargintopnumber.value);

            passagemargintoprange.value = v;
            text.passagemargintop = v;
        }

        function passagemargintopnumberupdate()
        {
            passagemargintopnumberset();

            svgupdate();
        }

        function passagemargintoprangeload()
        {
            const input = document.createElement("input");
            input.id = "passagemargintoprange";
            input.max = passagemargintopnumber.max;
            input.min = passagemargintopnumber.min;
            input.type = "range";
            input.value = passagemargintopnumber.value;
            input.addEventListener("input", passagemargintoprangeupdate);
            passagemargintop.append(input);

            passagemargintoprangeset();
        }
        addEventListener("load", passagemargintoprangeload);

        function passagemargintoprangeset()
        {
            const v = Number(passagemargintoprange.value);

            passagemargintopnumber.value = v;
            text.passagemargintop = v;
        }

        function passagemargintoprangeupdate()
        {
            passagemargintoprangeset();

            svgupdate();
        }



        function passagemarginbottomload()
        {
            const div = document.createElement("div");
            div.id = "passagemarginbottom";
            div.innerHTML = "margin-bottom";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagemarginbottomload);

        function passagemarginbottomnumberload()
        {
            const br = document.createElement("br");
            passagemarginbottom.append(br);

            const input = document.createElement("input");
            input.id = "passagemarginbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagemarginbottomnumberupdate);
            passagemarginbottom.append(input);

            //passagemarginbottomnumberset();
        }
        addEventListener("load", passagemarginbottomnumberload);

        function passagemarginbottomnumberset()
        {
            const v = Number(passagemarginbottomnumber.value);

            passagemarginbottomrange.value = v;
            text.passagemarginbottom = v;
        }

        function passagemarginbottomnumberupdate()
        {
            passagemarginbottomnumberset();

            svgupdate();
        }

        function passagemarginbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagemarginbottomrange";
            input.max = passagemarginbottomnumber.max;
            input.min = passagemarginbottomnumber.min;
            input.type = "range";
            input.value = passagemarginbottomnumber.value;
            input.addEventListener("input", passagemarginbottomrangeupdate);
            passagemarginbottom.append(input);

            passagemarginbottomrangeset();
        }
        addEventListener("load", passagemarginbottomrangeload);

        function passagemarginbottomrangeset()
        {
            const v = Number(passagemarginbottomrange.value);

            passagemarginbottomnumber.value = v;
            text.passagemarginbottom = v;
        }

        function passagemarginbottomrangeupdate()
        {
            passagemarginbottomrangeset();

            svgupdate();
        }



        function passagemarginleftload()
        {
            const div = document.createElement("div");
            div.id = "passagemarginleft";
            div.innerHTML = "margin-left";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagemarginleftload);

        function passagemarginleftnumberload()
        {
            const br = document.createElement("br");
            passagemarginleft.append(br);

            const input = document.createElement("input");
            input.id = "passagemarginleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagemarginleftnumberupdate);
            passagemarginleft.append(input);

            //passagemarginleftnumberset();
        }
        addEventListener("load", passagemarginleftnumberload);

        function passagemarginleftnumberset()
        {
            const v = Number(passagemarginleftnumber.value);

            passagemarginleftrange.value = v;
            text.passagemarginleft = v;
        }

        function passagemarginleftnumberupdate()
        {
            passagemarginleftnumberset();

            svgupdate();
        }

        function passagemarginleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagemarginleftrange";
            input.max = passagemarginleftnumber.max;
            input.min = passagemarginleftnumber.min;
            input.type = "range";
            input.value = passagemarginleftnumber.value;
            input.addEventListener("input", passagemarginleftrangeupdate);
            passagemarginleft.append(input);

            passagemarginleftrangeset();
        }
        addEventListener("load", passagemarginleftrangeload);

        function passagemarginleftrangeset()
        {
            const v = Number(passagemarginleftrange.value);

            passagemarginleftnumber.value = v;
            text.passagemarginleft = v;
        }

        function passagemarginleftrangeupdate()
        {
            passagemarginleftrangeset();

            svgupdate();
        }



        function passagemarginrightload()
        {
            const div = document.createElement("div");
            div.id = "passagemarginright";
            div.innerHTML = "margin-right";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagemarginrightload);

        function passagemarginrightnumberload()
        {
            const br = document.createElement("br");
            passagemarginright.append(br);

            const input = document.createElement("input");
            input.id = "passagemarginrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagemarginrightnumberupdate);
            passagemarginright.append(input);

            //passagemarginrightnumberset();
        }
        addEventListener("load", passagemarginrightnumberload);

        function passagemarginrightnumberset()
        {
            const v = Number(passagemarginrightnumber.value);

            passagemarginrightrange.value = v;
            text.passagemarginright = v;
        }

        function passagemarginrightnumberupdate()
        {
            passagemarginrightnumberset();

            svgupdate();
        }

        function passagemarginrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagemarginrightrange";
            input.max = passagemarginrightnumber.max;
            input.min = passagemarginrightnumber.min;
            input.type = "range";
            input.value = passagemarginrightnumber.value;
            input.addEventListener("input", passagemarginrightrangeupdate);
            passagemarginright.append(input);

            passagemarginrightrangeset();
        }
        addEventListener("load", passagemarginrightrangeload);

        function passagemarginrightrangeset()
        {
            const v = Number(passagemarginrightrange.value);

            passagemarginrightnumber.value = v;
            text.passagemarginright = v;
        }

        function passagemarginrightrangeupdate()
        {
            passagemarginrightrangeset();

            svgupdate();
        }



        function passagepaddingtopload()
        {
            const div = document.createElement("div");
            div.id = "passagepaddingtop";
            div.innerHTML = "padding-top";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagepaddingtopload);

        function passagepaddingtopnumberload()
        {
            const br = document.createElement("br");
            passagepaddingtop.append(br);

            const input = document.createElement("input");
            input.id = "passagepaddingtopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagepaddingtopnumberupdate);
            passagepaddingtop.append(input);

            //passagepaddingtopnumberset();
        }
        addEventListener("load", passagepaddingtopnumberload);

        function passagepaddingtopnumberset()
        {
            const v = Number(passagepaddingtopnumber.value);

            passagepaddingtoprange.value = v;
            text.passagepaddingtop = v;
        }

        function passagepaddingtopnumberupdate()
        {
            passagepaddingtopnumberset();

            svgupdate();
        }

        function passagepaddingtoprangeload()
        {
            const input = document.createElement("input");
            input.id = "passagepaddingtoprange";
            input.max = passagepaddingtopnumber.max;
            input.min = passagepaddingtopnumber.min;
            input.type = "range";
            input.value = passagepaddingtopnumber.value;
            input.addEventListener("input", passagepaddingtoprangeupdate);
            passagepaddingtop.append(input);

            passagepaddingtoprangeset();
        }
        addEventListener("load", passagepaddingtoprangeload);

        function passagepaddingtoprangeset()
        {
            const v = Number(passagepaddingtoprange.value);

            passagepaddingtopnumber.value = v;
            text.passagepaddingtop = v;
        }

        function passagepaddingtoprangeupdate()
        {
            passagepaddingtoprangeset();

            svgupdate();
        }



        function passagepaddingbottomload()
        {
            const div = document.createElement("div");
            div.id = "passagepaddingbottom";
            div.innerHTML = "padding-bottom";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagepaddingbottomload);

        function passagepaddingbottomnumberload()
        {
            const br = document.createElement("br");
            passagepaddingbottom.append(br);

            const input = document.createElement("input");
            input.id = "passagepaddingbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagepaddingbottomnumberupdate);
            passagepaddingbottom.append(input);

            //passagepaddingbottomnumberset();
        }
        addEventListener("load", passagepaddingbottomnumberload);

        function passagepaddingbottomnumberset()
        {
            const v = Number(passagepaddingbottomnumber.value);

            passagepaddingbottomrange.value = v;
            text.passagepaddingbottom = v;
        }

        function passagepaddingbottomnumberupdate()
        {
            passagepaddingbottomnumberset();

            svgupdate();
        }

        function passagepaddingbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagepaddingbottomrange";
            input.max = passagepaddingbottomnumber.max;
            input.min = passagepaddingbottomnumber.min;
            input.type = "range";
            input.value = passagepaddingbottomnumber.value;
            input.addEventListener("input", passagepaddingbottomrangeupdate);
            passagepaddingbottom.append(input);

            passagepaddingbottomrangeset();
        }
        addEventListener("load", passagepaddingbottomrangeload);

        function passagepaddingbottomrangeset()
        {
            const v = Number(passagepaddingbottomrange.value);

            passagepaddingbottomnumber.value = v;
            text.passagepaddingbottom = v;
        }

        function passagepaddingbottomrangeupdate()
        {
            passagepaddingbottomrangeset();

            svgupdate();
        }



        function passagepaddingleftload()
        {
            const div = document.createElement("div");
            div.id = "passagepaddingleft";
            div.innerHTML = "padding-left";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagepaddingleftload);

        function passagepaddingleftnumberload()
        {
            const br = document.createElement("br");
            passagepaddingleft.append(br);

            const input = document.createElement("input");
            input.id = "passagepaddingleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagepaddingleftnumberupdate);
            passagepaddingleft.append(input);

            //passagepaddingleftnumberset();
        }
        addEventListener("load", passagepaddingleftnumberload);

        function passagepaddingleftnumberset()
        {
            const v = Number(passagepaddingleftnumber.value);

            passagepaddingleftrange.value = v;
            text.passagepaddingleft = v;
        }

        function passagepaddingleftnumberupdate()
        {
            passagepaddingleftnumberset();

            svgupdate();
        }

        function passagepaddingleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagepaddingleftrange";
            input.max = passagepaddingleftnumber.max;
            input.min = passagepaddingleftnumber.min;
            input.type = "range";
            input.value = passagepaddingleftnumber.value;
            input.addEventListener("input", passagepaddingleftrangeupdate);
            passagepaddingleft.append(input);

            passagepaddingleftrangeset();
        }
        addEventListener("load", passagepaddingleftrangeload);


        function passagepaddingleftrangeset()
        {
            const v = Number(passagepaddingleftrange.value);

            passagepaddingleftnumber.value = v;
            text.passagepaddingleft = v;
        }

        function passagepaddingleftrangeupdate()
        {
            passagepaddingleftrangeset();

            svgupdate();
        }



        function passagepaddingrightload()
        {
            const div = document.createElement("div");
            div.id = "passagepaddingright";
            div.innerHTML = "padding-right";
            tabcontentpassage.append(div);
        }
        addEventListener("load", passagepaddingrightload);

        function passagepaddingrightnumberload()
        {
            const br = document.createElement("br");
            passagepaddingright.append(br);

            const input = document.createElement("input");
            input.id = "passagepaddingrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", passagepaddingrightnumberupdate);
            passagepaddingright.append(input);

            //passagepaddingrightnumberset();
        }
        addEventListener("load", passagepaddingrightnumberload);

        function passagepaddingrightnumberset()
        {
            const v = Number(passagepaddingrightnumber.value);

            passagepaddingrightrange.value = v;
            text.passagepaddingright = v;
        }

        function passagepaddingrightnumberupdate()
        {
            passagepaddingrightnumberset();

            svgupdate();
        }

        function passagepaddingrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "passagepaddingrightrange";
            input.max = passagepaddingrightnumber.max;
            input.min = passagepaddingrightnumber.min;
            input.type = "range";
            input.value = passagepaddingrightnumber.value;
            input.addEventListener("input", passagepaddingrightrangeupdate);
            passagepaddingright.append(input);

            passagepaddingrightrangeset();
        }
        addEventListener("load", passagepaddingrightrangeload);

        function passagepaddingrightrangeset()
        {
            const v = Number(passagepaddingrightrange.value);

            passagepaddingrightnumber.value = v;
            text.passagepaddingright = v;
        }

        function passagepaddingrightrangeupdate()
        {
            passagepaddingrightrangeset();

            svgupdate();
        }
//*/






        function savedownloadload()
        {
            const div = document.createElement("div");
            div.id = "savedownload";
            //div.innerHTML = "download<br>";
            tabcontentsave.append(div);
        }
        addEventListener("load", savedownloadload);

        function savedownloadimageload()
        {
            const a = document.createElement("a");
            a.download = "download";
            a.id = "savedownloadimage";
            a.innerHTML = "download";
            a.addEventListener("click", savedownloadimageupdate);
            savedownload.append(a);

            savedownloadimageupdate();
        }
        addEventListener("load", savedownloadimageload);

        function savedownloadimageupdate()
        {
            savedownloadimage.href = canvas.toDataURL();
        }
/*
        function savedownloadsettingsload()
        {
            const a = document.createElement("a");
            a.download = "settings.txt";
            a.id = "savedownloadsettings";
            a.innerHTML = "<br>settings";
            a.addEventListener("click", savedownloadsettingsupdate);
            savedownload.append(a);

            savedownloadsettingsupdate();
        }
        addEventListener("load", savedownloadsettingsload);

        function savedownloadsettingsupdate()
        {
            const data =
            [
                [
                    "canvas.width",
                    canvas.width,
                ],
                canvas.height,
                canvas.backgroundcolor,
                canvas.backgroundalpha,
                image.file,
                image.fit,
                image.width,
                image.height,
                image.x,
                image.y,
                image.backgroundcolor,
                image.backgroundalpha,
                image.opacity,
                text.messagetext,
                text.messagewidth,
                text.messageheight,
                text.messagex,
                text.messagey,
                text.messagehorizontal,
                text.messagevertical,
                text.messagewritingmode,
                text.messagefontfamily,
                text.messagefontsize,
                text.messagebackgroundcolor,
                text.messagebackgroundalpha,
                text.messagecolor,
                text.messagealpha,
                text.version,
                text.versionname,
                text.book,
                text.bookname,
                text.chapter,
                text.verse,
                text.verseend,
                text.referencewidth,
                text.referenceheight,
                text.referencex,
                text.referencey,
                text.referencehorizontal,
                text.referencevertical,
                text.referencewritingmode,
                text.referencefontfamily,
                text.referencefontsize,
                text.referencebackgroundcolor,
                text.referencebackgroundalpha,
                text.referencecolor,
                text.referencealpha,
                text.passagewidth,
                text.passageheight,
                text.passagex,
                text.passagey,
                text.passagehorizontal,
                text.passagevertical,
                text.passagewritingmode,
                text.passagefontfamily,
                text.passagefontsize,
                text.passagebackgroundcolor,
                text.passagebackgroundalpha,
                text.passagecolor,
                text.passagealpha,
            ];
            //leftoff
            const data2 = [];
            for(const a of data)
            {
                data2
            }
            savedownloadsettings.href = `data:text/plain,${data}`;
        }



        function savefileload()
        {
            const div = document.createElement("div");
            div.id = "savefile";
            div.innerHTML = "file<br>";
            tabcontentsave.append(div);
        }
        addEventListener("load", savefileload);

        function savefilefileload()
        {
            const input = document.createElement("input");
            input.id = "savefilefile";
            input.type = "file";
            input.addEventListener("change", savefilefileupdate);
            savefile.append(input);
        }
        addEventListener("load", savefilefileload);

        function savefilefileupdate()
        {
            const f = savefilefile.files[0];

            save.src = URL.createObjectURL(f);
        }
//*/</script></div></main><div class=banner><script defer src=https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4239362730750625 crossorigin=anonymous></script><ins class=adsbygoogle data-ad-client=ca-pub-4239362730750625 data-ad-slot=5564639719><a href=https://samaritanspurse.org/occ/ target=_blank><img alt="Samaritan's Purse Operation Christmas Child" src=/assets/svg/SamaritansPurseOperationChristmasChild3.svg title="Samaritan's Purse Operation Christmas Child"></a></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><footer><div id=boilerplate><div><a href=/Jesus/>Jesus</a> · <a href=/Bible/>Bible</a></div><div><a href=/html/>HTML</a> · <a href=/css/>CSS</a> · <a href=/js/>JS</a> · <a href=/php/>PHP</a> · <a href=/svg/>SVG</a></div><div><a href=/applications/>Applications</a> · <a href=/editor/>Editor</a> · <a href=/favicon/>Favicon</a></div><div><a href=/htaccess/>.htaccess</a> · <a href=/acme.sh/>acme.sh</a></div><div><a href=/flash/>Flash</a> · <a href=/sketchup/>SketchUp</a> · <a href=/unity/>Unity</a> · <a href=/xcode/>Xcode</a></div><div><a href=/about/>About</a> · <a href=/terms/>Terms</a></div><div><a href=/>osbo.com</a></div></div><div id=copyright>© 2026 Osbo Design</div></footer></div><div id=nav><div class=h1><a href=/Jesus/>JESUS</a></div><div class=h1><a id=switch-Bible>BIBLE</a></div><div id=list-Bible><h2>Overview</h2><div><ul><li><a href=/Bible/>Overview</a></li></ul></div><h2>Search</h2><div><ul><li><a href=/Bible/search/>Search</a></li></ul></div><h2>Download</h2><div><ul><li><a href=/Bible/download/>Download</a></li></ul></div><h2>العربية</h2><div><ul><li><a href=/Bible/asvd/>الكتاب المقدس ترجمة فانديك وسميث (ASVD)</a></li></ul></div><h2>česky</h2><div><ul><li><a href=/Bible/csbkr/>Bible Kralická 1613 (CSBKR)</a></li></ul></div><h2>Dansk</h2><div><ul><li><a href=/Bible/da1871/>Danske Bibel 1871 (DA1871)</a></li></ul></div><h2>Deutsch</h2><div><ul><li><a href=/Bible/delut/>Luther Bible 1912 (DELUT)</a></li><li><a href=/Bible/elb/>Elberfelder 1905 (ELB)</a></li><li><a href=/Bible/elb71/>Elberfelder 1871 (ELB71)</a></li></ul></div><h2>English</h2><div><ul><li><a href=/Bible/asv/>American Standard Version (ASV)</a></li><li><a href=/Bible/kjv/>King James Version (KJV)</a></li><li><a href=/Bible/web/>World English Bible (WEB)</a></li></ul></div><h2>Español</h2><div><ul><li><a href=/Bible/rves/>Reina-Valera Antigua (RVES)</a></li></ul></div><h2>Suomi</h2><div><ul><li><a href=/Bible/fi1776/>Finnish 1776 (FI1776)</a></li><li><a href=/Bible/finpr/>Finnish 1938 (FINPR)</a></li></ul></div><h2>Français</h2><div><ul><li><a href=/Bible/fmar/>Martin 1744 (FMAR)</a></li><li><a href=/Bible/frdby/>Bible Darby en français (FRDBY)</a></li><li><a href=/Bible/lsg/>Louis Segond 1910 (LSG)</a></li><li><a href=/Bible/ost/>Ostervald (OST)</a></li></ul></div><h2>Magyar</h2><div><ul><li><a href=/Bible/kar/>Károli 1590 (KAR)</a></li></ul></div><h2>Bahasa Indonesia</h2><div><ul><li><a href=/Bible/idbar/>Terjemahan Baru (IDBAR)</a></li></ul></div><h2>Italiano</h2><div><ul><li><a href=/Bible/igd/>Giovanni Diodati Bibbia (IGD)</a></li><li><a href=/Bible/itriv/>Italian Riveduta 1927 (ITRIV)</a></li></ul></div><h2>日本語</h2><div><ul><li><a href=/Bible/ja1955/>Colloquial Japanese 1955 (JA1955)</a></li></ul></div><h2>Malagasy</h2><div><ul><li><a href=/Bible/mg1865/>Malagasy Bible (MG1865)</a></li></ul></div><h2>te reo Māori</h2><div><ul><li><a href=/Bible/maor/>Maori Bible (MAOR)</a></li></ul></div><h2>한국어</h2><div><ul><li><a href=/Bible/korvb/>개역한글 (KORVB)</a></li></ul></div><h2>Nederlands</h2><div><ul><li><a href=/Bible/sv1750/>Statenvertaling (SV1750)</a></li></ul></div><h2>Norsk</h2><div><ul><li><a href=/Bible/norsk/>Det Norsk Bibelselskap 1930 (NORSK)</a></li></ul></div><h2>Polski</h2><div><ul><li><a href=/Bible/pbg/>Biblia Gdańska (PBG)</a></li></ul></div><h2>Português</h2><div><ul><li><a href=/Bible/aa/>Almeida Atualizada (AA)</a></li></ul></div><h2>Română</h2><div><ul><li><a href=/Bible/rmnn/>Romanian Cornilescu 1928 (RMNN)</a></li><li><a href=/Bible/vdc/>Versiunea Dumitru Cornilescu (VDC)</a></li><li><a href=/Bible/vdcc/>Versiunea Dumitru Cornilescu Corectată (VDCC)</a></li></ul></div><h2>Pyccкий</h2><div><ul><li><a href=/Bible/rursv/>Синодальный перевод (RURSV)</a></li></ul></div><h2>Shqip</h2><div><ul><li><a href=/Bible/albb/>Albanian Bible (ALBB)</a></li></ul></div><h2>Svenska</h2><div><ul><li><a href=/Bible/sk73/>Karl XII 1873 (SK73)</a></li><li><a href=/Bible/sven/>Svenska 1917 (SVEN)</a></li></ul></div><h2>Wikang Tagalog</h2><div><ul><li><a href=/Bible/tlab/>Ang Biblia (TLAB)</a></li></ul></div><h2>українська</h2><div><ul><li><a href=/Bible/ubio/>Біблія в пер. Івана Огієнка 1962 (UBIO)</a></li><li><a href=/Bible/ukrk/>Біблія в пер. П.Куліша та І.Пулюя 1905 (UKRK)</a></li></ul></div><h2>Tiếng Việt</h2><div><ul><li><a href=/Bible/vi1934/>Vietnamese Bible 1934 (VI1934)</a></li></ul></div><h2>简体中文</h2><div><ul><li><a href=/Bible/cuvs/>简体和合本 (CUVS)</a></li></ul></div><h2>繁體中文</h2><div><ul><li><a href=/Bible/cuv/>和合本 (CUV)</a></li></ul></div></div><div class=h1><a id=switch-html>HTML</a></div><div id=list-html><h2>Overview</h2><div><ul><li><a href=/html/>Overview</a></li></ul></div><h2>Attributes</h2><div><ul><li><a href=/html/attributes/abbr/>abbr</a></li><li><a href=/html/attributes/accept/>accept</a></li><li><a href=/html/attributes/accept-charset/>accept-charset</a></li><li><a href=/html/attributes/accesskey/>accesskey</a></li><li><a href=/html/attributes/action/>action</a></li><li><a href=/html/attributes/alt/>alt</a></li><li><a href=/html/attributes/as/>as</a></li><li><a href=/html/attributes/async/>async</a></li><li><a href=/html/attributes/autocapitalize/>autocapitalize</a></li><li><a href=/html/attributes/autocomplete/>autocomplete</a></li><li><a href=/html/attributes/autofocus/>autofocus</a></li><li><a href=/html/attributes/autoplay/>autoplay</a></li><li><a href=/html/attributes/blocking/>blocking</a></li><li><a href=/html/attributes/charset/>charset</a></li><li><a href=/html/attributes/checked/>checked</a></li><li><a href=/html/attributes/cite/>cite</a></li><li><a href=/html/attributes/class/>class</a></li><li><a href=/html/attributes/color/>color</a></li><li><a href=/html/attributes/cols/>cols</a></li><li><a href=/html/attributes/colspan/>colspan</a></li><li><a href=/html/attributes/contenteditable/>contenteditable</a></li><li><a href=/html/attributes/controls/>controls</a></li><li><a href=/html/attributes/coords/>coords</a></li><li><a href=/html/attributes/crossorigin/>crossorigin</a></li><li><a href=/html/attributes/data/>data</a></li><li><a href=/html/attributes/datetime/>datetime</a></li><li><a href=/html/attributes/decoding/>decoding</a></li><li><a href=/html/attributes/default/>default</a></li><li><a href=/html/attributes/defer/>defer</a></li><li><a href=/html/attributes/dir/>dir</a></li><li><a href=/html/attributes/dirname/>dirname</a></li><li><a href=/html/attributes/disabled/>disabled</a></li><li><a href=/html/attributes/download/>download</a></li><li><a href=/html/attributes/draggable/>draggable</a></li><li><a href=/html/attributes/enctype/>enctype</a></li><li><a href=/html/attributes/enterkeyhint/>enterkeyhint</a></li><li><a href=/html/attributes/exportparts/>exportparts</a></li><li><a href=/html/attributes/fetchpriority/>fetchpriority</a></li><li><a href=/html/attributes/for/>for</a></li><li><a href=/html/attributes/form/>form</a></li><li><a href=/html/attributes/formaction/>formaction</a></li><li><a href=/html/attributes/formenctype/>formenctype</a></li><li><a href=/html/attributes/formmethod/>formmethod</a></li><li><a href=/html/attributes/formnovalidate/>formnovalidate</a></li><li><a href=/html/attributes/formtarget/>formtarget</a></li><li><a href=/html/attributes/headers/>headers</a></li><li><a href=/html/attributes/height/>height</a></li><li><a href=/html/attributes/hidden/>hidden</a></li><li><a href=/html/attributes/high/>high</a></li><li><a href=/html/attributes/href/>href</a></li><li><a href=/html/attributes/hreflang/>hreflang</a></li><li><a href=/html/attributes/http-equiv/>http-equiv</a></li><li><a href=/html/attributes/id/>id</a></li><li><a href=/html/attributes/imagesizes/>imagesizes</a></li><li><a href=/html/attributes/imagesrcset/>imagesrcset</a></li><li><a href=/html/attributes/inert/>inert</a></li><li><a href=/html/attributes/inputmode/>inputmode</a></li><li><a href=/html/attributes/integrity/>integrity</a></li><li><a href=/html/attributes/is/>is</a></li><li><a href=/html/attributes/ismap/>ismap</a></li><li><a href=/html/attributes/itemid/>itemid</a></li><li><a href=/html/attributes/itemprop/>itemprop</a></li><li><a href=/html/attributes/itemref/>itemref</a></li><li><a href=/html/attributes/itemscope/>itemscope</a></li><li><a href=/html/attributes/itemtype/>itemtype</a></li><li><a href=/html/attributes/kind/>kind</a></li><li><a href=/html/attributes/label/>label</a></li><li><a href=/html/attributes/lang/>lang</a></li><li><a href=/html/attributes/list/>list</a></li><li><a href=/html/attributes/loading/>loading</a></li><li><a href=/html/attributes/loop/>loop</a></li><li><a href=/html/attributes/low/>low</a></li><li><a href=/html/attributes/max/>max</a></li><li><a href=/html/attributes/maxlength/>maxlength</a></li><li><a href=/html/attributes/media/>media</a></li><li><a href=/html/attributes/method/>method</a></li><li><a href=/html/attributes/min/>min</a></li><li><a href=/html/attributes/minlength/>minlength</a></li><li><a href=/html/attributes/multiple/>multiple</a></li><li><a href=/html/attributes/muted/>muted</a></li><li><a href=/html/attributes/name/>name</a></li><li><a href=/html/attributes/nomodule/>nomodule</a></li><li><a href=/html/attributes/nonce/>nonce</a></li><li><a href=/html/attributes/novalidate/>novalidate</a></li><li><a href=/html/attributes/onabort/>onabort</a></li><li><a href=/html/attributes/onafterprint/>onafterprint</a></li><li><a href=/html/attributes/onauxclick/>onauxclick</a></li><li><a href=/html/attributes/onbeforeinput/>onbeforeinput</a></li><li><a href=/html/attributes/onbeforeprint/>onbeforeprint</a></li><li><a href=/html/attributes/onbeforetoggle/>onbeforetoggle</a></li><li><a href=/html/attributes/onbeforeunload/>onbeforeunload</a></li><li><a href=/html/attributes/onblur/>onblur</a></li><li><a href=/html/attributes/oncancel/>oncancel</a></li><li><a href=/html/attributes/oncanplay/>oncanplay</a></li><li><a href=/html/attributes/oncanplaythrough/>oncanplaythrough</a></li><li><a href=/html/attributes/onchange/>onchange</a></li><li><a href=/html/attributes/onclick/>onclick</a></li><li><a href=/html/attributes/oncontextlost/>oncontextlost</a></li><li><a href=/html/attributes/oncontextmenu/>oncontextmenu</a></li><li><a href=/html/attributes/oncontextrestored/>oncontextrestored</a></li><li><a href=/html/attributes/oncopy/>oncopy</a></li><li><a href=/html/attributes/oncut/>oncut</a></li><li><a href=/html/attributes/ondblclick/>ondblclick</a></li><li><a href=/html/attributes/ondrag/>ondrag</a></li><li><a href=/html/attributes/ondragend/>ondragend</a></li><li><a href=/html/attributes/ondragenter/>ondragenter</a></li><li><a href=/html/attributes/ondragleave/>ondragleave</a></li><li><a href=/html/attributes/ondragover/>ondragover</a></li><li><a href=/html/attributes/ondragstart/>ondragstart</a></li><li><a href=/html/attributes/ondrop/>ondrop</a></li><li><a href=/html/attributes/ondurationchange/>ondurationchange</a></li><li><a href=/html/attributes/onended/>onended</a></li><li><a href=/html/attributes/onfocus/>onfocus</a></li><li><a href=/html/attributes/onformdata/>onformdata</a></li><li><a href=/html/attributes/onhashchange/>onhashchange</a></li><li><a href=/html/attributes/oninput/>oninput</a></li><li><a href=/html/attributes/oninvalid/>oninvalid</a></li><li><a href=/html/attributes/onkeydown/>onkeydown</a></li><li><a href=/html/attributes/onkeypress/>onkeypress</a></li><li><a href=/html/attributes/onkeyup/>onkeyup</a></li><li><a href=/html/attributes/onlanguagechange/>onlanguagechange</a></li><li><a href=/html/attributes/onload/>onload</a></li><li><a href=/html/attributes/onloadeddata/>onloadeddata</a></li><li><a href=/html/attributes/onloadedmetadata/>onloadedmetadata</a></li><li><a href=/html/attributes/onloadstart/>onloadstart</a></li><li><a href=/html/attributes/onmousedown/>onmousedown</a></li><li><a href=/html/attributes/onmouseenter/>onmouseenter</a></li><li><a href=/html/attributes/onmouseleave/>onmouseleave</a></li><li><a href=/html/attributes/onmousemove/>onmousemove</a></li><li><a href=/html/attributes/onmouseout/>onmouseout</a></li><li><a href=/html/attributes/onmouseover/>onmouseover</a></li><li><a href=/html/attributes/onmouseup/>onmouseup</a></li><li><a href=/html/attributes/onmousewheel/>onmousewheel</a></li><li><a href=/html/attributes/onoffline/>onoffline</a></li><li><a href=/html/attributes/ononline/>ononline</a></li><li><a href=/html/attributes/onpagehide/>onpagehide</a></li><li><a href=/html/attributes/onpageshow/>onpageshow</a></li><li><a href=/html/attributes/onpaste/>onpaste</a></li><li><a href=/html/attributes/onpause/>onpause</a></li><li><a href=/html/attributes/onplay/>onplay</a></li><li><a href=/html/attributes/onplaying/>onplaying</a></li><li><a href=/html/attributes/onprogress/>onprogress</a></li><li><a href=/html/attributes/onratechange/>onratechange</a></li><li><a href=/html/attributes/onreset/>onreset</a></li><li><a href=/html/attributes/onresize/>onresize</a></li><li><a href=/html/attributes/onscroll/>onscroll</a></li><li><a href=/html/attributes/onscrollend/>onscrollend</a></li><li><a href=/html/attributes/onsearch/>onsearch</a></li><li><a href=/html/attributes/onseeked/>onseeked</a></li><li><a href=/html/attributes/onseeking/>onseeking</a></li><li><a href=/html/attributes/onselect/>onselect</a></li><li><a href=/html/attributes/onstorage/>onstorage</a></li><li><a href=/html/attributes/onsubmit/>onsubmit</a></li><li><a href=/html/attributes/onsuspend/>onsuspend</a></li><li><a href=/html/attributes/ontimeupdate/>ontimeupdate</a></li><li><a href=/html/attributes/ontoggle/>ontoggle</a></li><li><a href=/html/attributes/onunload/>onunload</a></li><li><a href=/html/attributes/onvolumechange/>onvolumechange</a></li><li><a href=/html/attributes/onwaiting/>onwaiting</a></li><li><a href=/html/attributes/onwheel/>onwheel</a></li><li><a href=/html/attributes/open/>open</a></li><li><a href=/html/attributes/optimum/>optimum</a></li><li><a href=/html/attributes/part/>part</a></li><li><a href=/html/attributes/pattern/>pattern</a></li><li><a href=/html/attributes/ping/>ping</a></li><li><a href=/html/attributes/placeholder/>placeholder</a></li><li><a href=/html/attributes/playsinline/>playsinline</a></li><li><a href=/html/attributes/popover/>popover</a></li><li><a href=/html/attributes/popovertarget/>popovertarget</a></li><li><a href=/html/attributes/popovertargetaction/>popovertargetaction</a></li><li><a href=/html/attributes/poster/>poster</a></li><li><a href=/html/attributes/preload/>preload</a></li><li><a href=/html/attributes/readonly/>readonly</a></li><li><a href=/html/attributes/referrerpolicy/>referrerpolicy</a></li><li><a href=/html/attributes/rel/>rel</a></li><li><a href=/html/attributes/required/>required</a></li><li><a href=/html/attributes/reversed/>reversed</a></li><li><a href=/html/attributes/rows/>rows</a></li><li><a href=/html/attributes/rowspan/>rowspan</a></li><li><a href=/html/attributes/sandbox/>sandbox</a></li><li><a href=/html/attributes/scope/>scope</a></li><li><a href=/html/attributes/selected/>selected</a></li><li><a href=/html/attributes/shape/>shape</a></li><li><a href=/html/attributes/size/>size</a></li><li><a href=/html/attributes/sizes/>sizes</a></li><li><a href=/html/attributes/slot/>slot</a></li><li><a href=/html/attributes/span/>span</a></li><li><a href=/html/attributes/spellcheck/>spellcheck</a></li><li><a href=/html/attributes/src/>src</a></li><li><a href=/html/attributes/srcdoc/>srcdoc</a></li><li><a href=/html/attributes/srclang/>srclang</a></li><li><a href=/html/attributes/srcset/>srcset</a></li><li><a href=/html/attributes/start/>start</a></li><li><a href=/html/attributes/step/>step</a></li><li><a href=/html/attributes/style/>style</a></li><li><a href=/html/attributes/tabindex/>tabindex</a></li><li><a href=/html/attributes/target/>target</a></li><li><a href=/html/attributes/title/>title</a></li><li><a href=/html/attributes/translate/>translate</a></li><li><a href=/html/attributes/type/>type</a></li><li><a href=/html/attributes/usemap/>usemap</a></li><li><a href=/html/attributes/value/>value</a></li><li><a href=/html/attributes/width/>width</a></li><li><a href=/html/attributes/wrap/>wrap</a></li></ul></div><h2>Elements</h2><div><ul><li><a href=/html/elements/!doctype/>!doctype</a></li><li><a href=/html/elements/a/>a</a></li><li><a href=/html/elements/abbr/>abbr</a></li><li><a href=/html/elements/address/>address</a></li><li><a href=/html/elements/area/>area</a></li><li><a href=/html/elements/article/>article</a></li><li><a href=/html/elements/aside/>aside</a></li><li><a href=/html/elements/audio/>audio</a></li><li><a href=/html/elements/b/>b</a></li><li><a href=/html/elements/base/>base</a></li><li><a href=/html/elements/bdi/>bdi</a></li><li><a href=/html/elements/bdo/>bdo</a></li><li><a href=/html/elements/blockquote/>blockquote</a></li><li><a href=/html/elements/body/>body</a></li><li><a href=/html/elements/br/>br</a></li><li><a href=/html/elements/button/>button</a></li><li><a href=/html/elements/canvas/>canvas</a></li><li><a href=/html/elements/caption/>caption</a></li><li><a href=/html/elements/cite/>cite</a></li><li><a href=/html/elements/code/>code</a></li><li><a href=/html/elements/col/>col</a></li><li><a href=/html/elements/colgroup/>colgroup</a></li><li><a href=/html/elements/data/>data</a></li><li><a href=/html/elements/datalist/>datalist</a></li><li><a href=/html/elements/dd/>dd</a></li><li><a href=/html/elements/del/>del</a></li><li><a href=/html/elements/details/>details</a></li><li><a href=/html/elements/dfn/>dfn</a></li><li><a href=/html/elements/dialog/>dialog</a></li><li><a href=/html/elements/div/>div</a></li><li><a href=/html/elements/dl/>dl</a></li><li><a href=/html/elements/dt/>dt</a></li><li><a href=/html/elements/em/>em</a></li><li><a href=/html/elements/embed/>embed</a></li><li><a href=/html/elements/fieldset/>fieldset</a></li><li><a href=/html/elements/figcaption/>figcaption</a></li><li><a href=/html/elements/figure/>figure</a></li><li><a href=/html/elements/footer/>footer</a></li><li><a href=/html/elements/form/>form</a></li><li><a href=/html/elements/h1/>h1</a></li><li><a href=/html/elements/h2/>h2</a></li><li><a href=/html/elements/h3/>h3</a></li><li><a href=/html/elements/h4/>h4</a></li><li><a href=/html/elements/h5/>h5</a></li><li><a href=/html/elements/h6/>h6</a></li><li><a href=/html/elements/head/>head</a></li><li><a href=/html/elements/header/>header</a></li><li><a href=/html/elements/hgroup/>hgroup</a></li><li><a href=/html/elements/hr/>hr</a></li><li><a href=/html/elements/html/>html</a></li><li><a href=/html/elements/i/>i</a></li><li><a href=/html/elements/iframe/>iframe</a></li><li><a href=/html/elements/img/>img</a></li><li><a href=/html/elements/input/>input</a></li><li><a href=/html/elements/ins/>ins</a></li><li><a href=/html/elements/kbd/>kbd</a></li><li><a href=/html/elements/label/>label</a></li><li><a href=/html/elements/legend/>legend</a></li><li><a href=/html/elements/li/>li</a></li><li><a href=/html/elements/link/>link</a></li><li><a href=/html/elements/main/>main</a></li><li><a href=/html/elements/map/>map</a></li><li><a href=/html/elements/mark/>mark</a></li><li><a href=/html/elements/menu/>menu</a></li><li><a href=/html/elements/meta/>meta</a></li><li><a href=/html/elements/meter/>meter</a></li><li><a href=/html/elements/nav/>nav</a></li><li><a href=/html/elements/noscript/>noscript</a></li><li><a href=/html/elements/object/>object</a></li><li><a href=/html/elements/ol/>ol</a></li><li><a href=/html/elements/optgroup/>optgroup</a></li><li><a href=/html/elements/option/>option</a></li><li><a href=/html/elements/output/>output</a></li><li><a href=/html/elements/p/>p</a></li><li><a href=/html/elements/param/>param</a></li><li><a href=/html/elements/picture/>picture</a></li><li><a href=/html/elements/pre/>pre</a></li><li><a href=/html/elements/progress/>progress</a></li><li><a href=/html/elements/q/>q</a></li><li><a href=/html/elements/rb/>rb</a></li><li><a href=/html/elements/rp/>rp</a></li><li><a href=/html/elements/rt/>rt</a></li><li><a href=/html/elements/rtc/>rtc</a></li><li><a href=/html/elements/ruby/>ruby</a></li><li><a href=/html/elements/s/>s</a></li><li><a href=/html/elements/samp/>samp</a></li><li><a href=/html/elements/script/>script</a></li><li><a href=/html/elements/search/>search</a></li><li><a href=/html/elements/section/>section</a></li><li><a href=/html/elements/select/>select</a></li><li><a href=/html/elements/slot/>slot</a></li><li><a href=/html/elements/small/>small</a></li><li><a href=/html/elements/source/>source</a></li><li><a href=/html/elements/span/>span</a></li><li><a href=/html/elements/strong/>strong</a></li><li><a href=/html/elements/style/>style</a></li><li><a href=/html/elements/sub/>sub</a></li><li><a href=/html/elements/summary/>summary</a></li><li><a href=/html/elements/sup/>sup</a></li><li><a href=/html/elements/table/>table</a></li><li><a href=/html/elements/tbody/>tbody</a></li><li><a href=/html/elements/td/>td</a></li><li><a href=/html/elements/template/>template</a></li><li><a href=/html/elements/textarea/>textarea</a></li><li><a href=/html/elements/tfoot/>tfoot</a></li><li><a href=/html/elements/th/>th</a></li><li><a href=/html/elements/thead/>thead</a></li><li><a href=/html/elements/time/>time</a></li><li><a href=/html/elements/title/>title</a></li><li><a href=/html/elements/tr/>tr</a></li><li><a href=/html/elements/track/>track</a></li><li><a href=/html/elements/u/>u</a></li><li><a href=/html/elements/ul/>ul</a></li><li><a href=/html/elements/var/>var</a></li><li><a href=/html/elements/video/>video</a></li><li><a href=/html/elements/wbr/>wbr</a></li></ul></div><h2>Other</h2><div><ul><li><a href=/html/characters/>Characters</a></li><li><a href=/html/comments/>Comments</a></li><li><a href=/html/datatypes/>Datatypes</a></li></ul></div></div><div class=h1><a id=switch-css>CSS</a></div><div id=list-css><h2>Overview</h2><div><ul><li><a href=/css/>Overview</a></li></ul></div><h2>Functions</h2><div><ul><li><a href=/css/functions/abs/>abs</a></li><li><a href=/css/functions/acos/>acos</a></li><li><a href=/css/functions/asin/>asin</a></li><li><a href=/css/functions/atan/>atan</a></li><li><a href=/css/functions/atan2/>atan2</a></li><li><a href=/css/functions/attr/>attr</a></li><li><a href=/css/functions/calc/>calc</a></li><li><a href=/css/functions/clamp/>clamp</a></li><li><a href=/css/functions/color/>color</a></li><li><a href=/css/functions/conic-gradient/>conic-gradient</a></li><li><a href=/css/functions/cos/>cos</a></li><li><a href=/css/functions/counter/>counter</a></li><li><a href=/css/functions/counters/>counters</a></li><li><a href=/css/functions/hsl/>hsl</a></li><li><a href=/css/functions/hsla/>hsla</a></li><li><a href=/css/functions/hwb/>hwb</a></li><li><a href=/css/functions/if/>if</a></li><li><a href=/css/functions/lab/>lab</a></li><li><a href=/css/functions/lch/>lch</a></li><li><a href=/css/functions/linear-gradient/>linear-gradient</a></li><li><a href=/css/functions/matrix/>matrix</a></li><li><a href=/css/functions/matrix3d/>matrix3d</a></li><li><a href=/css/functions/max/>max</a></li><li><a href=/css/functions/min/>min</a></li><li><a href=/css/functions/mod/>mod</a></li><li><a href=/css/functions/oklab/>oklab</a></li><li><a href=/css/functions/oklch/>oklch</a></li><li><a href=/css/functions/param/>param</a></li><li><a href=/css/functions/perspective/>perspective</a></li><li><a href=/css/functions/radial-gradient/>radial-gradient</a></li><li><a href=/css/functions/rem/>rem</a></li><li><a href=/css/functions/repeating-conic-gradient/>repeating-conic-gradient</a></li><li><a href=/css/functions/repeating-linear-gradient/>repeating-linear-gradient</a></li><li><a href=/css/functions/repeating-radial-gradient/>repeating-radial-gradient</a></li><li><a href=/css/functions/rgb/>rgb</a></li><li><a href=/css/functions/rgba/>rgba</a></li><li><a href=/css/functions/rotate/>rotate</a></li><li><a href=/css/functions/rotate3d/>rotate3d</a></li><li><a href=/css/functions/rotatex/>rotateX</a></li><li><a href=/css/functions/rotatey/>rotateY</a></li><li><a href=/css/functions/rotatez/>rotateZ</a></li><li><a href=/css/functions/round/>round</a></li><li><a href=/css/functions/scale/>scale</a></li><li><a href=/css/functions/scale3d/>scale3d</a></li><li><a href=/css/functions/scalex/>scaleX</a></li><li><a href=/css/functions/scaley/>scaleY</a></li><li><a href=/css/functions/scalez/>scaleZ</a></li><li><a href=/css/functions/sin/>sin</a></li><li><a href=/css/functions/skew/>skew</a></li><li><a href=/css/functions/skewx/>skewX</a></li><li><a href=/css/functions/skewy/>skewY</a></li><li><a href=/css/functions/src/>src</a></li><li><a href=/css/functions/tan/>tan</a></li><li><a href=/css/functions/translate/>translate</a></li><li><a href=/css/functions/translate3d/>translate3d</a></li><li><a href=/css/functions/translatex/>translateX</a></li><li><a href=/css/functions/translatey/>translateY</a></li><li><a href=/css/functions/translatez/>translateZ</a></li><li><a href=/css/functions/url/>url</a></li><li><a href=/css/functions/var/>var</a></li></ul></div><h2>Properties</h2><div><ul><li><a href=/css/properties/accent-color/>accent-color</a></li><li><a href=/css/properties/align-content/>align-content</a></li><li><a href=/css/properties/align-items/>align-items</a></li><li><a href=/css/properties/align-self/>align-self</a></li><li><a href=/css/properties/all/>all</a></li><li><a href=/css/properties/animation/>animation</a></li><li><a href=/css/properties/animation-composition/>animation-composition</a></li><li><a href=/css/properties/animation-delay/>animation-delay</a></li><li><a href=/css/properties/animation-direction/>animation-direction</a></li><li><a href=/css/properties/animation-duration/>animation-duration</a></li><li><a href=/css/properties/animation-fill-mode/>animation-fill-mode</a></li><li><a href=/css/properties/animation-iteration-count/>animation-iteration-count</a></li><li><a href=/css/properties/animation-name/>animation-name</a></li><li><a href=/css/properties/animation-play-state/>animation-play-state</a></li><li><a href=/css/properties/animation-timeline/>animation-timeline</a></li><li><a href=/css/properties/animation-timing-function/>animation-timing-function</a></li><li><a href=/css/properties/appearance/>appearance</a></li><li><a href=/css/properties/aspect-ratio/>aspect-ratio</a></li><li><a href=/css/properties/backdrop-filter/>backdrop-filter</a></li><li><a href=/css/properties/backface-visibility/>backface-visibility</a></li><li><a href=/css/properties/background/>background</a></li><li><a href=/css/properties/background-attachment/>background-attachment</a></li><li><a href=/css/properties/background-blend-mode/>background-blend-mode</a></li><li><a href=/css/properties/background-clip/>background-clip</a></li><li><a href=/css/properties/background-color/>background-color</a></li><li><a href=/css/properties/background-image/>background-image</a></li><li><a href=/css/properties/background-origin/>background-origin</a></li><li><a href=/css/properties/background-position/>background-position</a></li><li><a href=/css/properties/background-position-x/>background-position-x</a></li><li><a href=/css/properties/background-position-y/>background-position-y</a></li><li><a href=/css/properties/background-repeat/>background-repeat</a></li><li><a href=/css/properties/background-size/>background-size</a></li><li><a href=/css/properties/block-ellipsis/>block-ellipsis</a></li><li><a href=/css/properties/block-size/>block-size</a></li><li><a href=/css/properties/border/>border</a></li><li><a href=/css/properties/border-block/>border-block</a></li><li><a href=/css/properties/border-block-color/>border-block-color</a></li><li><a href=/css/properties/border-block-end/>border-block-end</a></li><li><a href=/css/properties/border-block-end-color/>border-block-end-color</a></li><li><a href=/css/properties/border-block-end-style/>border-block-end-style</a></li><li><a href=/css/properties/border-block-end-width/>border-block-end-width</a></li><li><a href=/css/properties/border-block-start/>border-block-start</a></li><li><a href=/css/properties/border-block-start-color/>border-block-start-color</a></li><li><a href=/css/properties/border-block-start-style/>border-block-start-style</a></li><li><a href=/css/properties/border-block-start-width/>border-block-start-width</a></li><li><a href=/css/properties/border-block-style/>border-block-style</a></li><li><a href=/css/properties/border-block-width/>border-block-width</a></li><li><a href=/css/properties/border-bottom/>border-bottom</a></li><li><a href=/css/properties/border-bottom-color/>border-bottom-color</a></li><li><a href=/css/properties/border-bottom-left-radius/>border-bottom-left-radius</a></li><li><a href=/css/properties/border-bottom-right-radius/>border-bottom-right-radius</a></li><li><a href=/css/properties/border-bottom-style/>border-bottom-style</a></li><li><a href=/css/properties/border-bottom-width/>border-bottom-width</a></li><li><a href=/css/properties/border-collapse/>border-collapse</a></li><li><a href=/css/properties/border-color/>border-color</a></li><li><a href=/css/properties/border-end-end-radiu
10000
s/>border-end-end-radius</a></li><li><a href=/css/properties/border-end-start-radius/>border-end-start-radius</a></li><li><a href=/css/properties/border-image/>border-image</a></li><li><a href=/css/properties/border-image-outset/>border-image-outset</a></li><li><a href=/css/properties/border-image-repeat/>border-image-repeat</a></li><li><a href=/css/properties/border-image-slice/>border-image-slice</a></li><li><a href=/css/properties/border-image-source/>border-image-source</a></li><li><a href=/css/properties/border-image-width/>border-image-width</a></li><li><a href=/css/properties/border-inline/>border-inline</a></li><li><a href=/css/properties/border-inline-color/>border-inline-color</a></li><li><a href=/css/properties/border-inline-end/>border-inline-end</a></li><li><a href=/css/properties/border-inline-end-color/>border-inline-end-color</a></li><li><a href=/css/properties/border-inline-end-style/>border-inline-end-style</a></li><li><a href=/css/properties/border-inline-end-width/>border-inline-end-width</a></li><li><a href=/css/properties/border-inline-start/>border-inline-start</a></li><li><a href=/css/properties/border-inline-start-color/>border-inline-start-color</a></li><li><a href=/css/properties/border-inline-start-style/>border-inline-start-style</a></li><li><a href=/css/properties/border-inline-start-width/>border-inline-start-width</a></li><li><a href=/css/properties/border-inline-style/>border-inline-style</a></li><li><a href=/css/properties/border-inline-width/>border-inline-width</a></li><li><a href=/css/properties/border-left/>border-left</a></li><li><a href=/css/properties/border-left-color/>border-left-color</a></li><li><a href=/css/properties/border-left-style/>border-left-style</a></li><li><a href=/css/properties/border-left-width/>border-left-width</a></li><li><a href=/css/properties/border-radius/>border-radius</a></li><li><a href=/css/properties/border-right/>border-right</a></li><li><a href=/css/properties/border-right-color/>border-right-color</a></li><li><a href=/css/properties/border-right-style/>border-right-style</a></li><li><a href=/css/properties/border-right-width/>border-right-width</a></li><li><a href=/css/properties/border-spacing/>border-spacing</a></li><li><a href=/css/properties/border-start-end-radius/>border-start-end-radius</a></li><li><a href=/css/properties/border-start-start-radius/>border-start-start-radius</a></li><li><a href=/css/properties/border-style/>border-style</a></li><li><a href=/css/properties/border-top/>border-top</a></li><li><a href=/css/properties/border-top-color/>border-top-color</a></li><li><a href=/css/properties/border-top-left-radius/>border-top-left-radius</a></li><li><a href=/css/properties/border-top-right-radius/>border-top-right-radius</a></li><li><a href=/css/properties/border-top-style/>border-top-style</a></li><li><a href=/css/properties/border-top-width/>border-top-width</a></li><li><a href=/css/properties/border-width/>border-width</a></li><li><a href=/css/properties/bottom/>bottom</a></li><li><a href=/css/properties/box-decoration-break/>box-decoration-break</a></li><li><a href=/css/properties/box-shadow/>box-shadow</a></li><li><a href=/css/properties/box-sizing/>box-sizing</a></li><li><a href=/css/properties/caption-side/>caption-side</a></li><li><a href=/css/properties/caret/>caret</a></li><li><a href=/css/properties/caret-animation/>caret-animation</a></li><li><a href=/css/properties/caret-color/>caret-color</a></li><li><a href=/css/properties/caret-shape/>caret-shape</a></li><li><a href=/css/properties/clear/>clear</a></li><li><a href=/css/properties/clip/>clip</a></li><li><a href=/css/properties/clip-path/>clip-path</a></li><li><a href=/css/properties/color/>color</a></li><li><a href=/css/properties/color-scheme/>color-scheme</a></li><li><a href=/css/properties/column-count/>column-count</a></li><li><a href=/css/properties/column-fill/>column-fill</a></li><li><a href=/css/properties/column-gap/>column-gap</a></li><li><a href=/css/properties/column-rule/>column-rule</a></li><li><a href=/css/properties/column-rule-color/>column-rule-color</a></li><li><a href=/css/properties/column-rule-style/>column-rule-style</a></li><li><a href=/css/properties/column-rule-width/>column-rule-width</a></li><li><a href=/css/properties/column-span/>column-span</a></li><li><a href=/css/properties/column-width/>column-width</a></li><li><a href=/css/properties/columns/>columns</a></li><li><a href=/css/properties/contain/>contain</a></li><li><a href=/css/properties/contain-intrinsic-block-size/>contain-intrinsic-block-size</a></li><li><a href=/css/properties/contain-intrinsic-height/>contain-intrinsic-height</a></li><li><a href=/css/properties/contain-intrinsic-inline-size/>contain-intrinsic-inline-size</a></li><li><a href=/css/properties/contain-intrinsic-size/>contain-intrinsic-size</a></li><li><a href=/css/properties/contain-intrinsic-width/>contain-intrinsic-width</a></li><li><a href=/css/properties/container/>container</a></li><li><a href=/css/properties/container-name/>container-name</a></li><li><a href=/css/properties/container-type/>container-type</a></li><li><a href=/css/properties/content/>content</a></li><li><a href=/css/properties/content-visibility/>content-visibility</a></li><li><a href=/css/properties/continue/>continue</a></li><li><a href=/css/properties/counter-increment/>counter-increment</a></li><li><a href=/css/properties/counter-reset/>counter-reset</a></li><li><a href=/css/properties/counter-set/>counter-set</a></li><li><a href=/css/properties/cursor/>cursor</a></li><li><a href=/css/properties/direction/>direction</a></li><li><a href=/css/properties/display/>display</a></li><li><a href=/css/properties/empty-cells/>empty-cells</a></li><li><a href=/css/properties/filter/>filter</a></li><li><a href=/css/properties/flex/>flex</a></li><li><a href=/css/properties/flex-basis/>flex-basis</a></li><li><a href=/css/properties/flex-direction/>flex-direction</a></li><li><a href=/css/properties/flex-flow/>flex-flow</a></li><li><a href=/css/properties/flex-grow/>flex-grow</a></li><li><a href=/css/properties/flex-shrink/>flex-shrink</a></li><li><a href=/css/properties/flex-wrap/>flex-wrap</a></li><li><a href=/css/properties/float/>float</a></li><li><a href=/css/properties/font/>font</a></li><li><a href=/css/properties/font-family/>font-family</a></li><li><a href=/css/properties/font-feature-settings/>font-feature-settings</a></li><li><a href=/css/properties/font-kerning/>font-kerning</a></li><li><a href=/css/properties/font-optical-sizing/>font-optical-sizing</a></li><li><a href=/css/properties/font-size/>font-size</a></li><li><a href=/css/properties/font-size-adjust/>font-size-adjust</a></li><li><a href=/css/properties/font-stretch/>font-stretch</a></li><li><a href=/css/properties/font-style/>font-style</a></li><li><a href=/css/properties/font-variant/>font-variant</a></li><li><a href=/css/properties/font-variant-caps/>font-variant-caps</a></li><li><a href=/css/properties/font-variant-ligatures/>font-variant-ligatures</a></li><li><a href=/css/properties/font-variant-numeric/>font-variant-numeric</a></li><li><a href=/css/properties/font-variant-position/>font-variant-position</a></li><li><a href=/css/properties/font-variation-settings/>font-variation-settings</a></li><li><a href=/css/properties/font-weight/>font-weight</a></li><li><a href=/css/properties/forced-color-adjust/>forced-color-adjust</a></li><li><a href=/css/properties/gap/>gap</a></li><li><a href=/css/properties/grid/>grid</a></li><li><a href=/css/properties/grid-area/>grid-area</a></li><li><a href=/css/properties/grid-auto-columns/>grid-auto-columns</a></li><li><a href=/css/properties/grid-auto-flow/>grid-auto-flow</a></li><li><a href=/css/properties/grid-auto-rows/>grid-auto-rows</a></li><li><a href=/css/properties/grid-column/>grid-column</a></li><li><a href=/css/properties/grid-column-end/>grid-column-end</a></li><li><a href=/css/properties/grid-column-start/>grid-column-start</a></li><li><a href=/css/properties/grid-row/>grid-row</a></li><li><a href=/css/properties/grid-row-end/>grid-row-end</a></li><li><a href=/css/properties/grid-row-start/>grid-row-start</a></li><li><a href=/css/properties/grid-template/>grid-template</a></li><li><a href=/css/properties/grid-template-areas/>grid-template-areas</a></li><li><a href=/css/properties/grid-template-columns/>grid-template-columns</a></li><li><a href=/css/properties/grid-template-rows/>grid-template-rows</a></li><li><a href=/css/properties/hanging-punctuation/>hanging-punctuation</a></li><li><a href=/css/properties/height/>height</a></li><li><a href=/css/properties/hyphens/>hyphens</a></li><li><a href=/css/properties/image-rendering/>image-rendering</a></li><li><a href=/css/properties/initial-letter/>initial-letter</a></li><li><a href=/css/properties/initial-letter-align/>initial-letter-align</a></li><li><a href=/css/properties/inline-size/>inline-size</a></li><li><a href=/css/properties/inset/>inset</a></li><li><a href=/css/properties/inset-block/>inset-block</a></li><li><a href=/css/properties/inset-block-end/>inset-block-end</a></li><li><a href=/css/properties/inset-block-start/>inset-block-start</a></li><li><a href=/css/properties/inset-inline/>inset-inline</a></li><li><a href=/css/properties/inset-inline-end/>inset-inline-end</a></li><li><a href=/css/properties/inset-inline-start/>inset-inline-start</a></li><li><a href=/css/properties/isolation/>isolation</a></li><li><a href=/css/properties/justify-content/>justify-content</a></li><li><a href=/css/properties/justify-items/>justify-items</a></li><li><a href=/css/properties/justify-self/>justify-self</a></li><li><a href=/css/properties/left/>left</a></li><li><a href=/css/properties/letter-spacing/>letter-spacing</a></li><li><a href=/css/properties/line-break/>line-break</a></li><li><a href=/css/properties/line-clamp/>line-clamp</a></li><li><a href=/css/properties/line-height/>line-height</a></li><li><a href=/css/properties/list-style/>list-style</a></li><li><a href=/css/properties/list-style-image/>list-style-image</a></li><li><a href=/css/properties/list-style-position/>list-style-position</a></li><li><a href=/css/properties/list-style-type/>list-style-type</a></li><li><a href=/css/properties/margin/>margin</a></li><li><a href=/css/properties/margin-block/>margin-block</a></li><li><a href=/css/properties/margin-block-end/>margin-block-end</a></li><li><a href=/css/properties/margin-block-start/>margin-block-start</a></li><li><a href=/css/properties/margin-bottom/>margin-bottom</a></li><li><a href=/css/properties/margin-inline/>margin-inline</a></li><li><a href=/css/properties/margin-inline-end/>margin-inline-end</a></li><li><a href=/css/properties/margin-inline-start/>margin-inline-start</a></li><li><a href=/css/properties/margin-left/>margin-left</a></li><li><a href=/css/properties/margin-right/>margin-right</a></li><li><a href=/css/properties/margin-top/>margin-top</a></li><li><a href=/css/properties/mask/>mask</a></li><li><a href=/css/properties/mask-border/>mask-border</a></li><li><a href=/css/properties/mask-border-mode/>mask-border-mode</a></li><li><a href=/css/properties/mask-border-outset/>mask-border-outset</a></li><li><a href=/css/properties/mask-border-repeat/>mask-border-repeat</a></li><li><a href=/css/properties/mask-border-slice/>mask-border-slice</a></li><li><a href=/css/properties/mask-border-source/>mask-border-source</a></li><li><a href=/css/properties/mask-border-width/>mask-border-width</a></li><li><a href=/css/properties/mask-clip/>mask-clip</a></li><li><a href=/css/properties/mask-composite/>mask-composite</a></li><li><a href=/css/properties/mask-image/>mask-image</a></li><li><a href=/css/properties/mask-mode/>mask-mode</a></li><li><a href=/css/properties/mask-origin/>mask-origin</a></li><li><a href=/css/properties/mask-position/>mask-position</a></li><li><a href=/css/properties/mask-repeat/>mask-repeat</a></li><li><a href=/css/properties/mask-size/>mask-size</a></li><li><a href=/css/properties/mask-type/>mask-type</a></li><li><a href=/css/properties/math-depth/>math-depth</a></li><li><a href=/css/properties/math-shift/>math-shift</a></li><li><a href=/css/properties/math-style/>math-style</a></li><li><a href=/css/properties/max-block-size/>max-block-size</a></li><li><a href=/css/properties/max-height/>max-height</a></li><li><a href=/css/properties/max-inline-size/>max-inline-size</a></li><li><a href=/css/properties/max-lines/>max-lines</a></li><li><a href=/css/properties/max-width/>max-width</a></li><li><a href=/css/properties/min-block-size/>min-block-size</a></li><li><a href=/css/properties/min-height/>min-height</a></li><li><a href=/css/properties/min-inline-size/>min-inline-size</a></li><li><a href=/css/properties/min-width/>min-width</a></li><li><a href=/css/properties/mix-blend-mode/>mix-blend-mode</a></li><li><a href=/css/properties/nav-down/>nav-down</a></li><li><a href=/css/properties/nav-left/>nav-left</a></li><li><a href=/css/properties/nav-right/>nav-right</a></li><li><a href=/css/properties/nav-up/>nav-up</a></li><li><a href=/css/properties/object-fit/>object-fit</a></li><li><a href=/css/properties/object-position/>object-position</a></li><li><a href=/css/properties/opacity/>opacity</a></li><li><a href=/css/properties/orphans/>orphans</a></li><li><a href=/css/properties/outline/>outline</a></li><li><a href=/css/properties/outline-color/>outline-color</a></li><li><a href=/css/properties/outline-offset/>outline-offset</a></li><li><a href=/css/properties/outline-style/>outline-style</a></li><li><a href=/css/properties/outline-width/>outline-width</a></li><li><a href=/css/properties/overflow/>overflow</a></li><li><a href=/css/properties/overflow-block/>overflow-block</a></li><li><a href=/css/properties/overflow-clip-margin/>overflow-clip-margin</a></li><li><a href=/css/properties/overflow-inline/>overflow-inline</a></li><li><a href=/css/properties/overflow-wrap/>overflow-wrap</a></li><li><a href=/css/properties/overflow-x/>overflow-x</a></li><li><a href=/css/properties/overflow-y/>overflow-y</a></li><li><a href=/css/properties/padding/>padding</a></li><li><a href=/css/properties/padding-block/>padding-block</a></li><li><a href=/css/properties/padding-block-end/>padding-block-end</a></li><li><a href=/css/properties/padding-block-start/>padding-block-start</a></li><li><a href=/css/properties/padding-bottom/>padding-bottom</a></li><li><a href=/css/properties/padding-inline/>padding-inline</a></li><li><a href=/css/properties/padding-inline-end/>padding-inline-end</a></li><li><a href=/css/properties/padding-inline-start/>padding-inline-start</a></li><li><a href=/css/properties/padding-left/>padding-left</a></li><li><a href=/css/properties/padding-right/>padding-right</a></li><li><a href=/css/properties/padding-top/>padding-top</a></li><li><a href=/css/properties/paint-order/>paint-order</a></li><li><a href=/css/properties/perspective/>perspective</a></li><li><a href=/css/properties/perspective-origin/>perspective-origin</a></li><li><a href=/css/properties/place-content/>place-content</a></li><li><a href=/css/properties/place-items/>place-items</a></li><li><a href=/css/properties/place-self/>place-self</a></li><li><a href=/css/properties/pointer-events/>pointer-events</a></li><li><a href=/css/properties/position/>position</a></li><li><a href=/css/properties/print-color-adjust/>print-color-adjust</a></li><li><a href=/css/properties/quotes/>quotes</a></li><li><a href=/css/properties/resize/>resize</a></li><li><a href=/css/properties/right/>right</a></li><li><a href=/css/properties/rotate/>rotate</a></li><li><a href=/css/properties/row-gap/>row-gap</a></li><li><a href=/css/properties/scale/>scale</a></li><li><a href=/css/properties/scroll-behavior/>scroll-behavior</a></li><li><a href=/css/properties/scroll-margin/>scroll-margin</a></li><li><a href=/css/properties/scroll-margin-block/>scroll-margin-block</a></li><li><a href=/css/properties/scroll-margin-block-end/>scroll-margin-block-end</a></li><li><a href=/css/properties/scroll-margin-block-start/>scroll-margin-block-start</a></li><li><a href=/css/properties/scroll-margin-bottom/>scroll-margin-bottom</a></li><li><a href=/css/properties/scroll-margin-inline/>scroll-margin-inline</a></li><li><a href=/css/properties/scroll-margin-inline-end/>scroll-margin-inline-end</a></li><li><a href=/css/properties/scroll-margin-inline-start/>scroll-margin-inline-start</a></li><li><a href=/css/properties/scroll-margin-left/>scroll-margin-left</a></li><li><a href=/css/properties/scroll-margin-right/>scroll-margin-right</a></li><li><a href=/css/properties/scroll-margin-top/>scroll-margin-top</a></li><li><a href=/css/properties/scroll-padding/>scroll-padding</a></li><li><a href=/css/properties/scroll-padding-block/>scroll-padding-block</a></li><li><a href=/css/properties/scroll-padding-block-end/>scroll-padding-block-end</a></li><li><a href=/css/properties/scroll-padding-block-start/>scroll-padding-block-start</a></li><li><a href=/css/properties/scroll-padding-bottom/>scroll-padding-bottom</a></li><li><a href=/css/properties/scroll-padding-inline/>scroll-padding-inline</a></li><li><a href=/css/properties/scroll-padding-inline-end/>scroll-padding-inline-end</a></li><li><a href=/css/properties/scroll-padding-inline-start/>scroll-padding-inline-start</a></li><li><a href=/css/properties/scroll-padding-left/>scroll-padding-left</a></li><li><a href=/css/properties/scroll-padding-right/>scroll-padding-right</a></li><li><a href=/css/properties/scroll-padding-top/>scroll-padding-top</a></li><li><a href=/css/properties/scroll-snap-align/>scroll-snap-align</a></li><li><a href=/css/properties/scroll-snap-stop/>scroll-snap-stop</a></li><li><a href=/css/properties/scroll-snap-type/>scroll-snap-type</a></li><li><a href=/css/properties/scroll-timeline/>scroll-timeline</a></li><li><a href=/css/properties/scroll-timeline-axis/>scroll-timeline-axis</a></li><li><a href=/css/properties/scroll-timeline-name/>scroll-timeline-name</a></li><li><a href=/css/properties/scrollbar-color/>scrollbar-color</a></li><li><a href=/css/properties/scrollbar-gutter/>scrollbar-gutter</a></li><li><a href=/css/properties/scrollbar-width/>scrollbar-width</a></li><li><a href=/css/properties/shape-image-threshold/>shape-image-threshold</a></li><li><a href=/css/properties/shape-margin/>shape-margin</a></li><li><a href=/css/properties/shape-outside/>shape-outside</a></li><li><a href=/css/properties/shape-rendering/>shape-rendering</a></li><li><a href=/css/properties/tab-size/>tab-size</a></li><li><a href=/css/properties/table-layout/>table-layout</a></li><li><a href=/css/properties/text-align/>text-align</a></li><li><a href=/css/properties/text-align-all/>text-align-all</a></li><li><a href=/css/properties/text-align-last/>text-align-last</a></li><li><a href=/css/properties/text-combine-upright/>text-combine-upright</a></li><li><a href=/css/properties/text-decoration/>text-decoration</a></li><li><a href=/css/properties/text-decoration-color/>text-decoration-color</a></li><li><a href=/css/properties/text-decoration-line/>text-decoration-line</a></li><li><a href=/css/properties/text-decoration-skip-ink/>text-decoration-skip-ink</a></li><li><a href=/css/properties/text-decoration-style/>text-decoration-style</a></li><li><a href=/css/properties/text-decoration-thickness/>text-decoration-thickness</a></li><li><a href=/css/properties/text-decoration-trim/>text-decoration-trim</a></li><li><a href=/css/properties/text-emphasis/>text-emphasis</a></li><li><a href=/css/properties/text-emphasis-color/>text-emphasis-color</a></li><li><a href=/css/properties/text-emphasis-position/>text-emphasis-position</a></li><li><a href=/css/properties/text-emphasis-style/>text-emphasis-style</a></li><li><a href=/css/properties/text-indent/>text-indent</a></li><li><a href=/css/properties/text-justify/>text-justify</a></li><li><a href=/css/properties/text-orientation/>text-orientation</a></li><li><a href=/css/properties/text-overflow/>text-overflow</a></li><li><a href=/css/properties/text-rendering/>text-rendering</a></li><li><a href=/css/properties/text-shadow/>text-shadow</a></li><li><a href=/css/properties/text-transform/>text-transform</a></li><li><a href=/css/properties/text-underline-offset/>text-underline-offset</a></li><li><a href=/css/properties/text-underline-position/>text-underline-position</a></li><li><a href=/css/properties/top/>top</a></li><li><a href=/css/properties/transform/>transform</a></li><li><a href=/css/properties/transform-box/>transform-box</a></li><li><a href=/css/properties/transform-origin/>transform-origin</a></li><li><a href=/css/properties/transform-style/>transform-style</a></li><li><a href=/css/properties/transition/>transition</a></li><li><a href=/css/properties/transition-delay/>transition-delay</a></li><li><a href=/css/properties/transition-duration/>transition-duration</a></li><li><a href=/css/properties/transition-property/>transition-property</a></li><li><a href=/css/properties/transition-timing-function/>transition-timing-function</a></li><li><a href=/css/properties/translate/>translate</a></li><li><a href=/css/properties/unicode-bidi/>unicode-bidi</a></li><li><a href=/css/properties/vertical-align/>vertical-align</a></li><li><a href=/css/properties/visibility/>visibility</a></li><li><a href=/css/properties/white-space/>white-space</a></li><li><a href=/css/properties/widows/>widows</a></li><li><a href=/css/properties/width/>width</a></li><li><a href=/css/properties/word-break/>word-break</a></li><li><a href=/css/properties/word-spacing/>word-spacing</a></li><li><a href=/css/properties/word-wrap/>word-wrap</a></li><li><a href=/css/properties/writing-mode/>writing-mode</a></li><li><a href=/css/properties/z-index/>z-index</a></li><li><a href=/css/properties/zoom/>zoom</a></li></ul></div><h2>Pseudo-Classes</h2><div><ul><li><a href=/css/pseudo-classes/active/>active</a></li><li><a href=/css/pseudo-classes/any-link/>any-link</a></li><li><a href=/css/pseudo-classes/autofill/>autofill</a></li><li><a href=/css/pseudo-classes/blank/>blank</a></li><li><a href=/css/pseudo-classes/checked/>checked</a></li><li><a href=/css/pseudo-classes/default/>default</a></li><li><a href=/css/pseudo-classes/defined/>defined</a></li><li><a href=/css/pseudo-classes/dir/>dir</a></li><li><a href=/css/pseudo-classes/disabled/>disabled</a></li><li><a href=/css/pseudo-classes/empty/>empty</a></li><li><a href=/css/pseudo-classes/enabled/>enabled</a></li><li><a href=/css/pseudo-classes/first-child/>first-child</a></li><li><a href=/css/pseudo-classes/first-of-type/>first-of-type</a></li><li><a href=/css/pseudo-classes/focus/>focus</a></li><li><a href=/css/pseudo-classes/focus-visible/>focus-visible</a></li><li><a href=/css/pseudo-classes/focus-within/>focus-within</a></li><li><a href=/css/pseudo-classes/fullscreen/>fullscreen</a></li><li><a href=/css/pseudo-classes/has/>has</a></li><li><a href=/css/pseudo-classes/hover/>hover</a></li><li><a href=/css/pseudo-classes/in-range/>in-range</a></li><li><a href=/css/pseudo-classes/indeterminate/>indeterminate</a></li><li><a href=/css/pseudo-classes/invalid/>invalid</a></li><li><a href=/css/pseudo-classes/is/>is</a></li><li><a href=/css/pseudo-classes/lang/>lang</a></li><li><a href=/css/pseudo-classes/last-child/>last-child</a></li><li><a href=/css/pseudo-classes/last-of-type/>last-of-type</a></li><li><a href=/css/pseudo-classes/link/>link</a></li><li><a href=/css/pseudo-classes/local-link/>local-link</a></li><li><a href=/css/pseudo-classes/modal/>modal</a></li><li><a href=/css/pseudo-classes/not/>not</a></li><li><a href=/css/pseudo-classes/nth-child/>nth-child</a></li><li><a href=/css/pseudo-classes/nth-col/>nth-col</a></li><li><a href=/css/pseudo-classes/nth-last-child/>nth-last-child</a></li><li><a href=/css/pseudo-classes/nth-last-col/>nth-last-col</a></li><li><a href=/css/pseudo-classes/nth-last-of-type/>nth-last-of-type</a></li><li><a href=/css/pseudo-classes/nth-of-type/>nth-of-type</a></li><li><a href=/css/pseudo-classes/only-child/>only-child</a></li><li><a href=/css/pseudo-classes/only-of-type/>only-of-type</a></li><li><a href=/css/pseudo-classes/optional/>optional</a></li><li><a href=/css/pseudo-classes/out-of-range/>out-of-range</a></li><li><a href=/css/pseudo-classes/picture-in-picture/>picture-in-picture</a></li><li><a href=/css/pseudo-classes/placeholder-shown/>placeholder-shown</a></li><li><a href=/css/pseudo-classes/popover-open/>popover-open</a></li><li><a href=/css/pseudo-classes/read-only/>read-only</a></li><li><a href=/css/pseudo-classes/read-write/>read-write</a></li><li><a href=/css/pseudo-classes/required/>required</a></li><li><a href=/css/pseudo-classes/root/>root</a></li><li><a href=/css/pseudo-classes/scope/>scope</a></li><li><a href=/css/pseudo-classes/target/>target</a></li><li><a href=/css/pseudo-classes/target-within/>target-within</a></li><li><a href=/css/pseudo-classes/valid/>valid</a></li><li><a href=/css/pseudo-classes/visited/>visited</a></li><li><a href=/css/pseudo-classes/where/>where</a></li></ul></div><h2>Pseudo-Elements</h2><div><ul><li><a href=/css/pseudo-elements/after/>after</a></li><li><a href=/css/pseudo-elements/backdrop/>backdrop</a></li><li><a href=/css/pseudo-elements/before/>before</a></li><li><a href=/css/pseudo-elements/details-content/>details-content</a></li><li><a href=/css/pseudo-elements/file-selector-button/>file-selector-button</a></li><li><a href=/css/pseudo-elements/first-letter/>first-letter</a></li><li><a href=/css/pseudo-elements/first-line/>first-line</a></li><li><a href=/css/pseudo-elements/highlight/>highlight</a></li><li><a href=/css/pseudo-elements/marker/>marker</a></li><li><a href=/css/pseudo-elements/part/>part</a></li><li><a href=/css/pseudo-elements/placeholder/>placeholder</a></li><li><a href=/css/pseudo-elements/selection/>selection</a></li></ul></div><h2>Units</h2><div><ul><li><a href=/css/units/cap/>cap</a></li><li><a href=/css/units/ch/>ch</a></li><li><a href=/css/units/cm/>cm</a></li><li><a href=/css/units/cqb/>cqb</a></li><li><a href=/css/units/cqh/>cqh</a></li><li><a href=/css/units/cqi/>cqi</a></li><li><a href=/css/units/cqmax/>cqmax</a></li><li><a href=/css/units/cqmin/>cqmin</a></li><li><a href=/css/units/cqw/>cqw</a></li><li><a href=/css/units/deg/>deg</a></li><li><a href=/css/units/dpcm/>dpcm</a></li><li><a href=/css/units/dpi/>dpi</a></li><li><a href=/css/units/dppx/>dppx</a></li><li><a href=/css/units/dvb/>dvb</a></li><li><a href=/css/units/dvh/>dvh</a></li><li><a href=/css/units/dvi/>dvi</a></li><li><a href=/css/units/dvmax/>dvmax</a></li><li><a href=/css/units/dvmin/>dvmin</a></li><li><a href=/css/units/dvw/>dvw</a></li><li><a href=/css/units/em/>em</a></li><li><a href=/css/units/ex/>ex</a></li><li><a href=/css/units/grad/>grad</a></li><li><a href=/css/units/ic/>ic</a></li><li><a href=/css/units/in/>in</a></li><li><a href=/css/units/lvb/>lvb</a></li><li><a href=/css/units/lvh/>lvh</a></li><li><a href=/css/units/lvi/>lvi</a></li><li><a href=/css/units/lvmax/>lvmax</a></li><li><a href=/css/units/lvmin/>lvmin</a></li><li><a href=/css/units/lvw/>lvw</a></li><li><a href=/css/units/mm/>mm</a></li><li><a href=/css/units/ms/>ms</a></li><li><a href=/css/units/pc/>pc</a></li><li><a href=/css/units/pt/>pt</a></li><li><a href=/css/units/px/>px</a></li><li><a href=/css/units/q/>Q</a></li><li><a href=/css/units/rad/>rad</a></li><li><a href=/css/units/rem/>rem</a></li><li><a href=/css/units/s/>s</a></li><li><a href=/css/units/svb/>svb</a></li><li><a href=/css/units/svh/>svh</a></li><li><a href=/css/units/svi/>svi</a></li><li><a href=/css/units/svmax/>svmax</a></li><li><a href=/css/units/svmin/>svmin</a></li><li><a href=/css/units/svw/>svw</a></li><li><a href=/css/units/turn/>turn</a></li><li><a href=/css/units/vb/>vb</a></li><li><a href=/css/units/vh/>vh</a></li><li><a href=/css/units/vi/>vi</a></li><li><a href=/css/units/vmax/>vmax</a></li><li><a href=/css/units/vmin/>vmin</a></li><li><a href=/css/units/vw/>vw</a></li></ul></div></div><div class=h1><a id=switch-js>JS</a></div><div id=list-js><h2>Overview</h2><div><ul><li><a href=/js/>Overview</a></li></ul></div><h2>AbortController</h2><div><ul><li><a href=/js/abortcontroller/abort/>abort</a></li><li><a href=/js/abortcontroller/abortcontroller/>AbortController</a></li><li><a href=/js/abortcontroller/signal/>signal</a></li></ul></div><h2>AbstractRange</h2><div><ul><li><a href=/js/abstractrange/collapsed/>collapsed</a></li><li><a href=/js/abstractrange/endcontainer/>endContainer</a></li><li><a href=/js/abstractrange/endoffset/>endOffset</a></li><li><a href=/js/abstractrange/startcontainer/>startContainer</a></li><li><a href=/js/abstractrange/startoffset/>startOffset</a></li></ul></div><h2>AbortSignal</h2><div><ul><li><a href=/js/abortsignal/abort/>abort</a></li><li><a href=/js/abortsignal/aborted/>aborted</a></li><li><a href=/js/abortsignal/reason/>reason</a></li><li><a href=/js/abortsignal/throwifaborted/>throwIfAborted</a></li><li><a href=/js/abortsignal/timeout/>timeout</a></li></ul></div><h2>ChildNode</h2><div><ul><li><a href=/js/childnode/after/>after</a></li><li><a href=/js/childnode/before/>before</a></li><li><a href=/js/childnode/remove/>remove</a></li><li><a href=/js/childnode/replacewith/>replaceWith</a></li></ul></div><h2>Comment</h2><div><ul><li><a href=/js/comment/comment/>Comment</a></li></ul></div><h2>console</h2><div><ul><li><a href=/js/console/assert/>assert</a></li><li><a href=/js/console/clear/>clear</a></li><li><a href=/js/console/count/>count</a></li><li><a href=/js/console/countreset/>countReset</a></li><li><a href=/js/console/debug/>debug</a></li><li><a href=/js/console/dir/>dir</a></li><li><a href=/js/console/dirxml/>dirxml</a></li><li><a href=/js/console/error/>error</a></li><li><a href=/js/console/group/>group</a></li><li><a href=/js/console/groupcollapsed/>groupCollapsed</a></li><li><a href=/js/console/groupend/>groupEnd</a></li><li><a href=/js/console/info/>info</a></li><li><a href=/js/console/log/>log</a></li><li><a href=/js/console/table/>table</a></li><li><a href=/js/console/time/>time</a></li><li><a href=/js/console/timeend/>timeEnd</a></li><li><a href=/js/console/timelog/>timeLog</a></li><li><a href=/js/console/trace/>trace</a></li><li><a href=/js/console/warn/>warn</a></li></ul></div><h2>CustomEvent</h2><div><ul><li><a href=/js/customevent/customevent/>CustomEvent</a></li><li><a href=/js/customevent/detail/>detail</a></li></ul></div><h2>Declarations</h2><div><ul><li><a href=/js/declarations/const/>const</a></li><li><a href=/js/declarations/let/>let</a></li><li><a href=/js/declarations/var/>var</a></li></ul></div><h2>Document</h2><div><ul><li><a href=/js/document/adoptnode/>adoptNode</a></li><li><a href=/js/document/body/>body</a></li><li><a href=/js/document/characterset/>characterSet</a></li><li><a href=/js/document/close/>close</a></li><li><a href=/js/document/compatmode/>compatMode</a></li><li><a href=/js/document/contenttype/>contentType</a></li><li><a href=/js/document/cookie/>cookie</a></li><li><a href=/js/document/createcdatasection/>createCDATASection</a></li><li><a href=/js/document/createcomment/>createComment</a></li><li><a href=/js/document/createdocumentfragment/>createDocumentFragment</a></li><li><a href=/js/document/createelement/>createElement</a></li><li><a href=/js/document/createelementns/>createElementNS</a></li><li><a href=/js/document/createprocessinginstruction/>createProcessingInstruction</a></li><li><a href=/js/document/createtextnode/>createTextNode</a></li><li><a href=/js/document/currentscript/>currentScript</a></li><li><a href=/js/document/defaultview/>defaultView</a></li><li><a href=/js/document/designmode/>designMode</a></li><li><a href=/js/document/dir/>dir</a></li><li><a href=/js/document/doctype/>doctype</a></li><li><a href=/js/document/document/>Document</a></li><li><a href=/js/document/documentelement/>documentElement</a></li><li><a href=/js/document/documenturi/>documentURI</a></li><li><a href=/js/document/domain/>domain</a></li><li><a href=/js/document/embeds/>embeds</a></li><li><a href=/js/document/exitpictureinpicture/>exitPictureInPicture</a></li><li><a href=/js/document/forms/>forms</a></li><li><a href=/js/document/getelementsbyclassname/>getElementsByClassName</a></li><li><a href=/js/document/getelementsbyname/>getElementsByName</a></li><li><a href=/js/document/getelementsbytagname/>getElementsByTagName</a></li><li><a href=/js/document/getelementsbytagnamens/>getElementsByTagNameNS</a></li><li><a href=/js/document/hasfocus/>hasFocus</a></li><li><a href=/js/document/head/>head</a></li><li><a href=/js/document/hidden/>hidden</a></li><li><a href=/js/document/images/>images</a></li><li><a href=/js/document/implementation/>implementation</a></li><li><a href=/js/document/importnode/>importNode</a></li><li><a href=/js/document/lastmodified/>lastModified</a></li><li><a href=/js/document/links/>links</a></li><li><a href=/js/document/location/>location</a></li><li><a href=/js/document/onreadystatechange/>onreadystatechange</a></li><li><a href=/js/document/onvisibilitychange/>onvisibilitychange</a></li><li><a href=/js/document/open/>open</a></li><li><a href=/js/document/parsehtmlunsafe/>parseHTMLUnsafe</a></li><li><a href=/js/document/pictureinpictureenabled/>pictureInPictureEnabled</a></li><li><a href=/js/document/plugins/>plugins</a></li><li><a href=/js/document/readystate/>readyState</a></li><li><a href=/js/document/referrer/>referrer</a></li><li><a href=/js/document/scripts/>scripts</a></li><li><a href=/js/document/title/>title</a></li><li><a href=/js/document/url/>URL</a></li><li><a href=/js/document/visibilitystate/>visibilityState</a></li><li><a href=/js/document/write/>write</a></li><li><a href=/js/document/writeln/>writeln</a></li></ul></div><h2>DocumentFragment</h2><div><ul><li><a href=/js/documentfragment/documentfragment/>DocumentFragment</a></li></ul></div><h2>DocumentOrShadowRoot</h2><div><ul><li><a href=/js/documentorshadowroot/activeelement/>activeElement</a></li><li><a href=/js/documentorshadowroot/pictureinpictureelement/>pictureInPictureElement</a></li></ul></div><h2>DOMImplementation</h2><div><ul><li><a href=/js/domimplementation/createdocument/>createDocument</a></li><li><a href=/js/domimplementation/createdocumenttype/>createDocumentType</a></li><li><a href=/js/domimplementation/createhtmldocument/>createHTMLDocument</a></li></ul></div><h2>DOMStringList</h2><div><ul><li><a href=/js/domstringlist/contains/>contains</a></li><li><a href=/js/domstringlist/item/>item</a></li><li><a href=/js/domstringlist/length/>length</a></li></ul></div><h2>DOMTokenList</h2><div><ul><li><a href=/js/domtokenlist/add/>add</a></li><li><a href=/js/domtokenlist/contains/>contains</a></li><li><a href=/js/domtokenlist/item/>item</a></li><li><a href=/js/domtokenlist/length/>length</a></li><li><a href=/js/domtokenlist/remove/>remove</a></li><li><a href=/js/domtokenlist/replace/>replace</a></li><li><a href=/js/domtokenlist/supports/>supports</a></li><li><a href=/js/domtokenlist/toggle/>toggle</a></li><li><a href=/js/domtokenlist/value/>value</a></li></ul></div><h2>Element</h2><div><ul><li><a href=/js/element/attachshadow/>attachShadow</a></li><li><a href=/js/element/classlist/>classList</a></li><li><a href=/js/element/classname/>className</a></li><li><a href=/js/element/closest/>closest</a></li><li><a href=/js/element/getattribute/>getAttribute</a></li><li><a href=/js/element/getattributenames/>getAttributeNames</a></li><li><a href=/js/element/getattributens/>getAttributeNS</a></li><li><a href=/js/element/hasattribute/>hasAttribute</a></li><li><a href=/js/element/hasattributens/>hasAttributeNS</a></li><li><a href=/js/element/hasattributes/>hasAttributes</a></li><li><a href=/js/element/id/>id</a></li><li><a href=/js/element/innerhtml/>innerHTML</a></li><li><a href=/js/element/insertadjacenthtml/>insertAdjacentHTML</a></li><li><a href=/js/element/localname/>localName</a></li><li><a href=/js/element/matches/>matches</a></li><li><a href=/js/element/namespaceuri/>namespaceURI</a></li><li><a href=/js/element/outerhtml/>outerHTML</a></li><li><a href=/js/element/prefix/>prefix</a></li><li><a href=/js/element/removeattribute/>removeAttribute</a></li><li><a href=/js/element/removeattributens/>removeAttributeNS</a></li><li><a href=/js/element/setattribute/>setAttribute</a></li><li><a href=/js/element/setattributens/>setAttributeNS</a></li><li><a href=/js/element/shadowroot/>shadowRoot</a></li><li><a href=/js/element/slot/>slot</a></li><li><a href=/js/element/tagname/>tagName</a></li><li><a href=/js/element/toggleattribute/>toggleAttribute</a></li></ul></div><h2>Event</h2><div><ul><li><a href=/js/event/bubbles/>bubbles</a></li><li><a href=/js/event/cancelable/>cancelable</a></li><li><a href=/js/event/composed/>composed</a></li><li><a href=/js/event/composedpath/>composedPath</a></li><li><a href=/js/event/currenttarget/>currentTarget</a></li><li><a href=/js/event/defaultprevented/>defaultPrevented</a></li><li><a href=/js/event/event/>Event</a></li><li><a href=/js/event/eventphase/>eventPhase</a></li><li><a href=/js/event/istrusted/>isTrusted</a></li><li><a href=/js/event/preventdefault/>preventDefault</a></li><li><a href=/js/event/stopimmediatepropagation/>stopImmediatePropagation</a></li><li><a href=/js/event/stoppropagation/>stopPropagation</a></li><li><a href=/js/event/target/>target</a></li><li><a href=/js/event/timestamp/>timeStamp</a></li><li><a href=/js/event/type/>type</a></li></ul></div><h2>EventTarget</h2><div><ul><li><a href=/js/eventtarget/addeventlistener/>addEventListener</a></li><li><a href=/js/eventtarget/dispatchevent/>dispatchEvent</a></li><li><a href=/js/eventtarget/eventtarget/>EventTarget</a></li><li><a href=/js/eventtarget/removeeventlistener/>removeEventListener</a></li></ul></div><h2>HTMLAllCollection</h2><div><ul><li><a href=/js/htmlallcollection/item/>item</a></li><li><a href=/js/htmlallcollection/length/>length</a></li><li><a href=/js/htmlallcollection/nameditem/>namedItem</a></li></ul></div><h2>HTMLBaseElement</h2><div><ul><li><a href=/js/htmlbaseelement/href/>href</a></li><li><a href=/js/htmlbaseelement/target/>target</a></li></ul></div><h2>HTMLCollection</h2><div><ul><li><a href=/js/htmlcollection/item/>item</a></li><li><a href=/js/htmlcollection/length/>length</a></li><li><a href=/js/htmlcollection/nameditem/>namedItem</a></li></ul></div><h2>HTMLDialogElement</h2><div><ul><li><a href=/js/htmldialogelement/close/>close</a></li><li><a href=/js/htmldialogelement/open/>open</a></li><li><a href=/js/htmldialogelement/returnvalue/>returnValue</a></li><li><a href=/js/htmldialogelement/show/>show</a></li><li><a href=/js/htmldialogelement/showmodal/>showModal</a></li></ul></div><h2>HTMLElement</h2><div><ul><li><a href=/js/htmlelement/accesskey/>accessKey</a></li><li><a href=/js/htmlelement/accesskeylabel/>accessKeyLabel</a></li><li><a href=/js/htmlelement/attachinternals/>attachInternals</a></li><li><a href=/js/htmlelement/autocapitalize/>autocapitalize</a></li><li><a href=/js/htmlelement/autocorrect/>autocorrect</a></li><li><a href=/js/htmlelement/click/>click</a></li><li><a href=/js/htmlelement/constructor/>constructor</a></li><li><a href=/js/htmlelement/dir/>dir</a></li><li><a href=/js/htmlelement/draggable/>draggable</a></li><li><a href=/js/htmlelement/hidden/>hidden</a></li><li><a href=/js/htmlelement/hidepopover/>hidePopover</a></li><li><a href=/js/htmlelement/inert/>inert</a></li><li><a href=/js/htmlelement/innertext/>innerText</a></li><li><a href=/js/htmlelement/lang/>lang</a></li><li><a href=/js/htmlelement/outertext/>outerText</a></li><li><a href=/js/htmlelement/popover/>popover</a></li><li><a href=/js/htmlelement/showpopover/>showPopover</a></li><li><a href=/js/htmlelement/spellcheck/>spellcheck</a></li><li><a href=/js/htmlelement/title/>title</a></li><li><a href=/js/htmlelement/togglepopover/>togglePopover</a></li><li><a href=/js/htmlelement/translate/>translate</a></li><li><a href=/js/htmlelement/writingsuggestions/>writingSuggestions</a></li></ul></div><h2>HTMLFormControlsCollection</h2><div><ul><li><a href=/js/htmlformcontrolscollection/item/>item</a></li><li><a href=/js/htmlformcontrolscollection/length/>length</a></li><li><a href=/js/htmlformcontrolscollection/nameditem/>namedItem</a></li></ul></div><h2>HTMLLinkElement</h2><div><ul><li><a href=/js/htmllinkelement/crossorigin/>crossOrigin</a></li><li><a href=/js/htmllinkelement/href/>href</a></li><li><a href=/js/htmllinkelement/rel/>rel</a></li></ul></div><h2>HTMLOptionsCollection</h2><div><ul><li><a href=/js/htmloptionscollection/add/>add</a></li><li><a href=/js/htmloptionscollection/item/>item</a></li><li><a href=/js/htmloptionscollection/length/>length</a></li><li><a href=/js/htmloptionscollection/nameditem/>namedItem</a></li><li><a href=/js/htmloptionscollection/remove/>remove</a></li><li><a href=/js/htmloptionscollection/selectedindex/>selectedIndex</a></li></ul></div><h2>HTMLOrSVGElement</h2><div><ul><li><a href=/js/htmlorsvgelement/autofocus/>autofocus</a></li><li><a href=/js/htmlorsvgelement/blur/>blur</a></li><li><a href=/js/htmlorsvgelement/dataset/>dataset</a></li><li><a href=/js/htmlorsvgelement/focus/>focus</a></li><li><a href=/js/htmlorsvgelement/nonce/>nonce</a></li><li><a href=/js/htmlorsvgelement/tabindex/>tabIndex</a></li></ul></div><h2>HTMLVideoElement</h2><div><ul><li><a href=/js/htmlvideoelement/autopictureinpicture/>autoPictureInPicture</a></li><li><a href=/js/htmlvideoelement/disablepictureinpicture/>disablePictureInPicture</a></li><li><a href=/js/htmlvideoelement/requestpictureinpicture/>requestPictureInPicture</a></li></ul></div><h2>Iterations</h2><div><ul><li><a href=/js/iterations/do-while/>do-while</a></li><li><a href=/js/iterations/for/>for</a></li><li><a href=/js/iterations/for-await-of/>for-await-of</a></li><li><a href=/js/iterations/for-in/>for-in</a></li><li><a href=/js/iterations/for-of/>for-of</a></li><li><a href=/js/iterations/while/>while</a></li></ul></div><h2>Location</h2><div><ul><li><a href=/js/location/ancestororigins/>ancestorOrigins</a></li></ul></div><h2>MutationObserver</h2><div><ul><li><a href=/js/mutationobserver/disconnect/>disconnect</a></li><li><a href=/js/mutationobserver/mutationobserver/>MutationObserver</a></li><li><a href=/js/mutationobserver/observe/>observe</a></li><li><a href=/js/mutationobserver/takerecords/>takeRecords</a></li></ul></div><h2>MutationRecord</h2><div><ul><li><a href=/js/mutationrecord/addednodes/>addedNodes</a></li><li><a href=/js/mutationrecord/attributename/>attributeName</a></li><li><a href=/js/mutationrecord/attributenamespace/>attributeNamespace</a></li><li><a href=/js/mutationrecord/nextsibling/>nextSibling</a></li><li><a href=/js/mutationrecord/oldvalue/>oldValue</a></li><li><a href=/js/mutationrecord/previoussibling/>previousSibling</a></li><li><a href=/js/mutationrecord/removednodes/>removedNodes</a></li><li><a href=/js/mutationrecord/target/>target</a></li><li><a href=/js/mutationrecord/type/>type</a></li></ul></div><h2>Node</h2><div><ul><li><a href=/js/node/baseuri/>baseURI</a></li><li><a href=/js/node/childnodes/>childNodes</a></li><li><a href=/js/node/clonenode/>cloneNode</a></li><li><a href=/js/node/comparedocumentposition/>compareDocumentPosition</a></li><li><a href=/js/node/contains/>contains</a></li><li><a href=/js/node/firstchild/>firstChild</a></li><li><a href=/js/node/getrootnode/>getRootNode</a></li><li><a href=/js/node/haschildnodes/>hasChildNodes</a></li><li><a href=/js/node/isconnected/>isConnected</a></li><li><a href=/js/node/isequalnode/>isEqualNode</a></li><li><a href=/js/node/lastchild/>lastChild</a></li><li><a href=/js/node/nextsibling/>nextSibling</a></li><li><a href=/js/node/nodename/>nodeName</a></li><li><a href=/js/node/nodetype/>nodeType</a></li><li><a href=/js/node/normalize/>normalize</a></li><li><a href=/js/node/ownerdocument/>ownerDocument</a></li><li><a href=/js/node/parentelement/>parentElement</a></li><li><a href=/js/node/parentnode/>parentNode</a></li><li><a href=/js/node/previoussibling/>previousSibling</a></li></ul></div><h2>NodeList</h2><div><ul><li><a href=/js/nodelist/item/>item</a></li><li><a href=/js/nodelist/length/>length</a></li></ul></div><h2>NonDocumentTypeChildNode</h2><div><ul><li><a href=/js/nondocumenttypechildnode/nextelementsibling/>nextElementSibling</a></li><li><a href=/js/nondocumenttypechildnode/previouselementsibling/>previousElementSibling</a></li></ul></div><h2>NonElementParentNode</h2><div><ul><li><a href=/js/nonelementparentnode/getelementbyid/>getElementById</a></li></ul></div><h2>ParentNode</h2><div><ul><li><a href=/js/parentnode/append/>append</a></li><li><a href=/js/parentnode/children/>children</a></li><li><a href=/js/parentnode/firstelementchild/>firstElementChild</a></li><li><a href=/js/parentnode/lastelementchild/>lastElementChild</a></li><li><a href=/js/parentnode/prepend/>prepend</a></li><li><a href=/js/parentnode/queryselector/>querySelector</a></li><li><a href=/js/parentnode/queryselectorall/>querySelectorAll</a></li><li><a href=/js/parentnode/replacechildren/>replaceChildren</a></li></ul></div><h2>Prompts</h2><div><ul><li><a href=/js/prompts/alert/>alert</a></li><li><a href=/js/prompts/confirm/>confirm</a></li><li><a href=/js/prompts/prompt/>prompt</a></li></ul></div><h2>RadioNodeList</h2><div><ul><li><a href=/js/radionodelist/value/>value</a></li></ul></div><h2>Range</h2><div><ul><li><a href=/js/range/commonancestorcontainer/>commonAncestorContainer</a></li><li><a href=/js/range/comparepoint/>comparePoint</a></li><li><a href=/js/range/createcontextualfragment/>createContextualFragment</a></li><li><a href=/js/range/intersectsnode/>intersectsNode</a></li><li><a href=/js/range/range/>Range</a></li></ul></div><h2>Slottable</h2><div><ul><li><a href=/js/slottable/assignedslot/>assignedSlot</a></li></ul></div><h2>Statements</h2><div><ul><li><a href=/js/statements/if/>if</a></li><li><a href=/js/statements/switch/>switch</a></li><li><a href=/js/statements/try/>try</a></li></ul></div><h2>StaticRange</h2><div><ul><li><a href=/js/staticrange/staticrange/>StaticRange</a></li></ul></div><h2>Text</h2><div><ul><li><a href=/js/text/splittext/>splitText</a></li><li><a href=/js/text/text/>Text</a></li><li><a href=/js/text/wholetext/>wholeText</a></li></ul></div><h2>Window</h2><div><ul><li><a href=/js/window/location/>location</a></li></ul></div><h2>WindowOrWorkerGlobalScope</h2><div><ul><li><a href=/js/windoworworkerglobalscope/atob/>atob</a></li><li><a href=/js/windoworworkerglobalscope/btoa/>btoa</a></li><li><a href=/js/windoworworkerglobalscope/clearinterval/>clearInterval</a></li><li><a href=/js/windoworworkerglobalscope/cleartimeout/>clearTimeout</a></li><li><a href=/js/windoworworkerglobalscope/createimagebitmap/>createImageBitmap</a></li><li><a href=/js/windoworworkerglobalscope/crossoriginisolated/>crossOriginIsolated</a></li><li><a href=/js/windoworworkerglobalscope/issecurecontext/>isSecureContext</a></li><li><a href=/js/windoworworkerglobalscope/origin/>origin</a></li><li><a href=/js/windoworworkerglobalscope/queuemicrotask/>queueMicrotask</a></li><li><a href=/js/windoworworkerglobalscope/reporterror/>reportError</a></li><li><a href=/js/windoworworkerglobalscope/setinterval/>setInterval</a></li><li><a href=/js/windoworworkerglobalscope/settimeout/>setTimeout</a></li><li><a href=/js/windoworworkerglobalscope/structuredclone/>structuredClone</a></li></ul></div><h2>Other</h2><div><ul><li><a href=/js/array/>Array</a></li><li><a href=/js/comments/>Comments</a></li><li><a href=/js/date/>Date</a></li><li><a href=/js/enable/>Enable</a></li><li><a href=/js/functions/>Functions</a></li><li><a href=/js/infinity/>Infinity</a></li><li><a href=/js/print/>print</a></li></ul></div></div><div class=h1><a id=switch-php>PHP</a></div><div id=list-php><h2>Overview</h2><div><ul><li><a href=/php/>Overview</a></li></ul></div><h2>Array</h2><div><ul><li><a href=/php/array/array/>array</a></li><li><a href=/php/array/array_all/>array_all</a></li><li><a href=/php/array/array_any/>array_any</a></li><li><a href=/php/array/array_change_key_case/>array_change_key_case</a></li><li><a href=/php/array/array_chunk/>array_chunk</a></li><li><a href=/php/array/array_column/>array_column</a></li><li><a href=/php/array/array_combine/>array_combine</a></li><li><a href=/php/array/array_count_values/>array_count_values</a></li><li><a href=/php/array/array_diff/>array_diff</a></li><li><a href=/php/array/array_diff_assoc/>array_diff_assoc</a></li><li><a href=/php/array/array_diff_key/>array_diff_key</a></li><li><a href=/php/array/array_diff_uassoc/>array_diff_uassoc</a></li><li><a href=/php/array/array_diff_ukey/>array_diff_ukey</a></li><li><a href=/php/array/array_fill/>array_fill</a></li><li><a href=/php/array/array_fill_keys/>array_fill_keys</a></li><li><a href=/php/array/array_filter/>array_filter</a></li><li><a href=/php/array/array_find/>array_find</a></li><li><a href=/php/array/array_find_key/>array_find_key</a></li><li><a href=/php/array/array_first/>array_first</a></li><li><a href=/php/array/array_flip/>array_flip</a></li><li><a href=/php/array/array_intersect/>array_intersect</a></li><li><a href=/php/array/array_intersect_assoc/>array_intersect_assoc</a></li><li><a href=/php/array/array_intersect_key/>array_intersect_key</a></li><li><a href=/php/array/array_intersect_uassoc/>array_intersect_uassoc</a></li><li><a href=/php/array/array_intersect_ukey/>array_intersect_ukey</a></li><li><a href=/php/array/array_key_exists/>array_key_exists</a></li><li><a href=/php/array/array_key_first/>array_key_first</a></li><li><a href=/php/array/array_key_last/>array_key_last</a></li><li><a href=/php/array/array_keys/>array_keys</a></li><li><a href=/php/array/array_last/>array_last</a></li><li><a href=/php/array/array_map/>array_map</a></li><li><a href=/php/array/array_merge/>array_merge</a></li><li><a href=/php/array/array_merge_recursive/>array_merge_recursive</a></li><li><a href=/php/array/array_multisort/>array_multisort</a></li><li><a href=/php/array/array_pad/>array_pad</a></li><li><a href=/php/array/array_pop/>array_pop</a></li><li><a href=/php/array/array_product/>array_product</a></li><li><a href=/php/array/array_push/>array_push</a></li><li><a href=/php/array/array_rand/>array_rand</a></li><li><a href=/php/array/array_reduce/>array_reduce</a></li><li><a href=/php/array/array_replace/>array_replace</a></li><li><a href=/php/array/array_replace_recursive/>array_replace_recursive</a></li><li><a href=/php/array/array_reverse/>array_reverse</a></li><li><a href=/php/array/array_search/>array_search</a></li><li><a href=/php/array/array_shift/>array_shift</a></li><li><a href=/php/array/array_slice/>array_slice</a></li><li><a href=/php/array/array_splice/>array_splice</a></li><li><a href=/php/array/array_sum/>array_sum</a></li><li><a href=/php/array/array_udiff/>array_udiff</a></li><li><a href=/php/array/array_udiff_assoc/>array_udiff_assoc</a></li><li><a href=/php/array/array_udiff_uassoc/>array_udiff_uassoc</a></li><li><a href=/php/array/array_uintersect/>array_uintersect</a></li><li><a href=/php/array/array_uintersect_assoc/>array_uintersect_assoc</a></li><li><a href=/php/array/array_uintersect_uassoc/>array_uintersect_uassoc</a></li><li><a href=/php/array/array_unique/>array_unique</a></li><li><a href=/php/array/array_unshift/>array_unshift</a></li><li><a href=/php/array/array_values/>array_values</a></li><li><a href=/php/array/array_walk/>array_walk</a></li><li><a href=/php/array/array_walk_recursive/>array_walk_recursive</a></li><li><a href=/php/array/arsort/>arsort</a></li><li><a href=/php/array/asort/>asort</a></li><li><a href=/php/array/compact/>compact</a></li><li><a href=/php/array/count/>count</a></li><li><a href=/php/array/current/>current</a></li><li><a href=/php/array/end/>end</a></li><li><a href=/php/array/extract/>extract</a></li><li><a href=/php/array/in_array/>in_array</a></li><li><a href=/php/array/key/>key</a></li><li><a href=/php/array/key_exists/>key_exists</a></li><li><a href=/php/array/krsort/>krsort</a></li><li><a href=/php/array/ksort/>ksort</a></li><li><a href=/php/array/list/>list</a></li><li><a href=/php/array/natcasesort/>natcasesort</a></li><li><a href=/php/array/natsort/>natsort</a></li><li><a href=/php/array/next/>next</a></li><li><a href=/php/array/pos/>pos</a></li><li><a href=/php/array/prev/>prev</a></li><li><a href=/php/array/range/>range</a></li><li><a href=/php/array/reset/>reset</a></li><li><a href=/php/array/rsort/>rsort</a></li><li><a href=/php/array/shuffle/>shuffle</a></li><li><a href=/php/array/sizeof/>sizeof</a></li><li><a href=/php/array/sort/>sort</a></li><li><a href=/php/array/uasort/>uasort</a></li><li><a href=/php/array/uksort/>uksort</a></li><li><a href=/php/array/usort/>usort</a></li></ul></div><h2>BCMath</h2><div><ul><li><a href=/php/bcmath/bcadd/>bcadd</a></li><li><a href=/php/bcmath/bcceil/>bcceil</a></li><li><a href=/php/bcmath/bccomp/>bccomp</a></li><li><a href=/php/bcmath/bcdiv/>bcdiv</a></li><li><a href=/php/bcmath/bcdivmod/>bcdivmod</a></li><li><a href=/php/bcmath/bcfloor/>bcfloor</a></li><li><a href=/php/bcmath/bcmod/>bcmod</a></li><li><a href=/php/bcmath/bcmul/>bcmul</a></li><li><a href=/php/bcmath/bcpow/>bcpow</a></li><li><a href=/php/bcmath/bcpowmod/>bcpowmod</a></li><li><a href=/php/bcmath/bcround/>bcround</a></li><li><a href=/php/bcmath/bcscale/>bcscale</a></li><li><a href=/php/bcmath/bcsqrt/>bcsqrt</a></li><li><a href=/php/bcmath/bcsub/>bcsub</a></li></ul></div><h2>bzip2</h2><div><ul><li><a href=/php/bzip2/bzclose/>bzclose</a></li><li><a href=/php/bzip2/bzcompress/>bzcompress</a></li><li><a href=/php/bzip2/bzdecompress/>bzdecompress</a></li><li><a href=/php/bzip2/bzerrno/>bzerrno</a></li><li><a href=/php/bzip2/bzerror/>bzerror</a></li><li><a href=/php/bzip2/bzerrstr/>bzerrstr</a></li><li><a href=/php/bzip2/bzflush/>bzflush</a></li><li><a href=/php/bzip2/bzopen/>bzopen</a></li><li><a href=/php/bzip2/bzread/>bzread</a></li><li><a href=/php/bzip2/bzwrite/>bzwrite</a></li></ul></div><h2>Calendar</h2><div><ul><li><a href=/php/calendar/cal_days_in_month/>cal_days_in_month</a></li><li><a href=/php/calendar/cal_from_jd/>cal_from_jd</a></li><li><a href=/php/calendar/cal_info/>cal_info</a></li><li><a href=/php/calendar/cal_to_jd/>cal_to_jd</a></li><li><a href=/php/calendar/easter_date/>easter_date</a></li><li><a href=/php/calendar/easter_days/>easter_days</a></li><li><a href=/php/calendar/frenchtojd/>frenchtojd</a></li><li><a href=/php/calendar/gregoriantojd/>gregoriantojd</a></li><li><a href=/php/calendar/jddayofweek/>jddayofweek</a></li><li><a href=/php/calendar/jdmonthname/>jdmonthname</a></li><li><a href=/php/calendar/jdtofrench/>jdtofrench</a></li><li><a href=/php/calendar/jdtogregorian/>jdtogregorian</a></li><li><a href=/php/calendar/jdtojewish/>jdtojewish</a></li><li><a href=/php/calendar/jdtojulian/>jdtojulian</a></li><li><a href=/php/calendar/jdtounix/>jdtounix</a></li><li><a href=/php/calendar/jewishtojd/>jewishtojd</a></li><li><a href=/php/calendar/juliantojd/>juliantojd</a></li><li><a href=/php/calendar/unixtojd/>unixtojd</a></li></ul></div><h2>Class / Object</h2><div><ul><li><a href=/php/class-object/class_alias/>class_alias</a></li><li><a href=/php/class-object/class_exists/>class_exists</a></li><li><a href=/php/class-object/get_called_class/>get_called_class</a></li><li><a href=/php/class-object/get_class/>get_class</a></li><li><a href=/php/class-object/get_class_methods/>get_class_methods</a></li><li><a href=/php/class-object/get_class_vars/>get_class_vars</a></li><li><a href=/php/class-object/get_declared_classes/>get_declared_classes</a></li><li><a href=/php/class-object/get_declared_interfaces/>get_declared_interfaces</a></li><li><a href=/php/class-object/get_declared_traits/>get_declared_traits</a></li><li><a href=/php/class-object/get_object_vars/>get_object_vars</a></li><li><a href=/php/class-object/get_parent_class/>get_parent_class</a></li><li><a href=/php/class-object/interface_exists/>interface_exists</a></li><li><a href=/php/class-object/is_a/>is_a</a></li><li><a href=/php/class-object/is_subclass_of/>is_subclass_of</a></li><li><a href=/php/class-object/method_exists/>method_exists</a></li><li><a href=/php/class-object/property_exists/>property_exists</a></li><li><a href=/php/class-object/trait_exists/>trait_exists</a></li></ul></div><h2>Ctype</h2><div><ul><li><a href=/php/ctype/ctype_alnum/>ctype_alnum</a></li><li><a href=/php/ctype/ctype_alpha/>ctype_alpha</a></li><li><a href=/php/ctype/ctype_cntrl/>ctype_cntrl</a></li><li><a href=/php/ctype/ctype_digit/>ctype_digit</a></li><li><a href=/php/ctype/ctype_graph/>ctype_graph</a></li><li><a href=/php/ctype/ctype_lower/>ctype_lower</a></li><li><a href=/php/ctype/ctype_print/>ctype_print</a></li><li><a href=/php/ctype/ctype_punct/>ctype_punct</a></li><li><a href=/php/ctype/ctype_space/>ctype_space</a></li><li><a href=/php/ctype/ctype_upper/>ctype_upper</a></li><li><a href=/php/ctype/ctype_xdigit/>ctype_xdigit</a></li></ul></div><h2>cURL</h2><div><ul><li><a href=/php/curl/curl_close/>curl_close</a></li><li><a href=/php/curl/curl_copy_handle/>curl_copy_handle</a></li><li><a href=/php/curl/curl_errno/>curl_errno</a></li><li><a href=/php/curl/curl_error/>curl_error</a></li><li><a href=/php/curl/curl_escape/>curl_escape</a></li><li><a href=/php/curl/curl_exec/>curl_exec</a></li><li><a href=/php/curl/curl_getinfo/>curl_getinfo</a></li><li><a href=/php/curl/curl_init/>curl_init</a></li><li><a href=/php/curl/curl_multi_add_handle/>curl_multi_add_handle</a></li><li><a href=/php/curl/curl_multi_close/>curl_multi_close</a></li><li><a href=/php/curl/curl_multi_errno/>curl_multi_errno</a></li><li><a href=/php/curl/curl_multi_exec/>curl_multi_exec</a></li><li><a href=/php/curl/curl_multi_getcontent/>curl_multi_getcontent</a></li><li><a href=/php/curl/curl_multi_info_read/>curl_multi_info_read</a></li><li><a href=/php/curl/curl_multi_init/>curl_multi_init</a></li><li><a href=/php/curl/curl_multi_remove_handle/>curl_multi_remove_handle</a></li><li><a href=/php/curl/curl_multi_select/>curl_multi_select</a></li><li><a href=/php/curl/curl_multi_setopt/>curl_multi_setopt</a></li><li><a href=/php/curl/curl_multi_strerror/>curl_multi_strerror</a></li><li><a href=/php/curl/curl_pause/>curl_pause</a></li><li><a href=/php/curl/curl_reset/>curl_reset</a></li><li><a href=/php/curl/curl_setopt/>curl_setopt</a></li><li><a href=/php/curl/curl_setopt_array/>curl_setopt_array</a></li><li><a href=/php/curl/curl_share_close/>curl_share_close</a></li><li><a href=/php/curl/curl_share_errno/>curl_share_errno</a></li><li><a href=/php/curl/curl_share_init/>curl_share_init</a></li><li><a href=/php/curl/curl_share_init_persistent/>curl_share_init_persistent</a></li><li><a href=/php/curl/curl_share_setopt/>curl_share_setopt</a></li><li><a href=/php/curl/curl_share_strerror/>curl_share_strerror</a></li><li><a href=/php/curl/curl_strerror/>curl_strerror</a></li><li><a href=/php/curl/curl_unescape/>curl_unescape</a></li><li><a href=/php/curl/curl_upkeep/>curl_upkeep</a></li><li><a href=/php/curl/curl_version/>curl_version</a></li></ul></div><h2>Date / Time</h2><div><ul><li><a href=/php/date-time/checkdate/>checkdate</a></li><li><a href=/php/date-time/date/>date</a></li><li><a href=/php/date-time/date_add/>date_add</a></li><li><a href=/php/date-time/date_create/>date_create</a></li><li><a href=/php/date-time/date_create_from_format/>date_create_from_format</a></li><li><a href=/php/date-time/date_create_immutable/>date_create_immutable</a></li><li><a href=/php/date-time/date_create_immutable_from_format/>date_create_immutable_from_format</a></li><li><a href=/php/date-time/date_date_set/>date_date_set</a></li><li><a href=/php/date-time/date_default_timezone_get/>date_default_timezone_get</a></li><li><a href=/php/date-time/date_default_timezone_set/>date_default_timezone_set</a></li><li><a href=/php/date-time/date_diff/>date_diff</a></li><li><a href=/php/date-time/date_format/>date_format</a></li><li><a href=/php/date-time/date_get_last_errors/>date_get_last_errors</a></li><li><a href=/php/date-time/date_interval_create_from_date_string/>date_interval_create_from_date_string</a></li><li><a href=/php/date-time/date_interval_format/>date_interval_format</a></li><li><a href=/php/date-time/date_isodate_set/>date_isodate_set</a></li><li><a href=/php/date-time/date_modify/>date_modify</a></li><li><a href=/php/date-time/date_offset_get/>date_offset_get</a></li><li><a href=/php/date-time/date_parse/>date_parse</a></li><li><a href=/php/date-time/date_parse_from_format/>date_parse_from_format</a></li><li><a href=/php/date-time/date_sub/>date_sub</a></li><li><a href=/php/date-time/date_sun_info/>date_sun_info</a></li><li><a href=/php/date-time/date_sunrise/>date_sunrise</a></li><li><a href=/php/date-time/date_sunset/>date_sunset</a></li><li><a href=/php/date-time/date_time_set/>date_time_set</a></li><li><a href=/php/date-time/date_timestamp_get/>date_timestamp_get</a></li><li><a href=/php/date-time/date_timestamp_set/>date_timestamp_set</a></li><li><a href=/php/date-time/date_timezone_get/>date_timezone_get</a></li><li><a href=/php/date-time/date_timezone_set/>date_timezone_set</a></li><li><a href=/php/date-time/getdate/>getdate</a></li><li><a href=/php/date-time/gettimeofday/>gettimeofday</a></li><li><a href=/php/date-time/gmdate/>gmdate</a></li><li><a href=/php/date-time/gmmktime/>gmmktime</a></li><li><a href=/php/date-time/gmstrftime/>gmstrftime</a></li><li><a href=/php/date-time/idate/>idate</a></li><li><a href=/php/date-time/localtime/>localtime</a></li><li><a href=/php/date-time/microtime/>microtime</a></li><li><a href=/php/date-time/mktime/>mktime</a></li><li><a href=/php/date-time/strftime/>strftime</a></li><li><a href=/php/date-time/strptime/>strptime</a></li><li><a href=/php/date-time/strtotime/>strtotime</a></li><li><a href=/php/date-time/time/>time</a></li><li><a href=/php/date-time/timezone_abbreviations_list/>timezone_abbreviations_list</a></li><li><a href=/php/date-time/timezone_identifiers_list/>timezone_identifiers_list</a></li><li><a href=/php/date-time/timezone_location_get/>timezone_location_get</a></li><li><a href=/php/date-time/timezone_name_from_abbr/>timezone_name_from_abbr</a></li><li><a href=/php/date-time/timezone_name_get/>timezone_name_get</a></li><li><a href=/php/date-time/timezone_offset_get/>timezone_offset_get</a></li><li><a href=/php/date-time/timezone_open/>timezone_open</a></li><li><a href=/php/date-time/timezone_transitions_get/>timezone_transitions_get</a></li><li><a href=/php/date-time/timezone_version_get/>timezone_version_get</a></li></ul></div><h2>Directory</h2><div><ul><li><a href=/php/directory/chdir/>chdir</a></li><li><a href=/php/directory/chroot/>chroot</a></li><li><a href=/php/directory/closedir/>closedir</a></li><li><a href=/php/directory/dir/>dir</a></li><li><a href=/php/directory/getcwd/>getcwd</a></li><li><a href=/php/directory/opendir/>opendir</a></li><li><a href=/php/directory/readdir/>readdir</a></li><li><a href=/php/directory/rewinddir/>rewinddir</a></li><li><a href=/php/directory/scandir/>scandir</a></li></ul></div><h2>DOM</h2><div><ul><li><a href=/php/dom/dom_import_simplexml/>dom_import_simplexml</a></li></ul></div><h2>Error Handling</h2><div><ul><li><a href=/php/error-handling/debug_backtrace/>debug_backtrace</a></li><li><a href=/php/error-handling/debug_print_backtrace/>debug_print_backtrace</a></li><li><a href=/php/error-handling/error_clear_last/>error_clear_last</a></li><li><a href=/php/error-handling/error_get_last/>error_get_last</a></li><li><a href=/php/error-handling/error_log/>error_log</a></li><li><a href=/php/error-handling/error_reporting/>error_reporting</a></li><li><a href=/php/error-handling/get_error_handler/>get_error_handler</a></li><li><a href=/php/error-handling/get_exception_handler/>get_exception_handler</a></li><li><a href=/php/error-handling/restore_error_handler/>restore_error_handler</a></li><li><a href=/php/error-handling/restore_exception_handler/>restore_exception_handler</a></li><li><a href=/php/error-handling/set_error_handler/>set_error_handler</a></li><li><a href=/php/error-handling/set_exception_handler/>set_exception_handler</a></li><li><a href=/php/error-handling/trigger_error/>trigger_error</a></li><li><a href=/php/error-handling/user_error/>user_error</a></li></ul></div><h2>Exif</h2><div><ul><li><a href=/php/exif/exif_imagetype/>exif_imagetype</a></li><li><a href=/php/exif/exif_read_data/>exif_read_data</a></li><li><a href=/php/exif/exif_tagname/>exif_tagname</a></li><li><a href=/php/exif/exif_thumbnail/>exif_thumbnail</a></li></ul></div><h2>Fileinfo</h2><div><ul><li><a href=/php/fileinfo/finfo_buffer/>finfo_buffer</a></li><li><a href=/php/fileinfo/finfo_close/>finfo_close</a></li><li><a href=/php/fileinfo/finfo_file/>finfo_file</a></li><li><a href=/php/fileinfo/finfo_open/>finfo_open</a></li><li><a href=/php/fileinfo/finfo_set_flags/>finfo_set_flags</a></li><li><a href=/php/fileinfo/mime_content_type/>mime_content_type</a></li></ul></div><h2>Filesystem</h2><div><ul><li><a href=/php/filesystem/basename/>basename</a></li><li><a href=/php/filesystem/chgrp/>chgrp</a></li><li><a href=/php/filesystem/chmod/>chmod</a></li><li><a href=/php/filesystem/chown/>chown</a></li><li><a href=/php/filesystem/clearstatcache/>clearstatcache</a></li><li><a href=/php/filesystem/copy/>copy</a></li><li><a href=/php/filesystem/dirname/>dirname</a></li><li><a href=/php/filesystem/disk_free_space/>disk_free_space</a></li><li><a href=/php/filesystem/disk_total_space/>disk_total_space</a></li><li><a href=/php/filesystem/diskfreespace/>diskfreespace</a></li><li><a href=/php/filesystem/fclose/>fclose</a></li><li><a href=/php/filesystem/feof/>feof</a></li><li><a href=/php/filesystem/fflush/>fflush</a></li><li><a href=/php
10000
/filesystem/fgetc/>fgetc</a></li><li><a href=/php/filesystem/fgetcsv/>fgetcsv</a></li><li><a href=/php/filesystem/fgets/>fgets</a></li><li><a href=/php/filesystem/file/>file</a></li><li><a href=/php/filesystem/file_exists/>file_exists</a></li><li><a href=/php/filesystem/file_get_contents/>file_get_contents</a></li><li><a href=/php/filesystem/file_put_contents/>file_put_contents</a></li><li><a href=/php/filesystem/fileatime/>fileatime</a></li><li><a href=/php/filesystem/filectime/>filectime</a></li><li><a href=/php/filesystem/filegroup/>filegroup</a></li><li><a href=/php/filesystem/fileinode/>fileinode</a></li><li><a href=/php/filesystem/filemtime/>filemtime</a></li><li><a href=/php/filesystem/fileowner/>fileowner</a></li><li><a href=/php/filesystem/fileperms/>fileperms</a></li><li><a href=/php/filesystem/filesize/>filesize</a></li><li><a href=/php/filesystem/filetype/>filetype</a></li><li><a href=/php/filesystem/flock/>flock</a></li><li><a href=/php/filesystem/fnmatch/>fnmatch</a></li><li><a href=/php/filesystem/fopen/>fopen</a></li><li><a href=/php/filesystem/fpassthru/>fpassthru</a></li><li><a href=/php/filesystem/fputcsv/>fputcsv</a></li><li><a href=/php/filesystem/fputs/>fputs</a></li><li><a href=/php/filesystem/fread/>fread</a></li><li><a href=/php/filesystem/fscanf/>fscanf</a></li><li><a href=/php/filesystem/fseek/>fseek</a></li><li><a href=/php/filesystem/fstat/>fstat</a></li><li><a href=/php/filesystem/ftell/>ftell</a></li><li><a href=/php/filesystem/ftruncate/>ftruncate</a></li><li><a href=/php/filesystem/fwrite/>fwrite</a></li><li><a href=/php/filesystem/glob/>glob</a></li><li><a href=/php/filesystem/is_dir/>is_dir</a></li><li><a href=/php/filesystem/is_executable/>is_executable</a></li><li><a href=/php/filesystem/is_file/>is_file</a></li><li><a href=/php/filesystem/is_link/>is_link</a></li><li><a href=/php/filesystem/is_readable/>is_readable</a></li><li><a href=/php/filesystem/is_uploaded_file/>is_uploaded_file</a></li><li><a href=/php/filesystem/is_writable/>is_writable</a></li><li><a href=/php/filesystem/is_writeable/>is_writeable</a></li><li><a href=/php/filesystem/lchgrp/>lchgrp</a></li><li><a href=/php/filesystem/lchown/>lchown</a></li><li><a href=/php/filesystem/link/>link</a></li><li><a href=/php/filesystem/linkinfo/>linkinfo</a></li><li><a href=/php/filesystem/lstat/>lstat</a></li><li><a href=/php/filesystem/mkdir/>mkdir</a></li><li><a href=/php/filesystem/move_uploaded_file/>move_uploaded_file</a></li><li><a href=/php/filesystem/pathinfo/>pathinfo</a></li><li><a href=/php/filesystem/pclose/>pclose</a></li><li><a href=/php/filesystem/popen/>popen</a></li><li><a href=/php/filesystem/readfile/>readfile</a></li><li><a href=/php/filesystem/readlink/>readlink</a></li><li><a href=/php/filesystem/realpath/>realpath</a></li><li><a href=/php/filesystem/realpath_cache_get/>realpath_cache_get</a></li><li><a href=/php/filesystem/realpath_cache_size/>realpath_cache_size</a></li><li><a href=/php/filesystem/rename/>rename</a></li><li><a href=/php/filesystem/rewind/>rewind</a></li><li><a href=/php/filesystem/rmdir/>rmdir</a></li><li><a href=/php/filesystem/set_file_buffer/>set_file_buffer</a></li><li><a href=/php/filesystem/stat/>stat</a></li><li><a href=/php/filesystem/symlink/>symlink</a></li><li><a href=/php/filesystem/tempnam/>tempnam</a></li><li><a href=/php/filesystem/tmpfile/>tmpfile</a></li><li><a href=/php/filesystem/touch/>touch</a></li><li><a href=/php/filesystem/umask/>umask</a></li><li><a href=/php/filesystem/unlink/>unlink</a></li></ul></div><h2>Filter</h2><div><ul><li><a href=/php/filter/filter_has_var/>filter_has_var</a></li><li><a href=/php/filter/filter_id/>filter_id</a></li><li><a href=/php/filter/filter_input/>filter_input</a></li><li><a href=/php/filter/filter_input_array/>filter_input_array</a></li><li><a href=/php/filter/filter_list/>filter_list</a></li><li><a href=/php/filter/filter_var/>filter_var</a></li><li><a href=/php/filter/filter_var_array/>filter_var_array</a></li></ul></div><h2>Function Handling</h2><div><ul><li><a href=/php/function-handling/call_user_func/>call_user_func</a></li><li><a href=/php/function-handling/call_user_func_array/>call_user_func_array</a></li><li><a href=/php/function-handling/forward_static_call/>forward_static_call</a></li><li><a href=/php/function-handling/forward_static_call_array/>forward_static_call_array</a></li><li><a href=/php/function-handling/func_get_arg/>func_get_arg</a></li><li><a href=/php/function-handling/func_get_args/>func_get_args</a></li><li><a href=/php/function-handling/func_num_args/>func_num_args</a></li><li><a href=/php/function-handling/function_exists/>function_exists</a></li><li><a href=/php/function-handling/get_defined_functions/>get_defined_functions</a></li><li><a href=/php/function-handling/register_shutdown_function/>register_shutdown_function</a></li><li><a href=/php/function-handling/register_tick_function/>register_tick_function</a></li><li><a href=/php/function-handling/unregister_tick_function/>unregister_tick_function</a></li></ul></div><h2>GMP</h2><div><ul><li><a href=/php/gmp/gmp_abs/>gmp_abs</a></li><li><a href=/php/gmp/gmp_add/>gmp_add</a></li><li><a href=/php/gmp/gmp_and/>gmp_and</a></li><li><a href=/php/gmp/gmp_binomial/>gmp_binomial</a></li><li><a href=/php/gmp/gmp_clrbit/>gmp_clrbit</a></li><li><a href=/php/gmp/gmp_cmp/>gmp_cmp</a></li><li><a href=/php/gmp/gmp_com/>gmp_com</a></li><li><a href=/php/gmp/gmp_div/>gmp_div</a></li><li><a href=/php/gmp/gmp_div_q/>gmp_div_q</a></li><li><a href=/php/gmp/gmp_div_qr/>gmp_div_qr</a></li><li><a href=/php/gmp/gmp_div_r/>gmp_div_r</a></li><li><a href=/php/gmp/gmp_divexact/>gmp_divexact</a></li><li><a href=/php/gmp/gmp_export/>gmp_export</a></li><li><a href=/php/gmp/gmp_fact/>gmp_fact</a></li><li><a href=/php/gmp/gmp_gcd/>gmp_gcd</a></li><li><a href=/php/gmp/gmp_gcdext/>gmp_gcdext</a></li><li><a href=/php/gmp/gmp_hamdist/>gmp_hamdist</a></li><li><a href=/php/gmp/gmp_import/>gmp_import</a></li><li><a href=/php/gmp/gmp_init/>gmp_init</a></li><li><a href=/php/gmp/gmp_intval/>gmp_intval</a></li><li><a href=/php/gmp/gmp_invert/>gmp_invert</a></li><li><a href=/php/gmp/gmp_jacobi/>gmp_jacobi</a></li><li><a href=/php/gmp/gmp_kronecker/>gmp_kronecker</a></li><li><a href=/php/gmp/gmp_lcm/>gmp_lcm</a></li><li><a href=/php/gmp/gmp_legendre/>gmp_legendre</a></li><li><a href=/php/gmp/gmp_mod/>gmp_mod</a></li><li><a href=/php/gmp/gmp_mul/>gmp_mul</a></li><li><a href=/php/gmp/gmp_neg/>gmp_neg</a></li><li><a href=/php/gmp/gmp_nextprime/>gmp_nextprime</a></li><li><a href=/php/gmp/gmp_or/>gmp_or</a></li><li><a href=/php/gmp/gmp_perfect_power/>gmp_perfect_power</a></li><li><a href=/php/gmp/gmp_perfect_square/>gmp_perfect_square</a></li><li><a href=/php/gmp/gmp_popcount/>gmp_popcount</a></li><li><a href=/php/gmp/gmp_pow/>gmp_pow</a></li><li><a href=/php/gmp/gmp_powm/>gmp_powm</a></li><li><a href=/php/gmp/gmp_prob_prime/>gmp_prob_prime</a></li><li><a href=/php/gmp/gmp_random_bits/>gmp_random_bits</a></li><li><a href=/php/gmp/gmp_random_range/>gmp_random_range</a></li><li><a href=/php/gmp/gmp_random_seed/>gmp_random_seed</a></li><li><a href=/php/gmp/gmp_root/>gmp_root</a></li><li><a href=/php/gmp/gmp_rootrem/>gmp_rootrem</a></li><li><a href=/php/gmp/gmp_scan0/>gmp_scan0</a></li><li><a href=/php/gmp/gmp_scan1/>gmp_scan1</a></li><li><a href=/php/gmp/gmp_setbit/>gmp_setbit</a></li><li><a href=/php/gmp/gmp_sign/>gmp_sign</a></li><li><a href=/php/gmp/gmp_sqrt/>gmp_sqrt</a></li><li><a href=/php/gmp/gmp_sqrtrem/>gmp_sqrtrem</a></li><li><a href=/php/gmp/gmp_strval/>gmp_strval</a></li><li><a href=/php/gmp/gmp_sub/>gmp_sub</a></li><li><a href=/php/gmp/gmp_testbit/>gmp_testbit</a></li><li><a href=/php/gmp/gmp_xor/>gmp_xor</a></li></ul></div><h2>Hash</h2><div><ul><li><a href=/php/hash/hash/>hash</a></li><li><a href=/php/hash/hash_algos/>hash_algos</a></li><li><a href=/php/hash/hash_copy/>hash_copy</a></li><li><a href=/php/hash/hash_equals/>hash_equals</a></li><li><a href=/php/hash/hash_file/>hash_file</a></li><li><a href=/php/hash/hash_final/>hash_final</a></li><li><a href=/php/hash/hash_hkdf/>hash_hkdf</a></li><li><a href=/php/hash/hash_hmac/>hash_hmac</a></li><li><a href=/php/hash/hash_hmac_algos/>hash_hmac_algos</a></li><li><a href=/php/hash/hash_hmac_file/>hash_hmac_file</a></li><li><a href=/php/hash/hash_init/>hash_init</a></li><li><a href=/php/hash/hash_pbkdf2/>hash_pbkdf2</a></li><li><a href=/php/hash/hash_update/>hash_update</a></li><li><a href=/php/hash/hash_update_file/>hash_update_file</a></li><li><a href=/php/hash/hash_update_stream/>hash_update_stream</a></li></ul></div><h2>iconv</h2><div><ul><li><a href=/php/iconv/iconv/>iconv</a></li><li><a href=/php/iconv/iconv_get_encoding/>iconv_get_encoding</a></li><li><a href=/php/iconv/iconv_mime_decode/>iconv_mime_decode</a></li><li><a href=/php/iconv/iconv_mime_decode_headers/>iconv_mime_decode_headers</a></li><li><a href=/php/iconv/iconv_mime_encode/>iconv_mime_encode</a></li><li><a href=/php/iconv/iconv_set_encoding/>iconv_set_encoding</a></li><li><a href=/php/iconv/iconv_strlen/>iconv_strlen</a></li><li><a href=/php/iconv/iconv_strpos/>iconv_strpos</a></li><li><a href=/php/iconv/iconv_strrpos/>iconv_strrpos</a></li><li><a href=/php/iconv/iconv_substr/>iconv_substr</a></li><li><a href=/php/iconv/ob_iconv_handler/>ob_iconv_handler</a></li></ul></div><h2>Image</h2><div><ul><li><a href=/php/image/gd_info/>gd_info</a></li><li><a href=/php/image/getimagesize/>getimagesize</a></li><li><a href=/php/image/getimagesizefromstring/>getimagesizefromstring</a></li><li><a href=/php/image/image_type_to_extension/>image_type_to_extension</a></li><li><a href=/php/image/image_type_to_mime_type/>image_type_to_mime_type</a></li><li><a href=/php/image/imageaffine/>imageaffine</a></li><li><a href=/php/image/imageaffinematrixconcat/>imageaffinematrixconcat</a></li><li><a href=/php/image/imageaffinematrixget/>imageaffinematrixget</a></li><li><a href=/php/image/imagealphablending/>imagealphablending</a></li><li><a href=/php/image/imageantialias/>imageantialias</a></li><li><a href=/php/image/imagearc/>imagearc</a></li><li><a href=/php/image/imageavif/>imageavif</a></li><li><a href=/php/image/imagebmp/>imagebmp</a></li><li><a href=/php/image/imagechar/>imagechar</a></li><li><a href=/php/image/imagecharup/>imagecharup</a></li><li><a href=/php/image/imagecolorallocate/>imagecolorallocate</a></li><li><a href=/php/image/imagecolorallocatealpha/>imagecolorallocatealpha</a></li><li><a href=/php/image/imagecolorat/>imagecolorat</a></li><li><a href=/php/image/imagecolorclosest/>imagecolorclosest</a></li><li><a href=/php/image/imagecolorclosestalpha/>imagecolorclosestalpha</a></li><li><a href=/php/image/imagecolorclosesthwb/>imagecolorclosesthwb</a></li><li><a href=/php/image/imagecolordeallocate/>imagecolordeallocate</a></li><li><a href=/php/image/imagecolorexact/>imagecolorexact</a></li><li><a href=/php/image/imagecolorexactalpha/>imagecolorexactalpha</a></li><li><a href=/php/image/imagecolormatch/>imagecolormatch</a></li><li><a href=/php/image/imagecolorresolve/>imagecolorresolve</a></li><li><a href=/php/image/imagecolorresolvealpha/>imagecolorresolvealpha</a></li><li><a href=/php/image/imagecolorset/>imagecolorset</a></li><li><a href=/php/image/imagecolorsforindex/>imagecolorsforindex</a></li><li><a href=/php/image/imagecolorstotal/>imagecolorstotal</a></li><li><a href=/php/image/imagecolortransparent/>imagecolortransparent</a></li><li><a href=/php/image/imageconvolution/>imageconvolution</a></li><li><a href=/php/image/imagecopy/>imagecopy</a></li><li><a href=/php/image/imagecopymerge/>imagecopymerge</a></li><li><a href=/php/image/imagecopymergegray/>imagecopymergegray</a></li><li><a href=/php/image/imagecopyresampled/>imagecopyresampled</a></li><li><a href=/php/image/imagecopyresized/>imagecopyresized</a></li><li><a href=/php/image/imagecreate/>imagecreate</a></li><li><a href=/php/image/imagecreatefromavif/>imagecreatefromavif</a></li><li><a href=/php/image/imagecreatefrombmp/>imagecreatefrombmp</a></li><li><a href=/php/image/imagecreatefromgif/>imagecreatefromgif</a></li><li><a href=/php/image/imagecreatefromjpeg/>imagecreatefromjpeg</a></li><li><a href=/php/image/imagecreatefrompng/>imagecreatefrompng</a></li><li><a href=/php/image/imagecreatefromstring/>imagecreatefromstring</a></li><li><a href=/php/image/imagecreatefromtga/>imagecreatefromtga</a></li><li><a href=/php/image/imagecreatefromwbmp/>imagecreatefromwbmp</a></li><li><a href=/php/image/imagecreatefromwebp/>imagecreatefromwebp</a></li><li><a href=/php/image/imagecreatefromxbm/>imagecreatefromxbm</a></li><li><a href=/php/image/imagecreatefromxpm/>imagecreatefromxpm</a></li><li><a href=/php/image/imagecreatetruecolor/>imagecreatetruecolor</a></li><li><a href=/php/image/imagecrop/>imagecrop</a></li><li><a href=/php/image/imagecropauto/>imagecropauto</a></li><li><a href=/php/image/imagedashedline/>imagedashedline</a></li><li><a href=/php/image/imagedestroy/>imagedestroy</a></li><li><a href=/php/image/imageellipse/>imageellipse</a></li><li><a href=/php/image/imagefill/>imagefill</a></li><li><a href=/php/image/imagefilledarc/>imagefilledarc</a></li><li><a href=/php/image/imagefilledellipse/>imagefilledellipse</a></li><li><a href=/php/image/imagefilledpolygon/>imagefilledpolygon</a></li><li><a href=/php/image/imagefilledrectangle/>imagefilledrectangle</a></li><li><a href=/php/image/imagefilltoborder/>imagefilltoborder</a></li><li><a href=/php/image/imagefilter/>imagefilter</a></li><li><a href=/php/image/imageflip/>imageflip</a></li><li><a href=/php/image/imagefontheight/>imagefontheight</a></li><li><a href=/php/image/imagefontwidth/>imagefontwidth</a></li><li><a href=/php/image/imageftbbox/>imageftbbox</a></li><li><a href=/php/image/imagefttext/>imagefttext</a></li><li><a href=/php/image/imagegammacorrect/>imagegammacorrect</a></li><li><a href=/php/image/imagegetclip/>imagegetclip</a></li><li><a href=/php/image/imagegetinterpolation/>imagegetinterpolation</a></li><li><a href=/php/image/imagegif/>imagegif</a></li><li><a href=/php/image/imageinterlace/>imageinterlace</a></li><li><a href=/php/image/imageistruecolor/>imageistruecolor</a></li><li><a href=/php/image/imagejpeg/>imagejpeg</a></li><li><a href=/php/image/imagelayereffect/>imagelayereffect</a></li><li><a href=/php/image/imageline/>imageline</a></li><li><a href=/php/image/imageloadfont/>imageloadfont</a></li><li><a href=/php/image/imageopenpolygon/>imageopenpolygon</a></li><li><a href=/php/image/imagepalettecopy/>imagepalettecopy</a></li><li><a href=/php/image/imagepalettetotruecolor/>imagepalettetotruecolor</a></li><li><a href=/php/image/imagepng/>imagepng</a></li><li><a href=/php/image/imagepolygon/>imagepolygon</a></li><li><a href=/php/image/imagerectangle/>imagerectangle</a></li><li><a href=/php/image/imageresolution/>imageresolution</a></li><li><a href=/php/image/imagerotate/>imagerotate</a></li><li><a href=/php/image/imagesavealpha/>imagesavealpha</a></li><li><a href=/php/image/imagescale/>imagescale</a></li><li><a href=/php/image/imagesetbrush/>imagesetbrush</a></li><li><a href=/php/image/imagesetclip/>imagesetclip</a></li><li><a href=/php/image/imagesetinterpolation/>imagesetinterpolation</a></li><li><a href=/php/image/imagesetpixel/>imagesetpixel</a></li><li><a href=/php/image/imagesetstyle/>imagesetstyle</a></li><li><a href=/php/image/imagesetthickness/>imagesetthickness</a></li><li><a href=/php/image/imagesettile/>imagesettile</a></li><li><a href=/php/image/imagestring/>imagestring</a></li><li><a href=/php/image/imagestringup/>imagestringup</a></li><li><a href=/php/image/imagesx/>imagesx</a></li><li><a href=/php/image/imagesy/>imagesy</a></li><li><a href=/php/image/imagetruecolortopalette/>imagetruecolortopalette</a></li><li><a href=/php/image/imagettfbbox/>imagettfbbox</a></li><li><a href=/php/image/imagettftext/>imagettftext</a></li><li><a href=/php/image/imagetypes/>imagetypes</a></li><li><a href=/php/image/imagewbmp/>imagewbmp</a></li><li><a href=/php/image/imagewebp/>imagewebp</a></li><li><a href=/php/image/imagexbm/>imagexbm</a></li><li><a href=/php/image/iptcembed/>iptcembed</a></li><li><a href=/php/image/iptcparse/>iptcparse</a></li></ul></div><h2>JSON</h2><div><ul><li><a href=/php/json/json_decode/>json_decode</a></li><li><a href=/php/json/json_encode/>json_encode</a></li><li><a href=/php/json/json_last_error/>json_last_error</a></li><li><a href=/php/json/json_last_error_msg/>json_last_error_msg</a></li><li><a href=/php/json/json_validate/>json_validate</a></li></ul></div><h2>libxml</h2><div><ul><li><a href=/php/libxml/libxml_clear_errors/>libxml_clear_errors</a></li><li><a href=/php/libxml/libxml_get_errors/>libxml_get_errors</a></li><li><a href=/php/libxml/libxml_get_external_entity_loader/>libxml_get_external_entity_loader</a></li><li><a href=/php/libxml/libxml_get_last_error/>libxml_get_last_error</a></li><li><a href=/php/libxml/libxml_set_external_entity_loader/>libxml_set_external_entity_loader</a></li><li><a href=/php/libxml/libxml_set_streams_context/>libxml_set_streams_context</a></li><li><a href=/php/libxml/libxml_use_internal_errors/>libxml_use_internal_errors</a></li></ul></div><h2>Mail</h2><div><ul><li><a href=/php/mail/mail/>mail</a></li></ul></div><h2>Math</h2><div><ul><li><a href=/php/math/abs/>abs</a></li><li><a href=/php/math/acos/>acos</a></li><li><a href=/php/math/acosh/>acosh</a></li><li><a href=/php/math/asin/>asin</a></li><li><a href=/php/math/asinh/>asinh</a></li><li><a href=/php/math/atan/>atan</a></li><li><a href=/php/math/atan2/>atan2</a></li><li><a href=/php/math/atanh/>atanh</a></li><li><a href=/php/math/base_convert/>base_convert</a></li><li><a href=/php/math/bindec/>bindec</a></li><li><a href=/php/math/ceil/>ceil</a></li><li><a href=/php/math/cos/>cos</a></li><li><a href=/php/math/cosh/>cosh</a></li><li><a href=/php/math/decbin/>decbin</a></li><li><a href=/php/math/dechex/>dechex</a></li><li><a href=/php/math/decoct/>decoct</a></li><li><a href=/php/math/deg2rad/>deg2rad</a></li><li><a href=/php/math/exp/>exp</a></li><li><a href=/php/math/expm1/>expm1</a></li><li><a href=/php/math/fdiv/>fdiv</a></li><li><a href=/php/math/floor/>floor</a></li><li><a href=/php/math/fmod/>fmod</a></li><li><a href=/php/math/fpow/>fpow</a></li><li><a href=/php/math/hexdec/>hexdec</a></li><li><a href=/php/math/hypot/>hypot</a></li><li><a href=/php/math/intdiv/>intdiv</a></li><li><a href=/php/math/is_finite/>is_finite</a></li><li><a href=/php/math/is_infinite/>is_infinite</a></li><li><a href=/php/math/is_nan/>is_nan</a></li><li><a href=/php/math/log/>log</a></li><li><a href=/php/math/log10/>log10</a></li><li><a href=/php/math/log1p/>log1p</a></li><li><a href=/php/math/max/>max</a></li><li><a href=/php/math/min/>min</a></li><li><a href=/php/math/octdec/>octdec</a></li><li><a href=/php/math/pi/>pi</a></li><li><a href=/php/math/pow/>pow</a></li><li><a href=/php/math/rad2deg/>rad2deg</a></li><li><a href=/php/math/round/>round</a></li><li><a href=/php/math/sin/>sin</a></li><li><a href=/php/math/sinh/>sinh</a></li><li><a href=/php/math/sqrt/>sqrt</a></li><li><a href=/php/math/tan/>tan</a></li><li><a href=/php/math/tanh/>tanh</a></li></ul></div><h2>Miscellaneous</h2><div><ul><li><a href=/php/miscellaneous/__halt_compiler/>__halt_compiler</a></li><li><a href=/php/miscellaneous/connection_aborted/>connection_aborted</a></li><li><a href=/php/miscellaneous/connection_status/>connection_status</a></li><li><a href=/php/miscellaneous/constant/>constant</a></li><li><a href=/php/miscellaneous/define/>define</a></li><li><a href=/php/miscellaneous/defined/>defined</a></li><li><a href=/php/miscellaneous/die/>die</a></li><li><a href=/php/miscellaneous/eval/>eval</a></li><li><a href=/php/miscellaneous/exit/>exit</a></li><li><a href=/php/miscellaneous/highlight_file/>highlight_file</a></li><li><a href=/php/miscellaneous/highlight_string/>highlight_string</a></li><li><a href=/php/miscellaneous/hrtime/>hrtime</a></li><li><a href=/php/miscellaneous/ignore_user_abort/>ignore_user_abort</a></li><li><a href=/php/miscellaneous/pack/>pack</a></li><li><a href=/php/miscellaneous/php_strip_whitespace/>php_strip_whitespace</a></li><li><a href=/php/miscellaneous/show_source/>show_source</a></li><li><a href=/php/miscellaneous/sleep/>sleep</a></li><li><a href=/php/miscellaneous/sys_getloadavg/>sys_getloadavg</a></li><li><a href=/php/miscellaneous/time_nanosleep/>time_nanosleep</a></li><li><a href=/php/miscellaneous/time_sleep_until/>time_sleep_until</a></li><li><a href=/php/miscellaneous/uniqid/>uniqid</a></li><li><a href=/php/miscellaneous/unpack/>unpack</a></li><li><a href=/php/miscellaneous/usleep/>usleep</a></li></ul></div><h2>Multibyte String</h2><div><ul><li><a href=/php/multibyte-string/mb_check_encoding/>mb_check_encoding</a></li><li><a href=/php/multibyte-string/mb_chr/>mb_chr</a></li><li><a href=/php/multibyte-string/mb_convert_case/>mb_convert_case</a></li><li><a href=/php/multibyte-string/mb_convert_encoding/>mb_convert_encoding</a></li><li><a href=/php/multibyte-string/mb_convert_kana/>mb_convert_kana</a></li><li><a href=/php/multibyte-string/mb_convert_variables/>mb_convert_variables</a></li><li><a href=/php/multibyte-string/mb_decode_mimeheader/>mb_decode_mimeheader</a></li><li><a href=/php/multibyte-string/mb_decode_numericentity/>mb_decode_numericentity</a></li><li><a href=/php/multibyte-string/mb_detect_encoding/>mb_detect_encoding</a></li><li><a href=/php/multibyte-string/mb_detect_order/>mb_detect_order</a></li><li><a href=/php/multibyte-string/mb_encode_mimeheader/>mb_encode_mimeheader</a></li><li><a href=/php/multibyte-string/mb_encode_numericentity/>mb_encode_numericentity</a></li><li><a href=/php/multibyte-string/mb_encoding_aliases/>mb_encoding_aliases</a></li><li><a href=/php/multibyte-string/mb_ereg/>mb_ereg</a></li><li><a href=/php/multibyte-string/mb_ereg_match/>mb_ereg_match</a></li><li><a href=/php/multibyte-string/mb_ereg_replace/>mb_ereg_replace</a></li><li><a href=/php/multibyte-string/mb_ereg_replace_callback/>mb_ereg_replace_callback</a></li><li><a href=/php/multibyte-string/mb_ereg_search/>mb_ereg_search</a></li><li><a href=/php/multibyte-string/mb_ereg_search_getpos/>mb_ereg_search_getpos</a></li><li><a href=/php/multibyte-string/mb_ereg_search_getregs/>mb_ereg_search_getregs</a></li><li><a href=/php/multibyte-string/mb_ereg_search_init/>mb_ereg_search_init</a></li><li><a href=/php/multibyte-string/mb_ereg_search_pos/>mb_ereg_search_pos</a></li><li><a href=/php/multibyte-string/mb_ereg_search_regs/>mb_ereg_search_regs</a></li><li><a href=/php/multibyte-string/mb_ereg_search_setpos/>mb_ereg_search_setpos</a></li><li><a href=/php/multibyte-string/mb_eregi/>mb_eregi</a></li><li><a href=/php/multibyte-string/mb_eregi_replace/>mb_eregi_replace</a></li><li><a href=/php/multibyte-string/mb_get_info/>mb_get_info</a></li><li><a href=/php/multibyte-string/mb_http_input/>mb_http_input</a></li><li><a href=/php/multibyte-string/mb_http_output/>mb_http_output</a></li><li><a href=/php/multibyte-string/mb_internal_encoding/>mb_internal_encoding</a></li><li><a href=/php/multibyte-string/mb_language/>mb_language</a></li><li><a href=/php/multibyte-string/mb_lcfirst/>mb_lcfirst</a></li><li><a href=/php/multibyte-string/mb_list_encodings/>mb_list_encodings</a></li><li><a href=/php/multibyte-string/mb_ltrim/>mb_ltrim</a></li><li><a href=/php/multibyte-string/mb_ord/>mb_ord</a></li><li><a href=/php/multibyte-string/mb_output_handler/>mb_output_handler</a></li><li><a href=/php/multibyte-string/mb_parse_str/>mb_parse_str</a></li><li><a href=/php/multibyte-string/mb_preferred_mime_name/>mb_preferred_mime_name</a></li><li><a href=/php/multibyte-string/mb_regex_encoding/>mb_regex_encoding</a></li><li><a href=/php/multibyte-string/mb_regex_set_options/>mb_regex_set_options</a></li><li><a href=/php/multibyte-string/mb_rtrim/>mb_rtrim</a></li><li><a href=/php/multibyte-string/mb_scrub/>mb_scrub</a></li><li><a href=/php/multibyte-string/mb_send_mail/>mb_send_mail</a></li><li><a href=/php/multibyte-string/mb_split/>mb_split</a></li><li><a href=/php/multibyte-string/mb_str_pad/>mb_str_pad</a></li><li><a href=/php/multibyte-string/mb_str_split/>mb_str_split</a></li><li><a href=/php/multibyte-string/mb_strcut/>mb_strcut</a></li><li><a href=/php/multibyte-string/mb_strimwidth/>mb_strimwidth</a></li><li><a href=/php/multibyte-string/mb_stripos/>mb_stripos</a></li><li><a href=/php/multibyte-string/mb_stristr/>mb_stristr</a></li><li><a href=/php/multibyte-string/mb_strlen/>mb_strlen</a></li><li><a href=/php/multibyte-string/mb_strpos/>mb_strpos</a></li><li><a href=/php/multibyte-string/mb_strrchr/>mb_strrchr</a></li><li><a href=/php/multibyte-string/mb_strrichr/>mb_strrichr</a></li><li><a href=/php/multibyte-string/mb_strripos/>mb_strripos</a></li><li><a href=/php/multibyte-string/mb_strrpos/>mb_strrpos</a></li><li><a href=/php/multibyte-string/mb_strstr/>mb_strstr</a></li><li><a href=/php/multibyte-string/mb_strtolower/>mb_strtolower</a></li><li><a href=/php/multibyte-string/mb_strtoupper/>mb_strtoupper</a></li><li><a href=/php/multibyte-string/mb_strwidth/>mb_strwidth</a></li><li><a href=/php/multibyte-string/mb_substitute_character/>mb_substitute_character</a></li><li><a href=/php/multibyte-string/mb_substr/>mb_substr</a></li><li><a href=/php/multibyte-string/mb_substr_count/>mb_substr_count</a></li><li><a href=/php/multibyte-string/mb_trim/>mb_trim</a></li><li><a href=/php/multibyte-string/mb_ucfirst/>mb_ucfirst</a></li></ul></div><h2>Network</h2><div><ul><li><a href=/php/network/checkdnsrr/>checkdnsrr</a></li><li><a href=/php/network/closelog/>closelog</a></li><li><a href=/php/network/dns_check_record/>dns_check_record</a></li><li><a href=/php/network/dns_get_mx/>dns_get_mx</a></li><li><a href=/php/network/dns_get_record/>dns_get_record</a></li><li><a href=/php/network/fsockopen/>fsockopen</a></li><li><a href=/php/network/gethostbyaddr/>gethostbyaddr</a></li><li><a href=/php/network/gethostbyname/>gethostbyname</a></li><li><a href=/php/network/gethostbynamel/>gethostbynamel</a></li><li><a href=/php/network/gethostname/>gethostname</a></li><li><a href=/php/network/getmxrr/>getmxrr</a></li><li><a href=/php/network/getprotobyname/>getprotobyname</a></li><li><a href=/php/network/getprotobynumber/>getprotobynumber</a></li><li><a href=/php/network/getservbyname/>getservbyname</a></li><li><a href=/php/network/getservbyport/>getservbyport</a></li><li><a href=/php/network/header/>header</a></li><li><a href=/php/network/header_register_callback/>header_register_callback</a></li><li><a href=/php/network/header_remove/>header_remove</a></li><li><a href=/php/network/headers_list/>headers_list</a></li><li><a href=/php/network/headers_sent/>headers_sent</a></li><li><a href=/php/network/http_clear_last_response_headers/>http_clear_last_response_headers</a></li><li><a href=/php/network/http_get_last_response_headers/>http_get_last_response_headers</a></li><li><a href=/php/network/http_response_code/>http_response_code</a></li><li><a href=/php/network/inet_ntop/>inet_ntop</a></li><li><a href=/php/network/inet_pton/>inet_pton</a></li><li><a href=/php/network/ip2long/>ip2long</a></li><li><a href=/php/network/long2ip/>long2ip</a></li><li><a href=/php/network/openlog/>openlog</a></li><li><a href=/php/network/pfsockopen/>pfsockopen</a></li><li><a href=/php/network/setcookie/>setcookie</a></li><li><a href=/php/network/setrawcookie/>setrawcookie</a></li><li><a href=/php/network/socket_get_status/>socket_get_status</a></li><li><a href=/php/network/socket_set_blocking/>socket_set_blocking</a></li><li><a href=/php/network/socket_set_timeout/>socket_set_timeout</a></li><li><a href=/php/network/syslog/>syslog</a></li></ul></div><h2>Options / Information</h2><div><ul><li><a href=/php/options-information/assert/>assert</a></li><li><a href=/php/options-information/assert_options/>assert_options</a></li><li><a href=/php/options-information/cli_get_process_title/>cli_get_process_title</a></li><li><a href=/php/options-information/cli_set_process_title/>cli_set_process_title</a></li><li><a href=/php/options-information/dl/>dl</a></li><li><a href=/php/options-information/extension_loaded/>extension_loaded</a></li><li><a href=/php/options-information/gc_collect_cycles/>gc_collect_cycles</a></li><li><a href=/php/options-information/gc_disable/>gc_disable</a></li><li><a href=/php/options-information/gc_enable/>gc_enable</a></li><li><a href=/php/options-information/gc_enabled/>gc_enabled</a></li><li><a href=/php/options-information/gc_mem_caches/>gc_mem_caches</a></li><li><a href=/php/options-information/gc_status/>gc_status</a></li><li><a href=/php/options-information/get_cfg_var/>get_cfg_var</a></li><li><a href=/php/options-information/get_current_user/>get_current_user</a></li><li><a href=/php/options-information/get_defined_constants/>get_defined_constants</a></li><li><a href=/php/options-information/get_extension_funcs/>get_extension_funcs</a></li><li><a href=/php/options-information/get_include_path/>get_include_path</a></li><li><a href=/php/options-information/get_included_files/>get_included_files</a></li><li><a href=/php/options-information/get_loaded_extensions/>get_loaded_extensions</a></li><li><a href=/php/options-information/get_required_files/>get_required_files</a></li><li><a href=/php/options-information/get_resources/>get_resources</a></li><li><a href=/php/options-information/getenv/>getenv</a></li><li><a href=/php/options-information/getlastmod/>getlastmod</a></li><li><a href=/php/options-information/getmygid/>getmygid</a></li><li><a href=/php/options-information/getmyinode/>getmyinode</a></li><li><a href=/php/options-information/getmypid/>getmypid</a></li><li><a href=/php/options-information/getmyuid/>getmyuid</a></li><li><a href=/php/options-information/getopt/>getopt</a></li><li><a href=/php/options-information/getrusage/>getrusage</a></li><li><a href=/php/options-information/ini_alter/>ini_alter</a></li><li><a href=/php/options-information/ini_get/>ini_get</a></li><li><a href=/php/options-information/ini_get_all/>ini_get_all</a></li><li><a href=/php/options-information/ini_parse_quantity/>ini_parse_quantity</a></li><li><a href=/php/options-information/ini_restore/>ini_restore</a></li><li><a href=/php/options-information/ini_set/>ini_set</a></li><li><a href=/php/options-information/memory_get_peak_usage/>memory_get_peak_usage</a></li><li><a href=/php/options-information/memory_get_usage/>memory_get_usage</a></li><li><a href=/php/options-information/memory_reset_peak_usage/>memory_reset_peak_usage</a></li><li><a href=/php/options-information/php_ini_loaded_file/>php_ini_loaded_file</a></li><li><a href=/php/options-information/php_ini_scanned_files/>php_ini_scanned_files</a></li><li><a href=/php/options-information/php_sapi_name/>php_sapi_name</a></li><li><a href=/php/options-information/php_uname/>php_uname</a></li><li><a href=/php/options-information/phpcredits/>phpcredits</a></li><li><a href=/php/options-information/phpinfo/>phpinfo</a></li><li><a href=/php/options-information/phpversion/>phpversion</a></li><li><a href=/php/options-information/putenv/>putenv</a></li><li><a href=/php/options-information/set_include_path/>set_include_path</a></li><li><a href=/php/options-information/set_time_limit/>set_time_limit</a></li><li><a href=/php/options-information/sys_get_temp_dir/>sys_get_temp_dir</a></li><li><a href=/php/options-information/version_compare/>version_compare</a></li><li><a href=/php/options-information/zend_thread_id/>zend_thread_id</a></li><li><a href=/php/options-information/zend_version/>zend_version</a></li></ul></div><h2>Output Control</h2><div><ul><li><a href=/php/output-control/flush/>flush</a></li><li><a href=/php/output-control/ob_clean/>ob_clean</a></li><li><a href=/php/output-control/ob_end_clean/>ob_end_clean</a></li><li><a href=/php/output-control/ob_end_flush/>ob_end_flush</a></li><li><a href=/php/output-control/ob_flush/>ob_flush</a></li><li><a href=/php/output-control/ob_get_clean/>ob_get_clean</a></li><li><a href=/php/output-control/ob_get_contents/>ob_get_contents</a></li><li><a href=/php/output-control/ob_get_flush/>ob_get_flush</a></li><li><a href=/php/output-control/ob_get_length/>ob_get_length</a></li><li><a href=/php/output-control/ob_get_level/>ob_get_level</a></li><li><a href=/php/output-control/ob_get_status/>ob_get_status</a></li><li><a href=/php/output-control/ob_gzhandler/>ob_gzhandler</a></li><li><a href=/php/output-control/ob_implicit_flush/>ob_implicit_flush</a></li><li><a href=/php/output-control/ob_list_handlers/>ob_list_handlers</a></li><li><a href=/php/output-control/ob_start/>ob_start</a></li><li><a href=/php/output-control/output_add_rewrite_var/>output_add_rewrite_var</a></li><li><a href=/php/output-control/output_reset_rewrite_vars/>output_reset_rewrite_vars</a></li></ul></div><h2>PCNTL</h2><div><ul><li><a href=/php/pcntl/pcntl_alarm/>pcntl_alarm</a></li><li><a href=/php/pcntl/pcntl_async_signals/>pcntl_async_signals</a></li><li><a href=/php/pcntl/pcntl_errno/>pcntl_errno</a></li><li><a href=/php/pcntl/pcntl_exec/>pcntl_exec</a></li><li><a href=/php/pcntl/pcntl_fork/>pcntl_fork</a></li><li><a href=/php/pcntl/pcntl_get_last_error/>pcntl_get_last_error</a></li><li><a href=/php/pcntl/pcntl_getpriority/>pcntl_getpriority</a></li><li><a href=/php/pcntl/pcntl_rfork/>pcntl_rfork</a></li><li><a href=/php/pcntl/pcntl_setpriority/>pcntl_setpriority</a></li><li><a href=/php/pcntl/pcntl_signal/>pcntl_signal</a></li><li><a href=/php/pcntl/pcntl_signal_dispatch/>pcntl_signal_dispatch</a></li><li><a href=/php/pcntl/pcntl_signal_get_handler/>pcntl_signal_get_handler</a></li><li><a href=/php/pcntl/pcntl_sigprocmask/>pcntl_sigprocmask</a></li><li><a href=/php/pcntl/pcntl_sigtimedwait/>pcntl_sigtimedwait</a></li><li><a href=/php/pcntl/pcntl_sigwaitinfo/>pcntl_sigwaitinfo</a></li><li><a href=/php/pcntl/pcntl_strerror/>pcntl_strerror</a></li><li><a href=/php/pcntl/pcntl_unshare/>pcntl_unshare</a></li><li><a href=/php/pcntl/pcntl_wait/>pcntl_wait</a></li><li><a href=/php/pcntl/pcntl_waitpid/>pcntl_waitpid</a></li><li><a href=/php/pcntl/pcntl_wexitstatus/>pcntl_wexitstatus</a></li><li><a href=/php/pcntl/pcntl_wifexited/>pcntl_wifexited</a></li><li><a href=/php/pcntl/pcntl_wifsignaled/>pcntl_wifsignaled</a></li><li><a href=/php/pcntl/pcntl_wifstopped/>pcntl_wifstopped</a></li><li><a href=/php/pcntl/pcntl_wstopsig/>pcntl_wstopsig</a></li><li><a href=/php/pcntl/pcntl_wtermsig/>pcntl_wtermsig</a></li></ul></div><h2>PCRE</h2><div><ul><li><a href=/php/pcre/preg_filter/>preg_filter</a></li><li><a href=/php/pcre/preg_grep/>preg_grep</a></li><li><a href=/php/pcre/preg_last_error/>preg_last_error</a></li><li><a href=/php/pcre/preg_match/>preg_match</a></li><li><a href=/php/pcre/preg_match_all/>preg_match_all</a></li><li><a href=/php/pcre/preg_quote/>preg_quote</a></li><li><a href=/php/pcre/preg_replace/>preg_replace</a></li><li><a href=/php/pcre/preg_replace_callback/>preg_replace_callback</a></li><li><a href=/php/pcre/preg_replace_callback_array/>preg_replace_callback_array</a></li><li><a href=/php/pcre/preg_split/>preg_split</a></li></ul></div><h2>POSIX</h2><div><ul><li><a href=/php/posix/posix_access/>posix_access</a></li><li><a href=/php/posix/posix_ctermid/>posix_ctermid</a></li><li><a href=/php/posix/posix_eaccess/>posix_eaccess</a></li><li><a href=/php/posix/posix_errno/>posix_errno</a></li><li><a href=/php/posix/posix_fpathconf/>posix_fpathconf</a></li><li><a href=/php/posix/posix_get_last_error/>posix_get_last_error</a></li><li><a href=/php/posix/posix_getcwd/>posix_getcwd</a></li><li><a href=/php/posix/posix_getegid/>posix_getegid</a></li><li><a href=/php/posix/posix_geteuid/>posix_geteuid</a></li><li><a href=/php/posix/posix_getgid/>posix_getgid</a></li><li><a href=/php/posix/posix_getgrgid/>posix_getgrgid</a></li><li><a href=/php/posix/posix_getgrnam/>posix_getgrnam</a></li><li><a href=/php/posix/posix_getgroups/>posix_getgroups</a></li><li><a href=/php/posix/posix_getlogin/>posix_getlogin</a></li><li><a href=/php/posix/posix_getpgid/>posix_getpgid</a></li><li><a href=/php/posix/posix_getpgrp/>posix_getpgrp</a></li><li><a href=/php/posix/posix_getpid/>posix_getpid</a></li><li><a href=/php/posix/posix_getppid/>posix_getppid</a></li><li><a href=/php/posix/posix_getpwnam/>posix_getpwnam</a></li><li><a href=/php/posix/posix_getpwuid/>posix_getpwuid</a></li><li><a href=/php/posix/posix_getrlimit/>posix_getrlimit</a></li><li><a href=/php/posix/posix_getsid/>posix_getsid</a></li><li><a href=/php/posix/posix_getuid/>posix_getuid</a></li><li><a href=/php/posix/posix_initgroups/>posix_initgroups</a></li><li><a href=/php/posix/posix_isatty/>posix_isatty</a></li><li><a href=/php/posix/posix_kill/>posix_kill</a></li><li><a href=/php/posix/posix_mkfifo/>posix_mkfifo</a></li><li><a href=/php/posix/posix_mknod/>posix_mknod</a></li><li><a href=/php/posix/posix_pathconf/>posix_pathconf</a></li><li><a href=/php/posix/posix_setegid/>posix_setegid</a></li><li><a href=/php/posix/posix_seteuid/>posix_seteuid</a></li><li><a href=/php/posix/posix_setgid/>posix_setgid</a></li><li><a href=/php/posix/posix_setpgid/>posix_setpgid</a></li><li><a href=/php/posix/posix_setrlimit/>posix_setrlimit</a></li><li><a href=/php/posix/posix_setsid/>posix_setsid</a></li><li><a href=/php/posix/posix_setuid/>posix_setuid</a></li><li><a href=/php/posix/posix_strerror/>posix_strerror</a></li><li><a href=/php/posix/posix_sysconf/>posix_sysconf</a></li><li><a href=/php/posix/posix_times/>posix_times</a></li><li><a href=/php/posix/posix_ttyname/>posix_ttyname</a></li><li><a href=/php/posix/posix_uname/>posix_uname</a></li></ul></div><h2>Random</h2><div><ul><li><a href=/php/random/getrandmax/>getrandmax</a></li><li><a href=/php/random/lcg_value/>lcg_value</a></li><li><a href=/php/random/mt_getrandmax/>mt_getrandmax</a></li><li><a href=/php/random/mt_rand/>mt_rand</a></li><li><a href=/php/random/mt_srand/>mt_srand</a></li><li><a href=/php/random/rand/>rand</a></li><li><a href=/php/random/random_bytes/>random_bytes</a></li><li><a href=/php/random/random_int/>random_int</a></li><li><a href=/php/random/srand/>srand</a></li></ul></div><h2>Readline</h2><div><ul><li><a href=/php/readline/readline/>readline</a></li><li><a href=/php/readline/readline_add_history/>readline_add_history</a></li><li><a href=/php/readline/readline_callback_handler_install/>readline_callback_handler_install</a></li><li><a href=/php/readline/readline_callback_handler_remove/>readline_callback_handler_remove</a></li><li><a href=/php/readline/readline_callback_read_char/>readline_callback_read_char</a></li><li><a href=/php/readline/readline_clear_history/>readline_clear_history</a></li><li><a href=/php/readline/readline_completion_function/>readline_completion_function</a></li><li><a href=/php/readline/readline_info/>readline_info</a></li><li><a href=/php/readline/readline_list_history/>readline_list_history</a></li><li><a href=/php/readline/readline_on_new_line/>readline_on_new_line</a></li><li><a href=/php/readline/readline_read_history/>readline_read_history</a></li><li><a href=/php/readline/readline_redisplay/>readline_redisplay</a></li><li><a href=/php/readline/readline_write_history/>readline_write_history</a></li></ul></div><h2>ReflectionConstant</h2><div><ul><li><a href=/php/reflectionconstant/getname/>getName</a></li><li><a href=/php/reflectionconstant/getnamespacename/>getNamespaceName</a></li><li><a href=/php/reflectionconstant/getshortname/>getShortName</a></li><li><a href=/php/reflectionconstant/getvalue/>getValue</a></li><li><a href=/php/reflectionconstant/isdeprecated/>isDeprecated</a></li></ul></div><h2>Session</h2><div><ul><li><a href=/php/session/session_abort/>session_abort</a></li><li><a href=/php/session/session_cache_expire/>session_cache_expire</a></li><li><a href=/php/session/session_cache_limiter/>session_cache_limiter</a></li><li><a href=/php/session/session_commit/>session_commit</a></li><li><a href=/php/session/session_create_id/>session_create_id</a></li><li><a href=/php/session/session_decode/>session_decode</a></li><li><a href=/php/session/session_destroy/>session_destroy</a></li><li><a href=/php/session/session_encode/>session_encode</a></li><li><a href=/php/session/session_gc/>session_gc</a></li><li><a href=/php/session/session_get_cookie_params/>session_get_cookie_params</a></li><li><a href=/php/session/session_id/>session_id</a></li><li><a href=/php/session/session_module_name/>session_module_name</a></li><li><a href=/php/session/session_name/>session_name</a></li><li><a href=/php/session/session_regenerate_id/>session_regenerate_id</a></li><li><a href=/php/session/session_register_shutdown/>session_register_shutdown</a></li><li><a href=/php/session/session_reset/>session_reset</a></li><li><a href=/php/session/session_save_path/>session_save_path</a></li><li><a href=/php/session/session_set_cookie_params/>session_set_cookie_params</a></li><li><a href=/php/session/session_set_save_handler/>session_set_save_handler</a></li><li><a href=/php/session/session_start/>session_start</a></li><li><a href=/php/session/session_status/>session_status</a></li><li><a href=/php/session/session_unset/>session_unset</a></li><li><a href=/php/session/session_write_close/>session_write_close</a></li></ul></div><h2>Shmop</h2><div><ul><li><a href=/php/shmop/shmop_delete/>shmop_delete</a></li><li><a href=/php/shmop/shmop_open/>shmop_open</a></li><li><a href=/php/shmop/shmop_read/>shmop_read</a></li><li><a href=/php/shmop/shmop_size/>shmop_size</a></li><li><a href=/php/shmop/shmop_write/>shmop_write</a></li></ul></div><h2>SimpleXML</h2><div><ul><li><a href=/php/simplexml/simplexml_import_dom/>simplexml_import_dom</a></li><li><a href=/php/simplexml/simplexml_load_file/>simplexml_load_file</a></li><li><a href=/php/simplexml/simplexml_load_string/>simplexml_load_string</a></li></ul></div><h2>SNMP</h2><div><ul><li><a href=/php/snmp/snmp_get_quick_print/>snmp_get_quick_print</a></li><li><a href=/php/snmp/snmp_get_valueretrieval/>snmp_get_valueretrieval</a></li><li><a href=/php/snmp/snmp_read_mib/>snmp_read_mib</a></li><li><a href=/php/snmp/snmp_set_enum_print/>snmp_set_enum_print</a></li><li><a href=/php/snmp/snmp_set_oid_numeric_print/>snmp_set_oid_numeric_print</a></li><li><a href=/php/snmp/snmp_set_oid_output_format/>snmp_set_oid_output_format</a></li><li><a href=/php/snmp/snmp_set_quick_print/>snmp_set_quick_print</a></li><li><a href=/php/snmp/snmp_set_valueretrieval/>snmp_set_valueretrieval</a></li><li><a href=/php/snmp/snmp2_get/>snmp2_get</a></li><li><a href=/php/snmp/snmp2_getnext/>snmp2_getnext</a></li><li><a href=/php/snmp/snmp2_real_walk/>snmp2_real_walk</a></li><li><a href=/php/snmp/snmp2_set/>snmp2_set</a></li><li><a href=/php/snmp/snmp2_walk/>snmp2_walk</a></li><li><a href=/php/snmp/snmp3_get/>snmp3_get</a></li><li><a href=/php/snmp/snmp3_getnext/>snmp3_getnext</a></li><li><a href=/php/snmp/snmp3_real_walk/>snmp3_real_walk</a></li><li><a href=/php/snmp/snmp3_set/>snmp3_set</a></li><li><a href=/php/snmp/snmp3_walk/>snmp3_walk</a></li><li><a href=/php/snmp/snmpget/>snmpget</a></li><li><a href=/php/snmp/snmpgetnext/>snmpgetnext</a></li><li><a href=/php/snmp/snmprealwalk/>snmprealwalk</a></li><li><a href=/php/snmp/snmpset/>snmpset</a></li><li><a href=/php/snmp/snmpwalk/>snmpwalk</a></li><li><a href=/php/snmp/snmpwalkoid/>snmpwalkoid</a></li></ul></div><h2>Sockets</h2><div><ul><li><a href=/php/sockets/socket_accept/>socket_accept</a></li><li><a href=/php/sockets/socket_addrinfo_bind/>socket_addrinfo_bind</a></li><li><a href=/php/sockets/socket_addrinfo_connect/>socket_addrinfo_connect</a></li><li><a href=/php/sockets/socket_addrinfo_explain/>socket_addrinfo_explain</a></li><li><a href=/php/sockets/socket_addrinfo_lookup/>socket_addrinfo_lookup</a></li><li><a href=/php/sockets/socket_atmark/>socket_atmark</a></li><li><a href=/php/sockets/socket_bind/>socket_bind</a></li><li><a href=/php/sockets/socket_clear_error/>socket_clear_error</a></li><li><a href=/php/sockets/socket_close/>socket_close</a></li><li><a href=/php/sockets/socket_cmsg_space/>socket_cmsg_space</a></li><li><a href=/php/sockets/socket_connect/>socket_connect</a></li><li><a href=/php/sockets/socket_create/>socket_create</a></li><li><a href=/php/sockets/socket_create_listen/>socket_create_listen</a></li><li><a href=/php/sockets/socket_create_pair/>socket_create_pair</a></li><li><a href=/php/sockets/socket_export_stream/>socket_export_stream</a></li><li><a href=/php/sockets/socket_get_option/>socket_get_option</a></li><li><a href=/php/sockets/socket_getopt/>socket_getopt</a></li><li><a href=/php/sockets/socket_getpeername/>socket_getpeername</a></li><li><a href=/php/sockets/socket_getsockname/>socket_getsockname</a></li><li><a href=/php/sockets/socket_import_stream/>socket_import_stream</a></li><li><a href=/php/sockets/socket_last_error/>socket_last_error</a></li><li><a href=/php/sockets/socket_listen/>socket_listen</a></li><li><a href=/php/sockets/socket_read/>socket_read</a></li><li><a href=/php/sockets/socket_recv/>socket_recv</a></li><li><a href=/php/sockets/socket_recvfrom/>socket_recvfrom</a></li><li><a href=/php/sockets/socket_recvmsg/>socket_recvmsg</a></li><li><a href=/php/sockets/socket_select/>socket_select</a></li><li><a href=/php/sockets/socket_send/>socket_send</a></li><li><a href=/php/sockets/socket_sendmsg/>socket_sendmsg</a></li><li><a href=/php/sockets/socket_sendto/>socket_sendto</a></li><li><a href=/php/sockets/socket_set_block/>socket_set_block</a></li><li><a href=/php/sockets/socket_set_nonblock/>socket_set_nonblock</a></li><li><a href=/php/sockets/socket_set_option/>socket_set_option</a></li><li><a href=/php/sockets/socket_setopt/>socket_setopt</a></li><li><a href=/php/sockets/socket_shutdown/>socket_shutdown</a></li><li><a href=/php/sockets/socket_strerror/>socket_strerror</a></li><li><a href=/php/sockets/socket_write/>socket_write</a></li><li><a href=/php/sockets/socket_wsaprotocol_info_export/>socket_wsaprotocol_info_export</a></li><li><a href=/php/sockets/socket_wsaprotocol_info_import/>socket_wsaprotocol_info_import</a></li><li><a href=/php/sockets/socket_wsaprotocol_info_release/>socket_wsaprotocol_info_release</a></li></ul></div><h2>SPL</h2><div><ul><li><a href=/php/spl/class_implements/>class_implements</a></li><li><a href=/php/spl/class_parents/>class_parents</a></li><li><a href=/php/spl/class_uses/>class_uses</a></li><li><a href=/php/spl/iterator_apply/>iterator_apply</a></li><li><a href=/php/spl/iterator_count/>iterator_count</a></li><li><a href=/php/spl/iterator_to_array/>iterator_to_array</a></li><li><a href=/php/spl/spl_autoload/>spl_autoload</a></li><li><a href=/php/spl/spl_autoload_call/>spl_autoload_call</a></li><li><a href=/php/spl/spl_autoload_extensions/>spl_autoload_extensions</a></li><li><a href=/php/spl/spl_autoload_functions/>spl_autoload_functions</a></li><li><a href=/php/spl/spl_autoload_register/>spl_autoload_register</a></li><li><a href=/php/spl/spl_autoload_unregister/>spl_autoload_unregister</a></li><li><a href=/php/spl/spl_classes/>spl_classes</a></li><li><a href=/php/spl/spl_object_hash/>spl_object_hash</a></li><li><a href=/php/spl/spl_object_id/>spl_object_id</a></li></ul></div><h2>Stream</h2><div><ul><li><a href=/php/stream/stream_bucket_append/>stream_bucket_append</a></li><li><a href=/php/stream/stream_bucket_make_writeable/>stream_bucket_make_writeable</a></li><li><a href=/php/stream/stream_bucket_new/>stream_bucket_new</a></li><li><a href=/php/stream/stream_bucket_prepend/>stream_bucket_prepend</a></li><li><a href=/php/stream/stream_context_create/>stream_context_create</a></li><li><a href=/php/stream/stream_context_get_default/>stream_context_get_default</a></li><li><a href=/php/stream/stream_context_get_options/>stream_context_get_options</a></li><li><a href=/php/stream/stream_context_get_params/>stream_context_get_params</a></li><li><a href=/php/stream/stream_context_set_default/>stream_context_set_default</a></li><li><a href=/php/stream/stream_context_set_option/>stream_context_set_option</a></li><li><a href=/php/stream/stream_context_set_options/>stream_context_set_options</a></li><li><a href=/php/stream/stream_context_set_params/>stream_context_set_params</a></li><li><a href=/php/stream/stream_copy_to_stream/>stream_copy_to_stream</a></li><li><a href=/php/stream/stream_filter_append/>stream_filter_append</a></li><li><a href=/php/stream/stream_filter_prepend/>stream_filter_prepend</a></li><li><a href=/php/stream/stream_filter_register/>stream_filter_register</a></li><li><a href=/php/stream/stream_filter_remove/>stream_filter_remove</a></li><li><a href=/php/stream/stream_get_contents/>stream_get_contents</a></li><li><a href=/php/stream/stream_get_filters/>stream_get_filters</a></li><li><a href=/php/stream/stream_get_line/>stream_get_line</a></li><li><a href=/php/stream/stream_get_meta_data/>stream_get_meta_data</a></li><li><a href=/php/stream/stream_get_transports/>stream_get_transports</a></li><li><a href=/php/stream/stream_get_wrappers/>stream_get_wrappers</a></li><li><a href=/php/stream/stream_is_local/>stream_is_local</a></li><li><a href=/php/stream/stream_isatty/>stream_isatty</a></li><li><a href=/php/stream/stream_notification_callback/>stream_notification_callback</a></li><li><a href=/php/stream/stream_register_wrapper/>stream_register_wrapper</a></li><li><a href=/php/stream/stream_resolve_include_path/>stream_resolve_include_path</a></li><li><a href=/php/stream/stream_select/>stream_select</a></li><li><a href=/php/stream/stream_set_blocking/>stream_set_blocking</a></li><li><a href=/php/stream/stream_set_chunk_size/>stream_set_chunk_size</a></li><li><a href=/php/stream/stream_set_read_buffer/>stream_set_read_buffer</a></li><li><a href=/php/stream/stream_set_timeout/>stream_set_timeout</a></li><li><a href=/php/stream/stream_set_write_buffer/>stream_set_write_buffer</a></li><li><a href=/php/stream/stream_socket_accept/>stream_socket_accept</a></li><li><a href=/php/stream/stream_socket_client/>stream_socket_client</a></li><li><a href=/php/stream/stream_socket_enable_crypto/>stream_socket_enable_crypto</a></li><li><a href=/php/stream/stream_socket_get_name/>stream_socket_get_name</a></li><li><a href=/php/stream/stream_socket_pair/>stream_socket_pair</a></li><li><a href=/php/stream/stream_socket_recvfrom/>stream_socket_recvfrom</a></li><li><a href=/php/stream/stream_socket_sendto/>stream_socket_sendto</a></li><li><a href=/php/stream/stream_socket_server/>stream_socket_server</a></li><li><a href=/php/stream/stream_socket_shutdown/>stream_socket_shutdown</a></li><li><a href=/php/stream/stream_supports_lock/>stream_supports_lock</a></li><li><a href=/php/stream/stream_wrapper_register/>stream_wrapper_register</a></li><li><a href=/php/stream/stream_wrapper_restore/>stream_wrapper_restore</a></li><li><a href=/php/stream/stream_wrapper_unregister/>stream_wrapper_unregister</a></li></ul></div><h2>String</h2><div><ul><li><a href=/php/string/addcslashes/>addcslashes</a></li><li><a href=/php/string/addslashes/>addslashes</a></li><li><a href=/php/string/bin2hex/>bin2hex</a></li><li><a href=/php/string/chop/>chop</a></li><li><a href=/php/string/chr/>chr</a></li><li><a href=/php/string/chunk_split/>chunk_split</a></li><li><a href=/php/string/convert_uudecode/>convert_uudecode</a></li><li><a href=/php/string/convert_uuencode/>convert_uuencode</a></li><li><a href=/php/string/count_chars/>count_chars</a></li><li><a href=/php/string/crc32/>crc32</a></li><li><a href=/php/string/crypt/>crypt</a></li><li><a href=/php/string/echo/>echo</a></li><li><a href=/php/string/explode/>explode</a></li><li><a href=/php/string/fprintf/>fprintf</a></li><li><a href=/php/string/get_html_translation_table/>get_html_translation_table</a></li><li><a href=/php/string/hebrev/>hebrev</a></li><li><a href=/php/string/hebrevc/>hebrevc</a></li><li><a href=/php/string/hex2bin/>hex2bin</a></li><li><a href=/php/string/html_entity_decode/>html_entity_decode</a></li><li><a href=/php/string/htmlentities/>htmlentities</a></li><li><a href=/php/string/htmlspecialchars/>htmlspecialchars</a></li><li><a href=/php/string/htmlspecialchars_decode/>htmlspecialchars_decode</a></li><li><a href=/php/string/implode/>implode</a></li><li><a href=/php/string/join/>join</a></li><li><a href=/php/string/lcfirst/>lcfirst</a></li><li><a href=/php/string/levenshtein/>levenshtein</a></li><li><a href=/php/string/localeconv/>localeconv</a></li><li><a href=/php/string/ltrim/>ltrim</a></li><li><a href=/php/string/md5/>md5</a></li><li><a href=/php/string/md5_file/>md5_file</a></li><li><a href=/php/string/metaphone/>metaphone</a></li><li><a href=/php/string/nl_langinfo/>nl_langinfo</a></li><li><a href=/php/string/nl2br/>nl2br</a></li><li><a href=/php/string/number_format/>number_format</a></li><li><a href=/php/string/ord/>ord</a></li><li><a href=/php/string/parse_str/>parse_str</a></li><li><a href=/php/string/print/>print</a></li><li><a href=/php/string/printf/>printf</a></li><li><a href=/php/string/quoted_printable_decode/>quoted_printable_decode</a></li><li><a href=/php/string/quoted_printable_encode/>quoted_printable_encode</a></li><li><a href=/php/string/quotemeta/>quotemeta</a></li><li><a href=/php/string/rtrim/>rtrim</a></li><li><a href=/php/string/setlocale/>setlocale</a></li><li><a href=/php/string/sha1/>sha1</a></li><li><a href=/php/string/sha1_file/>sha1_file</a></li><li><a href=/php/string/similar_text/>similar_text</a></li><li><a href=/php/string/soundex/>soundex</a></li><li><a href=/php/string/sprintf/>sprintf</a></li><li><a href=/php/string/sscanf/>sscanf</a></li><li><a href=/php/string/str_contains/>str_contains</a></li><li><a href=/php/string/str_decrement/>str_decrement</a></li><li><a href=/php/string/str_ends_with/>str_ends_with</a></li><li><a href=/php/string/str_getcsv/>str_getcsv</a></li><li><a href=/php/string/str_increment/>str_increment</a></li><li><a href=/php/string/str_ireplace/>str_ireplace</a></li><li><a href=/php/string/str_pad/>str_pad</a></li><li><a href=/php/string/str_repeat/>str_repeat</a></li><li><a href=/php/string/str_replace/>str_replace</a></li><li><a href=/php/string/str_rot13/>str_rot13</a></li><li><a href=/php/string/str_shuffle/>str_shuffle</a></li><li><a href=/php/string/str_split/>str_split</a></li><li><a href=/php/string/str_starts_with/>str_starts_with</a></li><li><a href=/php/string/str_word_count/>str_word_count</a></li><li><a href=/php/string/strcasecmp/>strcasecmp</a></li><li><a href=/php/string/strchr/>strchr</a></li><li><a href=/php/string/strcmp/>strcmp</a></li><li><a href=/php/string/strcoll/>strcoll</a></li><li><a href=/php/string/strcspn/>strcspn</a></li><li><a href=/php/string/strip_tags/>strip_tags</a></li><li><a href=/php/string/stripcslashes/>stripcslashes</a></li><li><a href=/php/string/stripos/>stripos</a></li><li><a href=/php/string/stripslashes/>stripslashes</a></li><li><a href=/php/string/stristr/>stristr</a></li><li><a href=/php/string/strlen/>strlen</a></li><li><a href=/php/string/strnatcasecmp/>strnatcasecmp</a></li><li><a href=/php/string/strnatcmp/>strnatcmp</a></li><li><a href=/php/string/strncasecmp/>strncasecmp</a></li><li><a href=/php/string/strncmp/>strncmp</a></li><li><a href=/php/string/strpbrk/>strpbrk</a></li><li><a href=/php/string/strpos/>strpos</a></li><li><a href=/php/string/strrchr/>strrchr</a></li><li><a href=/php/string/strrev/>strrev</a></li><li><a href=/php/string/strripos/>strripos</a></li><li><a href=/php/string/strrpos/>strrpos</a></li><li><a href=/php/string/strspn/>strspn</a></li><li><a href=/php/string/strstr/>strstr</a></li><li><a href=/php/string/strtok/>strtok</a></li><li><a href=/php/string/strtolower/>strtolower</a></li><li><a href=/php/string/strtoupper/>strtoupper</a></li><li><a href=/php/string/strtr/>strtr</a></li><li><a href=/php/string/substr/>substr</a></li><li><a href=/php/string/substr_compare/>substr_compare</a></li><li><a href=/php/string/substr_count/>substr_count</a></li><li><a href=/php/string/substr_replace/>substr_replace</a></li><li><a href=/php/string/trim/>trim</a></li><li><a href=/php/string/ucfirst/>ucfirst</a></li><li><a href=/php/string/ucwords/>ucwords</a></li><li><a href=/php/string/vfprintf/>vfprintf</a></li><li><a href=/php/string/vprintf/>vprintf</a></li><li><a href=/php/string/vsprintf/>vsprintf</a></li><li><a href=/php/string/wordwrap/>wordwrap</a></li></ul></div><h2>Tokenizer</h2><div><ul><li><a href=/php/tokenizer/token_get_all/>token_get_all</a></li><li><a href=/php/tokenizer/token_name/>token_name</a></li></ul></div><h2>URL</h2><div><ul><li><a href=/php/url/base64_decode/>base64_decode</a></li><li><a href=/php/url/base64_encode/>base64_encode</a></li><li><a href=/php/url/get_headers/>get_headers</a></li><li><a href=/php/url/get_meta_tags/>get_meta_tags</a></li><li><a href=/php/url/http_build_query/>http_build_query</a></li><li><a href=/php/url/parse_url/>parse_url</a></li><li><a href=/php/url/rawurldecode/>rawurldecode</a></li><li><a href=/php/url/rawurlencode/>rawurlencode</a></li><li><a href=/php/url/urldecode/>urldecode</a></li><li><a href=/php/url/urlencode/>urlencode</a></li></ul></div><h2>Variable Handling</h2><div><ul><li><a href=/php/variable-handling/boolval/>boolval</a></li><li><a href=/php/variable-handling/debug_zval_dump/>debug_zval_dump</a></li><li><a href=/php/variable-handling/doubleval/>doubleval</a></li><li><a href=/php/variable-handling/empty/>empty</a></li><li><a href=/php/variable-handling/floatval/>floatval</a></li><li><a href=/php/variable-handling/get_debug_type/>get_debug_type</a></li><li><a href=/php/variable-handling/get_defined_vars/>get_defined_vars</a></li><li><a href=/php/variable-handling/get_resource_id/>get_resource_id</a></li><li><a href=/php/variable-handling/get_resource_type/>get_resource_type</a></li><li><a href=/php/variable-handling/gettype/>gettype</a></li><li><a href=/php/variable-handling/intval/>intval</a></li><li><a href=/php/variable-handling/is_array/>is_array</a></li><li><a href=/php/variable-handling/is_bool/>is_bool</a></li><li><a href=/php/variable-handling/is_callable/>is_callable</a></li><li><a href=/php/variable-handling/is_countable/>is_countable</a></li><li><a href=/php/variable-handling/is_double/>is_double</a></li><li><a href=/php/variable-handling/is_float/>is_float</a></li><li><a href=/php/variable-handling/is_int/>is_int</a></li><li><a href=/php/variable-handling/is_integer/>is_integer</a></li><li><a href=/php/variable-handling/is_iterable/>is_iterable</a></li><li><a href=/php/variable-handling/is_long/>is_long</a></li><li><a href=/php/variable-handling/is_null/>is_null</a></li><li><a href=/php/variable-handling/is_numeric/>is_numeric</a></li><li><a href=/php/variable-handling/is_object/>is_object</a></li><li><a href=/php/variable-handling/is_real/>is_real</a></li><li><a href=/php/variable-handling/is_resource/>is_resource</a></li><li><a href=/php/variable-handling/is_scalar/>is_scalar</a></li><li><a href=/php/variable-handling/is_string/>is_string</a></li><li><a href=/php/variable-handling/isset/>isset</a></li><li><a href=/php/variable-handling/print_r/>print_r</a></li><li><a href=/php/variable-handling/serialize/>serialize</a></li><li><a href=/php/variable-handling/settype/>settype</a></li><li><a href=/php/variable-handling/strval/>strval</a></li><li><a href=/php/variable-handling/unserialize/>unserialize</a></li><li><a href=/php/variable-handling/unset/>unset</a></li><li><a href=/php/variable-handling/var_dump/>var_dump</a></li><li><a href=/php/variable-handling/var_export/>var_export</a></li></ul></div><h2>zlib</h2><div><ul><li><a href=/php/zlib/deflate_add/>deflate_add</a></li><li><a href=/php/zlib/deflate_init/>deflate_init</a></li><li><a href=/php/zlib/gzclose/>gzclose</a></li><li><a href=/php/zlib/gzcompress/>gzcompress</a></li><li><a href=/php/zlib/gzdecode/>gzdecode</a></li><li><a href=/php/zlib/gzdeflate/>gzdeflate</a></li><li><a href=/php/zlib/gzencode/>gzencode</a></li><li><a href=/php/zlib/gzeof/>gzeof</a></li><li><a href=/php/zlib/gzfile/>gzfile</a></li><li><a href=/php/zlib/gzgetc/>gzgetc</a></li><li><a href=/php/zlib/gzgets/>gzgets</a></li><li><a href=/php/zlib/gzinflate/>gzinflate</a></li><li><a href=/php/zlib/gzopen/>gzopen</a></li><li><a href=/php/zlib/gzpassthru/>gzpassthru</a></li><li><a href=/php/zlib/gzputs/>gzputs</a></li><li><a href=/php/zlib/gzread/>gzread</a></li><li><a href=/php/zlib/gzrewind/>gzrewind</a></li><li><a href=/php/zlib/gzseek/>gzseek</a></li><li><a href=/php/zlib/gztell/>gztell</a></li><li><a href=/php/zlib/gzuncompress/>gzuncompress</a></li><li><a href=/php/zlib/gzwrite/>gzwrite</a></li><li><a href=/php/zlib/inflate_add/>inflate_add</a></li><li><a href=/php/zlib/inflate_get_read_len/>inflate_get_read_len</a></li><li><a href=/php/zlib/inflate_get_status/>inflate_get_status</a></li><li><a href=/php/zlib/inflate_init/>inflate_init</a></li><li><a href=/php/zlib/ob_gzhandler/>ob_gzhandler</a></li><li><a href=/php/zlib/readgzfile/>readgzfile</a></li><li><a href=/php/zlib/zlib_decode/>zlib_decode</a></li><li><a href=/php/zlib/zlib_encode/>zlib_encode</a></li><li><a href=/php/zlib/zlib_get_coding_type/>zlib_get_coding_type</a></li></ul></div></div><div class=h1><a id=switch-svg>SVG</a></div><div id=list-svg><h2>Overview</h2><div><ul><li><a href=/svg/>Overview</a></li></ul></div><h2>Attributes</h2><div><ul><li><a href=/svg/attributes/accumulate/>accumulate</a></li><li><a href=/svg/attributes/additive/>additive</a></li><li><a href=/svg/attributes/amplitude/>amplitude</a></li><li><a href=/svg/attributes/attributename/>attributeName</a></li><li><a href=/svg/attributes/azimuth/>azimuth</a></li><li><a href=/svg/attributes/basefrequency/>baseFrequency</a></li><li><a href=/svg/attributes/begin/>begin</a></li><li><a href=/svg/attributes/bias/>bias</a></li><li><a href=/svg/attributes/by/>by</a></li><li><a href=/svg/attributes/calcmode/>calcMode</a></li><li><a href=/svg/attributes/clippathunits/>clipPathUnits</a></li><li><a href=/svg/attributes/crossorigin/>crossorigin</a></li><li><a href=/svg/attributes/cx/>cx</a></li><li><a href=/svg/attributes/cy/>cy</a></li><li><a href=/svg/attributes/d/>d</a></li><li><a href=/svg/attributes/diffuseconstant/>diffuseConstant</a></li><li><a href=/svg/attributes/divisor/>divisor</a></li><li><a href=/svg/attributes/download/>download</a></li><li><a href=/svg/attributes/dur/>dur</a></li><li><a href=/svg/attributes/dx/>dx</a></li><li><a href=/svg/attributes/dy/>dy</a></li><li><a href=/svg/attributes/edgemode/>edgeMode</a></li><li><a href=/svg/attributes/elevation/>elevation</a></li><li><a href=/svg/attributes/end/>end</a></li><li><a href=/svg/attributes/exponent/>exponent</a></li><li><a href=/svg/attributes/fill/>fill</a></li><li><a href=/svg/attributes/filterunits/>filterUnits</a></li><li><a href=/svg/attributes/flood-color/>flood-color</a></li><li><a href=/svg/attributes/flood-opacity/>flood-opacity</a></li><li><a href=/svg/attributes/fr/>fr</a></li><li><a href=/svg/attributes/from/>from</a></li><li><a href=/svg/attributes/fx/>fx</a></li><li><a href=/svg/attributes/fy/>fy</a></li><li><a href=/svg/attributes/gradienttransform/>gradientTransform</a></li><li><a href=/svg/attributes/gradientunits/>gradientUnits</a></li><li><a href=/svg/attributes/height/>height</a></li><li><a href=/svg/attributes/href/>href</a></li><li><a href=/svg/attributes/hreflang/>hreflang</a></li><li><a href=/svg/attributes/id/>id</a></li><li><a href=/svg/attributes/in/>in</a></li><li><a href=/svg/attributes/in2/>in2</a></li><li><a href=/svg/attributes/intercept/>intercept</a></li><li><a href=/svg/attributes/k1/>k1</a></li><li><a href=/svg/attributes/k2/>k2</a></li><li><a href=/svg/attributes/k3/>k3</a></li><li><a href=/svg/attributes/k4/>k4</a></li><li><a href=/svg/attributes/kernelmatrix/>kernelMatrix</a></li><li><a href=/svg/attributes/keypoints/>keyPoints</a></li><li><a href=/svg/attributes/keysplines/>keySplines</a></li><li><a href=/svg/attributes/keytimes/>keyTimes</a></li><li><a href=/svg/attributes/lengthadjust/>lengthAdjust</a></li><li><a href=/svg/attributes/limitingconeangle/>limitingConeAngle</a></li><li><a href=/svg/attributes/markerheight/>markerHeight</a></li><li><a href=/svg/attributes/markerunits/>markerUnits</a></li><li><a href=/svg/attributes/markerwidth/>markerWidth</a></li><li><a href=/svg/attributes/maskcontentunits/>maskContentUnits</a></li><li><a href=/svg/attributes/maskunits/>maskUnits</a></li><li><a href=/svg/attributes/max/>max</a></li><li><a href=/svg/attributes/media/>media</a></li><li><a href=/svg/attributes/method/>method</a></li><li><a href=/svg/attributes/min/>min</a></li><li><a href=/svg/attributes/mode/>mode</a></li><li><a href=/svg/attributes/no-composite/>no-composite</a></li><li><a href=/svg/attributes/numoctaves/>numOctaves</a></li><li><a href=/svg/attributes/offset/>offset</a></li><li><a href=/svg/attributes/onbegin/>onbegin</a></li><li><a href=/svg/attributes/onend/>onend</a></li><li><a href=/svg/attributes/onrepeat/>onrepeat</a></li><li><a href=/svg/attributes/operator/>operator</a></li><li><a href=/svg/attributes/order/>order</a></li><li><a href=/svg/attributes/orient/>orient</a></li><li><a href=/svg/attributes/origin/>origin</a></li><li><a href=/svg/attributes/path/>path</a></li><li><a href=/svg/attributes/pathlength/>pathLength</a></li><li><a href=/svg/attributes/patterncontentunits/>patternContentUnits</a></li><li><a href=/svg/attributes/patterntransform/>patternTransform</a></li><li><a href=/svg/attributes/patternunits/>patternUnits</a></li><li><a href=/svg/attributes/ping/>ping</a></li><li><a href=/svg/attributes/points/>points</a></li><li><a href=/svg/attributes/pointsatx/>pointsAtX</a></li><li><a href=/svg/attributes/pointsaty/>pointsAtY</a></li><li><a href=/svg/attributes/pointsatz/>pointsAtZ</a></li><li><a href=/svg/attributes/preservealpha/>preserveAlpha</a></li><li><
5a2c
a href=/svg/attributes/preserveaspectratio/>preserveAspectRatio</a></li><li><a href=/svg/attributes/primitiveunits/>primitiveUnits</a></li><li><a href=/svg/attributes/r/>r</a></li><li><a href=/svg/attributes/radius/>radius</a></li><li><a href=/svg/attributes/referrerpolicy/>referrerPolicy</a></li><li><a href=/svg/attributes/refx/>refx</a></li><li><a href=/svg/attributes/refy/>refy</a></li><li><a href=/svg/attributes/rel/>rel</a></li><li><a href=/svg/attributes/repeatcount/>repeatCount</a></li><li><a href=/svg/attributes/repeatdur/>repeatDur</a></li><li><a href=/svg/attributes/requiredextensions/>requiredExtensions</a></li><li><a href=/svg/attributes/restart/>restart</a></li><li><a href=/svg/attributes/rotate/>rotate</a></li><li><a href=/svg/attributes/rx/>rx</a></li><li><a href=/svg/attributes/ry/>ry</a></li><li><a href=/svg/attributes/scale/>scale</a></li><li><a href=/svg/attributes/seed/>seed</a></li><li><a href=/svg/attributes/side/>side</a></li><li><a href=/svg/attributes/slope/>slope</a></li><li><a href=/svg/attributes/spacing/>spacing</a></li><li><a href=/svg/attributes/specularconstant/>specularConstant</a></li><li><a href=/svg/attributes/specularexponent/>specularExponent</a></li><li><a href=/svg/attributes/spreadmethod/>spreadMethod</a></li><li><a href=/svg/attributes/startoffset/>startoffset</a></li><li><a href=/svg/attributes/stddeviation/>stdDeviation</a></li><li><a href=/svg/attributes/stitchtiles/>stitchTiles</a></li><li><a href=/svg/attributes/stop-color/>stop-color</a></li><li><a href=/svg/attributes/stop-opacity/>stop-opacity</a></li><li><a href=/svg/attributes/surfacescale/>surfaceScale</a></li><li><a href=/svg/attributes/systemlanguage/>systemLanguage</a></li><li><a href=/svg/attributes/tabindex/>tabindex</a></li><li><a href=/svg/attributes/tablevalues/>tableValues</a></li><li><a href=/svg/attributes/target/>target</a></li><li><a href=/svg/attributes/targetx/>targetX</a></li><li><a href=/svg/attributes/targety/>targetY</a></li><li><a href=/svg/attributes/textlength/>textLength</a></li><li><a href=/svg/attributes/title/>title</a></li><li><a href=/svg/attributes/to/>to</a></li><li><a href=/svg/attributes/transform/>transform</a></li><li><a href=/svg/attributes/type/>type</a></li><li><a href=/svg/attributes/values/>values</a></li><li><a href=/svg/attributes/viewbox/>viewBox</a></li><li><a href=/svg/attributes/width/>width</a></li><li><a href=/svg/attributes/x/>x</a></li><li><a href=/svg/attributes/x1/>x1</a></li><li><a href=/svg/attributes/x2/>x2</a></li><li><a href=/svg/attributes/xchannelselector/>xChannelSelector</a></li><li><a href=/svg/attributes/y/>y</a></li><li><a href=/svg/attributes/y1/>y1</a></li><li><a href=/svg/attributes/y2/>y2</a></li><li><a href=/svg/attributes/ychannelselector/>yChannelSelector</a></li><li><a href=/svg/attributes/z/>z</a></li><li><a href=/svg/attributes/zoomandpan/>zoomAndPan</a></li></ul></div><h2>Elements</h2><div><ul><li><a href=/svg/elements/a/>a</a></li><li><a href=/svg/elements/animate/>animate</a></li><li><a href=/svg/elements/animatemotion/>animateMotion</a></li><li><a href=/svg/elements/animatetransform/>animateTransform</a></li><li><a href=/svg/elements/circle/>circle</a></li><li><a href=/svg/elements/clippath/>clipPath</a></li><li><a href=/svg/elements/defs/>defs</a></li><li><a href=/svg/elements/desc/>desc</a></li><li><a href=/svg/elements/discard/>discard</a></li><li><a href=/svg/elements/ellipse/>ellipse</a></li><li><a href=/svg/elements/feblend/>feBlend</a></li><li><a href=/svg/elements/fecolormatrix/>feColorMatrix</a></li><li><a href=/svg/elements/fecomponenttransfer/>feComponentTransfer</a></li><li><a href=/svg/elements/fecomposite/>feComposite</a></li><li><a href=/svg/elements/feconvolvematrix/>feConvolveMatrix</a></li><li><a href=/svg/elements/fediffuselighting/>feDiffuseLighting</a></li><li><a href=/svg/elements/fedisplacementmap/>feDisplacementMap</a></li><li><a href=/svg/elements/fedistantlight/>feDistantLight</a></li><li><a href=/svg/elements/fedropshadow/>feDropShadow</a></li><li><a href=/svg/elements/feflood/>feFlood</a></li><li><a href=/svg/elements/fefunca/>feFuncA</a></li><li><a href=/svg/elements/fefuncb/>feFuncB</a></li><li><a href=/svg/elements/fefuncg/>feFuncG</a></li><li><a href=/svg/elements/fefuncr/>feFuncR</a></li><li><a href=/svg/elements/fegaussianblur/>feGaussianBlur</a></li><li><a href=/svg/elements/feimage/>feImage</a></li><li><a href=/svg/elements/femerge/>feMerge</a></li><li><a href=/svg/elements/femergenode/>feMergeNode</a></li><li><a href=/svg/elements/femorphology/>feMorphology</a></li><li><a href=/svg/elements/feoffset/>feOffset</a></li><li><a href=/svg/elements/fepointlight/>fePointLight</a></li><li><a href=/svg/elements/fespecularlighting/>feSpecularLighting</a></li><li><a href=/svg/elements/fespotlight/>feSpotLight</a></li><li><a href=/svg/elements/fetile/>feTile</a></li><li><a href=/svg/elements/feturbulence/>feTurbulence</a></li><li><a href=/svg/elements/filter/>filter</a></li><li><a href=/svg/elements/foreignobject/>foreignObject</a></li><li><a href=/svg/elements/g/>g</a></li><li><a href=/svg/elements/image/>image</a></li><li><a href=/svg/elements/line/>line</a></li><li><a href=/svg/elements/lineargradient/>linearGradient</a></li><li><a href=/svg/elements/marker/>marker</a></li><li><a href=/svg/elements/mask/>mask</a></li><li><a href=/svg/elements/metadata/>metadata</a></li><li><a href=/svg/elements/mpath/>mpath</a></li><li><a href=/svg/elements/path/>path</a></li><li><a href=/svg/elements/pattern/>pattern</a></li><li><a href=/svg/elements/polygon/>polygon</a></li><li><a href=/svg/elements/polyline/>polyline</a></li><li><a href=/svg/elements/radialgradient/>radialGradient</a></li><li><a href=/svg/elements/rect/>rect</a></li><li><a href=/svg/elements/script/>script</a></li><li><a href=/svg/elements/set/>set</a></li><li><a href=/svg/elements/stop/>stop</a></li><li><a href=/svg/elements/style/>style</a></li><li><a href=/svg/elements/svg/>svg</a></li><li><a href=/svg/elements/switch/>switch</a></li><li><a href=/svg/elements/symbol/>symbol</a></li><li><a href=/svg/elements/text/>text</a></li><li><a href=/svg/elements/textpath/>textPath</a></li><li><a href=/svg/elements/title/>title</a></li><li><a href=/svg/elements/tspan/>tspan</a></li><li><a href=/svg/elements/unknown/>unknown</a></li><li><a href=/svg/elements/use/>use</a></li><li><a href=/svg/elements/view/>view</a></li></ul></div><h2>Values</h2><div><ul><li><a href=/svg/values/_blank/>_blank</a></li><li><a href=/svg/values/_parent/>_parent</a></li><li><a href=/svg/values/_self/>_self</a></li><li><a href=/svg/values/_top/>_top</a></li><li><a href=/svg/values/a/>A</a></li><li><a href=/svg/values/align/>align</a></li><li><a href=/svg/values/alpha-value/>alpha-value</a></li><li><a href=/svg/values/always/>always</a></li><li><a href=/svg/values/angle/>angle</a></li><li><a href=/svg/values/anonymous/>anonymous</a></li><li><a href=/svg/values/arithmetic/>arithmetic</a></li><li><a href=/svg/values/atop/>atop</a></li><li><a href=/svg/values/auto/>auto</a></li><li><a href=/svg/values/auto-start-reverse/>auto-start-reverse</a></li><li><a href=/svg/values/auto-reverse/>auto-reverse</a></li><li><a href=/svg/values/b/>B</a></li><li><a href=/svg/values/backgroundalpha/>BackgroundAlpha</a></li><li><a href=/svg/values/backgroundimage/>BackgroundImage</a></li><li><a href=/svg/values/begin-value-list/>begin-value-list</a></li><li><a href=/svg/values/blend-mode/>blend-mode</a></li><li><a href=/svg/values/bottom/>bottom</a></li><li><a href=/svg/values/center/>center</a></li><li><a href=/svg/values/clock-value/>clock-value</a></li><li><a href=/svg/values/color/>color</a></li><li><a href=/svg/values/control-point/>control-point</a></li><li><a href=/svg/values/currentcolor/>currentColor</a></li><li><a href=/svg/values/default/>default</a></li><li><a href=/svg/values/dilate/>dilate</a></li><li><a href=/svg/values/disable/>disable</a></li><li><a href=/svg/values/discrete/>discrete</a></li><li><a href=/svg/values/duplicate/>duplicate</a></li><li><a href=/svg/values/empty-string/>empty-string</a></li><li><a href=/svg/values/end-value-list/>end-value-list</a></li><li><a href=/svg/values/erode/>erode</a></li><li><a href=/svg/values/exact/>exact</a></li><li><a href=/svg/values/false/>false</a></li><li><a href=/svg/values/fillpaint/>FillPaint</a></li><li><a href=/svg/values/filter-primitive-reference/>filter-primitive-reference</a></li><li><a href=/svg/values/fractalnoise/>fractalNoise</a></li><li><a href=/svg/values/freeze/>freeze</a></li><li><a href=/svg/values/g/>G</a></li><li><a href=/svg/values/gamma/>gamma</a></li><li><a href=/svg/values/height/>height</a></li><li><a href=/svg/values/huerotate/>hueRotate</a></li><li><a href=/svg/values/icccolor/>icccolor</a></li><li><a href=/svg/values/id/>id</a></li><li><a href=/svg/values/identity/>identity</a></li><li><a href=/svg/values/in/>in</a></li><li><a href=/svg/values/indefinite/>indefinite</a></li><li><a href=/svg/values/integer/>integer</a></li><li><a href=/svg/values/left/>left</a></li><li><a href=/svg/values/length/>length</a></li><li><a href=/svg/values/length-percentage/>length-percentage</a></li><li><a href=/svg/values/lighter/>lighter</a></li><li><a href=/svg/values/linear/>linear</a></li><li><a href=/svg/values/list/>list</a></li><li><a href=/svg/values/list-of-numbers/>list-of-numbers</a></li><li><a href=/svg/values/luminancetoalpha/>luminanceToAlpha</a></li><li><a href=/svg/values/magnify/>magnify</a></li><li><a href=/svg/values/matrix/>matrix</a></li><li><a href=/svg/values/media/>media</a></li><li><a href=/svg/values/meetorslice/>meetOrSlice</a></li><li><a href=/svg/values/min-x/>min-x</a></li><li><a href=/svg/values/min-y/>min-y</a></li><li><a href=/svg/values/name/>name</a></li><li><a href=/svg/values/never/>never</a></li><li><a href=/svg/values/no-composite/>no-composite</a></li><li><a href=/svg/values/no-referrer/>no-referrer</a></li><li><a href=/svg/values/no-referrer-when-downgrade/>no-referrer-when-downgrade</a></li><li><a href=/svg/values/none/>none</a></li><li><a href=/svg/values/nostitch/>noStitch</a></li><li><a href=/svg/values/number/>number</a></li><li><a href=/svg/values/number-optional-number/>number-optional-number</a></li><li><a href=/svg/values/objectboundingbox/>objectBoundingBox</a></li><li><a href=/svg/values/origin/>origin</a></li><li><a href=/svg/values/origin-when-cross-origin/>origin-when-cross-origin</a></li><li><a href=/svg/values/out/>out</a></li><li><a href=/svg/values/over/>over</a></li><li><a href=/svg/values/paced/>paced</a></li><li><a href=/svg/values/pad/>pad</a></li><li><a href=/svg/values/path-data/>path-data</a></li><li><a href=/svg/values/percentage/>percentage</a></li><li><a href=/svg/values/points/>points</a></li><li><a href=/svg/values/r/>R</a></li><li><a href=/svg/values/reflect/>reflect</a></li><li><a href=/svg/values/remove/>remove</a></li><li><a href=/svg/values/repeat/>repeat</a></li><li><a href=/svg/values/replace/>replace</a></li><li><a href=/svg/values/right/>right</a></li><li><a href=/svg/values/rotate/>rotate</a></li><li><a href=/svg/values/same-origin/>same-origin</a></li><li><a href=/svg/values/saturate/>saturate</a></li><li><a href=/svg/values/scale/>scale</a></li><li><a href=/svg/values/script/>script</a></li><li><a href=/svg/values/set-of-comma-separated-tokens/>set-of-comma-separated-tokens</a></li><li><a href=/svg/values/set-of-space-separated-tokens/>set-of-space-separated-tokens</a></li><li><a href=/svg/values/skewx/>skewx</a></li><li><a href=/svg/values/skewy/>skewy</a></li><li><a href=/svg/values/sourcealpha/>SourceAlpha</a></li><li><a href=/svg/values/sourcegraphic/>SourceGraphic</a></li><li><a href=/svg/values/spacing/>spacing</a></li><li><a href=/svg/values/spacingandglyphs/>spacingAndGlyphs</a></li><li><a href=/svg/values/spline/>spline</a></li><li><a href=/svg/values/stitch/>stitch</a></li><li><a href=/svg/values/stretch/>stretch</a></li><li><a href=/svg/values/strict-origin/>strict-origin</a></li><li><a href=/svg/values/strict-origin-when-cross-origin/>strict-origin-when-cross-origin</a></li><li><a href=/svg/values/string/>string</a></li><li><a href=/svg/values/strokepaint/>StrokePaint</a></li><li><a href=/svg/values/strokewidth/>strokeWidth</a></li><li><a href=/svg/values/sum/>sum</a></li><li><a href=/svg/values/table/>table</a></li><li><a href=/svg/values/tokens/>tokens</a></li><li><a href=/svg/values/top/>top</a></li><li><a href=/svg/values/transform-list/>transform-list</a></li><li><a href=/svg/values/translate/>translate</a></li><li><a href=/svg/values/true/>true</a></li><li><a href=/svg/values/turbulence/>turbulence</a></li><li><a href=/svg/values/unsafe-url/>unsafe-url</a></li><li><a href=/svg/values/url/>url</a></li><li><a href=/svg/values/use-credentials/>use-credentials</a></li><li><a href=/svg/values/userspaceonuse/>userSpaceOnUse</a></li><li><a href=/svg/values/valid-integer/>valid-integer</a></li><li><a href=/svg/values/value/>value</a></li><li><a href=/svg/values/whennotactive/>whenNotActive</a></li><li><a href=/svg/values/width/>width</a></li><li><a href=/svg/values/wrap/>wrap</a></li><li><a href=/svg/values/xml-name/>XML-Name</a></li><li><a href=/svg/values/xor/>xor</a></li></ul></div></div><div class=h1><a id=switch-applications>APPLICATIONS</a></div><div id=list-applications><h2>Overview</h2><div><ul><li><a href=/applications/>Overview</a></li></ul></div><h2>Bible</h2><div><ul><li><a href=/applications/Bible-passages/>Bible Passages</a></li><li><a href=/applications/Bible-pictures/>Bible Pictures</a></li><li><a href=/applications/Jesus-loves-the-little-children/>Jesus Loves the Little Children</a></li><li><a href=/applications/merry-Christmas/>Merry Christmas</a></li><li><a href=/applications/one-man-one-woman-one-lifetime/>One Man. One Woman. One Lifetime.</a></li><li><a href=/applications/The-Armor-of-God/>The Armor of God</a></li></ul></div><h2>Cards</h2><div><ul><li><a href=/applications/euchre/>Euchre</a></li><li><a href=/applications/sevens/>Sevens</a></li><li><a href=/applications/solitaire/>Solitaire</a></li></ul></div><h2>LEGO</h2><div><ul><li><a href=/applications/lego-cannonball-bingo/>LEGO Cannonball Bingo</a></li><li><a href=/applications/lego-pandamonium/>LEGO Pandamonium</a></li><li><a href=/applications/lego-pirate-plunder/>LEGO Pirate Plunder</a></li><li><a href=/applications/lego-the-machine/>LEGO The Machine</a></li></ul></div><h2>Other</h2><div><ul><li><a href=/applications/miniature-golf/>Miniature Golf</a></li><li><a href=/applications/space-station/>Space Station</a></li></ul></div></div><div class=h1><a href=/editor/>EDITOR</a></div><div class=h1><a href=/favicon/>FAVICON</a></div><div class=h1><a href=/htaccess/>.HTACCESS</a></div><div class=h1><a href=/acme.sh/>ACME.SH</a></div><div class=h1><a id=switch-flash>FLASH</a></div><div id=list-flash><div class=h2><a href=/flash/detect/>DETECT</a></div><div class=h2><a id=switch-flash-actionscript>ACTIONSCRIPT</a></div><div id=list-flash-actionscript><h3>Overview</h3><div><ul><li><a href=/flash/actionscript/>Overview</a></li></ul></div><h3>Assets</h3><div><ul><li><a href=/flash/actionscript/embed/>Embed</a></li><li><a href=/flash/actionscript/load/>Load</a></li></ul></div></div><div class=h2><a id=switch-flash-as3dmod>AS3DMOD</a></div><div id=list-flash-as3dmod><h3>Overview</h3><div><ul><li><a href=/flash/as3dmod/>Overview</a></li></ul></div><h3>Modifiers</h3><div><ul><li><a href=/flash/as3dmod/bend/>Bend</a></li><li><a href=/flash/as3dmod/bloat/>Bloat</a></li><li><a href=/flash/as3dmod/cloth/>Cloth</a></li><li><a href=/flash/as3dmod/noise/>Noise</a></li><li><a href=/flash/as3dmod/perlin/>Perlin</a></li><li><a href=/flash/as3dmod/pivot/>Pivot</a></li><li><a href=/flash/as3dmod/skew/>Skew</a></li><li><a href=/flash/as3dmod/taper/>Taper</a></li><li><a href=/flash/as3dmod/twist/>Twist</a></li></ul></div><h3>Other</h3><div><ul><li><a href=/flash/as3dmod/flag/>Flag</a></li></ul></div></div><div class=h2><a href=/flash/flartoolkit/>FLARTOOLKIT</a></div><div class=h2><a id=switch-flash-jiglibflash>JIGLIBFLASH</a></div><div id=list-flash-jiglibflash><h3>Overview</h3><div><ul><li><a href=/flash/jiglibflash/>Overview</a></li></ul></div><h3>Objects</h3><div><ul><li><a href=/flash/jiglibflash/jbox/>JBox</a></li><li><a href=/flash/jiglibflash/jcapsule/>JCapsule</a></li><li><a href=/flash/jiglibflash/jplane/>JPlane</a></li><li><a href=/flash/jiglibflash/jsphere/>JSphere</a></li></ul></div><h3>Other</h3><div><ul><li><a href=/flash/jiglibflash/physics/>Physics</a></li></ul></div></div><div class=h2><a id=switch-flash-papervision3d>PAPERVISION3D</a></div><div id=list-flash-papervision3d><h3>Overview</h3><div><ul><li><a href=/flash/papervision3d/>Overview</a></li></ul></div><h3>Install</h3><div><ul><li><a href=/flash/papervision3d/install/>Install</a></li></ul></div><h3>Example</h3><div><ul><li><a href=/flash/papervision3d/1/>1</a></li><li><a href=/flash/papervision3d/2/>2</a></li><li><a href=/flash/papervision3d/3/>3</a></li><li><a href=/flash/papervision3d/4/>4</a></li><li><a href=/flash/papervision3d/5/>5</a></li></ul></div><h3>Cameras</h3><div><ul><li><a href=/flash/papervision3d/camera3d/>Camera3D</a></li><li><a href=/flash/papervision3d/debugcamera3d/>DebugCamera3D</a></li><li><a href=/flash/papervision3d/springcamera3d/>SpringCamera3D</a></li></ul></div><h3>Core</h3><div><ul><li><a href=/flash/papervision3d/lines3d/>Lines3D</a></li><li><a href=/flash/papervision3d/fogfilter/>FogFilter</a></li></ul></div><h3>Light</h3><div><ul><li><a href=/flash/papervision3d/pointlight3d/>PointLight3D</a></li></ul></div><h3>Materials</h3><div><ul><li><a href=/flash/papervision3d/bitmapfilematerial/>BitmapFileMaterial</a></li><li><a href=/flash/papervision3d/bitmapmaterial/>BitmapMaterial</a></li><li><a href=/flash/papervision3d/bitmapviewportmaterial/>BitmapViewportMaterial</a></li><li><a href=/flash/papervision3d/colormaterial/>ColorMaterial</a></li><li><a href=/flash/papervision3d/compositematerial/>CompositeMaterial</a></li><li><a href=/flash/papervision3d/moviematerial/>MovieMaterial</a></li><li><a href=/flash/papervision3d/wireframematerial/>WireframeMaterial</a></li></ul></div><h3>Shade Materials</h3><div><ul><li><a href=/flash/papervision3d/cellmaterial/>CellMaterial</a></li><li><a href=/flash/papervision3d/envmapmaterial/>EnvMapMaterial</a></li><li><a href=/flash/papervision3d/flatshadematerial/>FlatShadeMaterial</a></li><li><a href=/flash/papervision3d/gouraudmaterial/>GouraudMaterial</a></li><li><a href=/flash/papervision3d/phongmaterial/>PhongMaterial</a></li></ul></div><h3>Special Material</h3><div><ul><li><a href=/flash/papervision3d/particlematerial/>ParticleMaterial</a></li></ul></div><h3>Parser Objects</h3><div><ul><li><a href=/flash/papervision3d/dae/>DAE</a></li><li><a href=/flash/papervision3d/kmz/>KMZ</a></li></ul></div><h3>Primitive Objects</h3><div><ul><li><a href=/flash/papervision3d/arrow/>Arrow</a></li><li><a href=/flash/papervision3d/cone/>Cone</a></li><li><a href=/flash/papervision3d/cube/>Cube</a></li><li><a href=/flash/papervision3d/cylinder/>Cylinder</a></li><li><a href=/flash/papervision3d/paperplane/>PaperPlane</a></li><li><a href=/flash/papervision3d/plane/>Plane</a></li><li><a href=/flash/papervision3d/sphere/>Sphere</a></li></ul></div><h3>Special Objects</h3><div><ul><li><a href=/flash/papervision3d/particlefield/>ParticleField</a></li><li><a href=/flash/papervision3d/ucs/>UCS</a></li></ul></div><h3>Render</h3><div><ul><li><a href=/flash/papervision3d/basicrenderengine/>BasicRenderEngine</a></li><li><a href=/flash/papervision3d/lazyrenderengine/>LazyRenderEngine</a></li><li><a href=/flash/papervision3d/quadrantrenderengine/>QuadrantRenderEngine</a></li></ul></div><h3>Scene</h3><div><ul><li><a href=/flash/papervision3d/scene3d/>Scene3D</a></li></ul></div><h3>Typography</h3><div><ul><li><a href=/flash/papervision3d/text3d/>Text3D</a></li></ul></div><h3>Views</h3><div><ul><li><a href=/flash/papervision3d/basicview/>BasicView</a></li><li><a href=/flash/papervision3d/reflectionview/>ReflectionView</a></li><li><a href=/flash/papervision3d/statsview/>StatsView</a></li><li><a href=/flash/papervision3d/viewport3d/>Viewport3D</a></li></ul></div><h3>View Layers</h3><div><ul><li><a href=/flash/papervision3d/bitmapeffectlayer/>BitmapEffectLayer</a></li><li><a href=/flash/papervision3d/viewportlayer/>ViewportLayer</a></li></ul></div><h3>Other</h3><div><ul><li><a href=/flash/papervision3d/anaglyph/>Anaglyph</a></li><li><a href=/flash/papervision3d/camera-move/>Camera Move</a></li><li><a href=/flash/papervision3d/camera-rotate/>Camera Rotate</a></li><li><a href=/flash/papervision3d/camera-target-move/>Camera Target Move</a></li><li><a href=/flash/papervision3d/object-move/>Object Move</a></li><li><a href=/flash/papervision3d/object-rotate/>Object Rotate</a></li><li><a href=/flash/papervision3d/object-scale/>Object Scale</a></li><li><a href=/flash/papervision3d/panorama/>Panorama</a></li></ul></div></div></div><div class=h1><a id=switch-sketchup>SKETCHUP</a></div><div id=list-sketchup><h2>Overview</h2><div><ul><li><a href=/sketchup/>Overview</a></li></ul></div><h2>Plugins</h2><div><ul><li><a href=/sketchup/papervision3d/>Papervision3D</a></li><li><a href=/sketchup/triangulate/>Triangulate</a></li></ul></div></div><div class=h1><a id=switch-unity>UNITY</a></div><div id=list-unity><h2>Overview</h2><div><ul><li><a href=/unity/>Overview</a></li></ul></div><h2>Detect</h2><div><ul><li><a href=/unity/detect/>Detect</a></li></ul></div><h2>Games</h2><div><ul><li><a href=/unity/air-hockey/>Air Hockey</a></li><li><a href=/unity/foosball/>Foosball</a></li><li><a href=/unity/pool/>Pool</a></li></ul></div><h2>Unity</h2><div><ul><li><a href=/unity/car/>Car</a></li><li><a href=/unity/lerpz-escapes/>Lerpz Escapes</a></li><li><a href=/unity/mecanim/>Mecanim</a></li></ul></div></div><div class=h1><a id=switch-xcode>XCODE</a></div><div id=list-xcode><h2>Overview</h2><div><ul><li><a href=/xcode/>Overview</a></li></ul></div><h2>Example</h2><div><ul><li><a href=/xcode/1/>1</a></li><li><a href=/xcode/2/>2</a></li><li><a href=/xcode/3/>3</a></li><li><a href=/xcode/4/>4</a></li><li><a href=/xcode/5/>5</a></li><li><a href=/xcode/6/>6</a></li></ul></div><h2>CSV2Plist</h2><div><ul><li><a href=/xcode/csv2plist/>CSV2Plist</a></li></ul></div><h2>UI</h2><div><ul><li><a href=/xcode/uiactivityindicatorview/>UIActivityIndicatorView</a></li><li><a href=/xcode/uibutton/>UIButton</a></li><li><a href=/xcode/uiimageview/>UIImageView</a></li><li><a href=/xcode/uilabel/>UILabel</a></li><li><a href=/xcode/uipagecontrol/>UIPageControl</a></li><li><a href=/xcode/uiprogressview/>UIProgressView</a></li><li><a href=/xcode/uisegmentedcontrol/>UISegmentedControl</a></li><li><a href=/xcode/uislider/>UISlider</a></li><li><a href=/xcode/uistepper/>UIStepper</a></li><li><a href=/xcode/uiswitch/>UISwitch</a></li><li><a href=/xcode/uitextfield/>UITextField</a></li></ul></div></div><div class=h1><a href=/about/>ABOUT</a></div><div class=h1><a href=/terms/>TERMS</a></div></div></div><div id=background><video loop muted src=/assets/mp4/1/23.mp4></video></div></body></html>
0

6 · flags · STREAM_CLIENT_ASYNC_CONNECT

<?

$transport = "tls";
$host = "osbo.com";
$port = "443";

$address = $transport . "://" . $host . ":" . $port;
$timeout = 0;
$flags = STREAM_CLIENT_ASYNC_CONNECT;

$return = stream_socket_client($address, $error_code, $error_message, $timeout, $flags);

    if(!$return)
    {
        exit("$error_message($error_code)");
    }

    $string = "GET / HTTP/1.1\r\n";
    $string .= "Host: $host\r\n";
    $string .= "Connection: close\r\n\r\n";

    fwrite($return, $string);

    $length = 1024;

    while(!feof($return))
    {
        echo fgets($return, $length);
    }

fclose($return);

HTTP/1.1 200 OK
Connection: close
Cache-Control: no-store,no-transform
link: <https://osbo.com/>;rel="canonical"
x-robots-tag: noarchive,noimageindex
Content-Type: text/html; charset=UTF-8
Transfer-Encoding: chunked
Date: Fri, 23 Jan 2026 04:02:30 GMT
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
X-Content-Type-Options: nosniff

10000
<!doctype html><html lang=en><head><meta charset=utf-8><meta content=width=device-width name=viewport><meta content=osbo.com name=description><title>osbo.com</title><link defer href=/assets/css/ rel=stylesheet><link defer href=/assets/svg/ rel=icon><script defer src=/assets/js/></script><script>var _mtm = window._mtm = window._mtm || [];_mtm.push({"mtm.startTime": (new Date().getTime()), "event": "mtm.Start"});(function(){var d=document, g=d.createElement("script"), s=d.querySelector("script");g.async=true; g.src="/matomo/js/container_Gm7CI6wt.js"; s.parentNode.insertBefore(g,s);})();</script></head><body><div id=foreground><header><a href=/><img alt=Home id=home src=/assets/svg/Home.svg title=Home></a><img alt=Menu id=menu src=/assets/svg/Menu.svg title=Menu><form action=/search/><input id=search-site name=search-site title=Search type=search></form></header><footer><a href=#><img alt=Top id=top src=/assets/svg/Top.svg title=Top></a></footer></div><div id=zeroground><div id=content><header><div id=topnav><a href=/Jesus/>Jesus</a> · <a href=/Bible/>Bible</a> · <a href=/html/>HTML</a> · <a href=/css/>CSS</a> · <a href=/js/>JS</a> · <a href=/php/>PHP</a> · <a href=/svg/>SVG</a> · <a href=/applications/>Applications</a></div></header><div class=banner><script defer src=https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4239362730750625 crossorigin=anonymous></script><ins class=adsbygoogle data-ad-client=ca-pub-4239362730750625 data-ad-slot=5564639719><a href=https://samaritanspurse.org/occ/ target=_blank><img alt="Samaritan's Purse Operation Christmas Child" src=/assets/svg/SamaritansPurseOperationChristmasChild4.svg title="Samaritan's Purse Operation Christmas Child"></a></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><main><h1><a href>Bible Image Editor</a></h1><div id=myid style=height:100vh><script>const Bibleversionarray =
        [
            [
                "العربية",
                [
                    ["ASVD", "الكتاب المقدس ترجمة فانديك وسميث (ASVD)"],
                ],
            ],
            [
                "česky",
                [
                    ["CSBKR", "Bible Kralická 1613 (CSBKR)"],
                ],
            ],
            [
                "Dansk",
                [
                    ["DA1871", "Danske Bibel 1871 (DA1871)"],
                ],
            ],
            [
                "Deutsch",
                [
                    ["DELUT", "Luther Bible 1912 (DELUT)"],
                    ["ELB", "Elberfelder 1905 (ELB)"],
                    ["ELB71", "Elberfelder 1871 (ELB71)"],
                ],
            ],
            [
                "English",
                [
                    ["ASV", "American Standard Version (ASV)"],
                    ["KJV", "King James Version (KJV)"],
                    ["WEB", "World English Bible (WEB)"],
                ],
            ],
            [
                "Español",
                [
                    ["RVES", "Reina-Valera Antigua (RVES)"],
                ],
            ],
            [
                "Suomi",
                [
                    ["FI1776", "Finnish 1776 (FI1776)"],
                    ["FINPR", "Finnish 1938 (FINPR)"],
                ],
            ],
            [
                "Français",
                [
                    ["FMAR", "Martin 1744 (FMAR)"],
                    ["FRDBY", "Bible Darby en français (FRDBY)"],
                    ["LSG", "Louis Segond 1910 (LSG)"],
                    ["OST", "Ostervald (OST)"],
                ],
            ],
            [
                "Magyar",
                [
                    ["KAR", "Károli 1590 (KAR)"],
                ],
            ],
            [
                "Bahasa Indonesia",
                [
                    ["IDBAR", "Terjemahan Baru (IDBAR)"],
                ],
            ],
            [
                "Italiano",
                [
                    ["IGD", "Giovanni Diodati Bibbia (IGD)"],
                    ["ITRIV", "Italian Riveduta 1927 (ITRIV)"],
                ],
            ],
            [
                "日本語",
                [
                    ["JA1955", "Colloquial Japanese 1955 (JA1955)"],
                ],
            ],
            [
                "Malagasy",
                [
                    ["MG1865", "Malagasy Bible (MG1865)"],
                ],
            ],
            [
                "te reo Māori",
                [
                    ["MAOR", "Maori Bible (MAOR)"],
                ],
            ],
            [
                "한국어",
                [
                    ["KORVB", "개역한글 (KORVB)"],
                ],
            ],
            [
                "Nederlands",
                [
                    ["SV1750", "Statenvertaling (SV1750)"],
                ],
            ],
            [
                "Norsk",
                [
                    ["NORSK", "Det Norsk Bibelselskap 1930 (NORSK)"],
                ],
            ],
            [
                "Polski",
                [
                    ["PBG", "Biblia Gdańska (PBG)"],
                ],
            ],
            [
                "Português",
                [
                    ["AA", "Almeida Atualizada (AA)"],
                ],
            ],
            [
                "Română",
                [
                    ["RMNN", "Romanian Cornilescu 1928 (RMNN)"],
                    ["VDC", "Versiunea Dumitru Cornilescu (VDC)"],
                    ["VDCC", "Versiunea Dumitru Cornilescu Corectată (VDCC)"],
                ],
            ],
            [
                "Pyccкий",
                [
                    ["RURSV", "Синодальный перевод (RURSV)"],
                ],
            ],
            [
                "Shqip",
                [
                    ["ALBB", "Albanian Bible (ALBB)"],
                ],
            ],
            [
                "Svenska",
                [
                    ["SK73", "Karl XII 1873 (SK73)"],
                    ["SVEN", "Svenska 1917 (SVEN)"],
                ],
            ],
            [
                "Wikang Tagalog",
                [
                    ["TLAB", "Ang Biblia (TLAB)"],
                ],
            ],
            [
                "українська",
                [
                    ["UBIO", "Біблія в пер. Івана Огієнка 1962 (UBIO)"],
                    ["UKRK", "Біблія в пер. П.Куліша та І.Пулюя 1905 (UKRK)"],
                ],
            ],
            [
                "Tiếng Việt",
                [
                    ["VI1934", "Vietnamese Bible 1934 (VI1934)"],
                ],
            ],
            [
                "简体中文",
                [
                    ["CUVS", "简体和合本 (CUVS)"],
                ],
            ],
            [
                "繁體中文",
                [
                    ["CUV", "和合本 (CUV)"],
                ],
            ],
        ];
        const Biblebookarray =
        [
            //"Genesis",
            //"John",
        ];
        const Bibleversearray =
        [
            //"In the beginning God created the heaven and the earth.",
            //"For God so loved the world, that he gave his only begotten Son, that whosoever believeth in him should not perish, but have everlasting life.",
        ];
        const tabarray =
        [
            "canvas",
            "image",
            "message",
            "reference",
            "passage",
            "save",
        ];
        const borderstylearray =
        [
            "none",
            "dashed",
            "dotted",
            "double",
            "groove",
            //"hidden",
            "inset",
            "outset",
            "ridge",
            "solid",
        ];
        const horizontalarray =
        [
            "left",
            "center",
            "right",
            "justify",
        ];
        const verticalarray =
        [
            "start",
            "center",
            "end",
        ];
        const writingmodearray =
        [
            "horizontal-tb",
            "vertical-lr",
            "vertical-rl",
            "sideways-lr",
            "sideways-rl",
        ];
        const fontfamilyarray =
        [
            //generic family
            "cursive",
            "fantasy",
            "monospace",
            "sans-serif",
            "serif",

            //web safe
            //"arial",//sans-serif
            //"brush script",//serif
            "courier",
            //"garamond",//serif
            "georgia",
            "tahoma",
            //"times new roman",//serif
            "trebuchet ms",
            "verdana",

            //popular
            //"avenir",//serif
            //"bodoni",//serif
            "franklin gothic",
            //"frutiger",//serif
            //"futura",//serif
            //"helvetica",//sans-serif
            //"rockwell",//serif
            //"univers",//serif
        ];
        const fontstylearray =
        [
            "normal",
            "italic",
            //"oblique",
        ];
        const fontvariantarray =
        [
            "normal",
            "small-caps",
        ];
        const fontweightarray =
        [
            "normal",
            "bold",
            //"bolder",
            //"lighter",
        ];
        const maxheight = 10000;
        const maxwidth = 10000;
        const image = document.createElement("img");
        const text = document.createElement("img");

        function bodyload()
        {
            //const body = document.body;
            //body.id = "myid";

            const style = myid.style;
            //style.height = "100vh";
            style.overflow = "hidden";
        }
        addEventListener("load", bodyload);

        function window1load()
        {
            const div = document.createElement("div");
            div.id = "window1";
            myid.append(div);

            const style = div.style;
            style.height = "50vh";
            style.margin = "0";
        }
        addEventListener("load", window1load);

        function window2load()
        {
            const div = document.createElement("div");
            div.id = "window2";
            myid.append(div);

            const style = div.style;
            style.height = "32px";
            style.margin = "16px 0 0";
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", window2load);

        function window3load()
        {
            const div = document.createElement("div");
            div.id = "window3";
            myid.append(div);

            const style = div.style;
            style.height = "calc(50vh - 48px)";
            style.margin = "0";
            style.overflowX = "hidden";
        }
        addEventListener("load", window3load);

        function canvasload()
        {
            const canvas = document.createElement("canvas");
            canvas.height = 1080;
            canvas.id = "canvas";
            canvas.width = 1920;
            window1.append(canvas);

            const style = canvas.style;
            style.position = "relative";
        }
        addEventListener("load", canvasload);

        function canvasupdate()
        {
            //console.log("canup");
            const ww = innerWidth - 96;
            const wh = innerHeight * 0.5;
            const cw = canvas.width;
            const ch = canvas.height;
            const x = (ww - cw) * 0.5;
            const y = (wh - ch) * 0.5;
            const sw = ww / cw;
            const sh = wh / ch;
            const s = Math.min(sw, sh);

            const style = canvas.style;
            style.left = `${x}px`;
            style.top = `${y}px`;
            style.transform = `scale(${s})`;
        }
        addEventListener("load", canvasupdate);

        function resize()
        {
            canvasupdate();
        }
        addEventListener("resize", resize);

        function svgupdate()
        {
            //console.log("svgup");
            const svg =
`<svg height="${canvas.height}" width="${canvas.width}" xmlns="http://www.w3.org/2000/svg">
    <style>
        div
        {
            background-color: ${canvas.backgroundcolor};
            height: 100%;
        }
        img
        {
            box-sizing: border-box;
            position: absolute;

            background-color: ${image.backgroundcolor};
            filter: blur(${image.filterblur}px) brightness(${image.filterbrightness}%) contrast(${image.filtercontrast}%) grayscale(${image.filtergrayscale}%) hue-rotate(${image.filterhuerotate}deg) invert(${image.filterinvert}%) opacity(${image.filteropacity}%) saturate(${image.filtersaturate}%) sepia(${image.filtersepia}%);
            height: ${image.height}px;
            left: ${image.myx}px;
            margin: ${image.margintop}px ${image.marginright}px ${image.marginbottom}px ${image.marginleft}px;
            padding: ${image.paddingtop}px ${image.paddingright}px ${image.paddingbottom}px ${image.paddingleft}px;
            object-fit: ${image.objectfit};
            //opacity: ${image.opacity};
            top: ${image.myy}px;
            width: ${image.width}px;
        }
        text
        {
            box-sizing: border-box;
            display: grid;
            overflow: hidden;
            position: absolute;
        }
        text:nth-of-type(1)
        {
            white-space: pre;

            align-items: ${text.messagevertical};
            backdrop-filter: blur(${text.messagebackdropfilterblur}px) brightness(${text.messagebackdropfilterbrightness}%) contrast(${text.messagebackdropfiltercontrast}%) grayscale(${text.messagebackdropfiltergrayscale}%) hue-rotate(${text.messagebackdropfilterhuerotate}deg) invert(${text.messagebackdropfilterinvert}%) saturate(${text.messagebackdropfiltersaturate}%) sepia(${text.messagebackdropfiltersepia}%);
            background-color: ${text.messagebackgroundcolor};
            border-color: ${text.messagebordercolor};
            border-radius: ${text.messageborderradius}px;
            border-style: ${text.messageborderstyle};
            border-width: ${text.messageborderwidth}px;
            color: ${text.messagecolor};
            font-family: ${text.messagefontfamily};
            font-size: ${text.messagefontsize}px;
            font-style: ${text.messagefontstyle};
            font-variant: ${text.messagefontvariant};
            font-weight: ${text.messagefontweight};
            height: ${text.messageheight}px;
            left: ${text.messagex}px;
            margin: ${text.messagemargintop}px ${text.messagemarginright}px ${text.messagemarginbottom}px ${text.messagemarginleft}px;
            padding: ${text.messagepaddingtop}px ${text.messagepaddingright}px ${text.messagepaddingbottom}px ${text.messagepaddingleft}px;
            text-align: ${text.messagehorizontal};
            top: ${text.messagey}px;
            width: ${text.messagewidth}px;
            writing-mode: ${text.messagewritingmode};
        }
        text:nth-of-type(2)
        {
            align-items: ${text.referencevertical};
            background-color: ${text.referencebackgroundcolor};
            border-color: ${text.referencebordercolor};
            border-radius: ${text.referenceborderradius}px;
            border-style: ${text.referenceborderstyle};
            border-width: ${text.referenceborderwidth}px;
            color: ${text.referencecolor};
            font-family: ${text.referencefontfamily};
            font-size: ${text.referencefontsize}px;
            font-style: ${text.referencefontstyle};
            font-variant: ${text.referencefontvariant};
            font-weight: ${text.referencefontweight};
            height: ${text.referenceheight}px;
            left: ${text.referencex}px;
            margin: ${text.referencemargintop}px ${text.referencemarginright}px ${text.referencemarginbottom}px ${text.referencemarginleft}px;
            padding: ${text.referencepaddingtop}px ${text.referencepaddingright}px ${text.referencepaddingbottom}px ${text.referencepaddingleft}px;
            text-align: ${text.referencehorizontal};
            top: ${text.referencey}px;
            width: ${text.referencewidth}px;
            writing-mode: ${text.referencewritingmode};
        }
        text:nth-of-type(3)
        {
            align-items: ${text.passagevertical};
            background-color: ${text.passagebackgroundcolor};
            border-color: ${text.passagebordercolor};
            border-radius: ${text.passageborderradius}px;
            border-style: ${text.passageborderstyle};
            border-width: ${text.passageborderwidth}px;
            color: ${text.passagecolor};
            font-family: ${text.passagefontfamily};
            font-size: ${text.passagefontsize}px;
            font-style: ${text.passagefontstyle};
            font-variant: ${text.passagefontvariant};
            font-weight: ${text.passagefontweight};
            height: ${text.passageheight}px;
            left: ${text.passagex}px;
            margin: ${text.passagemargintop}px ${text.passagemarginright}px ${text.passagemarginbottom}px ${text.passagemarginleft}px;
            padding: ${text.passagepaddingtop}px ${text.passagepaddingright}px ${text.passagepaddingbottom}px ${text.passagepaddingleft}px;
            text-align: ${text.passagehorizontal};
            top: ${text.passagey}px;
            width: ${text.passagewidth}px;
            writing-mode: ${text.passagewritingmode};
        }
    </style>
    <foreignObject height="100%" width="100%">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <img src="${image.dataurl}"/>
            <text>${text.messagetext}</text>
            <text>${text.referencetextbook}${text.referencetextchapter}${text.referencetextverse}${text.referencetextverseend}${text.referencetextversion}</text>
            <text>${text.passagetextverse}${text.passagetextverseend}</text>
        </div>
    </foreignObject>
</svg>`;
            text.src = `data:image/svg+xml,${svg}`;
        }

        function textupdate()
        {
            const context = canvas.getContext("2d");
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.drawImage(text, 0, 0);
        }
        text.addEventListener("load", textupdate);






        function tabload()
        {
            for(const [key, value] of tabarray.entries())
            {
                const button = document.createElement("button");
                button.className = "tab";
                if(value == "save")
                {
                    button.className = "tab current";
                }
                button.id = "tab" + tabarray[key];
                //button.innerHTML = `${key + 1}) ${tabarray[key]}`;
                button.innerHTML = tabarray[key];
                button.value = "tabcontent" + tabarray[key];
                button.addEventListener("click", tabupdate);
                window2.append(button);

                /*
                const style = button.style;
                style.backgroundColor = "#000";
                style.color = "#fff";
                style.border = "none";
                style.fontSize = "16px";
                style.padding = "16px";
                style.transition = "0.5s";
                //*/
            }
        }
        addEventListener("load", tabload);


        function tabupdate(m)
        {
            const mytarget = m.target;

            //*
            for(const t of document.querySelectorAll(".tab"))
            {
                //const style = t.style;
                //style.backgroundColor = "#000";
                //style.color = "#fff";
                t.className = t.className.replace(" current", "");
            }
            //const style = document.querySelector("#"+mytarget.id).style;
            //style.backgroundColor = "#fff";
            //style.color = "#000";
            mytarget.className += " current";
            //*/

            for(const t of document.querySelectorAll(".tabcontent"))
            {
                const style = t.style;
                style.contentVisibility = "hidden";
            }
            document.querySelector("#"+mytarget.value).style.contentVisibility = "visible";
        }

        function tabcontentload()
        {
            for(const [key, value] of tabarray.entries())
            {
                const div = document.createElement("div");
                div.className = "tabcontent";
                div.id = "tabcontent" + tabarray[key];
                window3.append(div);

                //*
                const style = div.style;
                if(value != "save")
                {
                    style.contentVisibility = "hidden";
                }
                style.margin = "0";
                //style.transitionDuration = "0.5s";
                //*/
            }
        }
        addEventListener("load", tabcontentload);






        function canvaswidthload()
        {
            const div = document.createElement("div");
            div.id = "canvaswidth";
            div.innerHTML = "width";
            tabcontentcanvas.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", canvaswidthload);

        function canvaswidthnumberload()
        {
            const br = document.createElement("br");
            canvaswidth.append(br);

            const input = document.createElement("input");
            input.id = "canvaswidthnumber";
            input.max = maxwidth;
            input.min = 0;
            input.type = "number";
            input.value = canvas.width;
            input.addEventListener("input", canvaswidthnumberupdate);
            canvaswidth.append(input);

            //canvaswidthnumberupdate();
        }
        addEventListener("load", canvaswidthnumberload);

        function canvaswidthnumberupdate()
        {
            const v = canvaswidthnumber.value;

            canvaswidthrange.value = v;
            canvas.width = v;

            canvasupdate();
            svgupdate();
        }

        function canvaswidthrangeload()
        {
            //const br = document.createElement("br");
            //canvaswidth.append(br);

            const input = document.createElement("input");
            input.id = "canvaswidthrange";
            input.max = canvaswidthnumber.max;
            input.min = canvaswidthnumber.min;
            input.type = "range";
            input.value = canvaswidthnumber.value;
            input.addEventListener("input", canvaswidthrangeupdate);
            canvaswidth.append(input);

            canvaswidthrangeupdate();
        }
        addEventListener("load", canvaswidthrangeload);

        function canvaswidthrangeupdate()
        {
            const v = canvaswidthrange.value;

            canvaswidthnumber.value = v;
            canvas.width = v;

            canvasupdate();
            svgupdate();
        }

        function canvaswidthnaturalload()
        {
            const br = document.createElement("br");
            canvaswidth.append(br);

            const button = document.createElement("button");
            button.innerHTML = "image";
            button.addEventListener("click", canvaswidthnaturalupdate);
            canvaswidth.append(button);
        }
        addEventListener("load", canvaswidthnaturalload);

        function canvaswidthnaturalupdate()
        {
            canvaswidthnumber.value = image.naturalWidth;

            canvaswidthnumberupdate();
        }

        function canvaswidthexactload()
        {
            const br = document.createElement("br");
            canvaswidth.append(br);

            const array =
            [
                ["800",800],
                ["1280",1280],
                ["1366",1366],
                ["1536",1536],
                ["1600",1600],
                ["1920",1920],
                ["2304",2304],
                ["2560",2560],
                ["3840",3840],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvaswidthexactupdate);
                canvaswidth.append(button);
            }
        }
        addEventListener("load", canvaswidthexactload);

        function canvaswidthexactupdate(e)
        {
            canvaswidthnumber.value = Number(e.target.value);

            canvaswidthnumberupdate();
        }

        function canvaswidthincrementload()
        {
            const br = document.createElement("br");
            canvaswidth.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvaswidthincrementupdate);
                canvaswidth.append(button);
            }
        }
        addEventListener("load", canvaswidthincrementload);

        function canvaswidthincrementupdate(e)
        {
            const v = Number(canvaswidthnumber.value) + Number(e.target.value);

            if((canvaswidthnumber.min <= v) && (v <= canvaswidthnumber.max))
            {
                canvaswidthnumber.value = v;

                canvaswidthnumberupdate();
            }
        }



        function canvasheightload()
        {
            const div = document.createElement("div");
            div.id = "canvasheight";
            div.innerHTML = "height";
            tabcontentcanvas.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", canvasheightload);

        function canvasheightnumberload()
        {
            const br = document.createElement("br");
            canvasheight.append(br);

            const input = document.createElement("input");
            input.id = "canvasheightnumber";
            input.max = maxheight;
            input.min = 0;
            input.type = "number";
            input.value = canvas.height;
            input.addEventListener("input", canvasheightnumberupdate);
            canvasheight.append(input);

            //canvasheightnumberupdate();
        }
        addEventListener("load", canvasheightnumberload);

        function canvasheightnumberupdate()
        {
            const v = canvasheightnumber.value;

            canvasheightrange.value = v;
            canvas.height = v;

            canvasupdate();
            svgupdate();
        }

        function canvasheightrangeload()
        {
            //const br = document.createElement("br");
            //canvasheight.append(br);

            const input = document.createElement("input");
            input.id = "canvasheightrange";
            input.max = canvasheightnumber.max;
            input.min = canvasheightnumber.min;
            input.type = "range";
            input.value = canvasheightnumber.value;
            input.addEventListener("input", canvasheightrangeupdate);
            canvasheight.append(input);

            canvasheightrangeupdate();
        }
        addEventListener("load", canvasheightrangeload);

        function canvasheightrangeupdate()
        {
            const v = canvasheightrange.value;

            canvasheightnumber.value = v;
            canvas.height = v;

            canvasupdate();
            svgupdate();
        }

        function canvasheightnaturalload()
        {
            const br = document.createElement("br");
            canvasheight.append(br);

            const button = document.createElement("button");
            button.innerHTML = "image";
            button.addEventListener("click", canvasheightnaturalupdate);
            canvasheight.append(button);
        }
        addEventListener("load", canvasheightnaturalload);

        function canvasheightnaturalupdate()
        {
            canvasheightnumber.value = image.naturalHeight;

            canvasheightnumberupdate();
        }

        function canvasheightexactload()
        {
            const br = document.createElement("br");
            canvasheight.append(br);

            const array =
            [
                ["600",600],
                ["720",720],
                ["768",768],
                ["864",864],
                ["900",900],
                ["1080",1080],
                ["1296",1296],
                ["1440",1440],
                ["2160",2160],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvasheightexactupdate);
                canvasheight.append(button);
            }
        }
        addEventListener("load", canvasheightexactload);

        function canvasheightexactupdate(e)
        {
            canvasheightnumber.value = Number(e.target.value);

            canvasheightnumberupdate();
        }

        function canvasheightincrementload()
        {
            const br = document.createElement("br");
            canvasheight.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvasheightincrementupdate);
                canvasheight.append(button);
            }
        }
        addEventListener("load", canvasheightincrementload);

        function canvasheightincrementupdate(e)
        {
            const v = Number(canvasheightnumber.value) + Number(e.target.value);

            if((canvasheightnumber.min <= v) && (v <= canvasheightnumber.max))
            {
                canvasheightnumber.value = v;

                canvasheightnumberupdate();
            }
        }



        function canvasbackgroundcolorload()
        {
            const div = document.createElement("div");
            div.id = "canvasbackgroundcolor";
            div.innerHTML = "background-color";
            tabcontentcanvas.append(div);
        }
        addEventListener("load", canvasbackgroundcolorload);

        function canvasbackgroundcolorcolorload()
        {
            const br = document.createElement("br");
            canvasbackgroundcolor.append(br);

            const input = document.createElement("input");
            input.id = "canvasbackgroundcolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", canvasbackgroundcolorcolorupdate);
            canvasbackgroundcolor.append(input);

            //canvasbackgroundcolorcolorset();
        }
        addEventListener("load", canvasbackgroundcolorcolorload);

        function canvasbackgroundcolorcolorset()
        {
            const c = canvasbackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = canvasbackgroundalphanumber.value;

            canvas.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function canvasbackgroundcolorcolorupdate()
        {
            canvasbackgroundcolorcolorset();
            svgupdate();
        }

        function canvasbackgroundcolorexactload()
        {
            const br = document.createElement("br");
            canvasbackgroundcolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvasbackgroundcolorexactupdate);
                canvasbackgroundcolor.append(button);
            }
        }
        addEventListener("load", canvasbackgroundcolorexactload);

        function canvasbackgroundcolorexactupdate(e)
        {
            canvasbackgroundcolorcolor.value = e.target.value;

            canvasbackgroundcolorcolorupdate();
        }



        function canvasbackgroundalphaload()
        {
            const div = document.createElement("div");
            div.id = "canvasbackgroundalpha";
            div.innerHTML = "background-alpha";
            tabcontentcanvas.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", canvasbackgroundalphaload);

        function canvasbackgroundalphanumberload()
        {
            const br = document.createElement("br");
            canvasbackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "canvasbackgroundalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", canvasbackgroundalphanumberupdate);
            canvasbackgroundalpha.append(input);

            //canvasbackgroundalphanumberset();
        }
        addEventListener("load", canvasbackgroundalphanumberload);

        function canvasbackgroundalphanumberset()
        {
            const c = canvasbackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = canvasbackgroundalphanumber.value;

            canvasbackgroundalpharange.value = a;
            canvas.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function canvasbackgroundalphanumberupdate()
        {
            canvasbackgroundalphanumberset();
            svgupdate();
        }

        function canvasbackgroundalpharangeload()
        {
            //const br = document.createElement("br");
            //canvasbackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "canvasbackgroundalpharange";
            input.max = canvasbackgroundalphanumber.max;
            input.min = canvasbackgroundalphanumber.min;
            input.step = canvasbackgroundalphanumber.step;
            input.type = "range";
            input.value = canvasbackgroundalphanumber.value;
            input.addEventListener("input", canvasbackgroundalpharangeupdate);
            canvasbackgroundalpha.append(input);

            canvasbackgroundalpharangeset();
        }
        addEventListener("load", canvasbackgroundalpharangeload);

        function canvasbackgroundalpharangeset()
        {
            const c = canvasbackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = canvasbackgroundalpharange.value;

            canvasbackgroundalphanumber.value = a;
            canvas.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function canvasbackgroundalpharangeupdate()
        {
            canvasbackgroundalpharangeset();
            svgupdate();
        }

        function canvasbackgroundalphaexactload()
        {
            const br = document.createElement("br");
            canvasbackgroundalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvasbackgroundalphaexactupdate);
                canvasbackgroundalpha.append(button);
            }
        }
        addEventListener("load", canvasbackgroundalphaexactload);

        function canvasbackgroundalphaexactupdate(e)
        {
            canvasbackgroundalphanumber.value = Number(e.target.value);

            canvasbackgroundalphanumberupdate();
        }

        function canvasbackgroundalphaincrementload()
        {
            const br = document.createElement("br");
            canvasbackgroundalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", canvasbackgroundalphaincrementupdate);
                canvasbackgroundalpha.append(button);
            }
        }
        addEventListener("load", canvasbackgroundalphaincrementload);

        function canvasbackgroundalphaincrementupdate(e)
        {
            let v = Number(canvasbackgroundalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((canvasbackgroundalphanumber.min <= v) && (v <= canvasbackgroundalphanumber.max))
            {
                canvasbackgroundalphanumber.value = v;

                canvasbackgroundalphanumberupdate();
            }
        }






        function myfunction1(e)
        {
            //console.log(myvideo.duration);
            const myvideo = e.target;

            myvideo.currentTime = 0;
        }

        function myfunction2(e)
        {
            //console.log(myvideo.currentTime);
            const myvideo = e.target;

            const mycanvas = document.createElement("canvas");
            mycanvas.height = myvideo.videoHeight;
            mycanvas.width = myvideo.videoWidth;

            const mycontext = mycanvas.getContext("2d");
            mycontext.drawImage(myvideo, 0, 0, mycanvas.width, mycanvas.height);

            //const myimg = new Image();
            //myimg.src = mycanvas.toDataURL();

            image.src = mycanvas.toDataURL();
        }

        function imageload2()
        {
            //image.src = "/assets/svg/Happy.svg";

            const date  = new Date();
            const month = date.getUTCMonth() + 1;
            const day   = date.getUTCDate();

            const myvideo = document.createElement("video");
            myvideo.addEventListener("loadedmetadata", myfunction1);
            myvideo.addEventListener("seeked", myfunction2);
            myvideo.src = `/assets/mp4/${month}/${day}.mp4`;
        }
        addEventListener("load", imageload2);

        function imageload3()
        {
            fetch(image.src)
            .then(r => r.blob())
            .then(b =>
            {
                const reader = new FileReader();
                reader.readAsDataURL(b);
                reader.onloadend = () =>
                {
                    //console.log("imageload3");
                    image.dataurl = reader.result;
                    svgupdate();
                };
            });
        }
        image.addEventListener("load", imageload3);



        function imagefileload()
        {
            const div = document.createElement("div");
            div.id = "imagefile";
            div.innerHTML = "file";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagefileload);

        function imagefilefileload()
        {
            const br = document.createElement("br");
            imagefile.append(br);

            const input = document.createElement("input");
            input.id = "imagefilefile";
            input.type = "file";
            input.addEventListener("change", imagefilefileupdate);
            imagefile.append(input);
        }
        addEventListener("load", imagefilefileload);

        function imagefilefileupdate()
        {
            const f = imagefilefile.files[0];

            image.src = URL.createObjectURL(f);
        }



        function imagefitload()
        {
            const div = document.createElement("div");
            div.id = "imagefit";
            div.innerHTML = "fit";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagefitload);

        function imagefitselectload()
        {
            const br = document.createElement("br");
            imagefit.append(br);

            const select = document.createElement("select");
            select.id = "imagefitselect";
            select.addEventListener("input", imagefitselectupdate);
            imagefit.append(select);

            const array =
            [
                "contain",
                "cover",
            ];

            for(const value of array)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            imagefitselect.value = array[1];

            imagefitselectset();
        }
        addEventListener("load", imagefitselectload);

        function imagefitselectset()
        {
            image.objectfit = imagefitselect.value;
        }

        function imagefitselectupdate()
        {
            imagefitselectset();
            svgupdate();
        }



        function imagewidthload()
        {
            const div = document.createElement("div");
            div.id = "imagewidth";
            div.innerHTML = "width";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagewidthload);

        function imagewidthnumberload()
        {
            const br = document.createElement("br");
            imagewidth.append(br);

            const input = document.createElement("input");
            input.id = "imagewidthnumber";
            input.max = maxwidth;
            input.min = 0;
            input.type = "number";
            input.value = canvas.width;
            input.addEventListener("input", imagewidthnumberupdate);
            imagewidth.append(input);

            //imagewidthnumberset();
        }
        addEventListener("load", imagewidthnumberload);

        function imagewidthnumberset()
        {
            const v = imagewidthnumber.value;

            imagewidthrange.value = v;
            image.width = v;
        }

        function imagewidthnumberupdate()
        {
            imagewidthnumberset();
            svgupdate();
        }

        function imagewidthrangeload()
        {
            //const br = document.createElement("br");
            //imagewidth.append(br);

            const input = document.createElement("input");
            input.id = "imagewidthrange";
            input.max = imagewidthnumber.max;
            input.min = imagewidthnumber.min;
            input.type = "range";
            input.value = imagewidthnumber.value;
            input.addEventListener("input", imagewidthrangeupdate);
            imagewidth.append(input);

            imagewidthrangeset();
        }
        addEventListener("load", imagewidthrangeload);

        function imagewidthrangeset()
        {
            const v = imagewidthrange.value;

            imagewidthnumber.value = v;
            image.width = v;
        }

        function imagewidthrangeupdate()
        {
            imagewidthrangeset();
            svgupdate();
        }
/*
        function imagewidthnaturalload()
        {
            const br = document.createElement("br");
            imagewidth.append(br);

            const button = document.createElement("button");
            button.innerHTML = "image";
            button.addEventListener("click", imagewidthnaturalupdate);
            imagewidth.append(button);
        }
        addEventListener("load", imagewidthnaturalload);

        function imagewidthnaturalupdate()
        {
            imagewidthnumber.value = image.naturalWidth;

            imagewidthnumberupdate();
        }
//*/
        function imagewidthexactload()
        {
            const br = document.createElement("br");
            imagewidth.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagewidthexactupdate);
                imagewidth.append(button);
            }
        }
        addEventListener("load", imagewidthexactload);

        function imagewidthexactupdate(e)
        {
            imagewidthnumber.value = canvas.width * Number(e.target.value);

            imagewidthnumberupdate();
        }

        function imagewidthincrementload()
        {
            const br = document.createElement("br");
            imagewidth.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagewidthincrementupdate);
                imagewidth.append(button);
            }
        }
        addEventListener("load", imagewidthincrementload);

        function imagewidthincrementupdate(e)
        {
            const v = Number(imagewidthnumber.value) + Number(e.target.value);

            if((imagewidthnumber.min <= v) && (v <= imagewidthnumber.max))
            {
                imagewidthnumber.value = v;

                imagewidthnumberupdate();
            }
        }



        function imageheightload()
        {
            const div = document.createElement("div");
            div.id = "imageheight";
            div.innerHTML = "height";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imageheightload);

        function imageheightnumberload()
        {
            const br = document.createElement("br");
            imageheight.append(br);

            const input = document.createElement("input");
            input.id = "imageheightnumber";
            input.max = maxheight;
            input.min = 0;
            input.type = "number";
            input.value = canvas.height;
            input.addEventListener("input", imageheightnumberupdate);
            imageheight.append(input);

            //imageheightnumberset();
        }
        addEventListener("load", imageheightnumberload);

        function imageheightnumberset()
        {
            const v = imageheightnumber.value;

            imageheightrange.value = v;
            image.height = v;
        }

        function imageheightnumberupdate()
        {
            imageheightnumberset();
            svgupdate();
        }

        function imageheightrangeload()
        {
            //const br = document.createElement("br");
            //imageheight.append(br);

            const input = document.createElement("input");
            input.id = "imageheightrange";
            input.max = imageheightnumber.max;
            input.min = imageheightnumber.min;
            input.type = "range";
            input.value = imageheightnumber.value;
            input.addEventListener("input", imageheightrangeupdate);
            imageheight.append(input);

            imageheightrangeset();
        }
        addEventListener("load", imageheightrangeload);

        function imageheightrangeset()
        {
            const v = imageheightrange.value;

            imageheightnumber.value = v;
            image.height = v;
        }

        function imageheightrangeupdate()
        {
            imageheightrangeset();
            svgupdate();
        }
/*
        function imageheightnaturalload()
        {
            const br = document.createElement("br");
            imageheight.append(br);

            const button = document.createElement("button");
            button.innerHTML = "image";
            button.addEventListener("click", imageheightnaturalupdate);
            imageheight.append(button);
        }
        addEventListener("load", imageheightnaturalload);

        function imageheightnaturalupdate()
        {
            imageheightnumber.value = image.naturalHeight;

            imageheightnumberupdate();
        }
//*/
        function imageheightexactload()
        {
            const br = document.createElement("br");
            imageheight.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageheightexactupdate);
                imageheight.append(button);
            }
        }
        addEventListener("load", imageheightexactload);

        function imageheightexactupdate(e)
        {
            imageheightnumber.value = canvas.height * Number(e.target.value);

            imageheightnumberupdate();
        }

        function imageheightincrementload()
        {
            const br = document.createElement("br");
            imageheight.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageheightincrementupdate);
                imageheight.append(button);
            }
        }
        addEventListener("load", imageheightincrementload);

        function imageheightincrementupdate(e)
        {
            const v = Number(imageheightnumber.value) + Number(e.target.value);

            if((imageheightnumber.min <= v) && (v <= imageheightnumber.max))
            {
                imageheightnumber.value = v;

                imageheightnumberupdate();
            }
        }



        function imagexload()
        {
            const div = document.createElement("div");
            div.id = "imagex";
            div.innerHTML = "x";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagexload);

        function imagexnumberload()
        {
            const br = document.createElement("br");
            imagex.append(br);

            const input = document.createElement("input");
            input.id = "imagexnumber";
            input.max = maxwidth;
            input.min = -maxwidth;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagexnumberupdate);
            imagex.append(input);

            //imagexnumberset();
        }
        addEventListener("load", imagexnumberload);

        function imagexnumberset()
        {
            const v = imagexnumber.value;

            imagexrange.value = v;
            image.myx = v;
        }

        function imagexnumberupdate()
        {
            imagexnumberset();
            svgupdate();
        }

        function imagexrangeload()
        {
            //const br = document.createElement("br");
            //imagex.append(br);

            const input = document.createElement("input");
            input.id = "imagexrange";
            input.max = imagexnumber.max;
            input.min = imagexnumber.min;
            input.type = "range";
            input.value = imagexnumber.value;
            input.addEventListener("input", imagexrangeupdate);
            imagex.append(input);

            imagexrangeset();
        }
        addEventListener("load", imagexrangeload);

        function imagexrangeset()
        {
            const v = imagexrange.value;

            imagexnumber.value = v;
            image.myx = v;
        }

        function imagexrangeupdate()
        {
            imagexrangeset();
            svgupdate();
        }

        function imagexexactload()
        {
            const br = document.createElement("br");
            imagex.append(br);

            const array =
            [
                ["left",0],
                ["center",0.5],
                ["right",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagexexactupdate);
                imagex.append(button);
            }
        }
        addEventListener("load", imagexexactload);

        function imagexexactupdate(e)
        {
            imagexnumber.value = (canvas.width - image.width) * Number(e.target.value);

            imagexnumberupdate();
        }

        function imagexincrementload()
        {
            const br = document.createElement("br");
            imagex.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagexincrementupdate);
                imagex.append(button);
            }
        }
        addEventListener("load", imagexincrementload);

        function imagexincrementupdate(e)
        {
            const v = Number(imagexnumber.value) + Number(e.target.value);

            if((imagexnumber.min <= v) && (v <= imagexnumber.max))
            {
                imagexnumber.value = v;

                imagexnumberupdate();
            }
        }



        function imageyload()
        {
            const div = document.createElement("div");
            div.id = "imagey";
            div.innerHTML = "y";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imageyload);

        function imageynumberload()
        {
            const br = document.createElement("br");
            imagey.append(br);

            const input = document.createElement("input");
            input.id = "imageynumber";
            input.max = maxheight;
            input.min = -maxheight;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imageynumberupdate);
            imagey.append(input);

            //imageynumberset();
        }
        addEventListener("load", imageynumberload);

        function imageynumberset()
        {
            const v = imageynumber.value;

            imageyrange.value = v;
            image.myy = v;
        }

        function imageynumberupdate()
        {
            imageynumberset();
            svgupdate();
        }

        function imageyrangeload()
        {
            //const br = document.createElement("br");
            //imagey.append(br);

            const input = document.createElement("input");
            input.id = "imageyrange";
            input.max = imageynumber.max;
            input.min = imageynumber.min;
            input.type = "range";
            input.value = imageynumber.value;
            input.addEventListener("input", imageyrangeupdate);
            imagey.append(input);

            imageyrangeset();
        }
        addEventListener("load", imageyrangeload);

        function imageyrangeset()
        {
            const v = imageyrange.value;

            imageynumber.value = v;
            image.myy = v;
        }

        function imageyrangeupdate()
        {
            imageyrangeset();
            svgupdate();
        }

        function imageyexactload()
        {
            const br = document.createElement("br");
            imagey.append(br);

            const array =
            [
                ["top",0],
                ["center",0.5],
                ["bottom",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageyexactupdate);
                imagey.append(button);
            }
        }
        addEventListener("load", imageyexactload);

        function imageyexactupdate(e)
        {
            imageynumber.value = (canvas.height - image.height) * Number(e.target.value);

            imageynumberupdate();
        }

        function imageyincrementload()
        {
            const br = document.createElement("br");
            imagey.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageyincrementupdate);
                imagey.append(button);
            }
        }
        addEventListener("load", imageyincrementload);

        function imageyincrementupdate(e)
        {
            const v = Number(imageynumber.value) + Number(e.target.value);

            if((imageynumber.min <= v) && (v <= imageynumber.max))
            {
                imageynumber.value = v;

                imageynumberupdate();
            }
        }



        function imagebackgroundcolorload()
        {
            const div = document.createElement("div");
            div.id = "imagebackgroundcolor";
            div.innerHTML = "background-color";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagebackgroundcolorload);

        function imagebackgroundcolorcolorload()
        {
            const br = document.createElement("br");
            imagebackgroundcolor.append(br);

            const input = document.createElement("input");
            input.id = "imagebackgroundcolorcolor";
            input.type = "color";
            input.value = "#ffffff";
            input.addEventListener("input", imagebackgroundcolorcolorupdate);
            imagebackgroundcolor.append(input);

            //imagebackgroundcolorcolorset();
        }
        addEventListener("load", imagebackgroundcolorcolorload);

        function imagebackgroundcolorcolorset()
        {
            const c = imagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = imagebackgroundalphanumber.value;

            image.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function imagebackgroundcolorcolorupdate()
        {
            imagebackgroundcolorcolorset();
            svgupdate();
        }

        function imagebackgroundcolorexactload()
        {
            const br = document.createElement("br");
            imagebackgroundcolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagebackgroundcolorexactupdate);
                imagebackgroundcolor.append(button);
            }
        }
        addEventListener("load", imagebackgroundcolorexactload);

        function imagebackgroundcolorexactupdate(e)
        {
            imagebackgroundcolorcolor.value = e.target.value;

            imagebackgroundcolorcolorupdate();
        }



        function imagebackgroundalphaload()
        {
            const div = document.createElement("div");
            div.id = "imagebackgroundalpha";
            div.innerHTML = "background-alpha";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagebackgroundalphaload);

        function imagebackgroundalphanumberload()
        {
            const br = document.createElement("br");
            imagebackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "imagebackgroundalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagebackgroundalphanumberupdate);
            imagebackgroundalpha.append(input);

            //imagebackgroundalphanumberset();
        }
        addEventListener("load", imagebackgroundalphanumberload);

        function imagebackgroundalphanumberset()
        {
            const c = imagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = imagebackgroundalphanumber.value;

            imagebackgroundalpharange.value = a;
            image.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function imagebackgroundalphanumberupdate()
        {
            imagebackgroundalphanumberset();
            svgupdate();
        }

        function imagebackgroundalpharangeload()
        {
            //const br = document.createElement("br");
            //imagebackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "imagebackgroundalpharange";
            input.max = imagebackgroundalphanumber.max;
            input.min = imagebackgroundalphanumber.min;
            input.step = imagebackgroundalphanumber.step;
            input.type = "range";
            input.value = imagebackgroundalphanumber.value;
            input.addEventListener("input", imagebackgroundalpharangeupdate);
            imagebackgroundalpha.append(input);

            imagebackgroundalpharangeset();
        }
        addEventListener("load", imagebackgroundalpharangeload);

        function imagebackgroundalpharangeset()
        {
            const c = imagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = imagebackgroundalpharange.value;

            imagebackgroundalphanumber.value = a;
            image.backgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function imagebackgroundalpharangeupdate()
        {
            imagebackgroundalpharangeset();
            svgupdate();
        }

        function imagebackgroundalphaexactload()
        {
            const br = document.createElement("br");
            imagebackgroundalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagebackgroundalphaexactupdate);
                imagebackgroundalpha.append(button);
            }
        }
        addEventListener("load", imagebackgroundalphaexactload);

        function imagebackgroundalphaexactupdate(e)
        {
            imagebackgroundalphanumber.value = Number(e.target.value);

            imagebackgroundalphanumberupdate();
        }

        function imagebackgroundalphaincrementload()
        {
            const br = document.createElement("br");
            imagebackgroundalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagebackgroundalphaincrementupdate);
                imagebackgroundalpha.append(button);
            }
        }
        addEventListener("load", imagebackgroundalphaincrementload);

        function imagebackgroundalphaincrementupdate(e)
        {
            let v = Number(imagebackgroundalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((imagebackgroundalphanumber.min <= v) && (v <= imagebackgroundalphanumber.max))
            {
                imagebackgroundalphanumber.value = v;

                imagebackgroundalphanumberupdate();
            }
        }



/*
        function imageopacityload()
        {
            const div = document.createElement("div");
            div.id = "imageopacity";
            div.innerHTML = "opacity";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imageopacityload);

        function imageopacitynumberload()
        {
            const br = document.createElement("br");
            imageopacity.append(br);

            const input = document.createElement("input");
            input.id = "imageopacitynumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", imageopacitynumberupdate);
            imageopacity.append(input);

            //imageopacitynumberset();
        }
        addEventListener("load", imageopacitynumberload);

        function imageopacitynumberset()
        {
            const v = imageopacitynumber.value;

            imageopacityrange.value = v;
            image.opacity = v;
        }

        function imageopacitynumberupdate()
        {
            imageopacitynumberset();
            svgupdate();
        }

        function imageopacityrangeload()
        {
            const input = document.createElement("input");
            input.id = "imageopacityrange";
            input.max = imageopacitynumber.max;
            input.min = imageopacitynumber.min;
            input.step = imageopacitynumber.step;
            input.type = "range";
            input.value = imageopacitynumber.value;
            input.addEventListener("input", imageopacityrangeupdate);
            imageopacity.append(input);

            imageopacityrangeset();
        }
        addEventListener("load", imageopacityrangeload);

        function imageopacityrangeset()
        {
            const v = imageopacityrange.value;

            imageopacitynumber.value = v;
            image.opacity = v;
        }

        function imageopacityrangeupdate()
        {
            imageopacityrangeset();
            svgupdate();
        }

        function imageopacityexactload()
        {
            const br = document.createElement("br");
            imageopacity.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageopacityexactupdate);
                imageopacity.append(button);
            }
        }
        addEventListener("load", imageopacityexactload);

        function imageopacityexactupdate(e)
        {
            imageopacitynumber.value = Number(e.target.value);

            imageopacitynumberupdate();
        }

        function imageopacityincrementload()
        {
            const br = document.createElement("br");
            imageopacity.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imageopacityincrementupdate);
                imageopacity.append(button);
            }
        }
        addEventListener("load", imageopacityincrementload);

        function imageopacityincrementupdate(e)
        {
            let v = Number(imageopacitynumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((imageopacitynumber.min <= v) && (v <= imageopacitynumber.max))
            {
                imageopacitynumber.value = v;

                imageopacitynumberupdate();
            }
        }
//*/



        function imagefilterblurload()
        {
            const div = document.createElement("div");
            div.id = "imagefilterblur";
            div.innerHTML = "filter-blur";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefilterblurload);

        function imagefilterblurnumberload()
        {
            const br = document.createElement("br");
            imagefilterblur.append(br);

            const input = document.createElement("input");
            input.id = "imagefilterblurnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagefilterblurnumberupdate);
            imagefilterblur.append(input);

            //imagefilterblurnumberset();
        }
        addEventListener("load", imagefilterblurnumberload);

        function imagefilterblurnumberset()
        {
            const v = imagefilterblurnumber.value;

            imagefilterblurrange.value = v;
            image.filterblur = v;
        }

        function imagefilterblurnumberupdate()
        {
            imagefilterblurnumberset();
            svgupdate();
        }

        function imagefilterblurrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefilterblurrange";
            input.max = imagefilterblurnumber.max;
            input.min = imagefilterblurnumber.min;
            input.step = imagefilterblurnumber.step;
            input.type = "range";
            input.value = imagefilterblurnumber.value;
            input.addEventListener("input", imagefilterblurrangeupdate);
            imagefilterblur.append(input);

            imagefilterblurrangeset();
        }
        addEventListener("load", imagefilterblurrangeload);

        function imagefilterblurrangeset()
        {
            const v = imagefilterblurrange.value;

            imagefilterblurnumber.value = v;
            image.filterblur = v;
        }

        function imagefilterblurrangeupdate()
        {
            imagefilterblurrangeset();
            svgupdate();
        }

        function imagefilterblurexactload()
        {
            const br = document.createElement("br");
            imagefilterblur.append(br);

            const array =
            [
                ["0",0],
                ["2",2],
                ["4",4],
                ["8",8],
                ["16",16],
                ["32",32],
                ["64",64],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterblurexactupdate);
                imagefilterblur.append(button);
            }
        }
        addEventListener("load", imagefilterblurexactload);

        function imagefilterblurexactupdate(e)
        {
            imagefilterblurnumber.value = Number(e.target.value);

            imagefilterblurnumberupdate();
        }

        function imagefilterblurincrementload()
        {
            const br = document.createElement("br");
            imagefilterblur.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterblurincrementupdate);
                imagefilterblur.append(button);
            }
        }
        addEventListener("load", imagefilterblurincrementload);

        function imagefilterblurincrementupdate(e)
        {
            const v = Number(imagefilterblurnumber.value) + Number(e.target.value);

            if((imagefilterblurnumber.min <= v) && (v <= imagefilterblurnumber.max))
            {
                imagefilterblurnumber.value = v;

                imagefilterblurnumberupdate();
            }
        }



        function imagefilterbrightnessload()
        {
            const div = document.createElement("div");
            div.id = "imagefilterbrightness";
            div.innerHTML = "filter-brightness";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefilterbrightnessload);

        function imagefilterbrightnessnumberload()
        {
            const br = document.createElement("br");
            imagefilterbrightness.append(br);

            const input = document.createElement("input");
            input.id = "imagefilterbrightnessnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", imagefilterbrightnessnumberupdate);
            imagefilterbrightness.append(input);

            //imagefilterbrightnessnumberset();
        }
        addEventListener("load", imagefilterbrightnessnumberload);

        function imagefilterbrightnessnumberset()
        {
            const v = imagefilterbrightnessnumber.value;

            imagefilterbrightnessrange.value = v;
            image.filterbrightness = v;
        }

        function imagefilterbrightnessnumberupdate()
        {
            imagefilterbrightnessnumberset();
            svgupdate();
        }

        function imagefilterbrightnessrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefilterbrightnessrange";
            input.max = imagefilterbrightnessnumber.max;
            input.min = imagefilterbrightnessnumber.min;
            input.step = imagefilterbrightnessnumber.step;
            input.type = "range";
            input.value = imagefilterbrightnessnumber.value;
            input.addEventListener("input", imagefilterbrightnessrangeupdate);
            imagefilterbrightness.append(input);

            imagefilterbrightnessrangeset();
        }
        addEventListener("load", imagefilterbrightnessrangeload);

        function imagefilterbrightnessrangeset()
        {
            const v = imagefilterbrightnessrange.value;

            imagefilterbrightnessnumber.value = v;
            image.filterbrightness = v;
        }

        function imagefilterbrightnessrangeupdate()
        {
            imagefilterbrightnessrangeset();
            svgupdate();
        }

        function imagefilterbrightnessexactload()
        {
            const br = document.createElement("br");
            imagefilterbrightness.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterbrightnessexactupdate);
                imagefilterbrightness.append(button);
            }
        }
        addEventListener("load", imagefilterbrightnessexactload);

        function imagefilterbrightnessexactupdate(e)
        {
            imagefilterbrightnessnumber.value = Number(e.target.value);

            imagefilterbrightnessnumberupdate();
        }

        function imagefilterbrightnessincrementload()
        {
            const br = document.createElement("br");
            imagefilterbrightness.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterbrightnessincrementupdate);
                imagefilterbrightness.append(button);
            }
        }
        addEventListener("load", imagefilterbrightnessincrementload);

        function imagefilterbrightnessincrementupdate(e)
        {
            const v = Number(imagefilterbrightnessnumber.value) + Number(e.target.value);

            if((imagefilterbrightnessnumber.min <= v) && (v <= imagefilterbrightnessnumber.max))
            {
                imagefilterbrightnessnumber.value = v;

                imagefilterbrightnessnumberupdate();
            }
        }



        function imagefiltercontrastload()
        {
            const div = document.createElement("div");
            div.id = "imagefiltercontrast";
            div.innerHTML = "filter-contrast";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefiltercontrastload);

        function imagefiltercontrastnumberload()
        {
            const br = document.createElement("br");
            imagefiltercontrast.append(br);

            const input = document.createElement("input");
            input.id = "imagefiltercontrastnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", imagefiltercontrastnumberupdate);
            imagefiltercontrast.append(input);

            //imagefiltercontrastnumberset();
        }
        addEventListener("load", imagefiltercontrastnumberload);

        function imagefiltercontrastnumberset()
        {
            const v = imagefiltercontrastnumber.value;

            imagefiltercontrastrange.value = v;
            image.filtercontrast = v;
        }

        function imagefiltercontrastnumberupdate()
        {
            imagefiltercontrastnumberset();
            svgupdate();
        }

        function imagefiltercontrastrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefiltercontrastrange";
            input.max = imagefiltercontrastnumber.max;
            input.min = imagefiltercontrastnumber.min;
            input.step = imagefiltercontrastnumber.step;
            input.type = "range";
            input.value = imagefiltercontrastnumber.value;
            input.addEventListener("input", imagefiltercontrastrangeupdate);
            imagefiltercontrast.append(input);

            imagefiltercontrastrangeset();
        }
        addEventListener("load", imagefiltercontrastrangeload);

        function imagefiltercontrastrangeset()
        {
            const v = imagefiltercontrastrange.value;

            imagefiltercontrastnumber.value = v;
            image.filtercontrast = v;
        }

        function imagefiltercontrastrangeupdate()
        {
            imagefiltercontrastrangeset();
            svgupdate();
        }

        function imagefiltercontrastexactload()
        {
            const br = document.createElement("br");
            imagefiltercontrast.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltercontrastexactupdate);
                imagefiltercontrast.append(button);
            }
        }
        addEventListener("load", imagefiltercontrastexactload);

        function imagefiltercontrastexactupdate(e)
        {
            imagefiltercontrastnumber.value = Number(e.target.value);

            imagefiltercontrastnumberupdate();
        }

        function imagefiltercontrastincrementload()
        {
            const br = document.createElement("br");
            imagefiltercontrast.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventList
10000
ener("click", imagefiltercontrastincrementupdate);
                imagefiltercontrast.append(button);
            }
        }
        addEventListener("load", imagefiltercontrastincrementload);

        function imagefiltercontrastincrementupdate(e)
        {
            const v = Number(imagefiltercontrastnumber.value) + Number(e.target.value);

            if((imagefiltercontrastnumber.min <= v) && (v <= imagefiltercontrastnumber.max))
            {
                imagefiltercontrastnumber.value = v;

                imagefiltercontrastnumberupdate();
            }
        }



        function imagefiltergrayscaleload()
        {
            const div = document.createElement("div");
            div.id = "imagefiltergrayscale";
            div.innerHTML = "filter-grayscale";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefiltergrayscaleload);

        function imagefiltergrayscalenumberload()
        {
            const br = document.createElement("br");
            imagefiltergrayscale.append(br);

            const input = document.createElement("input");
            input.id = "imagefiltergrayscalenumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagefiltergrayscalenumberupdate);
            imagefiltergrayscale.append(input);

            //imagefiltergrayscalenumberset();
        }
        addEventListener("load", imagefiltergrayscalenumberload);

        function imagefiltergrayscalenumberset()
        {
            const v = imagefiltergrayscalenumber.value;

            imagefiltergrayscalerange.value = v;
            image.filtergrayscale = v;
        }

        function imagefiltergrayscalenumberupdate()
        {
            imagefiltergrayscalenumberset();
            svgupdate();
        }

        function imagefiltergrayscalerangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefiltergrayscalerange";
            input.max = imagefiltergrayscalenumber.max;
            input.min = imagefiltergrayscalenumber.min;
            input.step = imagefiltergrayscalenumber.step;
            input.type = "range";
            input.value = imagefiltergrayscalenumber.value;
            input.addEventListener("input", imagefiltergrayscalerangeupdate);
            imagefiltergrayscale.append(input);

            imagefiltergrayscalerangeset();
        }
        addEventListener("load", imagefiltergrayscalerangeload);

        function imagefiltergrayscalerangeset()
        {
            const v = imagefiltergrayscalerange.value;

            imagefiltergrayscalenumber.value = v;
            image.filtergrayscale = v;
        }

        function imagefiltergrayscalerangeupdate()
        {
            imagefiltergrayscalerangeset();
            svgupdate();
        }

        function imagefiltergrayscaleexactload()
        {
            const br = document.createElement("br");
            imagefiltergrayscale.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltergrayscaleexactupdate);
                imagefiltergrayscale.append(button);
            }
        }
        addEventListener("load", imagefiltergrayscaleexactload);

        function imagefiltergrayscaleexactupdate(e)
        {
            imagefiltergrayscalenumber.value = Number(e.target.value);

            imagefiltergrayscalenumberupdate();
        }

        function imagefiltergrayscaleincrementload()
        {
            const br = document.createElement("br");
            imagefiltergrayscale.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltergrayscaleincrementupdate);
                imagefiltergrayscale.append(button);
            }
        }
        addEventListener("load", imagefiltergrayscaleincrementload);

        function imagefiltergrayscaleincrementupdate(e)
        {
            const v = Number(imagefiltergrayscalenumber.value) + Number(e.target.value);

            if((imagefiltergrayscalenumber.min <= v) && (v <= imagefiltergrayscalenumber.max))
            {
                imagefiltergrayscalenumber.value = v;

                imagefiltergrayscalenumberupdate();
            }
        }



        function imagefilterhuerotateload()
        {
            const div = document.createElement("div");
            div.id = "imagefilterhuerotate";
            div.innerHTML = "filter-hue-rotate";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefilterhuerotateload);

        function imagefilterhuerotatenumberload()
        {
            const br = document.createElement("br");
            imagefilterhuerotate.append(br);

            const input = document.createElement("input");
            input.id = "imagefilterhuerotatenumber";
            input.max = 360;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagefilterhuerotatenumberupdate);
            imagefilterhuerotate.append(input);

            //imagefilterhuerotatenumberset();
        }
        addEventListener("load", imagefilterhuerotatenumberload);

        function imagefilterhuerotatenumberset()
        {
            const v = imagefilterhuerotatenumber.value;

            imagefilterhuerotaterange.value = v;
            image.filterhuerotate = v;
        }

        function imagefilterhuerotatenumberupdate()
        {
            imagefilterhuerotatenumberset();
            svgupdate();
        }

        function imagefilterhuerotaterangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefilterhuerotaterange";
            input.max = imagefilterhuerotatenumber.max;
            input.min = imagefilterhuerotatenumber.min;
            input.step = imagefilterhuerotatenumber.step;
            input.type = "range";
            input.value = imagefilterhuerotatenumber.value;
            input.addEventListener("input", imagefilterhuerotaterangeupdate);
            imagefilterhuerotate.append(input);

            imagefilterhuerotaterangeset();
        }
        addEventListener("load", imagefilterhuerotaterangeload);

        function imagefilterhuerotaterangeset()
        {
            const v = imagefilterhuerotaterange.value;

            imagefilterhuerotatenumber.value = v;
            image.filterhuerotate = v;
        }

        function imagefilterhuerotaterangeupdate()
        {
            imagefilterhuerotaterangeset();
            svgupdate();
        }

        function imagefilterhuerotateexactload()
        {
            const br = document.createElement("br");
            imagefilterhuerotate.append(br);

            const array =
            [
                ["0",0],
                ["90",90],
                ["180",180],
                ["270",270],
                ["360",360],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterhuerotateexactupdate);
                imagefilterhuerotate.append(button);
            }
        }
        addEventListener("load", imagefilterhuerotateexactload);

        function imagefilterhuerotateexactupdate(e)
        {
            imagefilterhuerotatenumber.value = Number(e.target.value);

            imagefilterhuerotatenumberupdate();
        }

        function imagefilterhuerotateincrementload()
        {
            const br = document.createElement("br");
            imagefilterhuerotate.append(br);

            const array =
            [
                //["-90",-90],
                ["-45",-45],
                ["-15",-15],
                ["-1",-1],
                ["+1",1],
                ["+15",15],
                ["+45",45],
                //["+90",90],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterhuerotateincrementupdate);
                imagefilterhuerotate.append(button);
            }
        }
        addEventListener("load", imagefilterhuerotateincrementload);

        function imagefilterhuerotateincrementupdate(e)
        {
            const v = Number(imagefilterhuerotatenumber.value) + Number(e.target.value);

            if((imagefilterhuerotatenumber.min <= v) && (v <= imagefilterhuerotatenumber.max))
            {
                imagefilterhuerotatenumber.value = v;

                imagefilterhuerotatenumberupdate();
            }
        }



        function imagefilterinvertload()
        {
            const div = document.createElement("div");
            div.id = "imagefilterinvert";
            div.innerHTML = "filter-invert";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefilterinvertload);

        function imagefilterinvertnumberload()
        {
            const br = document.createElement("br");
            imagefilterinvert.append(br);

            const input = document.createElement("input");
            input.id = "imagefilterinvertnumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagefilterinvertnumberupdate);
            imagefilterinvert.append(input);

            //imagefilterinvertnumberset();
        }
        addEventListener("load", imagefilterinvertnumberload);

        function imagefilterinvertnumberset()
        {
            const v = imagefilterinvertnumber.value;

            imagefilterinvertrange.value = v;
            image.filterinvert = v;
        }

        function imagefilterinvertnumberupdate()
        {
            imagefilterinvertnumberset();
            svgupdate();
        }

        function imagefilterinvertrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefilterinvertrange";
            input.max = imagefilterinvertnumber.max;
            input.min = imagefilterinvertnumber.min;
            input.step = imagefilterinvertnumber.step;
            input.type = "range";
            input.value = imagefilterinvertnumber.value;
            input.addEventListener("input", imagefilterinvertrangeupdate);
            imagefilterinvert.append(input);

            imagefilterinvertrangeset();
        }
        addEventListener("load", imagefilterinvertrangeload);

        function imagefilterinvertrangeset()
        {
            const v = imagefilterinvertrange.value;

            imagefilterinvertnumber.value = v;
            image.filterinvert = v;
        }

        function imagefilterinvertrangeupdate()
        {
            imagefilterinvertrangeset();
            svgupdate();
        }

        function imagefilterinvertexactload()
        {
            const br = document.createElement("br");
            imagefilterinvert.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterinvertexactupdate);
                imagefilterinvert.append(button);
            }
        }
        addEventListener("load", imagefilterinvertexactload);

        function imagefilterinvertexactupdate(e)
        {
            imagefilterinvertnumber.value = Number(e.target.value);

            imagefilterinvertnumberupdate();
        }

        function imagefilterinvertincrementload()
        {
            const br = document.createElement("br");
            imagefilterinvert.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilterinvertincrementupdate);
                imagefilterinvert.append(button);
            }
        }
        addEventListener("load", imagefilterinvertincrementload);

        function imagefilterinvertincrementupdate(e)
        {
            const v = Number(imagefilterinvertnumber.value) + Number(e.target.value);

            if((imagefilterinvertnumber.min <= v) && (v <= imagefilterinvertnumber.max))
            {
                imagefilterinvertnumber.value = v;

                imagefilterinvertnumberupdate();
            }
        }



        function imagefilteropacityload()
        {
            const div = document.createElement("div");
            div.id = "imagefilteropacity";
            div.innerHTML = "filter-opacity";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefilteropacityload);

        function imagefilteropacitynumberload()
        {
            const br = document.createElement("br");
            imagefilteropacity.append(br);

            const input = document.createElement("input");
            input.id = "imagefilteropacitynumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", imagefilteropacitynumberupdate);
            imagefilteropacity.append(input);

            //imagefilteropacitynumberset();
        }
        addEventListener("load", imagefilteropacitynumberload);

        function imagefilteropacitynumberset()
        {
            const v = imagefilteropacitynumber.value;

            imagefilteropacityrange.value = v;
            image.filteropacity = v;
        }

        function imagefilteropacitynumberupdate()
        {
            imagefilteropacitynumberset();
            svgupdate();
        }

        function imagefilteropacityrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefilteropacityrange";
            input.max = imagefilteropacitynumber.max;
            input.min = imagefilteropacitynumber.min;
            input.step = imagefilteropacitynumber.step;
            input.type = "range";
            input.value = imagefilteropacitynumber.value;
            input.addEventListener("input", imagefilteropacityrangeupdate);
            imagefilteropacity.append(input);

            imagefilteropacityrangeset();
        }
        addEventListener("load", imagefilteropacityrangeload);

        function imagefilteropacityrangeset()
        {
            const v = imagefilteropacityrange.value;

            imagefilteropacitynumber.value = v;
            image.filteropacity = v;
        }

        function imagefilteropacityrangeupdate()
        {
            imagefilteropacityrangeset();
            svgupdate();
        }

        function imagefilteropacityexactload()
        {
            const br = document.createElement("br");
            imagefilteropacity.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100 (initial)",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilteropacityexactupdate);
                imagefilteropacity.append(button);
            }
        }
        addEventListener("load", imagefilteropacityexactload);

        function imagefilteropacityexactupdate(e)
        {
            imagefilteropacitynumber.value = Number(e.target.value);

            imagefilteropacitynumberupdate();
        }

        function imagefilteropacityincrementload()
        {
            const br = document.createElement("br");
            imagefilteropacity.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefilteropacityincrementupdate);
                imagefilteropacity.append(button);
            }
        }
        addEventListener("load", imagefilteropacityincrementload);

        function imagefilteropacityincrementupdate(e)
        {
            const v = Number(imagefilteropacitynumber.value) + Number(e.target.value);

            if((imagefilteropacitynumber.min <= v) && (v <= imagefilteropacitynumber.max))
            {
                imagefilteropacitynumber.value = v;

                imagefilteropacitynumberupdate();
            }
        }



        function imagefiltersaturateload()
        {
            const div = document.createElement("div");
            div.id = "imagefiltersaturate";
            div.innerHTML = "filter-saturate";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefiltersaturateload);

        function imagefiltersaturatenumberload()
        {
            const br = document.createElement("br");
            imagefiltersaturate.append(br);

            const input = document.createElement("input");
            input.id = "imagefiltersaturatenumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", imagefiltersaturatenumberupdate);
            imagefiltersaturate.append(input);

            //imagefiltersaturatenumberset();
        }
        addEventListener("load", imagefiltersaturatenumberload);

        function imagefiltersaturatenumberset()
        {
            const v = imagefiltersaturatenumber.value;

            imagefiltersaturaterange.value = v;
            image.filtersaturate = v;
        }

        function imagefiltersaturatenumberupdate()
        {
            imagefiltersaturatenumberset();
            svgupdate();
        }

        function imagefiltersaturaterangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefiltersaturaterange";
            input.max = imagefiltersaturatenumber.max;
            input.min = imagefiltersaturatenumber.min;
            input.step = imagefiltersaturatenumber.step;
            input.type = "range";
            input.value = imagefiltersaturatenumber.value;
            input.addEventListener("input", imagefiltersaturaterangeupdate);
            imagefiltersaturate.append(input);

            imagefiltersaturaterangeset();
        }
        addEventListener("load", imagefiltersaturaterangeload);

        function imagefiltersaturaterangeset()
        {
            const v = imagefiltersaturaterange.value;

            imagefiltersaturatenumber.value = v;
            image.filtersaturate = v;
        }

        function imagefiltersaturaterangeupdate()
        {
            imagefiltersaturaterangeset();
            svgupdate();
        }

        function imagefiltersaturateexactload()
        {
            const br = document.createElement("br");
            imagefiltersaturate.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltersaturateexactupdate);
                imagefiltersaturate.append(button);
            }
        }
        addEventListener("load", imagefiltersaturateexactload);

        function imagefiltersaturateexactupdate(e)
        {
            imagefiltersaturatenumber.value = Number(e.target.value);

            imagefiltersaturatenumberupdate();
        }

        function imagefiltersaturateincrementload()
        {
            const br = document.createElement("br");
            imagefiltersaturate.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltersaturateincrementupdate);
                imagefiltersaturate.append(button);
            }
        }
        addEventListener("load", imagefiltersaturateincrementload);

        function imagefiltersaturateincrementupdate(e)
        {
            const v = Number(imagefiltersaturatenumber.value) + Number(e.target.value);

            if((imagefiltersaturatenumber.min <= v) && (v <= imagefiltersaturatenumber.max))
            {
                imagefiltersaturatenumber.value = v;

                imagefiltersaturatenumberupdate();
            }
        }



        function imagefiltersepiaload()
        {
            const div = document.createElement("div");
            div.id = "imagefiltersepia";
            div.innerHTML = "filter-sepia";
            tabcontentimage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", imagefiltersepiaload);

        function imagefiltersepianumberload()
        {
            const br = document.createElement("br");
            imagefiltersepia.append(br);

            const input = document.createElement("input");
            input.id = "imagefiltersepianumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagefiltersepianumberupdate);
            imagefiltersepia.append(input);

            //imagefiltersepianumberset();
        }
        addEventListener("load", imagefiltersepianumberload);

        function imagefiltersepianumberset()
        {
            const v = imagefiltersepianumber.value;

            imagefiltersepiarange.value = v;
            image.filtersepia = v;
        }

        function imagefiltersepianumberupdate()
        {
            imagefiltersepianumberset();
            svgupdate();
        }

        function imagefiltersepiarangeload()
        {
            const input = document.createElement("input");
            input.id = "imagefiltersepiarange";
            input.max = imagefiltersepianumber.max;
            input.min = imagefiltersepianumber.min;
            input.step = imagefiltersepianumber.step;
            input.type = "range";
            input.value = imagefiltersepianumber.value;
            input.addEventListener("input", imagefiltersepiarangeupdate);
            imagefiltersepia.append(input);

            imagefiltersepiarangeset();
        }
        addEventListener("load", imagefiltersepiarangeload);

        function imagefiltersepiarangeset()
        {
            const v = imagefiltersepiarange.value;

            imagefiltersepianumber.value = v;
            image.filtersepia = v;
        }

        function imagefiltersepiarangeupdate()
        {
            imagefiltersepiarangeset();
            svgupdate();
        }

        function imagefiltersepiaexactload()
        {
            const br = document.createElement("br");
            imagefiltersepia.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltersepiaexactupdate);
                imagefiltersepia.append(button);
            }
        }
        addEventListener("load", imagefiltersepiaexactload);

        function imagefiltersepiaexactupdate(e)
        {
            imagefiltersepianumber.value = Number(e.target.value);

            imagefiltersepianumberupdate();
        }

        function imagefiltersepiaincrementload()
        {
            const br = document.createElement("br");
            imagefiltersepia.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", imagefiltersepiaincrementupdate);
                imagefiltersepia.append(button);
            }
        }
        addEventListener("load", imagefiltersepiaincrementload);

        function imagefiltersepiaincrementupdate(e)
        {
            const v = Number(imagefiltersepianumber.value) + Number(e.target.value);

            if((imagefiltersepianumber.min <= v) && (v <= imagefiltersepianumber.max))
            {
                imagefiltersepianumber.value = v;

                imagefiltersepianumberupdate();
            }
        }



/*
        function imagemargintopload()
        {
            const div = document.createElement("div");
            div.id = "imagemargintop";
            div.innerHTML = "margin-top";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagemargintopload);

        function imagemargintopnumberload()
        {
            const br = document.createElement("br");
            imagemargintop.append(br);

            const input = document.createElement("input");
            input.id = "imagemargintopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagemargintopnumberupdate);
            imagemargintop.append(input);

            //imagemargintopnumberset();
        }
        addEventListener("load", imagemargintopnumberload);

        function imagemargintopnumberset()
        {
            const v = Number(imagemargintopnumber.value);

            imagemargintoprange.value = v;
            image.margintop = v;
        }

        function imagemargintopnumberupdate()
        {
            imagemargintopnumberset();

            svgupdate();
        }

        function imagemargintoprangeload()
        {
            const input = document.createElement("input");
            input.id = "imagemargintoprange";
            input.max = imagemargintopnumber.max;
            input.min = imagemargintopnumber.min;
            input.type = "range";
            input.value = imagemargintopnumber.value;
            input.addEventListener("input", imagemargintoprangeupdate);
            imagemargintop.append(input);

            imagemargintoprangeset();
        }
        addEventListener("load", imagemargintoprangeload);

        function imagemargintoprangeset()
        {
            const v = Number(imagemargintoprange.value);

            imagemargintopnumber.value = v;
            image.margintop = v;
        }

        function imagemargintoprangeupdate()
        {
            imagemargintoprangeset();

            svgupdate();
        }



        function imagemarginbottomload()
        {
            const div = document.createElement("div");
            div.id = "imagemarginbottom";
            div.innerHTML = "margin-bottom";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagemarginbottomload);

        function imagemarginbottomnumberload()
        {
            const br = document.createElement("br");
            imagemarginbottom.append(br);

            const input = document.createElement("input");
            input.id = "imagemarginbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagemarginbottomnumberupdate);
            imagemarginbottom.append(input);

            //imagemarginbottomnumberset();
        }
        addEventListener("load", imagemarginbottomnumberload);

        function imagemarginbottomnumberset()
        {
            const v = Number(imagemarginbottomnumber.value);

            imagemarginbottomrange.value = v;
            image.marginbottom = v;
        }

        function imagemarginbottomnumberupdate()
        {
            imagemarginbottomnumberset();

            svgupdate();
        }

        function imagemarginbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagemarginbottomrange";
            input.max = imagemarginbottomnumber.max;
            input.min = imagemarginbottomnumber.min;
            input.type = "range";
            input.value = imagemarginbottomnumber.value;
            input.addEventListener("input", imagemarginbottomrangeupdate);
            imagemarginbottom.append(input);

            imagemarginbottomrangeset();
        }
        addEventListener("load", imagemarginbottomrangeload);

        function imagemarginbottomrangeset()
        {
            const v = Number(imagemarginbottomrange.value);

            imagemarginbottomnumber.value = v;
            image.marginbottom = v;
        }

        function imagemarginbottomrangeupdate()
        {
            imagemarginbottomrangeset();

            svgupdate();
        }



        function imagemarginleftload()
        {
            const div = document.createElement("div");
            div.id = "imagemarginleft";
            div.innerHTML = "margin-left";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagemarginleftload);

        function imagemarginleftnumberload()
        {
            const br = document.createElement("br");
            imagemarginleft.append(br);

            const input = document.createElement("input");
            input.id = "imagemarginleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagemarginleftnumberupdate);
            imagemarginleft.append(input);

            //imagemarginleftnumberset();
        }
        addEventListener("load", imagemarginleftnumberload);

        function imagemarginleftnumberset()
        {
            const v = Number(imagemarginleftnumber.value);

            imagemarginleftrange.value = v;
            image.marginleft = v;
        }

        function imagemarginleftnumberupdate()
        {
            imagemarginleftnumberset();

            svgupdate();
        }

        function imagemarginleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagemarginleftrange";
            input.max = imagemarginleftnumber.max;
            input.min = imagemarginleftnumber.min;
            input.type = "range";
            input.value = imagemarginleftnumber.value;
            input.addEventListener("input", imagemarginleftrangeupdate);
            imagemarginleft.append(input);

            imagemarginleftrangeset();
        }
        addEventListener("load", imagemarginleftrangeload);

        function imagemarginleftrangeset()
        {
            const v = Number(imagemarginleftrange.value);

            imagemarginleftnumber.value = v;
            image.marginleft = v;
        }

        function imagemarginleftrangeupdate()
        {
            imagemarginleftrangeset();

            svgupdate();
        }



        function imagemarginrightload()
        {
            const div = document.createElement("div");
            div.id = "imagemarginright";
            div.innerHTML = "margin-right";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagemarginrightload);

        function imagemarginrightnumberload()
        {
            const br = document.createElement("br");
            imagemarginright.append(br);

            const input = document.createElement("input");
            input.id = "imagemarginrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagemarginrightnumberupdate);
            imagemarginright.append(input);

            //imagemarginrightnumberset();
        }
        addEventListener("load", imagemarginrightnumberload);

        function imagemarginrightnumberset()
        {
            const v = Number(imagemarginrightnumber.value);

            imagemarginrightrange.value = v;
            image.marginright = v;
        }

        function imagemarginrightnumberupdate()
        {
            imagemarginrightnumberset();

            svgupdate();
        }

        function imagemarginrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagemarginrightrange";
            input.max = imagemarginrightnumber.max;
            input.min = imagemarginrightnumber.min;
            input.type = "range";
            input.value = imagemarginrightnumber.value;

            input.addEventListener("input", imagemarginrightrangeupdate);
            imagemarginright.append(input);

            imagemarginrightrangeset();
        }
        addEventListener("load", imagemarginrightrangeload);

        function imagemarginrightrangeset()
        {
            const v = Number(imagemarginrightrange.value);

            imagemarginrightnumber.value = v;
            image.marginright = v;
        }

        function imagemarginrightrangeupdate()
        {
            imagemarginrightrangeset();

            svgupdate();
        }



        function imagepaddingtopload()
        {
            const div = document.createElement("div");
            div.id = "imagepaddingtop";
            div.innerHTML = "padding-top";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagepaddingtopload);

        function imagepaddingtopnumberload()
        {
            const br = document.createElement("br");
            imagepaddingtop.append(br);

            const input = document.createElement("input");
            input.id = "imagepaddingtopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagepaddingtopnumberupdate);
            imagepaddingtop.append(input);

            //imagepaddingtopnumberset();
        }
        addEventListener("load", imagepaddingtopnumberload);

        function imagepaddingtopnumberset()
        {
            const v = Number(imagepaddingtopnumber.value);

            imagepaddingtoprange.value = v;
            image.paddingtop = v;
        }

        function imagepaddingtopnumberupdate()
        {
            imagepaddingtopnumberset();

            svgupdate();
        }

        function imagepaddingtoprangeload()
        {
            const input = document.createElement("input");
            input.id = "imagepaddingtoprange";
            input.max = imagepaddingtopnumber.max;
            input.min = imagepaddingtopnumber.min;
            input.type = "range";
            input.value = imagepaddingtopnumber.value;
            input.addEventListener("input", imagepaddingtoprangeupdate);
            imagepaddingtop.append(input);

            imagepaddingtoprangeset();
        }
        addEventListener("load", imagepaddingtoprangeload);

        function imagepaddingtoprangeset()
        {
            const v = Number(imagepaddingtoprange.value);

            imagepaddingtopnumber.value = v;
            image.paddingtop = v;
        }

        function imagepaddingtoprangeupdate()
        {
            imagepaddingtoprangeset();

            svgupdate();
        }



        function imagepaddingbottomload()
        {
            const div = document.createElement("div");
            div.id = "imagepaddingbottom";
            div.innerHTML = "padding-bottom";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagepaddingbottomload);

        function imagepaddingbottomnumberload()
        {
            const br = document.createElement("br");
            imagepaddingbottom.append(br);

            const input = document.createElement("input");
            input.id = "imagepaddingbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagepaddingbottomnumberupdate);
            imagepaddingbottom.append(input);

            //imagepaddingbottomnumberset();
        }
        addEventListener("load", imagepaddingbottomnumberload);

        function imagepaddingbottomnumberset()
        {
            const v = Number(imagepaddingbottomnumber.value);

            imagepaddingbottomrange.value = v;
            image.paddingbottom = v;
        }

        function imagepaddingbottomnumberupdate()
        {
            imagepaddingbottomnumberset();

            svgupdate();
        }

        function imagepaddingbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagepaddingbottomrange";
            input.max = imagepaddingbottomnumber.max;
            input.min = imagepaddingbottomnumber.min;
            input.type = "range";
            input.value = imagepaddingbottomnumber.value;
            input.addEventListener("input", imagepaddingbottomrangeupdate);
            imagepaddingbottom.append(input);

            imagepaddingbottomrangeset();
        }
        addEventListener("load", imagepaddingbottomrangeload);

        function imagepaddingbottomrangeset()
        {
            const v = Number(imagepaddingbottomrange.value);

            imagepaddingbottomnumber.value = v;
            image.paddingbottom = v;
        }

        function imagepaddingbottomrangeupdate()
        {
            imagepaddingbottomrangeset();

            svgupdate();
        }



        function imagepaddingleftload()
        {
            const div = document.createElement("div");
            div.id = "imagepaddingleft";
            div.innerHTML = "padding-left";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagepaddingleftload);

        function imagepaddingleftnumberload()
        {
            const br = document.createElement("br");
            imagepaddingleft.append(br);

            const input = document.createElement("input");
            input.id = "imagepaddingleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagepaddingleftnumberupdate);
            imagepaddingleft.append(input);

            //imagepaddingleftnumberset();
        }
        addEventListener("load", imagepaddingleftnumberload);

        function imagepaddingleftnumberset()
        {
            const v = Number(imagepaddingleftnumber.value);

            imagepaddingleftrange.value = v;
            image.paddingleft = v;
        }

        function imagepaddingleftnumberupdate()
        {
            imagepaddingleftnumberset();

            svgupdate();
        }

        function imagepaddingleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagepaddingleftrange";
            input.max = imagepaddingleftnumber.max;
            input.min = imagepaddingleftnumber.min;
            input.type = "range";
            input.value = imagepaddingleftnumber.value;
            input.addEventListener("input", imagepaddingleftrangeupdate);
            imagepaddingleft.append(input);

            imagepaddingleftrangeset();
        }
        addEventListener("load", imagepaddingleftrangeload);

        function imagepaddingleftrangeset()
        {
            const v = Number(imagepaddingleftrange.value);

            imagepaddingleftnumber.value = v;
            image.paddingleft = v;
        }

        function imagepaddingleftrangeupdate()
        {
            imagepaddingleftrangeset();

            svgupdate();
        }



        function imagepaddingrightload()
        {
            const div = document.createElement("div");
            div.id = "imagepaddingright";
            div.innerHTML = "padding-right";
            tabcontentimage.append(div);
        }
        addEventListener("load", imagepaddingrightload);

        function imagepaddingrightnumberload()
        {
            const br = document.createElement("br");
            imagepaddingright.append(br);

            const input = document.createElement("input");
            input.id = "imagepaddingrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", imagepaddingrightnumberupdate);
            imagepaddingright.append(input);

            //imagepaddingrightnumberset();
        }
        addEventListener("load", imagepaddingrightnumberload);

        function imagepaddingrightnumberset()
        {
            const v = Number(imagepaddingrightnumber.value);

            imagepaddingrightrange.value = v;
            image.paddingright = v;
        }

        function imagepaddingrightnumberupdate()
        {
            imagepaddingrightnumberset();

            svgupdate();
        }

        function imagepaddingrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "imagepaddingrightrange";
            input.max = imagepaddingrightnumber.max;
            input.min = imagepaddingrightnumber.min;
            input.type = "range";
            input.value = imagepaddingrightnumber.value;
            input.addEventListener("input", imagepaddingrightrangeupdate);
            imagepaddingright.append(input);

            imagepaddingrightrangeset();
        }
        addEventListener("load", imagepaddingrightrangeload);

        function imagepaddingrightrangeset()
        {
            const v = Number(imagepaddingrightrange.value);

            imagepaddingrightnumber.value = v;
            image.paddingright = v;
        }

        function imagepaddingrightrangeupdate()
        {
            imagepaddingrightrangeset();

            svgupdate();
        }
//*/






        function messagetextload()
        {
            const div = document.createElement("div");
            div.id = "messagetext";
            div.innerHTML = "text";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagetextload);

        function messagetexttextareaload()
        {
            const br = document.createElement("br");
            messagetext.append(br);

            const textarea = document.createElement("textarea");
            textarea.id = "messagetexttextarea";
            textarea.addEventListener("input", messagetexttextareaupdate);
            messagetext.append(textarea);

            textarea.value = "Jesus loves you!";

            messagetexttextareaset();
        }
        addEventListener("load", messagetexttextareaload);

        function messagetexttextareaset()
        {
            text.messagetext = messagetexttextarea.value;
        }

        function messagetexttextareaupdate()
        {
            messagetexttextareaset();
            svgupdate();
        }



        function messagewidthload()
        {
            const div = document.createElement("div");
            div.id = "messagewidth";
            div.innerHTML = "width";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagewidthload);

        function messagewidthnumberload()
        {
            const br = document.createElement("br");
            messagewidth.append(br);

            const input = document.createElement("input");
            input.id = "messagewidthnumber";
            input.max = maxwidth;
            input.min = 0;
            input.type = "number";
            input.value = canvas.width - 100;
            input.addEventListener("input", messagewidthnumberupdate);
            messagewidth.append(input);

            //messagewidthnumberset();
        }
        addEventListener("load", messagewidthnumberload);

        function messagewidthnumberset()
        {
            const v = Number(messagewidthnumber.value);

            messagewidthrange.value = v;
            text.messagewidth = v;
        }

        function messagewidthnumberupdate()
        {
            messagewidthnumberset();
            svgupdate();
        }

        function messagewidthrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagewidthrange";
            input.max = messagewidthnumber.max;
            input.min = messagewidthnumber.min;
            input.type = "range";
            input.value = messagewidthnumber.value;
            input.addEventListener("input", messagewidthrangeupdate);
            messagewidth.append(input);

            messagewidthrangeset();
        }
        addEventListener("load", messagewidthrangeload);

        function messagewidthrangeset()
        {
            const v = Number(messagewidthrange.value);

            messagewidthnumber.value = v;
            text.messagewidth = v;
        }

        function messagewidthrangeupdate()
        {
            messagewidthrangeset();
            svgupdate();
        }

        function messagewidthexactload()
        {
            const br = document.createElement("br");
            messagewidth.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagewidthexactupdate);
                messagewidth.append(button);
            }
        }
        addEventListener("load", messagewidthexactload);

        function messagewidthexactupdate(e)
        {
            messagewidthnumber.value = canvas.width * Number(e.target.value);

            messagewidthnumberupdate();
        }

        function messagewidthincrementload()
        {
            const br = document.createElement("br");
            messagewidth.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagewidthincrementupdate);
                messagewidth.append(button);
            }
        }
        addEventListener("load", messagewidthincrementload);

        function messagewidthincrementupdate(e)
        {
            const v = Number(messagewidthnumber.value) + Number(e.target.value);

            if((messagewidthnumber.min <= v) && (v <= messagewidthnumber.max))
            {
                messagewidthnumber.value = v;

                messagewidthnumberupdate();
            }
        }



        function messageheightload()
        {
            const div = document.createElement("div");
            div.id = "messageheight";
            div.innerHTML = "height";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messageheightload);

        function messageheightnumberload()
        {
            const br = document.createElement("br");
            messageheight.append(br);

            const input = document.createElement("input");
            input.id = "messageheightnumber";
            input.max = maxheight;
            input.min = 0;
            input.type = "number";
            input.value = 300;
            input.addEventListener("input", messageheightnumberupdate);
            messageheight.append(input);

            //messageheightnumberset();
        }
        addEventListener("load", messageheightnumberload);

        function messageheightnumberset()
        {
            const v = Number(messageheightnumber.value);

            messageheightrange.value = v;
            text.messageheight = v;
        }

        function messageheightnumberupdate()
        {
            messageheightnumberset();
            svgupdate();
        }

        function messageheightrangeload()
        {
            const input = document.createElement("input");
            input.id = "messageheightrange";
            input.max = messageheightnumber.max;
            input.min = messageheightnumber.min;
            input.type = "range";
            input.value = messageheightnumber.value;
            input.addEventListener("input", messageheightrangeupdate);
            messageheight.append(input);

            messageheightrangeset();
        }
        addEventListener("load", messageheightrangeload);

        function messageheightrangeset()
        {
            const v = Number(messageheightrange.value);

            messageheightnumber.value = v;
            text.messageheight = v;
        }

        function messageheightrangeupdate()
        {
            messageheightrangeset();
            svgupdate();
        }

        function messageheightexactload()
        {
            const br = document.createElement("br");
            messageheight.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageheightexactupdate);
                messageheight.append(button);
            }
        }
        addEventListener("load", messageheightexactload);

        function messageheightexactupdate(e)
        {
            messageheightnumber.value = canvas.height * Number(e.target.value);

            messageheightnumberupdate();
        }

        function messageheightincrementload()
        {
            const br = document.createElement("br");
            messageheight.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageheightincrementupdate);
                messageheight.append(button);
            }
        }
        addEventListener("load", messageheightincrementload);

        function messageheightincrementupdate(e)
        {
            const v = Number(messageheightnumber.value) + Number(e.target.value);

            if((messageheightnumber.min <= v) && (v <= messageheightnumber.max))
            {
                messageheightnumber.value = v;

                messageheightnumberupdate();
            }
        }



        function messagexload()
        {
            const div = document.createElement("div");
            div.id = "messagex";
            div.innerHTML = "x";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagexload);

        function messagexnumberload()
        {
            const br = document.createElement("br");
            messagex.append(br);

            const input = document.createElement("input");
            input.id = "messagexnumber";
            input.max = maxwidth;
            input.min = -maxwidth;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", messagexnumberupdate);
            messagex.append(input);

            //messagexnumberset();
        }
        addEventListener("load", messagexnumberload);

        function messagexnumberset()
        {
            const v = Number(messagexnumber.value);

            messagexrange.value = v;
            text.messagex = v;
        }

        function messagexnumberupdate()
        {
            messagexnumberset();
            svgupdate();
        }

        function messagexrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagexrange";
            input.max = messagexnumber.max;
            input.min = messagexnumber.min;
            input.type = "range";
            input.value = messagexnumber.value;
            input.addEventListener("input", messagexrangeupdate);
            messagex.append(input);

            messagexrangeset();
        }
        addEventListener("load", messagexrangeload);

        function messagexrangeset()
        {
            const v = Number(messagexrange.value);

            messagexnumber.value = v;
            text.messagex = v;
        }

        function messagexrangeupdate()
        {
            messagexrangeset();
            svgupdate();
        }

        function messagexexactload()
        {
            const br = document.createElement("br");
            messagex.append(br);

            const array =
            [
                ["left",0],
                ["center",0.5],
                ["right",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagexexactupdate);
                messagex.append(button);
            }
        }
        addEventListener("load", messagexexactload);

        function messagexexactupdate(e)
        {
            //messagexnumber.value = (canvas.width - text.messagewidth - text.messagepaddingleft - text.messagepaddingright) * Number(e.target.value);
            messagexnumber.value = (canvas.width - text.messagewidth) * Number(e.target.value);

            messagexnumberupdate();
        }

        function messagexincrementload()
        {
            const br = document.createElement("br");
            messagex.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagexincrementupdate);
                messagex.append(button);
            }
        }
        addEventListener("load", messagexincrementload);

        function messagexincrementupdate(e)
        {
            const v = Number(messagexnumber.value) + Number(e.target.value);

            if((messagexnumber.min <= v) && (v <= messagexnumber.max))
            {
                messagexnumber.value = v;

                messagexnumberupdate();
            }
        }



        function messageyload()
        {
            const div = document.createElement("div");
            div.id = "messagey";
            div.innerHTML = "y";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messageyload);

        function messageynumberload()
        {
            const br = document.createElement("br");
            messagey.append(br);

            const input = document.createElement("input");
            input.id = "messageynumber";
            input.max = maxheight;
            input.min = -maxheight;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", messageynumberupdate);
            messagey.append(input);

            //messageynumberset();
        }
        addEventListener("load", messageynumberload);

        function messageynumberset()
        {
            const v = Number(messageynumber.value);

            messageyrange.value = v;
            text.messagey = v;
        }

        function messageynumberupdate()
        {
            messageynumberset();
            svgupdate();
        }

        function messageyrangeload()
        {
            const input = document.createElement("input");
            input.id = "messageyrange";
            input.max = messageynumber.max;
            input.min = messageynumber.min;
            input.type = "range";
            input.value = messageynumber.value;
            input.addEventListener("input", messageyrangeupdate);
            messagey.append(input);

            messageyrangeset();
        }
        addEventListener("load", messageyrangeload);

        function messageyrangeset()
        {
            const v = Number(messageyrange.value);

            messageynumber.value = v;
            text.messagey = v;
        }

        function messageyrangeupdate()
        {
            messageyrangeset();
            svgupdate();
        }

        function messageyexactload()
        {
            const br = document.createElement("br");
            messagey.append(br);

            const array =
            [
                ["top",0],
                ["center",0.5],
                ["bottom",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageyexactupdate);
                messagey.append(button);
            }
        }
        addEventListener("load", messageyexactload);

        function messageyexactupdate(e)
        {
            //messageynumber.value = (canvas.height - text.messageheight - text.messagepaddingtop - text.messagepaddingbottom) * Number(e.target.value);
            messageynumber.value = (canvas.height - text.messageheight) * Number(e.target.value);

            messageynumberupdate();
        }

        function messageyincrementload()
        {
            const br = document.createElement("br");
            messagey.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageyincrementupdate);
                messagey.append(button);
            }
        }
        addEventListener("load", messageyincrementload);

        function messageyincrementupdate(e)
        {
            const v = Number(messageynumber.value) + Number(e.target.value);

            if((messageynumber.min <= v) && (v <= messageynumber.max))
            {
                messageynumber.value = v;

                messageynumberupdate();
            }
        }



        function messagebackgroundcolorload()
        {
            const div = document.createElement("div");
            div.id = "messagebackgroundcolor";
            div.innerHTML = "background-color";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagebackgroundcolorload);

        function messagebackgroundcolorcolorload()
        {
            const br = document.createElement("br");
            messagebackgroundcolor.append(br);

            const input = document.createElement("input");
            input.id = "messagebackgroundcolorcolor";
            input.type = "color";
            input.value = "#ffffff";
            input.addEventListener("input", messagebackgroundcolorcolorupdate);
            messagebackgroundcolor.append(input);

            //messagebackgroundcolorcolorset();
        }
        addEventListener("load", messagebackgroundcolorcolorload);

        function messagebackgroundcolorcolorset()
        {
            const c = messagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagebackgroundalphanumber.value;

            text.messagebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagebackgroundcolorcolorupdate()
        {
            messagebackgroundcolorcolorset();
            svgupdate();
        }

        function messagebackgroundcolorexactload()
        {
            const br = document.createElement("br");
            messagebackgroundcolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagebackgroundcolorexactupdate);
                messagebackgroundcolor.append(button);
            }
        }
        addEventListener("load", messagebackgroundcolorexactload);

        function messagebackgroundcolorexactupdate(e)
        {
            messagebackgroundcolorcolor.value = e.target.value;

            messagebackgroundcolorcolorupdate();
        }



        function messagebackgroundalphaload()
        {
            const div = document.createElement("div");
            div.id = "messagebackgroundalpha";
            div.innerHTML = "background-alpha";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagebackgroundalphaload);

        function messagebackgroundalphanumberload()
        {
            const br = document.createElement("br");
            messagebackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "messagebackgroundalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 0.5;
            input.addEventListener("input", messagebackgroundalphanumberupdate);
            messagebackgroundalpha.append(input);

            //messagebackgroundalphanumberset();
        }
        addEventListener("load", messagebackgroundalphanumberload);

        function messagebackgroundalphanumberset()
        {
            const c = messagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagebackgroundalphanumber.value;

            messagebackgroundalpharange.value = a;
            text.messagebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagebackgroundalphanumberupdate()
        {
            messagebackgroundalphanumberset();
            svgupdate();
        }

        function messagebackgroundalpharangeload()
        {
            const input = document.createElement("input");
            input.id = "messagebackgroundalpharange";
            input.max = messagebackgroundalphanumber.max;
            input.min = messagebackgroundalphanumber.min;
            input.step = messagebackgroundalphanumber.step;
            input.type = "range";
            input.value = messagebackgroundalphanumber.value;
            input.addEventListener("input", messagebackgroundalpharangeupdate);
            messagebackgroundalpha.append(input);

            messagebackgroundalpharangeset();
        }
        addEventListener("load", messagebackgroundalpharangeload);

        function messagebackgroundalpharangeset()
        {
            const c = messagebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagebackgroundalpharange.value;

            messagebackgroundalphanumber.value = a;
            text.messagebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagebackgroundalpharangeupdate()
        {
            messagebackgroundalpharangeset();
            svgupdate();
        }

        function messagebackgroundalphaexactload()
        {
            const br = document.createElement("br");
            messagebackgroundalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagebackgroundalphaexactupdate);
                messagebackgroundalpha.append(button);
            }
        }
        addEventListener("load", messagebackgroundalphaexactload);

        function messagebackgroundalphaexactupdate(e)
        {
            messagebackgroundalphanumber.value = Number(e.target.value);

            messagebackgroundalphanumberupdate();
        }

        function messagebackgroundalphaincrementload()
        {
            const br = document.createElement("br");
            messagebackgroundalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagebackgroundalphaincrementupdate);
                messagebackgroundalpha.append(button);
            }
        }
        addEventListener("load", messagebackgroundalphaincrementload);

        function messagebackgroundalphaincrementupdate(e)
        {
            let v = Number(messagebackgroundalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((messagebackgroundalphanumber.min <= v) && (v <= messagebackgroundalphanumber.max))
            {
                messagebackgroundalphanumber.value = v;

                messagebackgroundalphanumberupdate();
            }
        }



        function messagebordercolorload()
        {
            const div = document.createElement("div");
            div.id = "messagebordercolor";
            div.innerHTML = "border-color";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagebordercolorload);

        function messagebordercolorcolorload()
        {
            const br = document.createElement("br");
            messagebordercolor.append(br);

            const input = document.createElement("input");
            input.id = "messagebordercolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", messagebordercolorcolorupdate);
            messagebordercolor.append(input);

            //messagebordercolorcolorset();
        }
        addEventListener("load", messagebordercolorcolorload);

        function messagebordercolorcolorset()
        {
            const c = messagebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messageborderalphanumber.value;

            text.messagebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagebordercolorcolorupdate()
        {
            messagebordercolorcolorset();
            svgupdate();
        }

        function messagebordercolorexactload()
        {
            const br = document.createElement("br");
            messagebordercolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagebordercolorexactupdate);
                messagebordercolor.append(button);
            }
        }
        addEventListener("load", messagebordercolorexactload);

        function messagebordercolorexactupdate(e)
        {
            messagebordercolorcolor.value = e.target.value;

            messagebordercolorcolorupdate();
        }



        function messageborderalphaload()
        {
            const div = document.createElement("div");
            div.id = "messageborderalpha";
            div.innerHTML = "border-alpha";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messageborderalphaload);

        function messageborderalphanumberload()
        {
            const br = document.createElement("br");
            messageborderalpha.append(br);

            const input = document.createElement("input");
            input.id = "messageborderalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", messageborderalphanumberupdate);
            messageborderalpha.append(input);

            //messageborderalphanumberset();
        }
        addEventListener("load", messageborderalphanumberload);

        function messageborderalphanumberset()
        {
            const c = messagebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messageborderalphanumber.value;

            messageborderalpharange.value = a;
            text.messagebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messageborderalphanumberupdate()
        {
            messageborderalphanumberset();
            svgupdate();
        }

        function messageborderalpharangeload()
        {
            const input = document.createElement("input");
            input.id = "messageborderalpharange";
            input.max = messageborderalphanumber.max;
            input.min = messageborderalphanumber.min;
            input.step = messageborderalphanumber.step;
            input.type = "range";
            input.value = messageborderalphanumber.value;
            input.addEventListener("input", messageborderalpharangeupdate);
            messageborderalpha.append(input);

            messageborderalpharangeset();
        }
        addEventListener("load", messageborderalpharangeload);

        function messageborderalpharangeset()
        {
            const c = messagebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messageborderalpharange.value;

            messageborderalphanumber.value = a;
            text.messagebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messageborderalpharangeupdate()
        {
            messageborderalpharangeset();
            svgupdate();
        }

        function messageborderalphaexactload()
        {
            const br = document.createElement("br");
            messageborderalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderalphaexactupdate);
                messageborderalpha.append(button);
            }
        }
        addEventListener("load", messageborderalphaexactload);

        function messageborderalphaexactupdate(e)
        {
            messageborderalphanumber.value = Number(e.target.value);

            messageborderalphanumberupdate();
        }

        function messageborderalphaincrementload()
        {
            const br = document.createElement("br");
            messageborderalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderalphaincrementupdate);
                messageborderalpha.append(button);
            }
        }
        addEventListener("load", messageborderalphaincrementload);

        function messageborderalphaincrementupdate(e)
        {
            let v = Number(messageborderalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((messageborderalphanumber.min <= v) && (v <= messageborderalphanumber.max))
            {
                messageborderalphanumber.value = v;

                messageborderalphanumberupdate();
            }
        }



        function messageborderradiusload()
        {
            const div = document.createElement("div");
            div.id = "messageborderradius";
            div.innerHTML = "border-radius";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messageborderradiusload);

        function messageborderradiusnumberload()
        {
            const br = document.createElement("br");
            messageborderradius.append(br);

            const input = document.createElement("input");
            input.id = "messageborderradiusnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", messageborderradiusnumberupdate);
            messageborderradius.append(input);

            //messageborderradiusnumberset();
        }
        addEventListener("load", messageborderradiusnumberload);

        function messageborderradiusnumberset()
        {
            const v = Number(messageborderradiusnumber.value);

            messageborderradiusrange.value = v;
            text.messageborderradius = v;
        }

        function messageborderradiusnumberupdate()
        {
            messageborderradiusnumberset();
            svgupdate();
        }

        function messageborderradiusrangeload()
        {
            const input = document.createElement("input");
            input.id = "messageborderradiusrange";
            input.max = messageborderradiusnumber.max;
            input.min = messageborderradiusnumber.min;
            input.type = "range";
            input.value = messageborderradiusnumber.value;
            input.addEventListener("input", messageborderradiusrangeupdate);
            messageborderradius.append(input);

            messageborderradiusrangeset();
        }
        addEventListener("load", messageborderradiusrangeload);

        function messageborderradiusrangeset()
        {
            const v = Number(messageborderradiusrange.value);

            messageborderradiusnumber.value = v;
            text.messageborderradius = v;
        }

        function messageborderradiusrangeupdate()
        {
            messageborderradiusrangeset();
            svgupdate();
        }

        function messageborderradiusexactload()
        {
            const br = document.createElement("br");
            messageborderradius.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderradiusexactupdate);
                messageborderradius.append(button);
            }
        }
        addEventListener("load", messageborderradiusexactload);

        function messageborderradiusexactupdate(e)
        {
            messageborderradiusnumber.value = Number(e.target.value);

            messageborderradiusnumberupdate();
        }

        function messageborderradiusincrementload()
        {
            const br = document.createElement("br");
            messageborderradius.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderradiusincrementupdate);
                messageborderradius.append(button);
            }
        }
        addEventListener("load", messageborderradiusincrementload);

        function messageborderradiusincrementupdate(e)
        {
            const v = Number(messageborderradiusnumber.value) + Number(e.target.value);

            if((messageborderradiusnumber.min <= v) && (v <= messageborderradiusnumber.max))
            {
                messageborderradiusnumber.value = v;

                messageborderradiusnumberupdate();
            }
        }



        function messageborderstyleload()
        {
            const div = document.createElement("div");
            div.id = "messageborderstyle";
            div.innerHTML = "border-style";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messageborderstyleload);

        function messageborderstyleselectload()
        {
            const br = document.createElement("br");
            messageborderstyle.append(br);

            const select = document.createElement("select");
            select.id = "messageborderstyleselect";
            select.addEventListener("input", messageborderstyleselectupdate);
            messageborderstyle.append(select);

            for(const value of borderstylearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
    
10000
        }

            //select.value = borderstylearray[8];

            messageborderstyleselectset();
        }
        addEventListener("load", messageborderstyleselectload);

        function messageborderstyleselectset()
        {
            text.messageborderstyle = messageborderstyleselect.value;
        }

        function messageborderstyleselectupdate()
        {
            messageborderstyleselectset();
            svgupdate();
        }



        function messageborderwidthload()
        {
            const div = document.createElement("div");
            div.id = "messageborderwidth";
            div.innerHTML = "border-width";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messageborderwidthload);

        function messageborderwidthnumberload()
        {
            const br = document.createElement("br");
            messageborderwidth.append(br);

            const input = document.createElement("input");
            input.id = "messageborderwidthnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 25;
            input.addEventListener("input", messageborderwidthnumberupdate);
            messageborderwidth.append(input);

            //messageborderwidthnumberset();
        }
        addEventListener("load", messageborderwidthnumberload);

        function messageborderwidthnumberset()
        {
            const v = Number(messageborderwidthnumber.value);

            messageborderwidthrange.value = v;
            text.messageborderwidth = v;
        }

        function messageborderwidthnumberupdate()
        {
            messageborderwidthnumberset();
            svgupdate();
        }

        function messageborderwidthrangeload()
        {
            const input = document.createElement("input");
            input.id = "messageborderwidthrange";
            input.max = messageborderwidthnumber.max;
            input.min = messageborderwidthnumber.min;
            input.type = "range";
            input.value = messageborderwidthnumber.value;
            input.addEventListener("input", messageborderwidthrangeupdate);
            messageborderwidth.append(input);

            messageborderwidthrangeset();
        }
        addEventListener("load", messageborderwidthrangeload);

        function messageborderwidthrangeset()
        {
            const v = Number(messageborderwidthrange.value);

            messageborderwidthnumber.value = v;
            text.messageborderwidth = v;
        }

        function messageborderwidthrangeupdate()
        {
            messageborderwidthrangeset();
            svgupdate();
        }

        function messageborderwidthexactload()
        {
            const br = document.createElement("br");
            messageborderwidth.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderwidthexactupdate);
                messageborderwidth.append(button);
            }
        }
        addEventListener("load", messageborderwidthexactload);

        function messageborderwidthexactupdate(e)
        {
            messageborderwidthnumber.value = Number(e.target.value);

            messageborderwidthnumberupdate();
        }

        function messageborderwidthincrementload()
        {
            const br = document.createElement("br");
            messageborderwidth.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messageborderwidthincrementupdate);
                messageborderwidth.append(button);
            }
        }
        addEventListener("load", messageborderwidthincrementload);

        function messageborderwidthincrementupdate(e)
        {
            const v = Number(messageborderwidthnumber.value) + Number(e.target.value);

            if((messageborderwidthnumber.min <= v) && (v <= messageborderwidthnumber.max))
            {
                messageborderwidthnumber.value = v;

                messageborderwidthnumberupdate();
            }
        }



        function messagehorizontalload()
        {
            const div = document.createElement("div");
            div.id = "messagehorizontal";
            div.innerHTML = "horizontal";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagehorizontalload);

        function messagehorizontalselectload()
        {
            const br = document.createElement("br");
            messagehorizontal.append(br);

            const select = document.createElement("select");
            select.id = "messagehorizontalselect";
            select.addEventListener("input", messagehorizontalselectupdate);
            messagehorizontal.append(select);

            for(const value of horizontalarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            select.value = horizontalarray[1];

            messagehorizontalselectset();
        }
        addEventListener("load", messagehorizontalselectload);

        function messagehorizontalselectset()
        {
            text.messagehorizontal = messagehorizontalselect.value;
        }

        function messagehorizontalselectupdate()
        {
            messagehorizontalselectset();
            svgupdate();
        }



        function messageverticalload()
        {
            const div = document.createElement("div");
            div.id = "messagevertical";
            div.innerHTML = "vertical";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messageverticalload);

        function messageverticalselectload()
        {
            const br = document.createElement("br");
            messagevertical.append(br);

            const select = document.createElement("select");
            select.id = "messageverticalselect";
            select.addEventListener("input", messageverticalselectupdate);
            messagevertical.append(select);

            for(const value of verticalarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            select.value = verticalarray[1];

            messageverticalselectset();
        }
        addEventListener("load", messageverticalselectload);

        function messageverticalselectset()
        {
            text.messagevertical = messageverticalselect.value;
        }

        function messageverticalselectupdate()
        {
            messageverticalselectset();
            svgupdate();
        }



        function messagewritingmodeload()
        {
            const div = document.createElement("div");
            div.id = "messagewritingmode";
            div.innerHTML = "writing-mode";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagewritingmodeload);

        function messagewritingmodeselectload()
        {
            const br = document.createElement("br");
            messagewritingmode.append(br);

            const select = document.createElement("select");
            select.id = "messagewritingmodeselect";
            select.addEventListener("input", messagewritingmodeselectupdate);
            messagewritingmode.append(select);

            for(const value of writingmodearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            messagewritingmodeselectset();
        }
        addEventListener("load", messagewritingmodeselectload);

        function messagewritingmodeselectset()
        {
            text.messagewritingmode = messagewritingmodeselect.value;
        }

        function messagewritingmodeselectupdate()
        {
            messagewritingmodeselectset();
            svgupdate();
        }



        function messagefontfamilyload()
        {
            const div = document.createElement("div");
            div.id = "messagefontfamily";
            div.innerHTML = "font-family";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagefontfamilyload);

        function messagefontfamilyselectload()
        {
            const br = document.createElement("br");
            messagefontfamily.append(br);

            const select = document.createElement("select");
            select.id = "messagefontfamilyselect";
            select.addEventListener("input", messagefontfamilyselectupdate);
            messagefontfamily.append(select);

            for(const value of fontfamilyarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            messagefontfamilyselectset();
        }
        addEventListener("load", messagefontfamilyselectload);

        function messagefontfamilyselectset()
        {
            text.messagefontfamily = messagefontfamilyselect.value;
        }

        function messagefontfamilyselectupdate()
        {
            messagefontfamilyselectset();
            svgupdate();
        }




function messagefontsizeload()
        {
            const div = document.createElement("div");
            div.id = "messagefontsize";
            div.innerHTML = "font-size";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagefontsizeload);

        function messagefontsizenumberload()
        {
            const br = document.createElement("br");
            messagefontsize.append(br);

            const input = document.createElement("input");
            input.id = "messagefontsizenumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 140;
            input.addEventListener("input", messagefontsizenumberupdate);
            messagefontsize.append(input);

            //messagefontsizenumberset();
        }
        addEventListener("load", messagefontsizenumberload);

        function messagefontsizenumberset()
        {
            const v = Number(messagefontsizenumber.value);

            messagefontsizerange.value = v;
            text.messagefontsize = v;
        }

        function messagefontsizenumberupdate()
        {
            messagefontsizenumberset();
            svgupdate();
        }

        function messagefontsizerangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefontsizerange";
            input.max = messagefontsizenumber.max;
            input.min = messagefontsizenumber.min;
            input.type = "range";
            input.value = messagefontsizenumber.value;
            input.addEventListener("input", messagefontsizerangeupdate);
            messagefontsize.append(input);

            messagefontsizerangeset();
        }
        addEventListener("load", messagefontsizerangeload);

        function messagefontsizerangeset()
        {
            const v = Number(messagefontsizerange.value);

            messagefontsizenumber.value = v;
            text.messagefontsize = v;
        }

        function messagefontsizerangeupdate()
        {
            messagefontsizerangeset();
            svgupdate();
        }

        function messagefontsizeexactload()
        {
            const br = document.createElement("br");
            messagefontsize.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100",100],
                ["250",250],
                ["500",500],
                ["1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefontsizeexactupdate);
                messagefontsize.append(button);
            }
        }
        addEventListener("load", messagefontsizeexactload);

        function messagefontsizeexactupdate(e)
        {
            messagefontsizenumber.value = Number(e.target.value);

            messagefontsizenumberupdate();
        }

        function messagefontsizeincrementload()
        {
            const br = document.createElement("br");
            messagefontsize.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefontsizeincrementupdate);
                messagefontsize.append(button);
            }
        }
        addEventListener("load", messagefontsizeincrementload);

        function messagefontsizeincrementupdate(e)
        {
            const v = Number(messagefontsizenumber.value) + Number(e.target.value);

            if((messagefontsizenumber.min <= v) && (v <= messagefontsizenumber.max))
            {
                messagefontsizenumber.value = v;

                messagefontsizenumberupdate();
            }
        }

/*
        function messagefontsizefitload()
        {
            const button = document.createElement("button");
            button.innerHTML = "fit";
            button.addEventListener("click", messagefontsizefitupdate);
            messagefontsize.append(button);
        }
        addEventListener("load", messagefontsizefitload);

        function messagefontsizefitupdate()
        {
            const t = document.createElement("div");
            messagefontsize.append(t);
            t.innerHTML = text.bookname;
            t.style.fontSize = `${messagefontsizenumber.value}px`;

            const h1 = text.messagewidth;
            const h2 = text.messageheight;
            const h3 = t.offsetWidth;
            const h4 = t.offsetHeight;
            const h5 = messagefontsizenumber.value;

            //const h4 = t.offsetParent;//t.style.fontSize;
            //const h5 = t.clientHeight;//text.style.height;
            //const h6 = text.height;
            //const h7 = text.getBoundingClientRect().height;
            //const h8 = text.style.lineHeight;
            //const h9 = canvas.getBoundingClientRect().height;
            console.log(h1, h2, h3, h4, h5);
            //t.hidden = true;

            if(h2 < h4)
            {
                messagefontsizenumber.value -= 1;
                messagefit();
            }

            messagefontsizenumberupdate();
        }
//*/



        function messagefontstyleload()
        {
            const div = document.createElement("div");
            div.id = "messagefontstyle";
            div.innerHTML = "font-style";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagefontstyleload);

        function messagefontstyleselectload()
        {
            const br = document.createElement("br");
            messagefontstyle.append(br);

            const select = document.createElement("select");
            select.id = "messagefontstyleselect";
            select.addEventListener("input", messagefontstyleselectupdate);
            messagefontstyle.append(select);

            for(const value of fontstylearray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            messagefontstyleselectset();
        }
        addEventListener("load", messagefontstyleselectload);

        function messagefontstyleselectset()
        {
            text.messagefontstyle = messagefontstyleselect.value;
        }

        function messagefontstyleselectupdate()
        {
            messagefontstyleselectset();
            svgupdate();
        }



        function messagefontvariantload()
        {
            const div = document.createElement("div");
            div.id = "messagefontvariant";
            div.innerHTML = "font-variant";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagefontvariantload);

        function messagefontvariantselectload()
        {
            const br = document.createElement("br");
            messagefontvariant.append(br);

            const select = document.createElement("select");
            select.id = "messagefontvariantselect";
            select.addEventListener("input", messagefontvariantselectupdate);
            messagefontvariant.append(select);

            for(const value of fontvariantarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            messagefontvariantselectset();
        }
        addEventListener("load", messagefontvariantselectload);

        function messagefontvariantselectset()
        {
            text.messagefontvariant = messagefontvariantselect.value;
        }

        function messagefontvariantselectupdate()
        {
            messagefontvariantselectset();
            svgupdate();
        }



        function messagefontweightload()
        {
            const div = document.createElement("div");
            div.id = "messagefontweight";
            div.innerHTML = "font-weight";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagefontweightload);

        function messagefontweightselectload()
        {
            const br = document.createElement("br");
            messagefontweight.append(br);

            const select = document.createElement("select");
            select.id = "messagefontweightselect";
            select.addEventListener("input", messagefontweightselectupdate);
            messagefontweight.append(select);

            for(const value of fontweightarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                select.add(option);
            }

            messagefontweightselectset();
        }
        addEventListener("load", messagefontweightselectload);

        function messagefontweightselectset()
        {
            text.messagefontweight = messagefontweightselect.value;
        }

        function messagefontweightselectupdate()
        {
            messagefontweightselectset();
            svgupdate();
        }



        function messagecolorload()
        {
            const div = document.createElement("div");
            div.id = "messagecolor";
            div.innerHTML = "color";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagecolorload);

        function messagecolorcolorload()
        {
            const br = document.createElement("br");
            messagecolor.append(br);

            const input = document.createElement("input");
            input.id = "messagecolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", messagecolorcolorupdate);
            messagecolor.append(input);

            //messagecolorcolorset();
        }
        addEventListener("load", messagecolorcolorload);

        function messagecolorcolorset()
        {
            const c = messagecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagealphanumber.value;

            text.messagecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagecolorcolorupdate()
        {
            messagecolorcolorset();
            svgupdate();
        }

        function messagecolorexactload()
        {
            const br = document.createElement("br");
            messagecolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagecolorexactupdate);
                messagecolor.append(button);
            }
        }
        addEventListener("load", messagecolorexactload);

        function messagecolorexactupdate(e)
        {
            messagecolorcolor.value = e.target.value;

            messagecolorcolorupdate();
        }



        function messagealphaload()
        {
            const div = document.createElement("div");
            div.id = "messagealpha";
            div.innerHTML = "alpha";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagealphaload);

        function messagealphanumberload()
        {
            const br = document.createElement("br");
            messagealpha.append(br);

            const input = document.createElement("input");
            input.id = "messagealphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", messagealphanumberupdate);
            messagealpha.append(input);

            //messagealphanumberset();
        }
        addEventListener("load", messagealphanumberload);

        function messagealphanumberset()
        {
            const c = messagecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagealphanumber.value;

            messagealpharange.value = a;
            text.messagecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagealphanumberupdate()
        {
            messagealphanumberset();
            svgupdate();
        }

        function messagealpharangeload()
        {
            const input = document.createElement("input");
            input.id = "messagealpharange";
            input.max = messagealphanumber.max;
            input.min = messagealphanumber.min;
            input.step = messagealphanumber.step;
            input.type = "range";
            input.value = messagealphanumber.value;
            input.addEventListener("input", messagealpharangeupdate);
            messagealpha.append(input);

            messagealpharangeset();
        }
        addEventListener("load", messagealpharangeload);

        function messagealpharangeset()
        {
            const c = messagecolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = messagealpharange.value;

            messagealphanumber.value = a;
            text.messagecolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function messagealpharangeupdate()
        {
            messagealpharangeset();
            svgupdate();
        }

        function messagealphaexactload()
        {
            const br = document.createElement("br");
            messagealpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagealphaexactupdate);
                messagealpha.append(button);
            }
        }
        addEventListener("load", messagealphaexactload);

        function messagealphaexactupdate(e)
        {
            messagealphanumber.value = Number(e.target.value);

            messagealphanumberupdate();
        }

        function messagealphaincrementload()
        {
            const br = document.createElement("br");
            messagealpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagealphaincrementupdate);
                messagealpha.append(button);
            }
        }
        addEventListener("load", messagealphaincrementload);

        function messagealphaincrementupdate(e)
        {
            let v = Number(messagealphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((messagealphanumber.min <= v) && (v <= messagealphanumber.max))
            {
                messagealphanumber.value = v;

                messagealphanumberupdate();
            }
        }



/*leftoff
        function messagefilterblurload()
        {
            const div = document.createElement("div");
            div.id = "messagefilterblur";
            div.innerHTML = "filter-blur";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefilterblurload);

        function messagefilterblurnumberload()
        {
            const br = document.createElement("br");
            messagefilterblur.append(br);

            const input = document.createElement("input");
            input.id = "messagefilterblurnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagefilterblurnumberupdate);
            messagefilterblur.append(input);

            //messagefilterblurnumberset();
        }
        addEventListener("load", messagefilterblurnumberload);

        function messagefilterblurnumberset()
        {
            const v = messagefilterblurnumber.value;

            messagefilterblurrange.value = v;
            text.messagebackdropfilterblur = v;
        }

        function messagefilterblurnumberupdate()
        {
            messagefilterblurnumberset();
            svgupdate();
        }

        function messagefilterblurrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefilterblurrange";
            input.max = messagefilterblurnumber.max;
            input.min = messagefilterblurnumber.min;
            input.step = messagefilterblurnumber.step;
            input.type = "range";
            input.value = messagefilterblurnumber.value;
            input.addEventListener("input", messagefilterblurrangeupdate);
            messagefilterblur.append(input);

            messagefilterblurrangeset();
        }
        addEventListener("load", messagefilterblurrangeload);

        function messagefilterblurrangeset()
        {
            const v = messagefilterblurrange.value;

            messagefilterblurnumber.value = v;
            text.messagebackdropfilterblur = v;
        }

        function messagefilterblurrangeupdate()
        {
            messagefilterblurrangeset();
            svgupdate();
        }

        function messagefilterblurexactload()
        {
            const br = document.createElement("br");
            messagefilterblur.append(br);

            const array =
            [
                ["0",0],
                ["2",2],
                ["4",4],
                ["8",8],
                ["16",16],
                ["32",32],
                ["64",64],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterblurexactupdate);
                messagefilterblur.append(button);
            }
        }
        addEventListener("load", messagefilterblurexactload);

        function messagefilterblurexactupdate(e)
        {
            messagefilterblurnumber.value = Number(e.target.value);

            messagefilterblurnumberupdate();
        }

        function messagefilterblurincrementload()
        {
            const br = document.createElement("br");
            messagefilterblur.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterblurincrementupdate);
                messagefilterblur.append(button);
            }
        }
        addEventListener("load", messagefilterblurincrementload);

        function messagefilterblurincrementupdate(e)
        {
            const v = Number(messagefilterblurnumber.value) + Number(e.target.value);

            if((messagefilterblurnumber.min <= v) && (v <= messagefilterblurnumber.max))
            {
                messagefilterblurnumber.value = v;

                messagefilterblurnumberupdate();
            }
        }



        function messagefilterbrightnessload()
        {
            const div = document.createElement("div");
            div.id = "messagefilterbrightness";
            div.innerHTML = "filter-brightness";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefilterbrightnessload);

        function messagefilterbrightnessnumberload()
        {
            const br = document.createElement("br");
            messagefilterbrightness.append(br);

            const input = document.createElement("input");
            input.id = "messagefilterbrightnessnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", messagefilterbrightnessnumberupdate);
            messagefilterbrightness.append(input);

            //messagefilterbrightnessnumberset();
        }
        addEventListener("load", messagefilterbrightnessnumberload);

        function messagefilterbrightnessnumberset()
        {
            const v = messagefilterbrightnessnumber.value;

            messagefilterbrightnessrange.value = v;
            text.messagebackdropfilterbrightness = v;
        }

        function messagefilterbrightnessnumberupdate()
        {
            messagefilterbrightnessnumberset();
            svgupdate();
        }

        function messagefilterbrightnessrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefilterbrightnessrange";
            input.max = messagefilterbrightnessnumber.max;
            input.min = messagefilterbrightnessnumber.min;
            input.step = messagefilterbrightnessnumber.step;
            input.type = "range";
            input.value = messagefilterbrightnessnumber.value;
            input.addEventListener("input", messagefilterbrightnessrangeupdate);
            messagefilterbrightness.append(input);

            messagefilterbrightnessrangeset();
        }
        addEventListener("load", messagefilterbrightnessrangeload);

        function messagefilterbrightnessrangeset()
        {
            const v = messagefilterbrightnessrange.value;

            messagefilterbrightnessnumber.value = v;
            text.messagebackdropfilterbrightness = v;
        }

        function messagefilterbrightnessrangeupdate()
        {
            messagefilterbrightnessrangeset();
            svgupdate();
        }

        function messagefilterbrightnessexactload()
        {
            const br = document.createElement("br");
            messagefilterbrightness.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterbrightnessexactupdate);
                messagefilterbrightness.append(button);
            }
        }
        addEventListener("load", messagefilterbrightnessexactload);

        function messagefilterbrightnessexactupdate(e)
        {
            messagefilterbrightnessnumber.value = Number(e.target.value);

            messagefilterbrightnessnumberupdate();
        }

        function messagefilterbrightnessincrementload()
        {
            const br = document.createElement("br");
            messagefilterbrightness.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterbrightnessincrementupdate);
                messagefilterbrightness.append(button);
            }
        }
        addEventListener("load", messagefilterbrightnessincrementload);

        function messagefilterbrightnessincrementupdate(e)
        {
            const v = Number(messagefilterbrightnessnumber.value) + Number(e.target.value);

            if((messagefilterbrightnessnumber.min <= v) && (v <= messagefilterbrightnessnumber.max))
            {
                messagefilterbrightnessnumber.value = v;

                messagefilterbrightnessnumberupdate();
            }
        }



        function messagefiltercontrastload()
        {
            const div = document.createElement("div");
            div.id = "messagefiltercontrast";
            div.innerHTML = "filter-contrast";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefiltercontrastload);

        function messagefiltercontrastnumberload()
        {
            const br = document.createElement("br");
            messagefiltercontrast.append(br);

            const input = document.createElement("input");
            input.id = "messagefiltercontrastnumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", messagefiltercontrastnumberupdate);
            messagefiltercontrast.append(input);

            //messagefiltercontrastnumberset();
        }
        addEventListener("load", messagefiltercontrastnumberload);

        function messagefiltercontrastnumberset()
        {
            const v = messagefiltercontrastnumber.value;

            messagefiltercontrastrange.value = v;
            text.messagebackdropfiltercontrast = v;
        }

        function messagefiltercontrastnumberupdate()
        {
            messagefiltercontrastnumberset();
            svgupdate();
        }

        function messagefiltercontrastrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefiltercontrastrange";
            input.max = messagefiltercontrastnumber.max;
            input.min = messagefiltercontrastnumber.min;
            input.step = messagefiltercontrastnumber.step;
            input.type = "range";
            input.value = messagefiltercontrastnumber.value;
            input.addEventListener("input", messagefiltercontrastrangeupdate);
            messagefiltercontrast.append(input);

            messagefiltercontrastrangeset();
        }
        addEventListener("load", messagefiltercontrastrangeload);

        function messagefiltercontrastrangeset()
        {
            const v = messagefiltercontrastrange.value;

            messagefiltercontrastnumber.value = v;
            text.messagebackdropfiltercontrast = v;
        }

        function messagefiltercontrastrangeupdate()
        {
            messagefiltercontrastrangeset();
            svgupdate();
        }

        function messagefiltercontrastexactload()
        {
            const br = document.createElement("br");
            messagefiltercontrast.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltercontrastexactupdate);
                messagefiltercontrast.append(button);
            }
        }
        addEventListener("load", messagefiltercontrastexactload);

        function messagefiltercontrastexactupdate(e)
        {
            messagefiltercontrastnumber.value = Number(e.target.value);

            messagefiltercontrastnumberupdate();
        }

        function messagefiltercontrastincrementload()
        {
            const br = document.createElement("br");
            messagefiltercontrast.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltercontrastincrementupdate);
                messagefiltercontrast.append(button);
            }
        }
        addEventListener("load", messagefiltercontrastincrementload);

        function messagefiltercontrastincrementupdate(e)
        {
            const v = Number(messagefiltercontrastnumber.value) + Number(e.target.value);

            if((messagefiltercontrastnumber.min <= v) && (v <= messagefiltercontrastnumber.max))
            {
                messagefiltercontrastnumber.value = v;

                messagefiltercontrastnumberupdate();
            }
        }



        function messagefiltergrayscaleload()
        {
            const div = document.createElement("div");
            div.id = "messagefiltergrayscale";
            div.innerHTML = "filter-grayscale";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefiltergrayscaleload);

        function messagefiltergrayscalenumberload()
        {
            const br = document.createElement("br");
            messagefiltergrayscale.append(br);

            const input = document.createElement("input");
            input.id = "messagefiltergrayscalenumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagefiltergrayscalenumberupdate);
            messagefiltergrayscale.append(input);

            //messagefiltergrayscalenumberset();
        }
        addEventListener("load", messagefiltergrayscalenumberload);

        function messagefiltergrayscalenumberset()
        {
            const v = messagefiltergrayscalenumber.value;

            messagefiltergrayscalerange.value = v;
            text.messagebackdropfiltergrayscale = v;
        }

        function messagefiltergrayscalenumberupdate()
        {
            messagefiltergrayscalenumberset();
            svgupdate();
        }

        function messagefiltergrayscalerangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefiltergrayscalerange";
            input.max = messagefiltergrayscalenumber.max;
            input.min = messagefiltergrayscalenumber.min;
            input.step = messagefiltergrayscalenumber.step;
            input.type = "range";
            input.value = messagefiltergrayscalenumber.value;
            input.addEventListener("input", messagefiltergrayscalerangeupdate);
            messagefiltergrayscale.append(input);

            messagefiltergrayscalerangeset();
        }
        addEventListener("load", messagefiltergrayscalerangeload);

        function messagefiltergrayscalerangeset()
        {
            const v = messagefiltergrayscalerange.value;

            messagefiltergrayscalenumber.value = v;
            text.messagebackdropfiltergrayscale = v;
        }

        function messagefiltergrayscalerangeupdate()
        {
            messagefiltergrayscalerangeset();
            svgupdate();
        }

        function messagefiltergrayscaleexactload()
        {
            const br = document.createElement("br");
            messagefiltergrayscale.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltergrayscaleexactupdate);
                messagefiltergrayscale.append(button);
            }
        }
        addEventListener("load", messagefiltergrayscaleexactload);

        function messagefiltergrayscaleexactupdate(e)
        {
            messagefiltergrayscalenumber.value = Number(e.target.value);

            messagefiltergrayscalenumberupdate();
        }

        function messagefiltergrayscaleincrementload()
        {
            const br = document.createElement("br");
            messagefiltergrayscale.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltergrayscaleincrementupdate);
                messagefiltergrayscale.append(button);
            }
        }
        addEventListener("load", messagefiltergrayscaleincrementload);

        function messagefiltergrayscaleincrementupdate(e)
        {
            const v = Number(messagefiltergrayscalenumber.value) + Number(e.target.value);

            if((messagefiltergrayscalenumber.min <= v) && (v <= messagefiltergrayscalenumber.max))
            {
                messagefiltergrayscalenumber.value = v;

                messagefiltergrayscalenumberupdate();
            }
        }



        function messagefilterhuerotateload()
        {
            const div = document.createElement("div");
            div.id = "messagefilterhuerotate";
            div.innerHTML = "filter-hue-rotate";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefilterhuerotateload);

        function messagefilterhuerotatenumberload()
        {
            const br = document.createElement("br");
            messagefilterhuerotate.append(br);

            const input = document.createElement("input");
            input.id = "messagefilterhuerotatenumber";
            input.max = 360;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagefilterhuerotatenumberupdate);
            messagefilterhuerotate.append(input);

            //messagefilterhuerotatenumberset();
        }
        addEventListener("load", messagefilterhuerotatenumberload);

        function messagefilterhuerotatenumberset()
        {
            const v = messagefilterhuerotatenumber.value;

            messagefilterhuerotaterange.value = v;
            text.messagebackdropfilterhuerotate = v;
        }

        function messagefilterhuerotatenumberupdate()
        {
            messagefilterhuerotatenumberset();
            svgupdate();
        }

        function messagefilterhuerotaterangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefilterhuerotaterange";
            input.max = messagefilterhuerotatenumber.max;
            input.min = messagefilterhuerotatenumber.min;
            input.step = messagefilterhuerotatenumber.step;
            input.type = "range";
            input.value = messagefilterhuerotatenumber.value;
            input.addEventListener("input", messagefilterhuerotaterangeupdate);
            messagefilterhuerotate.append(input);

            messagefilterhuerotaterangeset();
        }
        addEventListener("load", messagefilterhuerotaterangeload);

        function messagefilterhuerotaterangeset()
        {
            const v = messagefilterhuerotaterange.value;

            messagefilterhuerotatenumber.value = v;
            text.messagebackdropfilterhuerotate = v;
        }

        function messagefilterhuerotaterangeupdate()
        {
            messagefilterhuerotaterangeset();
            svgupdate();
        }

        function messagefilterhuerotateexactload()
        {
            const br = document.createElement("br");
            messagefilterhuerotate.append(br);

            const array =
            [
                ["0",0],
                ["90",90],
                ["180",180],
                ["270",270],
                ["360",360],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterhuerotateexactupdate);
                messagefilterhuerotate.append(button);
            }
        }
        addEventListener("load", messagefilterhuerotateexactload);

        function messagefilterhuerotateexactupdate(e)
        {
            messagefilterhuerotatenumber.value = Number(e.target.value);

            messagefilterhuerotatenumberupdate();
        }

        function messagefilterhuerotateincrementload()
        {
            const br = document.createElement("br");
            messagefilterhuerotate.append(br);

            const array =
            [
                //["-90",-90],
                ["-45",-45],
                ["-15",-15],
                ["-1",-1],
                ["+1",1],
                ["+15",15],
                ["+45",45],
                //["+90",90],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterhuerotateincrementupdate);
                messagefilterhuerotate.append(button);
            }
        }
        addEventListener("load", messagefilterhuerotateincrementload);

        function messagefilterhuerotateincrementupdate(e)
        {
            const v = Number(messagefilterhuerotatenumber.value) + Number(e.target.value);

            if((messagefilterhuerotatenumber.min <= v) && (v <= messagefilterhuerotatenumber.max))
            {
                messagefilterhuerotatenumber.value = v;

                messagefilterhuerotatenumberupdate();
            }
        }



        function messagefilterinvertload()
        {
            const div = document.createElement("div");
            div.id = "messagefilterinvert";
            div.innerHTML = "filter-invert";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefilterinvertload);

        function messagefilterinvertnumberload()
        {
            const br = document.createElement("br");
            messagefilterinvert.append(br);

            const input = document.createElement("input");
            input.id = "messagefilterinvertnumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagefilterinvertnumberupdate);
            messagefilterinvert.append(input);

            //messagefilterinvertnumberset();
        }
        addEventListener("load", messagefilterinvertnumberload);

        function messagefilterinvertnumberset()
        {
            const v = messagefilterinvertnumber.value;

            messagefilterinvertrange.value = v;
            text.messagebackdropfilterinvert = v;
        }

        function messagefilterinvertnumberupdate()
        {
            messagefilterinvertnumberset();
            svgupdate();
        }

        function messagefilterinvertrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefilterinvertrange";
            input.max = messagefilterinvertnumber.max;
            input.min = messagefilterinvertnumber.min;
            input.step = messagefilterinvertnumber.step;
            input.type = "range";
            input.value = messagefilterinvertnumber.value;
            input.addEventListener("input", messagefilterinvertrangeupdate);
            messagefilterinvert.append(input);

            messagefilterinvertrangeset();
        }
        addEventListener("load", messagefilterinvertrangeload);

        function messagefilterinvertrangeset()
        {
            const v = messagefilterinvertrange.value;

            messagefilterinvertnumber.value = v;
            text.messagebackdropfilterinvert = v;
        }

        function messagefilterinvertrangeupdate()
        {
            messagefilterinvertrangeset();
            svgupdate();
        }

        function messagefilterinvertexactload()
        {
            const br = document.createElement("br");
            messagefilterinvert.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterinvertexactupdate);
                messagefilterinvert.append(button);
            }
        }
        addEventListener("load", messagefilterinvertexactload);

        function messagefilterinvertexactupdate(e)
        {
            messagefilterinvertnumber.value = Number(e.target.value);

            messagefilterinvertnumberupdate();
        }

        function messagefilterinvertincrementload()
        {
            const br = document.createElement("br");
            messagefilterinvert.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefilterinvertincrementupdate);
                messagefilterinvert.append(button);
            }
        }
        addEventListener("load", messagefilterinvertincrementload);

        function messagefilterinvertincrementupdate(e)
        {
            const v = Number(messagefilterinvertnumber.value) + Number(e.target.value);

            if((messagefilterinvertnumber.min <= v) && (v <= messagefilterinvertnumber.max))
            {
                messagefilterinvertnumber.value = v;

                messagefilterinvertnumberupdate();
            }
        }



        function messagefiltersaturateload()
        {
            const div = document.createElement("div");
            div.id = "messagefiltersaturate";
            div.innerHTML = "filter-saturate";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefiltersaturateload);

        function messagefiltersaturatenumberload()
        {
            const br = document.createElement("br");
            messagefiltersaturate.append(br);

            const input = document.createElement("input");
            input.id = "messagefiltersaturatenumber";
            input.max = 1000;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 100;
            input.addEventListener("input", messagefiltersaturatenumberupdate);
            messagefiltersaturate.append(input);

            //messagefiltersaturatenumberset();
        }
        addEventListener("load", messagefiltersaturatenumberload);

        function messagefiltersaturatenumberset()
        {
            const v = messagefiltersaturatenumber.value;

            messagefiltersaturaterange.value = v;
            text.messagebackdropfiltersaturate = v;
        }

        function messagefiltersaturatenumberupdate()
        {
            messagefiltersaturatenumberset();
            svgupdate();
        }

        function messagefiltersaturaterangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefiltersaturaterange";
            input.max = messagefiltersaturatenumber.max;
            input.min = messagefiltersaturatenumber.min;
            input.step = messagefiltersaturatenumber.step;
            input.type = "range";
            input.value = messagefiltersaturatenumber.value;
            input.addEventListener("input", messagefiltersaturaterangeupdate);
            messagefiltersaturate.append(input);

            messagefiltersaturaterangeset();
        }
        addEventListener("load", messagefiltersaturaterangeload);

        function messagefiltersaturaterangeset()
        {
            const v = messagefiltersaturaterange.value;

            messagefiltersaturatenumber.value = v;
            text.messagebackdropfiltersaturate = v;
        }

        function messagefiltersaturaterangeupdate()
        {
            messagefiltersaturaterangeset();
            svgupdate();
        }

        function messagefiltersaturateexactload()
        {
            const br = document.createElement("br");
            messagefiltersaturate.append(br);

            const array =
            [
                ["0",0],
                ["50",50],
                ["100 (initial)",100],
                ["150",150],
                ["200",200],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltersaturateexactupdate);
                messagefiltersaturate.append(button);
            }
        }
        addEventListener("load", messagefiltersaturateexactload);

        function messagefiltersaturateexactupdate(e)
        {
            messagefiltersaturatenumber.value = Number(e.target.value);

            messagefiltersaturatenumberupdate();
        }

        function messagefiltersaturateincrementload()
        {
            const br = document.createElement("br");
            messagefiltersaturate.append(br);

            const array =
            [
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltersaturateincrementupdate);
                messagefiltersaturate.append(button);
            }
        }
        addEventListener("load", messagefiltersaturateincrementload);

        function messagefiltersaturateincrementupdate(e)
        {
            const v = Number(messagefiltersaturatenumber.value) + Number(e.target.value);

            if((messagefiltersaturatenumber.min <= v) && (v <= messagefiltersaturatenumber.max))
            {
                messagefiltersaturatenumber.value = v;

                messagefiltersaturatenumberupdate();
            }
        }



        function messagefiltersepiaload()
        {
            const div = document.createElement("div");
            div.id = "messagefiltersepia";
            div.innerHTML = "filter-sepia";
            tabcontentmessage.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", messagefiltersepiaload);

        function messagefiltersepianumberload()
        {
            const br = document.createElement("br");
            messagefiltersepia.append(br);

            const input = document.createElement("input");
            input.id = "messagefiltersepianumber";
            input.max = 100;
            input.min = 0;
            input.step = 1;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagefiltersepianumberupdate);
            messagefiltersepia.append(input);

            //messagefiltersepianumberset();
        }
        addEventListener("load", messagefiltersepianumberload);

        function messagefiltersepianumberset()
        {
            const v = messagefiltersepianumber.value;

            messagefiltersepiarange.value = v;
            text.messagebackdropfiltersepia = v;
        }

        function messagefiltersepianumberupdate()
        {
            messagefiltersepianumberset();
            svgupdate();
        }

        function messagefiltersepiarangeload()
        {
            const input = document.createElement("input");
            input.id = "messagefiltersepiarange";
            input.max = messagefiltersepianumber.max;
            input.min = messagefiltersepianumber.min;
            input.step = messagefiltersepianumber.step;
            input.type = "range";
            input.value = messagefiltersepianumber.value;
            input.addEventListener("input", messagefiltersepiarangeupdate);
            messagefiltersepia.append(input);

            messagefiltersepiarangeset();
        }
        addEventListener("load", messagefiltersepiarangeload);

        function messagefiltersepiarangeset()
        {
            const v = messagefiltersepiarange.value;

            messagefiltersepianumber.value = v;
            text.messagebackdropfiltersepia = v;
        }

        function messagefiltersepiarangeupdate()
        {
            messagefiltersepiarangeset();
            svgupdate();
        }

        function messagefiltersepiaexactload()
        {
            const br = document.createElement("br");
            messagefiltersepia.append(br);

            const array =
            [
                ["0",0],
                ["25",25],
                ["50",50],
                ["75",75],
                ["100",100],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltersepiaexactupdate);
                messagefiltersepia.append(button);
            }
        }
        addEventListener("load", messagefiltersepiaexactload);

        function messagefiltersepiaexactupdate(e)
        {
            messagefiltersepianumber.value = Number(e.target.value);

            messagefiltersepianumberupdate();
        }

        function messagefiltersepiaincrementload()
        {
            const br = document.createElement("br");
            messagefiltersepia.append(br);

            const array =
            [
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", messagefiltersepiaincrementupdate);
                messagefiltersepia.append(button);
            }
        }
        addEventListener("load", messagefiltersepiaincrementload);

        function messagefiltersepiaincrementupdate(e)
        {
            const v = Number(messagefiltersepianumber.value) + Number(e.target.value);

            if((messagefiltersepianumber.min <= v) && (v <= messagefiltersepianumber.max))
            {
                messagefiltersepianumber.value = v;

                messagefiltersepianumberupdate();
            }
        }
//*/



/*
        function messagemargintopload()
        {
            const div = document.createElement("div");
            div.id = "messagemargintop";
            div.innerHTML = "margin-top";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagemargintopload);

        function messagemargintopnumberload()
        {
            const br = document.createElement("br");
            messagemargintop.append(br);

            const input = document.createElement("input");
            input.id = "messagemargintopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagemargintopnumberupdate);
            messagemargintop.append(input);

            //messagemargintopnumberset();
        }
        addEventListener("load", messagemargintopnumberload);

        function messagemargintopnumberset()
        {
            const v = Number(messagemargintopnumber.value);

            messagemargintoprange.value = v;
            text.messagemargintop = v;
        }

        function messagemargintopnumberupdate()
        {
            messagemargintopnumberset();

            svgupdate();
        }

        function messagemargintoprangeload()
        {
            const input = document.createElement("input");
            input.id = "messagemargintoprange";
            input.max = messagemargintopnumber.max;
            input.min = messagemargintopnumber.min;
            input.type = "range";
            input.value = messagemargintopnumber.value;
            input.addEventListener("input", messagemargintoprangeupdate);
            messagemargintop.append(input);

            messagemargintoprangeset();
        }
        addEventListener("load", messagemargintoprangeload);

        function messagemargintoprangeset()
        {
            const v = Number(messagemargintoprange.value);

            messagemargintopnumber.value = v;
            text.messagemargintop = v;
        }

        function messagemargintoprangeupdate()
        {
            messagemargintoprangeset();

            svgupdate();
        }



        function messagemarginbottomload()
        {
            const div = document.createElement("div");
            div.id = "messagemarginbottom";
            div.innerHTML = "margin-bottom";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagemarginbottomload);

        function messagemarginbottomnumberload()
        {
            const br = document.createElement("br");
            messagemarginbottom.append(br);

            const input = document.createElement("input");
            input.id = "messagemarginbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagemarginbottomnumberupdate);
            messagemarginbottom.append(input);

            //messagemarginbottomnumberset();
        }
        addEventListener("load", messagemarginbottomnumberload);

        function messagemarginbottomnumberset()
        {
            const v = Number(messagemarginbottomnumber.value);

            messagemarginbottomrange.value = v;
            text.messagemarginbottom = v;
        }

        function messagemarginbottomnumberupdate()
        {
            messagemarginbottomnumberset();

            svgupdate();
        }

        function messagemarginbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagemarginbottomrange";
            input.max = messagemarginbottomnumber.max;
            input.min = messagemarginbottomnumber.min;
            input.type = "range";
            input.value = messagemarginbottomnumber.value;
            input.addEventListener("input", messagemarginbottomrangeupdate);
            messagemarginbottom.append(input);

            messagemarginbottomrangeset();
        }
        addEventListener("load", messagemarginbottomrangeload);

        function messagemarginbottomrangeset()
        {
            const v = Number(messagemarginbottomrange.value);

            messagemarginbottomnumber.value = v;
            text.messagemarginbottom = v;
        }

        function messagemarginbottomrangeupdate()
        {
            messagemarginbottomrangeset();

            svgupdate();
        }



        function messagemarginleftload()
        {
            const div = document.createElement("div");
            div.id = "messagemarginleft";
            div.innerHTML = "margin-left";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagemarginleftload);

        function messagemarginleftnumberload()
        {
            const br = document.createElement("br");
            messagemarginleft.append(br);

            const input = document.createElement("input");
            input.id = "messagemarginleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagemarginleftnumberupdate);
            messagemarginleft.append(input);

            //messagemarginleftnumberset();
        }
        addEventListener("load", messagemarginleftnumberload);

        function messagemarginleftnumberset()
        {
            const v = Number(messagemarginleftnumber.value);

            messagemarginleftrange.value = v;
            text.messagemarginleft = v;
        }

        function messagemarginleftnumberupdate()
        {
            messagemarginleftnumberset();

            svgupdate();
        }

        function messagemarginleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagemarginleftrange";
            input.max = messagemarginleftnumber.max;
            input.min = messagemarginleftnumber.min;
            input.type = "range";
            input.value = messagemarginleftnumber.value;
            input.addEventListener("input", messagemarginleftrangeupdate);
            messagemarginleft.append(input);

            messagemarginleftrangeset();
        }
        addEventListener("load", messagemarginleftrangeload);

        function messagemarginleftrangeset()
        {
            const v = Number(messagemarginleftrange.value);

            messagemarginleftnumber.value = v;
            text.messagemarginleft = v;
        }

        function messagemarginleftrangeupdate()
        {
            messagemarginleftrangeset();

            svgupdate();
        }



        function messagemarginrightload()
        {
            const div = document.createElement("div");
            div.id = "messagemarginright";
            div.innerHTML = "margin-right";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagemarginrightload);

        function messagemarginrightnumberload()
        {
            const br = document.createElement("br");
            messagemarginright.append(br);

            const input = document.createElement("input");
            input.id = "messagemarginrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagemarginrightnumberupdate);
            messagemarginright.append(input);

            //messagemarginrightnumberset();
        }
        addEventListener("load", messagemarginrightnumberload);

        function messagemarginrightnumberset()
        {
            const v = Number(messagemarginrightnumber.value);

            messagemarginrightrange.value = v;
            text.messagemarginright = v;
        }

        function messagemarginrightnumberupdate()
        {
            messagemarginrightnumberset();

            svgupdate();
        }

        function messagemarginrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagemarginrightrange";
            input.max = messagemarginrightnumber.max;
            input.min = messagemarginrightnumber.min;
            input.type = "range";
            input.value = messagemarginrightnumber.value;
            input.addEventListener("input", messagemarginrightrangeupdate);
            messagemarginright.append(input);

            messagemarginrightrangeset();
        }
        addEventListener("load", messagemarginrightrangeload);

        function messagemarginrightrangeset()
        {
            const v = Number(messagemarginrightrange.value);

            messagemarginrightnumber.value = v;
            text.messagemarginright = v;
        }

        function messagemarginrightrangeupdate()
        {
            messagemarginrightrangeset();

            svgupdate();
        }



        function messagepaddingtopload()
        {
            const div = document.createElement("div");
            div.id = "messagepaddingtop";
            div.innerHTML = "padding-top";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagepaddingtopload);

        function messagepaddingtopnumberload()
        {
            const br = document.createElement("br");
            messagepaddingtop.append(br);

            const input = document.createElement("input");
            input.id = "messagepaddingtopnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagepaddingtopnumberupdate);
            messagepaddingtop.append(input);

            //messagepaddingtopnumberset();
        }
        addEventListener("load", messagepaddingtopnumberload);

        function messagepaddingtopnumberset()
        {
            const v = Number(messagepaddingtopnumber.value);

            messagepaddingtoprange.value = v;
            text.messagepaddingtop = v;
        }

        function messagepaddingtopnumberupdate()
        {
            messagepaddingtopnumberset();

            svgupdate();
        }

        function messagepaddingtoprangeload()
        {
            const input = document.createElement("input");
            input.id = "messagepaddingtoprange";
            input.max = messagepaddingtopnumber.max;
            input.min = messagepaddingtopnumber.min;
            input.type = "range";
            input.value = messagepaddingtopnumber.value;
            input.addEventListener("input", messagepaddingtoprangeupdate);
            messagepaddingtop.append(input);

            messagepaddingtoprangeset();
        }
        addEventListener("load", messagepaddingtoprangeload);

        function messagepaddingtoprangeset()
        {
            const v = Number(messagepaddingtoprange.value);

            messagepaddingtopnumber.value = v;
            text.messagepaddingtop = v;
        }

        function messagepaddingtoprangeupdate()
        {
            messagepaddingtoprangeset();

            svgupdate();
        }



        function messagepaddingbottomload()
        {
            const div = document.createElement("div");
            div.id = "messagepaddingbottom";
            div.innerHTML = "padding-bottom";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagepaddingbottomload);

        function messagepaddingbottomnumberload()
        {
            const br = document.createElement("br");
            messagepaddingbottom.append(br);

            const input = document.createElement("input");
            input.id = "messagepaddingbottomnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagepaddingbottomnumberupdate);
            messagepaddingbottom.append(input);

            //messagepaddingbottomnumberset();
        }
        addEventListener("load", messagepaddingbottomnumberload);

        function messagepaddingbottomnumberset()
        {
            const v = Number(messagepaddingbottomnumber.value);

            messagepaddingbottomrange.value = v;
            text.messagepaddingbottom = v;
        }

        function messagepaddingbottomnumberupdate()
        {
            messagepaddingbottomnumberset();

            svgupdate();
        }

        function messagepaddingbottomrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagepaddingbottomrange";
            input.max = messagepaddingbottomnumber.max;
            input.min = messagepaddingbottomnumber.min;
            input.type = "range";
            input.value = messagepaddingbottomnumber.value;
            input.addEventListener("input", messagepaddingbottomrangeupdate);
            messagepaddingbottom.append(input);

            messagepaddingbottomrangeset();
        }
        addEventListener("load", messagepaddingbottomrangeload);

        function messagepaddingbottomrangeset()
        {
            const v = Number(messagepaddingbottomrange.value);

            messagepaddingbottomnumber.value = v;
            text.messagepaddingbottom = v;
        }

        function messagepaddingbottomrangeupdate()
        {
            messagepaddingbottomrangeset();

            svgupdate();
        }



        function messagepaddingleftload()
        {
            const div = document.createElement("div");
            div.id = "messagepaddingleft";
            div.innerHTML = "padding-left";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagepaddingleftload);

        function messagepaddingleftnumberload()
        {
            const br = document.createElement("br");
            messagepaddingleft.append(br);

            const input = document.createElement("input");
            input.id = "messagepaddingleftnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagepaddingleftnumberupdate);
            messagepaddingleft.append(input);

            //messagepaddingleftnumberset();
        }
        addEventListener("load", messagepaddingleftnumberload);

        function messagepaddingleftnumberset()
        {
            const v = Number(messagepaddingleftnumber.value);

            messagepaddingleftrange.value = v;
            text.messagepaddingleft = v;
        }

        function messagepaddingleftnumberupdate()
        {
            messagepaddingleftnumberset();

            svgupdate();
        }

        function messagepaddingleftrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagepaddingleftrange";
            input.max = messagepaddingleftnumber.max;
            input.min = messagepaddingleftnumber.min;
            input.type = "range";
            input.value = messagepaddingleftnumber.value;
            input.addEventListener("input", messagepaddingleftrangeupdate);
            messagepaddingleft.append(input);

            messagepaddingleftrangeset();
        }
        addEventListener("load", messagepaddingleftrangeload);


        function messagepaddingleftrangeset()
        {
            const v = Number(messagepaddingleftrange.value);

            messagepaddingleftnumber.value = v;
            text.messagepaddingleft = v;
        }

        function messagepaddingleftrangeupdate()
        {
            messagepaddingleftrangeset();

            svgupdate();
        }



        function messagepaddingrightload()
        {
            const div = document.createElement("div");
            div.id = "messagepaddingright";
            div.innerHTML = "padding-right";
            tabcontentmessage.append(div);
        }
        addEventListener("load", messagepaddingrightload);

        function messagepaddingrightnumberload()
        {
            const br = document.createElement("br");
            messagepaddingright.append(br);

            const input = document.createElement("input");
            input.id = "messagepaddingrightnumber";
            input.max = 1000;
            input.min = 0;
            input.type = "number";
            input.value = 0;
            input.addEventListener("input", messagepaddingrightnumberupdate);
            messagepaddingright.append(input);

            //messagepaddingrightnumberset();
        }
        addEventListener("load", messagepaddingrightnumberload);

        function messagepaddingrightnumberset()
        {
            const v = Number(messagepaddingrightnumber.value);

            messagepaddingrightrange.value = v;
            text.messagepaddingright = v;
        }

        function messagepaddingrightnumberupdate()
        {
            messagepaddingrightnumberset();

            svgupdate();
        }

        function messagepaddingrightrangeload()
        {
            const input = document.createElement("input");
            input.id = "messagepaddingrightrange";
            input.max = messagepaddingrightnumber.max;
            input.min = messagepaddingrightnumber.min;
            input.type = "range";
            input.value = messagepaddingrightnumber.value;
            input.addEventListener("input", messagepaddingrightrangeupdate);
            messagepaddingright.append(input);

            messagepaddingrightrangeset();
        }
        addEventListener("load", messagepaddingrightrangeload);

        function messagepaddingrightrangeset()
        {
            const v = Number(messagepaddingrightrange.value);

            messagepaddingrightnumber.value = v;
            text.messagepaddingright = v;
        }

        function messagepaddingrightrangeupdate()
        {
            messagepaddingrightrangeset();

            svgupdate();
        }
//*/






        function referenceversionload()
        {
            const div = document.createElement("div");
            div.id = "referenceversion";
            div.innerHTML = "version";
            tabcontentreference.append(div);
        }
        addEventListener("load", referenceversionload);

        function referenceversionselectload()
        {
            const br = document.createElement("br");
            referenceversion.append(br);

            const select = document.createElement("select");
            select.id = "referenceversionselect";
            select.addEventListener("input", referenceversionselectupdate);
            referenceversion.append(select);

            referenceversionselectload2();
        }
        addEventListener("load", referenceversionselectload);

        function referenceversionselectload2()
        {
            for(const value of Bibleversionarray)
            {
                const optgroup = docum
10000
ent.createElement("optgroup");
                optgroup.label = value[0];
                referenceversionselect.append(optgroup);

                for(const v of value[1])
                {
                    const option = document.createElement("option");
                    option.innerHTML = v[1];
                    option.value = v[0];
                    optgroup.append(option);
                }
            }

            referenceversionselect.value = Bibleversionarray[4][1][1][0];

            referenceversionselectset();
        }

        function referenceversionselectset()
        {
            text.version = referenceversionselect.options.selectedIndex + 1;
            text.versionname = referenceversionselect.value;

            text.referencetextversion = "";
            if(text.versionbool)
            {
                text.referencetextversion = ` ${text.versionname}`;
            }
        }

        function referenceversionselectupdate()
        {
            referenceversionselectset();
            /*
            referencebookselectload2();
            referencechapterselectload2();
            referenceverseselectload2();
            referenceverseendselectload2();
            svgupdate();
            //*/
            Bibleload();
        }

        function referenceversioncheckboxload()
        {
            const input = document.createElement("input");
            input.type = "checkbox";
            input.addEventListener("click", referenceversioncheckboxupdate);
            referenceversion.append(input);
        }
        addEventListener("load", referenceversioncheckboxload);

        function referenceversioncheckboxupdate()
        {
            text.versionbool = !text.versionbool;

            //referenceversionselectupdate();
            referenceversionselectset();
            svgupdate();
        }



        function Bibleload()
        {
            //console.log("Bibleload");
            fetch(`/assets/txt/new/${text.versionname}.txt`)
            .then(r => r.text())
            .then(t =>
            {
                const split = t.split("@");
                //console.log(split);

                const b = split[1].trim();
                //console.log(b);
                const c = b.split("\n");
                //console.log(c);
                for(const [key, value] of c.entries())
                {
                    const split = value.split("#");
                    const b = split[1];
                    Biblebookarray[key] = b;
                    //console.log(Biblebookarray[key]);
                }

                const v = split[2].trim();
                //console.log(v);
                const w = v.split("\n");
                //console.log(w);
                for(const value of w)
                {
                    const split = value.split("#");
                    const b = Number(split[0]);
                    const c = Number(split[1]);
                    const v = Number(split[2]);
                    const t = split[3];
                    if(!Array.isArray(Bibleversearray[b]))
                    {
                        Bibleversearray[b] = [];
                    }
                    if(!Array.isArray(Bibleversearray[b][c]))
                    {
                        Bibleversearray[b][c] = [];
                    }
                    Bibleversearray[b][c][v] = t;
                    //console.log(b, c, v, t);
                }

                //imageload2();
                //referenceversionselectload2();
                //*
                referencebookselectload2();
                referencechapterselectload2()
                referenceverseselectload2();
                referenceverseendselectload2();
                //*/
                //canvasupdate();
                svgupdate();
            });
        }
        addEventListener("load", Bibleload);

        function referencebookload()
        {
            const div = document.createElement("div");
            div.id = "referencebook";
            div.innerHTML = "book";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencebookload);

        function referencebookselectload()
        {
            const br = document.createElement("br");
            referencebook.append(br);

            const select = document.createElement("select");
            select.id = "referencebookselect";
            select.addEventListener("input", referencebookselectupdate);
            referencebook.append(select);

            text.referencetextbook = "Genesis";

            //referencebookselectload2();
        }
        addEventListener("load", referencebookselectload);

        function referencebookselectload2()
        {
            for(let i = referencebookselect.options.length - 1; i >= 0; --i)
            {
                referencebookselect.remove(i);
            }

            for(const value of Biblebookarray)
            {
                const option = document.createElement("option");
                option.innerHTML = value;
                referencebookselect.add(option);
            }

            //referencebookselect.value = Biblebookarray[42];

            referencebookselectset();
        }

        function referencebookselectset()
        {
            text.book = referencebookselect.options.selectedIndex + 1;
            text.bookname = referencebookselect.value;

            text.referencetextbook = text.bookname;
        }

        function referencebookselectupdate()
        {
            referencebookselectset();
            referencechapterselectload2();
            referenceverseselectload2();
            referenceverseendselectload2();
            svgupdate();
        }



        function referencechapterload()
        {
            const div = document.createElement("div");
            div.id = "referencechapter";
            div.innerHTML = "chapter";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencechapterload);

        function referencechapterselectload()
        {
            const br = document.createElement("br");
            referencechapter.append(br);

            const select = document.createElement("select");
            select.id = "referencechapterselect";
            select.addEventListener("input", referencechapterselectupdate);
            referencechapter.append(select);

            text.referencetextchapter = " 1";

            //referencechapterselectload2();
        }
        addEventListener("load", referencechapterselectload);

        function referencechapterselectload2()
        {
            for(let i = referencechapterselect.options.length - 1; i >= 0; --i)
            {
                referencechapterselect.remove(i);
            }

            for(let i = 1; i < Bibleversearray[text.book].length; ++i)
            {
                const option = document.createElement("option");
                option.innerHTML = i;
                referencechapterselect.add(option);
            }

            referencechapterselect.value = 1;

            referencechapterselectset();
        }

        function referencechapterselectset()
        {
            text.chapter = referencechapterselect.value;

            text.referencetextchapter = ` ${text.chapter}`;
        }

        function referencechapterselectupdate()
        {
            referencechapterselectset();
            referenceverseselectload2();
            referenceverseendselectload2();
            svgupdate();
        }



        function referenceverseload()
        {
            const div = document.createElement("div");
            div.id = "referenceverse";
            div.innerHTML = "verse-start";
            tabcontentreference.append(div);
        }
        addEventListener("load", referenceverseload);

        function referenceverseselectload()
        {
            const br = document.createElement("br");
            referenceverse.append(br);

            const select = document.createElement("select");
            select.id = "referenceverseselect";
            select.addEventListener("input", referenceverseselectupdate);
            referenceverse.append(select);

            text.referencetextverse = ":1";
            text.passagetextverse = "In the beginning God created the heaven and the earth.";

            //referenceverseselectload2();
        }
        addEventListener("load", referenceverseselectload);

        function referenceverseselectload2()
        {
            for(let i = referenceverseselect.options.length - 1; i >= 0; --i)
            {
                referenceverseselect.remove(i);
            }

            for(let i = 1; i < Bibleversearray[text.book][text.chapter].length; ++i)
            {
                const option = document.createElement("option");
                option.innerHTML = i;
                referenceverseselect.add(option);
            }

            referenceverseselect.value = 1;

            referenceverseselectset();
        }

        function referenceverseselectset()
        {
            text.verse = referenceverseselect.value;

            text.referencetextverse = `:${text.verse}`;
            text.passagetextverse = Bibleversearray[text.book][text.chapter][text.verse];
        }

        function referenceverseselectupdate()
        {
            referenceverseselectset();
            referenceverseendselectload2();
            svgupdate();
        }



        function referenceverseendload()
        {
            const div = document.createElement("div");
            div.id = "referenceverseend";
            div.innerHTML = "verse-end";
            tabcontentreference.append(div);
        }
        addEventListener("load", referenceverseendload);

        function referenceverseendselectload()
        {
            const br = document.createElement("br");
            referenceverseend.append(br);

            const select = document.createElement("select");
            select.id = "referenceverseendselect";
            select.addEventListener("input", referenceverseendselectupdate);
            referenceverseend.append(select);

            text.referencetextverseend = "";
            text.passagetextverseend = "";

            //referenceverseendselectload2();
        }
        addEventListener("load", referenceverseendselectload);

        function referenceverseendselectload2()
        {
            for(let i = referenceverseendselect.options.length - 1; i >= 0; --i)
            {
                referenceverseendselect.remove(i);
            }

            for(let i = referenceverseselect.value; i < Bibleversearray[text.book][text.chapter].length; ++i)
            {
                const option = document.createElement("option");
                option.innerHTML = i;
                referenceverseendselect.add(option);
            }

            referenceverseendselect.value = referenceverseselect.value;

            referenceverseendselectset();
        }

        function referenceverseendselectset()
        {
            text.verseend = referenceverseendselect.value;

            //text.referencetext = `${text.bookname} ${text.chapter}:${text.verse}`;
            //text.passagetext = `${Bibleversearray[text.book][text.chapter][text.verse]}`;
            text.referencetextverseend = "";
            text.passagetextverseend = "";

            if(text.verse != text.verseend)
            {
                //text.referencetext += `-${text.verseend}`;
                text.referencetextverseend = `-${text.verseend}`;

                for(let i = Number(text.verse) + 1; i <= text.verseend; ++i)
                {
                    //text.passagetext += ` ${Bibleversearray[text.book][text.chapter][i]}`;
                    text.passagetextverseend += ` ${Bibleversearray[text.book][text.chapter][i]}`;
                }
            }

            //if(text.versionbool)
            //{
            //    text.referencetext += ` ${text.versionname}`;
            //}
            //console.log(text.referencetext);
            //console.log(text.passagetext);
        }

        function referenceverseendselectupdate()
        {
            referenceverseendselectset();
            svgupdate();
        }



        function referencewidthload()
        {
            const div = document.createElement("div");
            div.id = "referencewidth";
            div.innerHTML = "width";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencewidthload);

        function referencewidthnumberload()
        {
            const br = document.createElement("br");
            referencewidth.append(br);

            const input = document.createElement("input");
            input.id = "referencewidthnumber";
            input.max = maxwidth;
            input.min = 0;
            input.type = "number";
            input.value = canvas.width - 100;
            input.addEventListener("input", referencewidthnumberupdate);
            referencewidth.append(input);

            //referencewidthnumberset();
        }
        addEventListener("load", referencewidthnumberload);

        function referencewidthnumberset()
        {
            const v = Number(referencewidthnumber.value);

            referencewidthrange.value = v;
            text.referencewidth = v;
        }

        function referencewidthnumberupdate()
        {
            referencewidthnumberset();
            svgupdate();
        }

        function referencewidthrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencewidthrange";
            input.max = referencewidthnumber.max;
            input.min = referencewidthnumber.min;
            input.type = "range";
            input.value = referencewidthnumber.value;
            input.addEventListener("input", referencewidthrangeupdate);
            referencewidth.append(input);

            referencewidthrangeset();
        }
        addEventListener("load", referencewidthrangeload);

        function referencewidthrangeset()
        {
            const v = Number(referencewidthrange.value);

            referencewidthnumber.value = v;
            text.referencewidth = v;
        }

        function referencewidthrangeupdate()
        {
            referencewidthrangeset();
            svgupdate();
        }

        function referencewidthexactload()
        {
            const br = document.createElement("br");
            referencewidth.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencewidthexactupdate);
                referencewidth.append(button);
            }
        }
        addEventListener("load", referencewidthexactload);

        function referencewidthexactupdate(e)
        {
            referencewidthnumber.value = canvas.width * Number(e.target.value);

            referencewidthnumberupdate();
        }

        function referencewidthincrementload()
        {
            const br = document.createElement("br");
            referencewidth.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencewidthincrementupdate);
                referencewidth.append(button);
            }
        }
        addEventListener("load", referencewidthincrementload);

        function referencewidthincrementupdate(e)
        {
            const v = Number(referencewidthnumber.value) + Number(e.target.value);

            if((referencewidthnumber.min <= v) && (v <= referencewidthnumber.max))
            {
                referencewidthnumber.value = v;

                referencewidthnumberupdate();
            }
        }



        function referenceheightload()
        {
            const div = document.createElement("div");
            div.id = "referenceheight";
            div.innerHTML = "height";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referenceheightload);

        function referenceheightnumberload()
        {
            const br = document.createElement("br");
            referenceheight.append(br);

            const input = document.createElement("input");
            input.id = "referenceheightnumber";
            input.max = maxheight;
            input.min = 0;
            input.type = "number";
            input.value = 280;
            input.addEventListener("input", referenceheightnumberupdate);
            referenceheight.append(input);

            //referenceheightnumberset();
        }
        addEventListener("load", referenceheightnumberload);

        function referenceheightnumberset()
        {
            const v = Number(referenceheightnumber.value);

            referenceheightrange.value = v;
            text.referenceheight = v;
        }

        function referenceheightnumberupdate()
        {
            referenceheightnumberset();
            svgupdate();
        }

        function referenceheightrangeload()
        {
            const input = document.createElement("input");
            input.id = "referenceheightrange";
            input.max = referenceheightnumber.max;
            input.min = referenceheightnumber.min;
            input.type = "range";
            input.value = referenceheightnumber.value;
            input.addEventListener("input", referenceheightrangeupdate);
            referenceheight.append(input);

            referenceheightrangeset();
        }
        addEventListener("load", referenceheightrangeload);

        function referenceheightrangeset()
        {
            const v = Number(referenceheightrange.value);

            referenceheightnumber.value = v;
            text.referenceheight = v;
        }

        function referenceheightrangeupdate()
        {
            referenceheightrangeset();
            svgupdate();
        }

        function referenceheightexactload()
        {
            const br = document.createElement("br");
            referenceheight.append(br);

            const array =
            [
                ["25%",0.25],
                ["50%",0.5],
                ["75%",0.75],
                ["100%",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceheightexactupdate);
                referenceheight.append(button);
            }
        }
        addEventListener("load", referenceheightexactload);

        function referenceheightexactupdate(e)
        {
            referenceheightnumber.value = canvas.height * Number(e.target.value);

            referenceheightnumberupdate();
        }

        function referenceheightincrementload()
        {
            const br = document.createElement("br");
            referenceheight.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceheightincrementupdate);
                referenceheight.append(button);
            }
        }
        addEventListener("load", referenceheightincrementload);

        function referenceheightincrementupdate(e)
        {
            const v = Number(referenceheightnumber.value) + Number(e.target.value);

            if((referenceheightnumber.min <= v) && (v <= referenceheightnumber.max))
            {
                referenceheightnumber.value = v;

                referenceheightnumberupdate();
            }
        }



        function referencexload()
        {
            const div = document.createElement("div");
            div.id = "referencex";
            div.innerHTML = "x";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencexload);

        function referencexnumberload()
        {
            const br = document.createElement("br");
            referencex.append(br);

            const input = document.createElement("input");
            input.id = "referencexnumber";
            input.max = maxwidth;
            input.min = -maxwidth;
            input.type = "number";
            input.value = 50;
            input.addEventListener("input", referencexnumberupdate);
            referencex.append(input);

            //referencexnumberset();
        }
        addEventListener("load", referencexnumberload);

        function referencexnumberset()
        {
            const v = Number(referencexnumber.value);

            referencexrange.value = v;
            text.referencex = v;
        }

        function referencexnumberupdate()
        {
            referencexnumberset();
            svgupdate();
        }

        function referencexrangeload()
        {
            const input = document.createElement("input");
            input.id = "referencexrange";
            input.max = referencexnumber.max;
            input.min = referencexnumber.min;
            input.type = "range";
            input.value = referencexnumber.value;
            input.addEventListener("input", referencexrangeupdate);
            referencex.append(input);

            referencexrangeset();
        }
        addEventListener("load", referencexrangeload);

        function referencexrangeset()
        {
            const v = Number(referencexrange.value);

            referencexnumber.value = v;
            text.referencex = v;
        }

        function referencexrangeupdate()
        {
            referencexrangeset();
            svgupdate();
        }

        function referencexexactload()
        {
            const br = document.createElement("br");
            referencex.append(br);

            const array =
            [
                ["left",0],
                ["center",0.5],
                ["right",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencexexactupdate);
                referencex.append(button);
            }
        }
        addEventListener("load", referencexexactload);

        function referencexexactupdate(e)
        {
            //referencexnumber.value = (canvas.width - text.referencewidth - text.referencepaddingleft - text.referencepaddingright) * Number(e.target.value);
            referencexnumber.value = (canvas.width - text.referencewidth) * Number(e.target.value);

            referencexnumberupdate();
        }

        function referencexincrementload()
        {
            const br = document.createElement("br");
            referencex.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencexincrementupdate);
                referencex.append(button);
            }
        }
        addEventListener("load", referencexincrementload);

        function referencexincrementupdate(e)
        {
            const v = Number(referencexnumber.value) + Number(e.target.value);

            if((referencexnumber.min <= v) && (v <= referencexnumber.max))
            {
                referencexnumber.value = v;

                referencexnumberupdate();
            }
        }



        function referenceyload()
        {
            const div = document.createElement("div");
            div.id = "referencey";
            div.innerHTML = "y";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referenceyload);

        function referenceynumberload()
        {
            const br = document.createElement("br");
            referencey.append(br);

            const input = document.createElement("input");
            input.id = "referenceynumber";
            input.max = maxheight;
            input.min = -maxheight;
            input.type = "number";
            input.value = 400;
            input.addEventListener("input", referenceynumberupdate);
            referencey.append(input);

            //referenceynumberset();
        }
        addEventListener("load", referenceynumberload);

        function referenceynumberset()
        {
            const v = Number(referenceynumber.value);

            referenceyrange.value = v;
            text.referencey = v;
        }

        function referenceynumberupdate()
        {
            referenceynumberset();
            svgupdate();
        }

        function referenceyrangeload()
        {
            const input = document.createElement("input");
            input.id = "referenceyrange";
            input.max = referenceynumber.max;
            input.min = referenceynumber.min;
            input.type = "range";
            input.value = referenceynumber.value;
            input.addEventListener("input", referenceyrangeupdate);
            referencey.append(input);

            referenceyrangeset();
        }
        addEventListener("load", referenceyrangeload);

        function referenceyrangeset()
        {
            const v = Number(referenceyrange.value);

            referenceynumber.value = v;
            text.referencey = v;
        }

        function referenceyrangeupdate()
        {
            referenceyrangeset();
            svgupdate();
        }

        function referenceyexactload()
        {
            const br = document.createElement("br");
            referencey.append(br);

            const array =
            [
                ["top",0],
                ["center",0.5],
                ["bottom",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceyexactupdate);
                referencey.append(button);
            }
        }
        addEventListener("load", referenceyexactload);

        function referenceyexactupdate(e)
        {
            //referenceynumber.value = (canvas.height - text.referenceheight - text.referencepaddingtop - text.referencepaddingbottom) * Number(e.target.value);
            referenceynumber.value = (canvas.height - text.referenceheight) * Number(e.target.value);

            referenceynumberupdate();
        }

        function referenceyincrementload()
        {
            const br = document.createElement("br");
            referencey.append(br);

            const array =
            [
                ["-1000",-1000],
                ["-100",-100],
                ["-10",-10],
                ["-1",-1],
                ["+1",1],
                ["+10",10],
                ["+100",100],
                ["+1000",1000],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceyincrementupdate);
                referencey.append(button);
            }
        }
        addEventListener("load", referenceyincrementload);

        function referenceyincrementupdate(e)
        {
            const v = Number(referenceynumber.value) + Number(e.target.value);

            if((referenceynumber.min <= v) && (v <= referenceynumber.max))
            {
                referenceynumber.value = v;

                referenceynumberupdate();
            }
        }



        function referencebackgroundcolorload()
        {
            const div = document.createElement("div");
            div.id = "referencebackgroundcolor";
            div.innerHTML = "background-color";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencebackgroundcolorload);

        function referencebackgroundcolorcolorload()
        {
            const br = document.createElement("br");
            referencebackgroundcolor.append(br);

            const input = document.createElement("input");
            input.id = "referencebackgroundcolorcolor";
            input.type = "color";
            input.value = "#ffffff";
            input.addEventListener("input", referencebackgroundcolorcolorupdate);
            referencebackgroundcolor.append(input);

            //referencebackgroundcolorcolorset();
        }
        addEventListener("load", referencebackgroundcolorcolorload);

        function referencebackgroundcolorcolorset()
        {
            const c = referencebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referencebackgroundalphanumber.value;

            text.referencebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencebackgroundcolorcolorupdate()
        {
            referencebackgroundcolorcolorset();
            svgupdate();
        }

        function referencebackgroundcolorexactload()
        {
            const br = document.createElement("br");
            referencebackgroundcolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencebackgroundcolorexactupdate);
                referencebackgroundcolor.append(button);
            }
        }
        addEventListener("load", referencebackgroundcolorexactload);

        function referencebackgroundcolorexactupdate(e)
        {
            referencebackgroundcolorcolor.value = e.target.value;

            referencebackgroundcolorcolorupdate();
        }



        function referencebackgroundalphaload()
        {
            const div = document.createElement("div");
            div.id = "referencebackgroundalpha";
            div.innerHTML = "background-alpha";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referencebackgroundalphaload);

        function referencebackgroundalphanumberload()
        {
            const br = document.createElement("br");
            referencebackgroundalpha.append(br);

            const input = document.createElement("input");
            input.id = "referencebackgroundalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 0.5;
            input.addEventListener("input", referencebackgroundalphanumberupdate);
            referencebackgroundalpha.append(input);

            //referencebackgroundalphanumberset();
        }
        addEventListener("load", referencebackgroundalphanumberload);

        function referencebackgroundalphanumberset()
        {
            const c = referencebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referencebackgroundalphanumber.value;

            referencebackgroundalpharange.value = a;
            text.referencebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencebackgroundalphanumberupdate()
        {
            referencebackgroundalphanumberset();
            svgupdate();
        }

        function referencebackgroundalpharangeload()
        {
            const input = document.createElement("input");
            input.id = "referencebackgroundalpharange";
            input.max = referencebackgroundalphanumber.max;
            input.min = referencebackgroundalphanumber.min;
            input.step = referencebackgroundalphanumber.step;
            input.type = "range";
            input.value = referencebackgroundalphanumber.value;
            input.addEventListener("input", referencebackgroundalpharangeupdate);
            referencebackgroundalpha.append(input);

            referencebackgroundalpharangeset();
        }
        addEventListener("load", referencebackgroundalpharangeload);

        function referencebackgroundalpharangeset()
        {
            const c = referencebackgroundcolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referencebackgroundalpharange.value;

            referencebackgroundalphanumber.value = a;
            text.referencebackgroundcolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencebackgroundalpharangeupdate()
        {
            referencebackgroundalpharangeset();
            svgupdate();
        }

        function referencebackgroundalphaexactload()
        {
            const br = document.createElement("br");
            referencebackgroundalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencebackgroundalphaexactupdate);
                referencebackgroundalpha.append(button);
            }
        }
        addEventListener("load", referencebackgroundalphaexactload);

        function referencebackgroundalphaexactupdate(e)
        {
            referencebackgroundalphanumber.value = Number(e.target.value);

            referencebackgroundalphanumberupdate();
        }

        function referencebackgroundalphaincrementload()
        {
            const br = document.createElement("br");
            referencebackgroundalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencebackgroundalphaincrementupdate);
                referencebackgroundalpha.append(button);
            }
        }
        addEventListener("load", referencebackgroundalphaincrementload);

        function referencebackgroundalphaincrementupdate(e)
        {
            let v = Number(referencebackgroundalphanumber.value) + Number(e.target.value);
            v = parseFloat(v.toFixed(2));

            if((referencebackgroundalphanumber.min <= v) && (v <= referencebackgroundalphanumber.max))
            {
                referencebackgroundalphanumber.value = v;

                referencebackgroundalphanumberupdate();
            }
        }



        function referencebordercolorload()
        {
            const div = document.createElement("div");
            div.id = "referencebordercolor";
            div.innerHTML = "border-color";
            tabcontentreference.append(div);
        }
        addEventListener("load", referencebordercolorload);

        function referencebordercolorcolorload()
        {
            const br = document.createElement("br");
            referencebordercolor.append(br);

            const input = document.createElement("input");
            input.id = "referencebordercolorcolor";
            input.type = "color";
            input.value = "#000000";
            input.addEventListener("input", referencebordercolorcolorupdate);
            referencebordercolor.append(input);

            //referencebordercolorcolorset();
        }
        addEventListener("load", referencebordercolorcolorload);

        function referencebordercolorcolorset()
        {
            const c = referencebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referenceborderalphanumber.value;

            text.referencebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referencebordercolorcolorupdate()
        {
            referencebordercolorcolorset();
            svgupdate();
        }

        function referencebordercolorexactload()
        {
            const br = document.createElement("br");
            referencebordercolor.append(br);

            const array =
            [
                ["black","#000000"],
                ["white","#ffffff"],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referencebordercolorexactupdate);
                referencebordercolor.append(button);
            }
        }
        addEventListener("load", referencebordercolorexactload);

        function referencebordercolorexactupdate(e)
        {
            referencebordercolorcolor.value = e.target.value;

            referencebordercolorcolorupdate();
        }



        function referenceborderalphaload()
        {
            const div = document.createElement("div");
            div.id = "referenceborderalpha";
            div.innerHTML = "border-alpha";
            tabcontentreference.append(div);

            const style = div.style;
            style.overflowY = "hidden";
            style.whiteSpace = "nowrap";
        }
        addEventListener("load", referenceborderalphaload);

        function referenceborderalphanumberload()
        {
            const br = document.createElement("br");
            referenceborderalpha.append(br);

            const input = document.createElement("input");
            input.id = "referenceborderalphanumber";
            input.max = 1;
            input.min = 0;
            input.step = 0.01;
            input.type = "number";
            input.value = 1;
            input.addEventListener("input", referenceborderalphanumberupdate);
            referenceborderalpha.append(input);

            //referenceborderalphanumberset();
        }
        addEventListener("load", referenceborderalphanumberload);

        function referenceborderalphanumberset()
        {
            const c = referencebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referenceborderalphanumber.value;

            referenceborderalpharange.value = a;
            text.referencebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referenceborderalphanumberupdate()
        {
            referenceborderalphanumberset();
            svgupdate();
        }

        function referenceborderalpharangeload()
        {
            const input = document.createElement("input");
            input.id = "referenceborderalpharange";
            input.max = referenceborderalphanumber.max;
            input.min = referenceborderalphanumber.min;
            input.step = referenceborderalphanumber.step;
            input.type = "range";
            input.value = referenceborderalphanumber.value;
            input.addEventListener("input", referenceborderalpharangeupdate);
            referenceborderalpha.append(input);

            referenceborderalpharangeset();
        }
        addEventListener("load", referenceborderalpharangeload);

        function referenceborderalpharangeset()
        {
            const c = referencebordercolorcolor.value;
            const r = parseInt(c.slice(1,3),16);
            const g = parseInt(c.slice(3,5),16);
            const b = parseInt(c.slice(5,7),16);
            const a = referenceborderalpharange.value;

            referenceborderalphanumber.value = a;
            text.referencebordercolor = `rgb(${r} ${g} ${b} / ${a})`;
        }

        function referenceborderalpharangeupdate()
        {
            referenceborderalpharangeset();
            svgupdate();
        }

        function referenceborderalphaexactload()
        {
            const br = document.createElement("br");
            referenceborderalpha.append(br);

            const array =
            [
                ["0",0],
                ["0.25",0.25],
                ["0.5",0.5],
                ["0.75",0.75],
                ["1",1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];
                button.value = value[1];
                button.addEventListener("click", referenceborderalphaexactupdate);
                referenceborderalpha.append(button);
            }
        }
        addEventListener("load", referenceborderalphaexactload);

        function referenceborderalphaexactupdate(e)
        {
            referenceborderalphanumber.value = Number(e.target.value);

            referenceborderalphanumberupdate();
        }

        function referenceborderalphaincrementload()
        {
            const br = document.createElement("br");
            referenceborderalpha.append(br);

            const array =
            [
                ["-0.1",-0.1],
                ["-0.01",-0.01],
                ["+0.01",0.01],
                ["+0.1",0.1],
            ];

            for(const value of array)
            {
                const button = document.createElement("button");
                button.innerHTML = value[0];