1j01/textual-paint
1
1
Fork 0
mirror of https://github.com/1j01/textual-paint.git synced 2024-12-11 08:33:02 +03:00
Code Issues Packages Projects Releases Wiki Activity
75f13e95ce
textual-paint/screenshot.svg

106 lines
46 KiB
XML
Raw Normal View History

Add textual screenshot to readme This took a lot of trial and error to get this working. - First I had to figure out how to copy the terminal output as HTML. I had to configure keybindings for Select All and Copy As HTML in the Ubuntu terminal. - GitHub doesn't support line-height in markdown, so I came up with using an SVG with <foreignObject> to contain the screenshot HTML. - GitHub doesn't support inline SVG, so I had to use <img>, that's fine. An external file is cleaner anyways. - I spent a long time trying to fix the seams between rows of text. `line-height: <font-size>` is not `line-height: 1`! I think I tried `line-height: 1` first, but it wasn't working for some reason so I tried a bajillion things, having mentally discounted it, before circling back to it and trying it again and it actually worked. - I spent a long time futzing about with SVG viewports and units. - The text was staggered due to some of the Unicode characters, so I developed a script to fix that up. I managed to achieve a nice development cycle for this, but only near the end of developing it. Most of the time while working on it I was copying and pasting the updated code into the console after hitting up up enter to re-run grapheme-splitter's JS. The next commit will apply this script. - All in all, getting this screenshot working took basically all day! Compare that to my first day of progress on this project, having never used the Textual framework before, and also having not used Python for a while. In summary, coding is a land of contrasts. - VS Code's markdown rendering isn't working with the ch/lh units.
2023-04-14 09:21:27 +03:00
<svg xmlns="http://www.w3.org/2000/svg" width="80ch" height="38lh">
<style>
div,
pre {
overflow: hidden;
margin: 0;
padding: 0;
}
svg {
font: 10px monospace;
line-height: 1;
}
span,
font {
display: inline-block;
}
</style>
<script><![CDATA[
// To fix up the width of elements containing emojis and other symbols,
// run `await fixPre()` in the browser console,
// and replace the <pre>...</pre> in the XHTML with the result.
// Note: this fix may be already applied to the SVG file.
async function fixPre() {
const url = "https://unpkg.com/grapheme-splitter@1.0.4/index.js";
const js = await (await fetch(url)).text();
eval(js);
const pre = document.querySelector('pre');
const splitter = new GraphemeSplitter();
// Not including <span> elements, which are used for background colors.
// Otherwise I'd have to deal with the fact that for <span>A<font>B</font>C</span>,
// both elements contain some of the same text, and I don't want to set the width
// on the outer element, because I want a clean git diff.
pre.querySelectorAll('font').forEach(element => {
const graphemes = splitter.splitGraphemes(element.textContent);
// Box Drawing: \u2500-\u257F uniformly considered narrow
// Block Elements: \u2580-\u259F uniformly considered narrow
// ASCII range: \x00-\x7F uniformly considered narrow (ignoring control characters)
const contentiousGraphemes = graphemes.filter(g => /[^\x00-\x7F]/.test(g) && !/[\u2500-\u257F\u2580-\u259F]/u.test(g));
const wideGraphemes = graphemes.filter(g => /[^\x00-\x7F]/.test(g) && !/[\u2500-\u257F\u2580-\u259F]|[⚝⬚✏️🖌️⟍▭𝙇⬭▢]/u.test(g));
const narrowGraphemes = graphemes.filter(g => !wideGraphemes.includes(g));
if (contentiousGraphemes.length > 0) {
console.log("wide:", wideGraphemes, "narrow:", narrowGraphemes);
const width = narrowGraphemes.length * 1 + wideGraphemes.length * 2;
// element.style.width = `${width}ch`;
// Modify the XHTML minimally:
if (element.getAttribute('style')) {
element.setAttribute('style', `${element.getAttribute('style')}; width: ${width}ch;`);
} else {
element.setAttribute('style', `width: ${width}ch;`);
}
}
});
return new XMLSerializer().serializeToString(pre);
}
]]></script>
<foreignObject x="0" y="0" width="80ch" height="38lh">
<div xmlns="http://www.w3.org/1999/xhtml">
Apply SVG fix-up script (contained in the SVG)
2023-04-15 01:52:49 +03:00
<pre xmlns="http://www.w3.org/1999/xhtml"><span style="background-color:#DCE3E8"> </span>
Add textual screenshot to readme This took a lot of trial and error to get this working. - First I had to figure out how to copy the terminal output as HTML. I had to configure keybindings for Select All and Copy As HTML in the Ubuntu terminal. - GitHub doesn't support line-height in markdown, so I came up with using an SVG with <foreignObject> to contain the screenshot HTML. - GitHub doesn't support inline SVG, so I had to use <img>, that's fine. An external file is cleaner anyways. - I spent a long time trying to fix the seams between rows of text. `line-height: <font-size>` is not `line-height: 1`! I think I tried `line-height: 1` first, but it wasn't working for some reason so I tried a bajillion things, having mentally discounted it, before circling back to it and trying it again and it actually worked. - I spent a long time futzing about with SVG viewports and units. - The text was staggered due to some of the Unicode characters, so I developed a script to fix that up. I managed to achieve a nice development cycle for this, but only near the end of developing it. Most of the time while working on it I was copying and pasting the updated code into the console after hitting up up enter to re-run grapheme-splitter's JS. The next commit will apply this script. - All in all, getting this screenshot working took basically all day! Compare that to my first day of progress on this project, having never used the Textual framework before, and also having not used Python for a while. In summary, coding is a land of contrasts. - VS Code's markdown rendering isn't working with the ch/lh units.
2023-04-14 09:21:27 +03:00
<span style="background-color:#DCE3E8"> </span><span style="background-color:#DCE3E8"><font color="#1C1D1E"><b> File </b></font></span><span style="background-color:#DCE3E8"> </span><span style="background-color:#DCE3E8"><font color="#1C1D1E"><b> Edit </b></font></span><span style="background-color:#DCE3E8"> </span><span style="background-color:#DCE3E8"><font color="#1C1D1E"><b> View </b></font></span><span style="background-color:#DCE3E8"> </span><span style="background-color:#DCE3E8"><font color="#1C1D1E"><b> Image </b></font></span><span style="background-color:#DCE3E8"> </span><span style="background-color:#DCE3E8"><font color="#1C1D1E"><b> Colors </b></font></span><span style="background-color:#DCE3E8"> </span><span style="background-color:#DCE3E8"><font color="#1C1D1E"><b> Help </b></font></span><span style="background-color:#DCE3E8"> </span>
<span style="background-color:#DCE3E8"> </span>
<span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span>
<span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#FFFFFF">▔▔▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#FFFFFF">▔▔▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
Apply SVG fix-up script (contained in the SVG)
2023-04-15 01:52:49 +03:00
<span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"> </span><span style="background-color:#DCE3E8"><font color="#1C1D1E" style="width: 3ch;"> ⚝ </font></span><span style="background-color:#DCE3E8"> </span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"> </span><span style="background-color:#DCE3E8"><font color="#1C1D1E" style="width: 3ch;"> ⬚ </font></span><span style="background-color:#DCE3E8"> </span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
Add textual screenshot to readme This took a lot of trial and error to get this working. - First I had to figure out how to copy the terminal output as HTML. I had to configure keybindings for Select All and Copy As HTML in the Ubuntu terminal. - GitHub doesn't support line-height in markdown, so I came up with using an SVG with <foreignObject> to contain the screenshot HTML. - GitHub doesn't support inline SVG, so I had to use <img>, that's fine. An external file is cleaner anyways. - I spent a long time trying to fix the seams between rows of text. `line-height: <font-size>` is not `line-height: 1`! I think I tried `line-height: 1` first, but it wasn't working for some reason so I tried a bajillion things, having mentally discounted it, before circling back to it and trying it again and it actually worked. - I spent a long time futzing about with SVG viewports and units. - The text was staggered due to some of the Unicode characters, so I developed a script to fix that up. I managed to achieve a nice development cycle for this, but only near the end of developing it. Most of the time while working on it I was copying and pasting the updated code into the console after hitting up up enter to re-run grapheme-splitter's JS. The next commit will apply this script. - All in all, getting this screenshot working took basically all day! Compare that to my first day of progress on this project, having never used the Textual framework before, and also having not used Python for a while. In summary, coding is a land of contrasts. - VS Code's markdown rendering isn't working with the ch/lh units.
2023-04-14 09:21:27 +03:00
<span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#9EA4A9">▁▁▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#9EA4A9">▁▁▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
<span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#FFFFFF">▔▔▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#FFFFFF">▔▔▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
Apply SVG fix-up script (contained in the SVG)
2023-04-15 01:52:49 +03:00
<span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"> </span><span style="background-color:#DCE3E8"><font color="#1C1D1E" style="width: 4ch;"> 🧼 </font></span><span style="background-color:#DCE3E8"> </span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"> </span><span style="background-color:#DCE3E8"><font color="#1C1D1E" style="width: 4ch;"> 🌊 </font></span><span style="background-color:#DCE3E8"> </span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
Add textual screenshot to readme This took a lot of trial and error to get this working. - First I had to figure out how to copy the terminal output as HTML. I had to configure keybindings for Select All and Copy As HTML in the Ubuntu terminal. - GitHub doesn't support line-height in markdown, so I came up with using an SVG with <foreignObject> to contain the screenshot HTML. - GitHub doesn't support inline SVG, so I had to use <img>, that's fine. An external file is cleaner anyways. - I spent a long time trying to fix the seams between rows of text. `line-height: <font-size>` is not `line-height: 1`! I think I tried `line-height: 1` first, but it wasn't working for some reason so I tried a bajillion things, having mentally discounted it, before circling back to it and trying it again and it actually worked. - I spent a long time futzing about with SVG viewports and units. - The text was staggered due to some of the Unicode characters, so I developed a script to fix that up. I managed to achieve a nice development cycle for this, but only near the end of developing it. Most of the time while working on it I was copying and pasting the updated code into the console after hitting up up enter to re-run grapheme-splitter's JS. The next commit will apply this script. - All in all, getting this screenshot working took basically all day! Compare that to my first day of progress on this project, having never used the Textual framework before, and also having not used Python for a while. In summary, coding is a land of contrasts. - VS Code's markdown rendering isn't working with the ch/lh units.
2023-04-14 09:21:27 +03:00
<span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#9EA4A9">▁▁▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#9EA4A9">▁▁▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
<span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#FFFFFF">▔▔▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#FFFFFF">▔▔▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
Apply SVG fix-up script (contained in the SVG)
2023-04-15 01:52:49 +03:00
<span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"> </span><span style="background-color:#DCE3E8"><font color="#1C1D1E" style="width: 4ch;"> 💉 </font></span><span style="background-color:#DCE3E8"> </span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"> </span><span style="background-color:#DCE3E8"><font color="#1C1D1E" style="width: 4ch;"> 🔍 </font></span><span style="background-color:#DCE3E8"> </span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span>
Add textual screenshot to readme This took a lot of trial and error to get this working. - First I had to figure out how to copy the terminal output as HTML. I had to configure keybindings for Select All and Copy As HTML in the Ubuntu terminal. - GitHub doesn't support line-height in markdown, so I came up with using an SVG with <foreignObject> to contain the screenshot HTML. - GitHub doesn't support inline SVG, so I had to use <img>, that's fine. An external file is cleaner anyways. - I spent a long time trying to fix the seams between rows of text. `line-height: <font-size>` is not `line-height: 1`! I think I tried `line-height: 1` first, but it wasn't working for some reason so I tried a bajillion things, having mentally discounted it, before circling back to it and trying it again and it actually worked. - I spent a long time futzing about with SVG viewports and units. - The text was staggered due to some of the Unicode characters, so I developed a script to fix that up. I managed to achieve a nice development cycle for this, but only near the end of developing it. Most of the time while working on it I was copying and pasting the updated code into the console after hitting up up enter to re-run grapheme-splitter's JS. The next commit will apply this script. - All in all, getting this screenshot working took basically all day! Compare that to my first day of progress on this project, having never used the Textual framework before, and also having not used Python for a while. In summary, coding is a land of contrasts. - VS Code's markdown rendering isn't working with the ch/lh units.
2023-04-14 09:21:27 +03:00
<span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#9EA4A9">▁▁▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#9EA4A9">▁▁▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
<span style="background-color:#C7CDD2"> </span><span style="background-color:#FFFFFF"><font color="#B2B9BE">▔▔▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#FFFFFF">▔▔▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
Apply SVG fix-up script (contained in the SVG)
2023-04-15 01:52:49 +03:00
<span style="background-color:#C7CDD2"> </span><span style="background-color:#FFFFFF"> </span><span style="background-color:#FFFFFF"><font color="#212121" style="width: 3ch;"> ✏️ </font></span><span style="background-color:#FFFFFF"> </span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"> </span><span style="background-color:#DCE3E8"><font color="#1C1D1E" style="width: 3ch;"> 🖌️ </font></span><span style="background-color:#DCE3E8"> </span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
Add textual screenshot to readme This took a lot of trial and error to get this working. - First I had to figure out how to copy the terminal output as HTML. I had to configure keybindings for Select All and Copy As HTML in the Ubuntu terminal. - GitHub doesn't support line-height in markdown, so I came up with using an SVG with <foreignObject> to contain the screenshot HTML. - GitHub doesn't support inline SVG, so I had to use <img>, that's fine. An external file is cleaner anyways. - I spent a long time trying to fix the seams between rows of text. `line-height: <font-size>` is not `line-height: 1`! I think I tried `line-height: 1` first, but it wasn't working for some reason so I tried a bajillion things, having mentally discounted it, before circling back to it and trying it again and it actually worked. - I spent a long time futzing about with SVG viewports and units. - The text was staggered due to some of the Unicode characters, so I developed a script to fix that up. I managed to achieve a nice development cycle for this, but only near the end of developing it. Most of the time while working on it I was copying and pasting the updated code into the console after hitting up up enter to re-run grapheme-splitter's JS. The next commit will apply this script. - All in all, getting this screenshot working took basically all day! Compare that to my first day of progress on this project, having never used the Textual framework before, and also having not used Python for a while. In summary, coding is a land of contrasts. - VS Code's markdown rendering isn't working with the ch/lh units.
2023-04-14 09:21:27 +03:00
<span style="background-color:#C7CDD2"> </span><span style="background-color:#FFFFFF"><font color="#FFFFFF">▁▁▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#9EA4A9">▁▁▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
<span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#FFFFFF">▔▔▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#FFFFFF">▔▔▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#FFFF00"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
Apply SVG fix-up script (contained in the SVG)
2023-04-15 01:52:49 +03:00
<span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"> </span><span style="background-color:#DCE3E8"><font color="#1C1D1E" style="width: 4ch;"> 💨 </font></span><span style="background-color:#DCE3E8"> </span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"> </span><span style="background-color:#DCE3E8"><font color="#1C1D1E" style="width: 4ch;"> Ａ </font></span><span style="background-color:#DCE3E8"> </span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#FFFF00"><font color="#000000"> </font></span><span style="background-color:#FFFF00"><font color="#FFFFFF"> </font></span><span style="background-color:#FFFF00"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
Add textual screenshot to readme This took a lot of trial and error to get this working. - First I had to figure out how to copy the terminal output as HTML. I had to configure keybindings for Select All and Copy As HTML in the Ubuntu terminal. - GitHub doesn't support line-height in markdown, so I came up with using an SVG with <foreignObject> to contain the screenshot HTML. - GitHub doesn't support inline SVG, so I had to use <img>, that's fine. An external file is cleaner anyways. - I spent a long time trying to fix the seams between rows of text. `line-height: <font-size>` is not `line-height: 1`! I think I tried `line-height: 1` first, but it wasn't working for some reason so I tried a bajillion things, having mentally discounted it, before circling back to it and trying it again and it actually worked. - I spent a long time futzing about with SVG viewports and units. - The text was staggered due to some of the Unicode characters, so I developed a script to fix that up. I managed to achieve a nice development cycle for this, but only near the end of developing it. Most of the time while working on it I was copying and pasting the updated code into the console after hitting up up enter to re-run grapheme-splitter's JS. The next commit will apply this script. - All in all, getting this screenshot working took basically all day! Compare that to my first day of progress on this project, having never used the Textual framework before, and also having not used Python for a while. In summary, coding is a land of contrasts. - VS Code's markdown rendering isn't working with the ch/lh units.
2023-04-14 09:21:27 +03:00
<span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#9EA4A9">▁▁▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#9EA4A9">▁▁▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#FFFF00"><font color="#000000"> </font></span><span style="background-color:#FFFF00"><font color="#FFFFFF"> </font></span><span style="background-color:#000000"><font color="#FFFFFF"> </font></span><span style="background-color:#FFFF00"><font color="#FFFFFF"> </font></span><span style="background-color:#000000"><font color="#FFFFFF"> </font></span><span style="background-color:#FFFF00"><font color="#FFFFFF"> </font></span><span style="background-color:#FFFF00"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
<span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#FFFFFF">▔▔▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#FFFFFF">▔▔▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#FFFF00"><font color="#000000"> </font></span><span style="background-color:#FFFF00"><font color="#FFFFFF"> </font></span><span style="background-color:#FFFF00"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
Apply SVG fix-up script (contained in the SVG)
2023-04-15 01:52:49 +03:00
<span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"> </span><span style="background-color:#DCE3E8"><font color="#1C1D1E" style="width: 3ch;"> ⟍ </font></span><span style="background-color:#DCE3E8"> </span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"> </span><span style="background-color:#DCE3E8"><font color="#1C1D1E" style="width: 4ch;"> ～ </font></span><span style="background-color:#DCE3E8"> </span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#FFFF00"><font color="#000000"> </font></span><span style="background-color:#FFFF00"><font color="#FFFFFF"> </font></span><span style="background-color:#000000"><font color="#FFFFFF"> </font></span><span style="background-color:#FFFF00"><font color="#FFFFFF"> </font></span><span style="background-color:#000000"><font color="#FFFFFF"> </font></span><span style="background-color:#FFFF00"><font color="#FFFFFF"> </font></span><span style="background-color:#FFFF00"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
Add textual screenshot to readme This took a lot of trial and error to get this working. - First I had to figure out how to copy the terminal output as HTML. I had to configure keybindings for Select All and Copy As HTML in the Ubuntu terminal. - GitHub doesn't support line-height in markdown, so I came up with using an SVG with <foreignObject> to contain the screenshot HTML. - GitHub doesn't support inline SVG, so I had to use <img>, that's fine. An external file is cleaner anyways. - I spent a long time trying to fix the seams between rows of text. `line-height: <font-size>` is not `line-height: 1`! I think I tried `line-height: 1` first, but it wasn't working for some reason so I tried a bajillion things, having mentally discounted it, before circling back to it and trying it again and it actually worked. - I spent a long time futzing about with SVG viewports and units. - The text was staggered due to some of the Unicode characters, so I developed a script to fix that up. I managed to achieve a nice development cycle for this, but only near the end of developing it. Most of the time while working on it I was copying and pasting the updated code into the console after hitting up up enter to re-run grapheme-splitter's JS. The next commit will apply this script. - All in all, getting this screenshot working took basically all day! Compare that to my first day of progress on this project, having never used the Textual framework before, and also having not used Python for a while. In summary, coding is a land of contrasts. - VS Code's markdown rendering isn't working with the ch/lh units.
2023-04-14 09:21:27 +03:00
<span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#9EA4A9">▁▁▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#9EA4A9">▁▁▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#FFFF00"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#FFFFFF"> </font></span><span style="background-color:#FFFF00"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
<span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#FFFFFF">▔▔▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#FFFFFF">▔▔▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#FFFF00"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
Apply SVG fix-up script (contained in the SVG)
2023-04-15 01:52:49 +03:00
<span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"> </span><span style="background-color:#DCE3E8"><font color="#1C1D1E" style="width: 3ch;"> ▭ </font></span><span style="background-color:#DCE3E8"> </span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"> </span><span style="background-color:#DCE3E8"><font color="#1C1D1E" style="width: 3ch;"> 𝙇 </font></span><span style="background-color:#DCE3E8"> </span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
Add textual screenshot to readme This took a lot of trial and error to get this working. - First I had to figure out how to copy the terminal output as HTML. I had to configure keybindings for Select All and Copy As HTML in the Ubuntu terminal. - GitHub doesn't support line-height in markdown, so I came up with using an SVG with <foreignObject> to contain the screenshot HTML. - GitHub doesn't support inline SVG, so I had to use <img>, that's fine. An external file is cleaner anyways. - I spent a long time trying to fix the seams between rows of text. `line-height: <font-size>` is not `line-height: 1`! I think I tried `line-height: 1` first, but it wasn't working for some reason so I tried a bajillion things, having mentally discounted it, before circling back to it and trying it again and it actually worked. - I spent a long time futzing about with SVG viewports and units. - The text was staggered due to some of the Unicode characters, so I developed a script to fix that up. I managed to achieve a nice development cycle for this, but only near the end of developing it. Most of the time while working on it I was copying and pasting the updated code into the console after hitting up up enter to re-run grapheme-splitter's JS. The next commit will apply this script. - All in all, getting this screenshot working took basically all day! Compare that to my first day of progress on this project, having never used the Textual framework before, and also having not used Python for a while. In summary, coding is a land of contrasts. - VS Code's markdown rendering isn't working with the ch/lh units.
2023-04-14 09:21:27 +03:00
<span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#9EA4A9">▁▁▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#9EA4A9">▁▁▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span><span style="background-color:#000000"><font color="#000000"> </font></span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
<span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#FFFFFF">▔▔▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#FFFFFF">▔▔▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
Apply SVG fix-up script (contained in the SVG)
2023-04-15 01:52:49 +03:00
<span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"> </span><span style="background-color:#DCE3E8"><font color="#1C1D1E" style="width: 3ch;"> ⬭ </font></span><span style="background-color:#DCE3E8"> </span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"> </span><span style="background-color:#DCE3E8"><font color="#1C1D1E" style="width: 3ch;"> ▢ </font></span><span style="background-color:#DCE3E8"> </span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
Add textual screenshot to readme This took a lot of trial and error to get this working. - First I had to figure out how to copy the terminal output as HTML. I had to configure keybindings for Select All and Copy As HTML in the Ubuntu terminal. - GitHub doesn't support line-height in markdown, so I came up with using an SVG with <foreignObject> to contain the screenshot HTML. - GitHub doesn't support inline SVG, so I had to use <img>, that's fine. An external file is cleaner anyways. - I spent a long time trying to fix the seams between rows of text. `line-height: <font-size>` is not `line-height: 1`! I think I tried `line-height: 1` first, but it wasn't working for some reason so I tried a bajillion things, having mentally discounted it, before circling back to it and trying it again and it actually worked. - I spent a long time futzing about with SVG viewports and units. - The text was staggered due to some of the Unicode characters, so I developed a script to fix that up. I managed to achieve a nice development cycle for this, but only near the end of developing it. Most of the time while working on it I was copying and pasting the updated code into the console after hitting up up enter to re-run grapheme-splitter's JS. The next commit will apply this script. - All in all, getting this screenshot working took basically all day! Compare that to my first day of progress on this project, having never used the Textual framework before, and also having not used Python for a while. In summary, coding is a land of contrasts. - VS Code's markdown rendering isn't working with the ch/lh units.
2023-04-14 09:21:27 +03:00
<span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#9EA4A9">▁▁▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#DCE3E8"><font color="#9EA4A9">▁▁▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span><span style="background-color:#FFFFFF"><font color="#000000"> </font></span>
<span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span>
<span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span>
<span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"> </span>
<span style="background-color:#C7CDD2"><font color="#B2B9BE">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</font></span><span style="background-color:#23568B"><font color="#101010"> </font></span><span style="background-color:#C7CDD2"><font color="#23568B">▍</font></span><span style="background-color:#C7CDD2"><font color="#101010"> </font></span>
<span style="background-color:#C7CDD2"><font color="#FFFFFF">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</font></span>
<span style="background-color:#C7CDD2"> </span><span style="background-color:#000000"><font color="#B2B9BE">▔▔▔▔▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#000000"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#800000"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808000"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#008000"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#008080"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#000080"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#800080"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808040"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#004040"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#0080FF"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#004080"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#4000FF"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#804000"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span>
<span style="background-color:#C7CDD2"> </span><span style="background-color:#000000"> </span><span style="background-color:#C7CDD2"> </span><span style="background-color:#000000"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808080"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#800000"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808000"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#008000"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#008080"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#000080"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#800080"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#808040"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#004040"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#0080FF"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#004080"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#4000FF"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#804000"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span>
<span style="background-color:#C7CDD2"> </span><span style="background-color:#000000"> </span><span style="background-color:#C7CDD2"> </span><span style="background-color:#FFFFFF"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#C0C0C0"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#FF0000"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#FFFF00"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#00FF00"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#00FFFF"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#0000FF"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#FF00FF"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#FFFF80"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#00FF80"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#80FFFF"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#8080FF"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#FF0080"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#FF8040"><font color="#B2B9BE">▔▔▔▔</font></span><span style="background-color:#C7CDD2"> </span>
<span style="background-color:#C7CDD2"> </span><span style="background-color:#000000"><font color="#FFFFFF">▁▁▁▁▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#FFFFFF"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#C0C0C0"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#FF0000"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#FFFF00"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#00FF00"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#00FFFF"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#0000FF"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#FF00FF"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#FFFF80"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#00FF80"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#80FFFF"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#8080FF"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#FF0080"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span><span style="background-color:#FF8040"><font color="#FFFFFF">▁▁▁▁</font></span><span style="background-color:#C7CDD2"> </span>
<span style="background-color:#C7CDD2"> </span>
</pre>
</div>
</foreignObject>
</svg>
Reference in New Issue Copy Permalink