plotter-text/index.html at main · piebro/plotter-text · 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Text to SVG</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        .container {
            display: flex;
            gap: 20px;
            height: 80vh;
        }
        .text-area {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        textarea {
            width: 100%;
            height: 100%;
            resize: none;
            padding: 10px;
            font-size: 16px;
        }
        .svg-container {
            flex: 1;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        svg {
            width: 100%;
            height: 90%;
        }
        .download-btn {
            margin-top: 10px;
            padding: 10px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .download-btn:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
<h1 style="text-align: center;">Interactive Text to SVG</h1>

<!-- Adding font size control, line spacing, and centering options -->
<div style="text-align: center; margin-bottom: 15px;">
    <label for="fontSelect">Font: </label>
    <select id="fontSelect" style="margin-right: 15px;">
        <!-- Options will be populated from fonts.js -->
    </select>
    <label for="fontSizeInput">Font Size: </label>
    <input type="number" id="fontSizeInput" min="10" max="100" value="24" style="width: 60px;">
    <label for="lineSpacingInput" style="margin-left: 15px;">Line Spacing: </label>
    <input type="number" id="lineSpacingInput" min="0.5" max="5" value="1.2" step="0.1" style="width: 60px;">
    <label for="centerHorizontally" style="margin-left: 15px;">Center X: </label>
    <input type="checkbox" id="centerHorizontally">
    <label for="centerVertically" style="margin-left: 15px;">Center Y: </label>
    <input type="checkbox" id="centerVertically">
</div>

<div class="container">
    <div class="text-area">
        <textarea id="textInput">your text will appear here</textarea>
    </div>

    <div class="svg-container">
        <svg id="textDisplay" viewBox="0 0 400 300">
            <text id="svgText" x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-size="24">Your text will appear here</text>
        </svg>
    </div>
</div>

<div style="text-align: center; margin-top: 20px;">
    <button id="downloadBtn" class="download-btn">Download SVG</button>
</div>

<script src="fonts.js"></script>
<script>

function updateSVGText() {
    const textInput = document.getElementById('textInput');
    const svgElement = document.getElementById('textDisplay');
    const fontSelect = document.getElementById('fontSelect');
    const text = textInput.value;
    const fontSize = parseFloat(document.getElementById('fontSizeInput').value);
    const lineSpacing = parseFloat(document.getElementById('lineSpacingInput').value);
    const centerX = document.getElementById('centerHorizontally').checked;
    const centerY = document.getElementById('centerVertically').checked;
    const selectedFont = fonts[fontSelect.value];

    // Clear previous content
    while (svgElement.firstChild) {
        svgElement.removeChild(svgElement.firstChild);
    }

    // Render text using selected font
    renderCustomFont(svgElement, text, selectedFont, fontSize, lineSpacing, centerX, centerY);
}

function renderCustomFont(svgElement, text, fontData, fontSize = 24, lineSpacing = 1.2, centerX = false, centerY = false) {
    // Decode font glyphs
    const glyphs = decodeGlyphs(fontData.glyphs);

    // Calculate scale based on fontSize
    const scale = fontSize / 12; // Adjust base scale ratio as needed

    // Calculate text dimensions for centering (if needed)
    let textWidth = 0;
    let textHeight = 0;
    const lineHeight = fontData.unitsPerEm * lineSpacing * scale * 10 / fontData.unitsPerEm;

    // First pass to calculate total width and height if centering is needed
    if (centerX || centerY) {
        let maxLineWidth = 0;
        let currentLineWidth = 0;
        let lineCount = 1;

        for (let i = 0; i < text.length; i++) {
            const char = text[i];
            if (char === '\n') {
                lineCount++;
                maxLineWidth = Math.max(maxLineWidth, currentLineWidth);
                currentLineWidth = 0;
            } else {
                const glyph = glyphs[char] || glyphs[' '] || { x: fontData.unitsPerEm * 0.5 };
                currentLineWidth += glyph.x * scale / fontData.unitsPerEm;
            }
        }
        maxLineWidth = Math.max(maxLineWidth, currentLineWidth);

        textWidth = maxLineWidth;
        textHeight = lineCount * lineHeight;
    }

    // Set starting position based on centering options
    let x = centerX ? (400 - textWidth) / 2 : 20; // Default to left margin (20) if not centered
    let y = centerY ? (300 - textHeight) / 2 + lineHeight * 0.8 : lineHeight; // Changed from negative value to positive
    const startX = x;

    // Process each character
    for (let i = 0; i < text.length; i++) {
        const char = text[i];

        // Handle newline
        if (char === '\n') {
            x = startX;
            y += lineHeight;
            continue;
        }

        // Get glyph data or use space if character not found
        const glyph = glyphs[char] || glyphs[' '];
        if (!glyph) continue;

        // Draw each polyline in the glyph
        glyph.d.forEach(points => {
            const pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            let pathData = '';

            for (let j = 0; j < points.length; j += 2) {
                const px = x + points[j] * scale / fontData.unitsPerEm;
                const py = y + points[j+1] * scale / fontData.unitsPerEm;

                if (j === 0) {
                    pathData = `M ${px} ${py}`;
                } else {
                    pathData += ` L ${px} ${py}`;
                }
            }

            pathElement.setAttribute('d', pathData);
            pathElement.setAttribute('stroke', 'black');
            pathElement.setAttribute('stroke-width', '1');
            pathElement.setAttribute('fill', 'none');
            svgElement.appendChild(pathElement);
        });

        // Advance position by glyph width
        x += glyph.x * scale / fontData.unitsPerEm;
    }
}

function decodeGlyphs(glyphsData) {
    const b = atob(glyphsData);
    const a = new Int16Array(b.length / 2);
    const glyphs = {};

    // Convert binary data to Int16Array
    for (let i = 0; i < b.length; i += 2) {
        a[i / 2 | 0] = b.charCodeAt(i) | (b.charCodeAt(i + 1) << 8);
    }

    // Parse glyph data
    for (let i = 0; i < a.length; ) {
        let char = String.fromCharCode(a[i++]);
        let xAdvance = a[i++];
        let d = [], polyline = [];

        while (i < a.length && a[i] !== -16384) {
            if (a[i] === 16384) {
                d.push(polyline);
                polyline = [];
            } else {
                polyline.push(a[i]);
            }
            i++;
        }
        i++; // Skip the terminator

        glyphs[char] = { x: xAdvance, d: d };
    }

    return glyphs;
}

// Populate font dropdown when the page loads
function populateFontDropdown() {
    const fontSelect = document.getElementById('fontSelect');

    // Clear any existing options
    fontSelect.innerHTML = '';

    // Add an option for each font in the fonts object
    for (const fontName in fonts) {
        const option = document.createElement('option');
        option.value = fontName;
        option.textContent = fontName;
        fontSelect.appendChild(option);
    }
}

// Initialize the page
document.addEventListener('DOMContentLoaded', function() {
    populateFontDropdown();
    updateSVGText();

    // Update SVG text when input changes
    document.getElementById('textInput').addEventListener('input', updateSVGText);

    // Update when font selection changes
    document.getElementById('fontSelect').addEventListener('change', updateSVGText);

    // Update when font size changes
    document.getElementById('fontSizeInput').addEventListener('input', updateSVGText);

    // Update when line spacing changes
    document.getElementById('lineSpacingInput').addEventListener('input', updateSVGText);

    // Update when centering options change
    document.getElementById('centerHorizontally').addEventListener('change', updateSVGText);
    document.getElementById('centerVertically').addEventListener('change', updateSVGText);

    // Handle SVG download
    document.getElementById('downloadBtn').addEventListener('click', function() {
        const svgElement = document.getElementById('textDisplay');
        const svgData = new XMLSerializer().serializeToString(svgElement);
        const svgBlob = new Blob([svgData], {type: 'image/svg+xml;charset=utf-8'});
        const svgUrl = URL.createObjectURL(svgBlob);

        const downloadLink = document.createElement('a');
        downloadLink.href = svgUrl;
        downloadLink.download = 'text-to-svg.svg';
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);

        // Clean up the URL object
        setTimeout(function() {
            URL.revokeObjectURL(svgUrl);
        }, 100);
    });
});
</script>
</body>
</html>