SCP Foundation (EN)
About
User Config
Service Config
Support
<html> <head> <script src="https://interwiki.scpwiki.com/resizeIframe.js" defer></script> <script> const fontChoices = { "Default": 0, "OpenDyslexic": 1, } window.resize = () => {} function getFontChoice() { return localStorage.getItem("a11y-font-choice") } function setFontChoice(choice) { localStorage.setItem("a11y-font-choice", choice) window.resize(fontChoices[choice]) document.body.dataset.selectedFont = choice } addEventListener("load", () => { window.resize = window.resizeIframe.createResizeIframe( document.referrer, location.href.replace(/^.*\//, "/"), 100 ) const fontPicker = document.querySelector("select#fontpicker") if (getFontChoice() === "null") setFontChoice("") if (getFontChoice()) fontPicker.value = getFontChoice() setFontChoice(getFontChoice()) fontPicker.addEventListener("change", () => { setFontChoice(fontPicker.value) }) // React to selections from other tabs/windows addEventListener("storage", event => { if (event.key === null) { // Caused by clearing all storage fontPicker.value = "Default" } if (event.key === "a11y-font-choice") { setFontChoice(event.newValue) fontPicker.value = event.newValue } }) }) </script> <style> @import url('https://fonts.cdnfonts.com/css/open-dyslexic'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; font-size: 80%; display: flex; align-items: center; gap: 0.5ch; justify-content: center; } select { font-family: inherit; } body[data-selected-font="OpenDyslexic"] { font-family: "Open-Dyslexic", sans-serif; } </style> </head> <body style="height: 2rem"> <label for="fontpicker">Font:</label> <select id="fontpicker"> <option value="Default" selected>Default</option> <option value="OpenDyslexic">OpenDyslexic</option> </select> </body> </html>
@import url('https://fonts.cdnfonts.com/css/open-dyslexic'); .a11y-font-choice-source { display: none } .a11y-font-choice iframe { height: 2rem !important; } :root:has(.a11y-font-choice iframe[style="height: 1px;"]) { --a11y-font: "Open-Dyslexic", sans-serif; --body-font: var(--a11y-font); --UI-font: var(--a11y-font); --header-font: var(--a11y-font); --title-font: var(--a11y-font); }
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License