stormlight-womens-script/index.html at master · ACLay/stormlight-womens-script · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
    <head>
        <title>Women's script generator</title>
        <script src="https://polyfill.io/v3/polyfill.min.js?features=HTMLCanvasElement.prototype.toBlob"></script>
        <script src="alethi.js"></script>
        <link rel="stylesheet" href="style.css"/>
        <link rel="shortcut icon" href="favicon.png">
    </head>
    <body>
        <h1>Women's Script</h1>
        <p>
            Turn text into
            <a href="https://coppermind.net/wiki/Women%27s_script">women's script</a>
            from The Stormlight Archive.
        </p>
        <p id="IEWarning">
            This site will not work in Internet Explorer.
            Please use a modern browser such as Chrome, Firefox, or Edge.
        </p>
        <textarea id="sourceText"></textarea>
        <div class="hidden">
            <svg id="drawingArea"></svg>
        </div>
        <img id="outputImage"/>
        <details>
            <summary>Symbols</summary>
            <p>
                The symbols in women's script do not directly map to english letters, but to their sounds.
                There are also symbols for the "ch", "sh", and "th" sounds.
            </p>
            <p>
                Women's script also has a symbol that indicates the maximum height of symbols in a block of text.
                By default, this generator will add it automatically at the start of the text and after blank lines.
                You can turn this off in the formatting section, or add them in your text by typing "]["
            </p>
            <div id="symbolDisplay"></div>
        </details>
        <details>
            <summary>Formatting</summary>
            <div class="customisation">
                <input type="color" value="#000000" id="fgColourPicker">
                <label for="fgColourPicker">Text colour</label>
                <input type="color" value="#ffffff" id="bgColourPicker">
                <label for="bgColourPicker">Background colour</label>
                <input type="checkbox" id="transparentBgCheckbox">
                <label for="transparentBgCheckbox">Transparent background</label>

                <input type="radio" name="align" value="left" id="leftAlignCheckbox">
                <label for="leftAlignCheckbox">Left align text</label>
                <input type="radio" name="align" value="center" id="centerAlignCheckbox" checked>
                <label for="centerAlignCheckbox">Center align text</label>
                <input type="radio" name="align" value="right" id="rightAlignCheckbox">
                <label for="rightAlignCheckbox">Right align text</label>

                <input type="number" value="10" id="italicsAngleInput">
                <label for="italicsAngleInput">Italics angle</label>

                <input type="number" value="1" id="strokeWidthInput">
                <label for="strokeWidthInput">Stroke width</label>
                <input type="number" value="1" id="scaleInput">
                <label for="scaleInput">Scale</label>

                <input type="checkbox" id="autoHeightMarkCheckbox" checked>
                <label for="autoHeightMarkCheckbox">Auto height markers</label>

                <input type="radio" name="format" value="png" id="pngFormatCheckbox" checked>
                <label for="pngFormatCheckbox">PNG image format</label>
                <input type="radio" name="format" value="svg" id="svgFormatCheckbox">
                <label for="svgFormatCheckbox">SVG image format</label>
            </div>
        </details>
        <details>
            <summary>Substitutions</summary>
            <p>
                If there are words or (groups of) characters that do not map directly to sounds of womens script symbols you can either type them phonetically, or enter custom substitutions here.
                Examples of this could include:
                <ul>
                    <li>words with silent letters or strange pronounciations</li>
                    <li>letters that together make a single sound (the C and K in luck)</li>
                    <li>letters that make different sounds based on their neighbours (the C in city sounds like an S)</li>
                    <li>letters that don't have their own womens script symbol (C, Q, W, X)</li>
                </ul>
            </p>
            <p>
                The available womens script symbols are: <span class="symbolList"></span>
            </p>
            <p>
                If you want your substitution to treat "CH", "SH", or "TH" as separate symbols, separate the symbols with a backslash "\" (ie "C\H").
                This can also be used to prevent later character substitutions replacing the symbols from an earlier substitution.
            </p>
            <div class="substitutions">
                <h3>Word substitutions</h3>
                <p>
                    On each line enter a word, followed by a space, then the womens script symbols it should be replaced with.
                </p>
                <textarea id="wordSubstitutionText"></textarea>
                <p id="wordSubstitutionError" class="error"></p>
                <button id="resetWordSubstitutionButton">Restore default word substitutions</button>
                <h3>Character substitutions</h3>
                <p>
                    On each line enter a series of characters, followed by a space, then the womens script symbols they should be replaced with.
                    These replacements will all take place in any text not already replaced by a word substitution, one after the other.
                </p>
                <textarea id="charSubstitutionText"></textarea>
                <p id="charSubstitutionError" class="error"></p>
                <button id="resetCharSubstitutionButton">Restore default character substitutions</button>
            </div>
        </details>
    </body>
</html>