I've searched the documentation back and forth, and couldn't find a way to activate the accessibility feature by default. Only by right click on a Mathjax element to open the context menu, and select accessibility->activate.
The documentation reads:
"The extension can be activated either via the context menu, which itself is fully accessible, or by default using configuration options. "
But I couldn't find any mention of how to activate it using the configuration.
This is the configuration I found, and there's no "activate" option there.
What am I missing?
(I'm using the latest MathJax version: 3.0)
This is how I configure my MathJax, and below is the context menu I'm getting, where the accessibility option is not activated.
MathJax = {
tex: {
inlineMath: [['##', '##'], ['\\(', '\\)']]
},
options: {
a11y: {
speech: true,
subtitles: true
}
}
};
After two days of digging in the documentation, I gave up. I don't think it's possible to activate the accessibility feature by default. Personally I think it's absurd, because how on earth is a blind person supposed to guess how to activate it if the screen reader isn't reading it?
Eventually, what I did was to hide a div in a top location in every page, with instructions on how to activate the plug in. I'm using css to hide that div from all users, and expose it to screen readers like so:
.accessibility_hint{font: 400 12px arial; color: #0e2d6d; background-color: white; position: absolute; left: 50%; margin-left: -55px; top: 0px; padding: 2px 4px; opacity: 0;}
.accessibility_hint:focus, .accessibility_hint:active{opacity: 1; z-index:999;}
the div is here. you'll see it only if you use keyborad navigation to focus on it
<div class=accessibility_hint tabindex=0>[insert textual explanation on how to use keyboard navigation to activate the plug-in]</div>
Directly below the yellow configuration options box it states all of the accessibility options:-
Speech Options
Highlighting Options
Magnification Options
Semantic Info Options
I think you were thrown by the use of a11y instead of AccessibilitY in the description - this is a numeronym for the word 'Accessibility'. This is the same as things like i18n (InternationalisatioN)
Yes I am aware of the irony that this is not very accessible and they should just use the word!
If you configure all of the options they will be on by default, you don't need 'activate' - that is done by including ally and it's sub options. (please note you may need to use enrichSpeech: 'shallow' or enrichSpeech: 'deep' if you want to add additional info to the screen reader output.)
MathJax = {
options: {
a11y: { //everything within here will be on if you set that item to a 'truthy' statement i.e. speech: true
(This is a bit long for a comment). Here are some slides from a conference talk, November 2019, given by one of the main developers of MathJax. To quote from it:
Switching on Accessibility
Navigate down to the Accessibility submenu entry
Open the submenu entry
Hit the Activate command
and
MathJax Cookie
MathJax uses a cookie to remember menu settings
Anything explicitly set in the menu will always overwrite settings made by the content/page author.
Thus a user can always retain their personal setting
They are retained until cookies for a page are deleted
There is discussion of settings via Javascript, but nothing about how to switch on accessibility programmatically. I would hence say that the current behaviour is "by design".
This seems odd to me, for the reasons #einav explains in his answer. That said, while I am not a screen-reader user, from my extremely limited understanding of how screen readers work, I think it should be obvious that the context menu exists, and the user will probably be expecting this behaviour from MathJax. This thinking might explain the design decision.
Related
I'm migrating my site from Bootstrap to Tailwind 3 and, in the process, built-in solutions (Dropdown, Tabs, Accordion...) needed to be replaced with alternatives. The section I'm working on right now is a custom Comments Editor I created.
I'll leave a link to what Tailwind's Playground generated for me in a CodePen because the code is longer than the maximum number of allowed characters here. The decision to create a Pen is only because in the Playground it doesn't work as the anchors open in new windows/tabs.
Anyway, the code that really matters, what makes the tabs work, is this one:
[data-target] {
scroll-margin-top: 10rem;
}
[data-target]:last-of-type + [role="tabpanel"], :target + [role="tabpanel"]{
display: flex;
}
[role="tabpanel"], :target ~ [data-target]:last-of-type + [role="tabpanel"]{
display: none;
}
As the title says, I'm looking for a way to change the background-color of the tabs, hinting to the User which one is currently active.
To accomplish that, I would need to switch Tailwind's bg-color-0 with bg-color-100 and take border-b-color-0 out of the once active tab and give it to the new one. But I don't know if I can do that only with CSS.
Not add/remove the classes per se, only their corresponding styles
I've seen a lot of implementations of Pure CSS Tabs, and all of them used hidden <input> fields. Though this implementation doesn't use them, I've added and named them accordingly, but I could only target them with CSS if the User clicked exactly where they're positioned (top-left of the tabs) instead of any part of them.
I'm aware I'll eventually have to add JS to switch the ARIA attributes, but is the basic functionality possible to be accomplished with CSS only? If not, is there an alternative implementation with which I could?
Thank you for your time :)
I am using the Firefox Developer Edition theme on MacOS to reduce eye strain while programming.
However, results while typing in the location bar still pop up bright white.
Does anyone know of CSS to have these results use a dark background and light text?
Generally, if you are looking for an add-on which will change this, then a theme would be appropriate. At least one of the themes I use does style the URL Bar's auto-complete results. An extension could also change the styling, if desired. However, given that you are not wanting a completely different theme, just a minor modification to the Developer Edition theme, it is easier to do this yourself by applying CSS to the profile's chrome by placing the CSS in userChrome.css.
To do it for yourself, you need to determine the appropriate elements to style. As is often the case, the add-ons DOM Inspector combined with Element Inspector are quite useful in determining the appropriate elements to style. With those add-ons installed, opening the auto-complete drop-down and Shift-Right-Click results in seeing the DOM for what we want to change:
Thus, we can put the following in the profile's userChrome.css, which needs to be located in the [profile directory]/chrome directory:
/*
* Edit this file and copy it as userChrome.css into your
* profile-directory/chrome/
*/
/*
* This file can be used to customize the look of Mozilla's user interface
* You should consider using !important on rules which you want to
* override default settings.
*/
/*
* Do not remove the #namespace line -- it's required for correct functioning
*/
/* set default namespace to XUL */
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#PopupAutoCompleteRichResult {
background-color:black !important;
-moz-border-top-colors:black !important;
-moz-border-top-colors:black !important;
-moz-border-left-colors:black !important;
-moz-border-right-colors:black !important;
}
#PopupAutoCompleteRichResult .autocomplete-richlistbox {
background-color:black !important;
}
#PopupAutoCompleteRichResult .ac-title-text,
#PopupAutoCompleteRichResult .ac-tags-text,
/*#PopupAutoCompleteRichResult .ac-url-text,*/
#PopupAutoCompleteRichResult .ac-action-text {
color:white;
}
This results in the URL Bar auto-complete having a black background with white text:
Ok, after doing quite a bit of Internet digging, I found probably the only solution, which also isn't really one.
As of writing this, there is no such Plugin/Add-on/Mod for changing the style of the search bar.
However, you could change the source code of Firefox itself. To do so start here: Mozilla Dev GUide. Its mainly written in C & C++. I mean, there really is no option for that.
There are settings, somewhere deep down in Firefox, where you can actually get such an add-on, I couldn't find it tho.
You can turn off the search bar completely, so you get your results on google, after hitting enter.
A thrid option would be, to try another browser. Just check, which browser allows you to style the search bar and apply all the other Dark Themes to that browser later on.
Hope, I didn't make it worse :/
Modern browsers automatically combine some letters, most commonly 'f' and 'i' to one single character called a ligature. This often optimizes legibility (i.e. easier to read), however sometimes this might not be what a designer wants.
Personally, I had this issue only in Chrome (Version 53.0.2785.101), I, although I cannot be sure, I believe this issue persists in all other versions of Chrome.
Chrome
f and i is combined multiple times
Edge
IE11
In this case I was looking for a way to turn it off.
As it turns out, it's definitely possible, it just required some digging. As mentioned on MDN, you can turn off common ligatures:
font-feature-settings: "liga" 0;
This, however, is done by using an obscure css property. Instead, you should use font-variant-ligatures, like so:
font-variant-ligatures: none;
These two properties does the exact same thing, however, the latter one is recommended one.
MDN:
Note: Whenever possible, Web authors should use the font-variant shorthand property or an associated longhand property, font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position.
This property is a low-level feature designed to handle special cases where no other way to enable or access an OpenType font feature exists.
In particular, this CSS property shouldn't be used to enable small caps.
I encountered a similar problem and was directed here by Google.
I never want ligatures on any webpage.
(When I print a webpage to PDF and use the text-to-speech engine on my PDF reader, it skips speaking the ligatures.)
Here is one solution that works for me:
Open the webpage on Chrome/linux (may work on other desktop OSes too).
Install the StyleBot extension of Google Chrome. Then, in its options, click "styles" and then "edit global stylesheet". Enter the following (based on the answer of #AwesomeGuy).
body {
font-variant-ligatures: none;
font-feature-settings: "liga" 0;
}
Click "enable global stylesheet". Voila, Chrome never seems to render ligatures again (it renders the characters separately).
Also, when I ask Chrome to print web pages to PDFs, characters are rendered separately.
Add this as a bookmark and click once when printing.
javascript: void(function () {
var css = `
* {
font-variant-ligatures: none!important;
font-feature-settings: "liga" 0!important;
}
`;
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
/*This is required for IE8 and below.*/
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
/*It is not necessary to set a delay.*/
setTimeout(function () {
window.print();
}, 2000);
})()
Adding Javascript Applets to Chrome’s Bookmarks
https://clicknathan.com/2010/07/12/how-to-add-javascript-applets-to-as-google-chrome-bookmarks/
Open a New Tab in Chrome. Command+T on a Mac, Ctrl+T on a Windows.
Google Toolbar as seen in Chrome's New TabRight click on the Bookmarks Toolbar. It’s a gray colored box like the one pictured here.
Select “Add Page” from the contextual menu that appears.
Give the Bookmark a name. You could Google “Baby Names” if you can’t come up with one. I like Shepherd or Samson or even Samsonite if you have aspirations of a career in luggage design, sales or airport security.
Paste the Javascript applet into the URL field.
Save that son of a gun and you’re on your way to finishing this tutorial!
Can anyone tell me how to tell Github, that I want to see code reviews on Pull Requests in full screen width. Code lines are often longer than the area provided by Github and there is a lot of unused screen real estate.
Is there a setting in Github or a Chrome extension or Tamper Monkey or something like that.
Use Stylebot chrome extension
https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en
I use my own style for my favourite websites, I love it.
Plus point is that you can use the styles created by other peoples also. Someone might have already done the things you need there. Or else you can modify on your own.
I have few CSS rules for you,
.repository-with-sidebar .repository-content {
width: calc(100% - 50px);
}
.container {
width: 90%;
}
Github's CSS has changed, so the new styles should be:
.container-lg {
max-width: inherit;
}
You can create a shortcut in your browser to automatically apply this style:
javascript:(function(){var a=document.getElementsByClassName("container-lg")[0];a.style.max-width="inherit";})();
There's a class on the body called full-width for that, so all that's needed currently is:
document.body.classList.add('full-width');
This can also be added as a bookmarklet:
javascript:(function(){document.body.classList.add('full-width');})();
Don't know why the OP said it's not a problem anymore, if you're doing a code review of your own work you won't be comparing it against another in side-by-side view.
Fix for full screen:
Inspect element on the white space to the left of the code
You'll be brought to a tag, expand this
Click on the 3rd div child of 'main'
Scroll down through the css on the right hand side until you find ".container-xl"
Untick this and you'll get the code full screen
If you want to you can write a console script or use one of the plugins mentions above but I find this method the simplest to remember and apply on anyones machine.
This is no longer an issue after GitHub introduced side-by-side code review. That really works well.
I had thought that TinyMCE was supposed to remain untouched by the Diazo theme, however some CSS from somewhere is leaking in and making certain functions harder to use. One such example is below, the line height on all the rows has become super short, making each row hard to select.
In Firebug, I can fix this by adding a min-height value here, a value set in dialog.css:
.radioscrolllist .list {min-height: 2em;}
However, I cannot find where to actually set this and have it stick. I've tried putting it in the Diazo theme style.css, in ploneCustom.css, and customizing both portal_skins/tinymce/themes/advanced/skins/plone/dialog.css and portal_skins/tinymce/plugins/plonebrowser/css/plonebrowser.css — none of these seem to do the trick though.
Any ideas on how/where to make this fix? The problem only shows up on the Diazo version of the site, not from the unthemed version. It looks like the only CSS files that load on the TinyMCE iframe are:
dialog.css
plonebrowser.css
columns.css
This is what I have in my project CSS to deal with a similar issue, though I find different issues on each project depending on what I do with the general CSS & columns in particular:
/* Fix TinyMCE gremlins */
#internallinkcontainer div.row {
/* Image browser was jumbled */
float: none;
}
#content #internallinkcontainer .list.item span,
#content #internallinkcontainer .list.item a {
/* Link browser was packed too much */
position: inherit;
}
#internallinkcontainer input[type="radio"] {
vertical-align: middle;
}
/* #end */
Which get's my Link Browser looking like this again:
Apart from the Diazo-CSS troubles, it sounds like you might be having trouble with
plone.css getting cached. The following is from the developer manual with amendments by myself that have not yet been pulled in.
plone.css
plone.css is automagically generated dynamically based on the full portal_css registry configuration. It is used in e.g. TinyMCE to load all CSS styles into the TinyMCE in a single pass. It is not used on the normal Plone pages.
plone.css generation:
https://github.com/plone/Products.CMFPlone/blob/master/Products/CMFPlone/skins/plone_scripts/plone.css.py
Note: plone.css is #import-ed by dialog.css which "hides" it from a browser refresh of a normal Plone page, even when Plone is in development mode. This means you may find you do not see your CSS updates within the TinyMCE plugin (e.g. in the link/image browser) whilst developing your theme. If this is the case, then simply do a hard refresh in your browser directly on: /plone.css to clear the cached version.
I just faced the same issue last week. My workaround was adding this in my theme's CSS (the tinymce dialogs are not part of the iframe that contains the content being edited; they are in the main frame):
#internallinkcontainer.radioscrolllist { line-height: auto !important; }
#internallinkcontainer .list.item span, #internallinkcontainer .list.item a { position: static !important; }
(Clearly we should find a less hacky solution, but I haven't had a chance.)
You almost answered it to yourself: You can customize column.css, that'll work, no important-declarations needed.
Additionally this seems not to be Diazo-related, the ploneCustom.css will also not be delivered to the dialog-window in a non-diazo'ed site, hmm.