racket / scribble

Other
197 stars 91 forks source link

aside tag for marginal notes #205

Open shriram opened 5 years ago

shriram commented 5 years ago

Robert Grimm pointed out that HTML has an aside tag, so that might be a more appropriate semantic markup for marginal notes than p.

https://www.facebook.com/shriram.krishnamurthi/posts/10162106850905581?comment_id=10162107064895581&reply_comment_id=10162107081285581&comment_tracking=%7B%22tn%22%3A%22R%22%7D

spdegabrielle commented 4 years ago

Seems to have a good support across browsers https://caniuse.com/#search=aside

shriram commented 4 years ago

I expect using the most apposite tag is especially useful for the visually-impaired, whose screen-readers will take advantage of the tag structure where available.

spdegabrielle commented 4 years ago

Replacing null with (list (alt-tag "aside")) on lines 679 and 688 of scribble/base.rkt does the trick

Works in both scribble/base and scribble/manual - which honestly had me concerned until I tested it because one uses span and the other blockquote.

https://github.com/racket/scribble/blob/13798906ceedfc1473643d06f4f98d4f372e889e/scribble-lib/scribble/base.rkt#L679 https://github.com/racket/scribble/blob/13798906ceedfc1473643d06f4f98d4f372e889e/scribble-lib/scribble/base.rkt#L688

(define (margin-note #:left? [left? #f] . c)
  (make-nested-flow
   (make-style (if left? "refparaleft" "refpara")
               '(command never-indents))
   (list
    (make-nested-flow
     (make-style (if left? "refcolumnleft" "refcolumn")
                 null)
     (list
      (make-nested-flow
       (make-style "refcontent" (list (alt-tag "aside")))
       (decode-flow c)))))))

(define (margin-note* #:left? [left? #f] . c)
  (make-element
   (make-style (if left? "refelemleft" "refelem") null)
   (make-element
    (make-style (if left? "refcolumnleft" "refcolumn") null)
    (make-element
     (make-style "refcontent" (list (alt-tag "aside")))
     (decode-content c)))))
spdegabrielle commented 4 years ago

aside cannot be used for margin-note* because the tag cannot be used inline.

it probably could be used in the aside probably could be changed in the stylesheet to have the css attribute display: inline;or maybe inline as <aside style="display: inline;">