{"id":13341457,"url":"https://github.com/ssb22/css-generator","last_synced_at":"2025-03-11T21:31:05.906Z","repository":{"id":113331623,"uuid":"111103165","full_name":"ssb22/css-generator","owner":"ssb22","description":"Low-vision stylesheet generator","archived":false,"fork":false,"pushed_at":"2024-09-10T06:39:17.000Z","size":1653,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-09-10T08:57:43.963Z","etag":null,"topics":["dark-mode","high-contrast","low-vision","web-accessibility"],"latest_commit_sha":null,"homepage":"http://ssb22.user.srcf.net/css/","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ssb22.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-17T12:52:18.000Z","updated_at":"2024-09-10T06:39:20.000Z","dependencies_parsed_at":"2023-12-23T22:40:48.951Z","dependency_job_id":"de6a5df7-94f7-4e20-8239-16f4c156ddc4","html_url":"https://github.com/ssb22/css-generator","commit_stats":null,"previous_names":[],"tags_count":93,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssb22%2Fcss-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssb22%2Fcss-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssb22%2Fcss-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ssb22%2Fcss-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ssb22","download_url":"https://codeload.github.com/ssb22/css-generator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221249553,"owners_count":16784962,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dark-mode","high-contrast","low-vision","web-accessibility"],"created_at":"2024-07-29T19:25:26.306Z","updated_at":"2024-10-23T23:31:11.250Z","avatar_url":"https://github.com/ssb22.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# css-generator\nLow-vision stylesheet generator from http://ssb22.user.srcf.net/css/\n\n(also mirrored at http://ssb22.gitlab.io/css/ just in case)\n\nMany modern Web browsers allow users to set their own CSS\nstylesheets for accessibility purposes. It can be difficult to write a comprehensive\naccessibility stylesheet by hand, especially if you\nwant to work around browser bugs and the\ndifficulties posed by complex websites. So I made this program to\ngenerate long CSS files with workarounds for many problems.\n\nYou can adjust [the Python code](css-generate.py) to your needs\n(it works in both Python 2 and Python 3).\nAlternatively, you can try one of the presets on the\n[web page](http://ssb22.user.srcf.net/css/)\n(which, if you have Javascript, has an interactive chooser: the code\nfor this is also generated by the script).\n\nSize \"unchanged\" lacks size-related layout changes; this can be useful\nif you do not need large print, or your monitor is big enough for the\nbrowser's built-in zoom controls to be enough, but you still need to\nchange the colours (see\n[advantages of dark backgrounds](http://ssb22.user.srcf.net/css/dark.html)).\n\nWhat is the best pixel size?\n----------------------------\n\nYou could just experiment, but if you frequently change between\ndifferent setups and/or have variable sight then it might help to know\nhow to choose a size without constantly re-experimenting:\n\n1. You need to know the best size in points (36, 48 or whatever) for\n   text you read **at the distance of the screen**.\n\n    - First you need to know your normal distance to the screen. You\n      can move the screen nearer, but the limits will vary with the\n      type of mounting and the size of your keyboard, desk, chair,\n      etc; you need to be aware of this variation if you use different\n      computers. Also, if you have variable sight, remember to allow\n      yourself room to get even nearer when your sight is worse (and\n      without hurting your posture too much), which is usually easier\n      than temporary size changes.\n\n    - Divide the screen's distance by your normal reading distance for\n      printed text (both measured from your eyes to the text itself,\n      ignoring any magnifying device in between), and multiply by the\n      size in points of the printed text you prefer to read.\n\n    - If you normally use a magnifier for printed text but cannot use\n      it for the screen, multiply your answer by the scale factor of\n      this magnifier.\n\n    - If you have a full-screen magnifier (fresnel lens) permanently\n      mounted to the screen, then **divide** your answer by the scale\n      factor of this magnifier.\n\n    - Do **not** try to work out your size by setting the \"point\n      size\" on the screen of a wordprocessor or similar, because that\n      might not be calibrated correctly.\n\n2. Let `P` be your on-screen point size, `H` and `V` be the horizontal and\n   vertical resolution of your monitor, and `D` be its size in inches\n   (measure across the diagonal if you don't know, and if you're on an\n   old CRT monitor then you should subtract about an inch from the\n   rated figure whereas TFT monitors' figures are OK as they are).\n   Your pixel size is the square root of `(H*H + V*V)`, divided by `D`,\n   multiplied by `P` and divided by 72.  (If your monitor has the old\n   standard 4x3 aspect ratio then this simplifies to `P*V/D * 5/216`.)\n\n3. With some browsers, you'll need to divide this by the browser's\n   value of `window.devicePixelRatio`\n\nHow to install a stylesheet\n---------------------------\n\nSave the stylesheet to a file on your disk, and do what is appropriate\nfor your browser:\n\n**Firefox:** On the desktop version, locate your profile directory\n[as described on mozilla.org](http://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data#w_how-do-i-find-my-profile),\nand save the file as `userContent.css` in the `chrome` subdirectory of\nyour profile directory (if no `chrome` subdirectory exists, create it).\n\n  * On Firefox 69+, you also have to go to `about:config` and turn on\n    `toolkit.legacyUserProfileCustomizations.stylesheets`\n  \n  * You have to restart Firefox when changing userContent.css; on\n    GNU/Linux you might want the provided [togglecss\n    script](togglecss.sh) to toggle the presence of userContent.css\n    and restart Firefox.\n  \n  * On Firefox 51, you'll also need to go into about:config, set\n    browser.tabs.remote.autostart.2 to false and restart. This was\n    fixed in Firefox 52 (bug 1333157).\n  \n  * Not always possible on mobile Firefox: for example in Android\n    you'll need to \"root\" your device before you can see the profile\n    directory (and that's not always feasible). You might try the\n    \"Stylish\" plugin, but it doesn't always work as well as installing\n    a local stylesheet (colours are occasionally overridden by the\n    site; black-on-white might work better).\n  \n  * Some versions of Firefox scale their pixels at high DPI settings,\n    so the stylesheet size needs to be reduced to\n    compensate. (E.g. Firefox 3+ on Windows, and more recent versions\n    of Firefox on GNOME 3 with text-scaling-factor set.)\n  \n  * If you use dark backgrounds, some versions of Firefox 2 on Windows\n    display a white background around the page (so any overspill text\n    that is not dark will become unreadable) unless you go into high\n    contrast mode. However if you then come out of high contrast mode,\n    the fix will persist. (High contrast mode is a nice idea but it\n    does break a lot of applications.)\n\n**Internet Explorer:** Go to Tools / Internet Options / Accessibility\nand set that file as a user-supplied stylesheet.\n\n  * If you are using a low resolution or a high DPI setting as a means\n    of getting Windows to magnify consistently, and if as a result of\n    this the dialogue boxes won't entirely fit on your screen, you\n    _may_ be able to reach Accessibility by clicking on General in\n    Tools/Internet Options, pressing Tab 13 times (in IE6) or 12 times\n    (in IE7), and pressing Enter.  But this is likely to change in\n    different versions of IE.\n  \n  * If you also set text and background colours, _do not_ check\n    \"always use these colours\" because it will override the\n    stylesheet.\n\n  * Some versions of **Windows XP** will override this stylesheet when\n    in high contrast mode, and the result is not always readable. You\n    may have to come out of high contrast mode when browsing.\n\n**Safari:** Go to Safari / Preferences / Advanced / Style sheet,\nselect Other, and select the file\n\n**Google Chrome:** Create a directory with the\nstylesheet saved as `userContent.css` and a file called\n`manifest.json` with the following content:\n\n    {\"manifest_\u003cwbr\u003eversion\": 3,\n    \"name\": \"Low-vision stylesheet\",\n    \"version\": \"1\",\n    \"content_scripts\": [{\n       \"matches\": [\"\u003call_urls\u003e\"],\n       \"css\": [\"userContent.css\"]}]}\n\nthen go to `chrome://extensions` and with Developer Mode\nturned on \"load unpacked extension\" and point to this directory.\n\n  * On recent Chrome versions you can also try\n    `chrome://flags/#enable-force-dark` instead of using\n    this CSS for dark mode\n    \n    * Or you could try running Chrome with\n      [Web Adjuster](http://ssb22.user.srcf.net/adjuster/)\n    \n      * e.g. on GNU/Linux set up a `/usr/local/bin/x-www-browser`\n        script to do `python` (full path to adjuster.py)\n        `--browser=\"google-chrome --proxy-server=localhost:28080 $*\"`\n        `--real_proxy --delete_doctype --address=localhost`\n        `--headAppendCSS=http://` (URL of stylesheet goes here),\n        although SSL sites will need domain-rewriting\n      \n      * A white background will still show in Chrome's blank page and\n        new tab screen etc (so you might want to set a homepage); when\n        navigating _within_ sites it should happen rarely if ever. (If\n        reloading already-visited pages, clear the cache.)\n        At any rate, Chrome is likely to cope less well\n        than other browsers with some sites' use of CSS\n        priorities, because the CSS we insert does not\n        have the extra privileges given it by other browsers.\n\n**Midori:** Before version 0.0.20, use Edit / Preferences / Behaviour /\nUser Stylesheet. In later versions, go to Tools / Extensions (or\nPreferences / Extensions), enable ‘User Addons’, and save the .css\nfile in `.local/share/midori/styles/`.\nSome versions of Midori do not have this functionality.\n\n**KDE browsers:** In Rekonq, use Configure / Appearance / Stylesheets.\nIn the older Konqueror browser, go to \"Settings\", \"Configure\nKonqueror\", \"Stylesheets\" (in some versions it's a tab of\n\"Appearance\"), \"user-defined stylesheet\" and set the filename; you may\nhave to restart Konqueror. Some Konqueror versions have a bug that\ncauses it to completely fail to apply the stylesheet; if you have an\naffected version then you might need to switch to another browser.\n\n**Opera 12 or below:** (these instructions do _not_ apply to the new\nOpera 15 which is basically Chromium see above)\nOpera menu / Settings / Preferences / Advanced / Content / Style options / My style sheet\n\n  * Some versions (e.g. 12) will not style \"textarea\" edit controls\n    unless you apply the stylesheet from a bookmarklet. Even then the\n    borders may be missing.\n  \n  * Opera 12 **can crash** on some sites. You might be able to make it\n    more stable by disabling the `:first-letter`, `:first-line` and\n    `:hover` rules (e.g. replace `:first` with `:girst` and `:hover`\n    with `:gover` throughout), but this is not a complete solution.\n  \n  * You might also want to set a background colour in the \"Web pages\"\n    tab: this will be shown when new tabs etc are taking a while to\n    load\n\n**Otter:** Go to Tools / Preferences / Advanced / Content / User style sheet\nand type in the full path or Browse to it.\nNot yet working if you're using the newer QtWebEngine instead of QtWebKit.\n\n**OLPC browser:**\nSave the file as `~/.sugar/default/gecko/user-stylesheet.css` and\nrestart. (When calculating the best stylesheet size, remember the\nOLPC's screen is 1200x900 and 7.5 inches.)\n\nFor other setups (including some mobiles) you can try\n[Web Adjuster](http://ssb22.user.srcf.net/adjuster/);\nfor demonstration purposes there is an installation of Web Adjuster\nwith these stylesheets at `large-print-websites.appspot.com/`\n\nAll material (c) Silas S. Brown unless otherwise stated.\nAndroid is a trademark of Google LLC.\nFirefox is a registered trademark of The Mozilla Foundation.\nGoogle is a trademark of Google LLC.\nJavascript is a trademark of Oracle Corporation in the US.\nLinux is the registered trademark of Linus Torvalds in the U.S. and other countries.\nPython is a trademark of the Python Software Foundation.\nSafari is a registered trademark of Apple Inc.\nWindows is a registered trademark of Microsoft Corp.\nAny other trademarks I mentioned without realising are trademarks of their respective holders.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fssb22%2Fcss-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fssb22%2Fcss-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fssb22%2Fcss-generator/lists"}