curl_multi_errno

Description
Syntax
Examples
Links

Description

The curl_multi_errno of cURL for PHP return the last multi curl error number.

Syntax

curl_multi_errno(
    CurlMultiHandle $multi_handle
): int

Parameters

multi_handle

A cURL multi handle returned by curl_multi_init().

Return

Return an integer containing the last multi curl error number.

Examples

1 · multi_handle

<?

// initialize multiple
$multi_handle = curl_multi_init();

    // initialize curl
    $handle1 = curl_init();
    $handle2 = curl_init();

        // set curl
        curl_setopt($handle1, CURLOPT_URL, "https://osbo.com/");
        curl_setopt($handle2, CURLOPT_URL, "https://osbo.com/");

        // add curl to multiple
        curl_multi_add_handle($multi_handle, $handle1);
        curl_multi_add_handle($multi_handle, $handle2);

        // execute multiple
        do
        {
            curl_multi_exec($multi_handle, $still_running);

            $error_code = curl_multi_errno($multi_handle);

            if($error_code > 0)
            {
                $error_string = curl_multi_strerror($error_code);

                echo $error_string;
                break;
            }
        }
        while($still_running);

        // remove curl from multiple
        curl_multi_remove_handle($multi_handle, $handle1);
        curl_multi_remove_handle($multi_handle, $handle2);

    // close curl
    curl_close($handle1);
    curl_close($handle2);

// close multiple
curl_multi_close($multi_handle);

<!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/SamaritansPurseOperationChristmasChild2.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.addEventListener("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);
            }

            //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 = document.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;

            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 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";
            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.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()
        {
            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/ target=_blank><img alt="Samaritan's Purse" src=/assets/svg/SamaritansPurseBanner.svg title="Samaritan's Purse"></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=/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_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><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/16.mp4></video></div></body></html><!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/SamaritansPurseOperationChristmasChild2.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.addEventListener("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);
            }

            //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 = document.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;

            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 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";
            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.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()
        {
            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=/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_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><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/16.mp4></video></div></body></html>