style the footnote reference in non-visual reading test reading-420
Closed this issue · 3 comments
I styled the footnote reference but some changes I made are not reflected in Thorium, I suspect because it overrides certain things. I don't know how other reading systems will behave, that's the one I have installed currently.
These screenshots show the difference in how the footnote reference is rendered, with the standalone browser correctly reflecting the CSS in the book:
Thorium:
Chrome (standalone):
Marisa, you write that Thorium does not display the footnote properly. Below, James points out his approach and that it works in browsers and in Thorium. Is this the same or different from what you did?
Here is what James emailed me.
Hi George,
Related to the call yesterday here is the attribute selection CSS to superscript a link tag with the doc-noteref role attribute. This has slight larger text since I do not reduce the size and adds a little margin buffer to make the selection location a little wider, but that could be dropped.
I tested this in Safari, Chrome, and Thorium and they all work. I also noticed your CSS is already using similar attribution selections, though they focus on the epub:type attribute. Either could be used if you wanted to target just one attribute, which would reduce conflicts.
This is a good method to standardize and automate the formatting, however I expect most vendors will continue to use a superscript tag in the link tag.
With role:
a[role="doc-noteref"] {
margin-left:1px;
margin-right:2px;
vertical-align: super;}
With epub:type:
a[epub|type="noteref"] {
margin-left:1px;
margin-right:2px;
vertical-align: super;}
james
Discussed on call; decision to close this issue as completed.