Create BANA CSS Draft.css #295
Conversation
Adds BANA CSS Draft to Experiments > CSS Examples. Please let me know what you think.
| padding: 0; | ||
| line-height: 1rem; /* To avoid excessive rounding, the reading system will need to handle the space between lines */ | ||
| font-family: 'SimBraille', monospace; /* Unicode braille font */ | ||
| white-space: pre; /* Preserve braille spacing and indentation */ |
There was a problem hiding this comment.
The white-space: pre is strange to have as default. What made you do that?
|
|
||
|
|
||
| /* Level 1: No Nesting (1-3) */ | ||
| .level-1 { |
There was a problem hiding this comment.
I assume this is related to #162 (Lists and Nested lists, calculating indents), but I don't know which markup this CSS relies on.
- It doesn't seem to match any of the 4 options given in that issue.
- We're currently not recommending any special markup for nested lists in the best practices (and I don't think we need to: I have given an example here for styling a multi-level list).
| text-indent: 4rem; /* Runovers align to cell 5 */ | ||
| } | ||
|
|
||
| .exercise.level-2 .subitem { |
There was a problem hiding this comment.
What markup does this rely on? I can't find anything in the best practices.
| } | ||
|
|
||
| /* Stanza Breaks */ | ||
| .poetry .stanza { |
There was a problem hiding this comment.
What markup does his rely on? We mention the poetry class for lists, but we don't mention stanza and stanza-number.
| content: '⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶⠶'; | ||
| } | ||
|
|
||
| p { |
There was a problem hiding this comment.
There was already a rule for p (above).
| } | ||
|
|
||
| /* Directions and Instructions */ | ||
| .instructions { |
There was a problem hiding this comment.
What is the "instructions" class for? I can't make much sense out of this rule (especially the font-style).
| padding-left: 0; /* First line of main entry at cell 1 */ | ||
| text-indent: 4rem; /* Runovers stay at cell 5 */ | ||
| } | ||
| .poetry.level-2 .sublevel-1 { |
There was a problem hiding this comment.
What markup does this rely on? I'm seeing yet another pattern here than for lists and exercises.
|
|
||
| /* Cell-5 Heading (h2) */ | ||
| h2 { | ||
| margin-left: 4rem; /* Indented to the fifth cell */ |
There was a problem hiding this comment.
Left and right margins must be specified in ch. (There are several cases like this one.)
| } | ||
|
|
||
| /* Transcriber's Note */ | ||
| .transcriber-note { |
There was a problem hiding this comment.
Is this for the div or span kind of transcriber note?
| .transcriber-note::after { | ||
| content: "⠈⠨⠜"; /* Ending symbol */ | ||
| position: absolute; /* Inline with the text */ | ||
| right: 0; /* Ensures the symbol appears at the end of the last line */ |
There was a problem hiding this comment.
Don't think this will do what you intended. What exactly do you want to accomplish? Can you make an example that we can put in the styling best practices?
Based on the file from the PR daisy/ebraille#295 incorporating the comments from Bert
2 participants
Adds BANA CSS Draft to Experiments > CSS Examples. Please let me know what you think.