Pending issues:

[Mottie]

Misc

• [x] Add documentation to wiki pages.

  Hiding elements

• [ ] Target & hide extra <br> or <p></p>
• [x] Target elements & set top/bottom margin to zero - done using Shift + Click

  How to Style?

• [ ] Meter: <meter low="69" high="80" max="100" value="84">B</meter> - rendered as a background graphic
• [ ] Progress: <progress value="70" max="100">70 %</progress> - show graphic or text?
• [ ] Remove <kbd> style in reset?
• [ ] Change <mark> to white background in reset (ref)?

[Mottie]

@chriscoyier Do you have any feedback on the Styles section here?

The other questions are sort of self-explanatory, but meter elements don't show up when printing unless you specifically indicate to print background images (at least in Chrome). I opened a bug report, but it doesn't seem like much will happen unless a standard is established sigh

[chriscoyier]

• How do meters print without doing anything? badly? not at all?
• Text seems fine?
• Does the <kbd> get display none? That's weird and should not happen.
• Mark element is supposed to kinda highlight stuff right? So maybe a dashed underline or something?

[Mottie]

Oh, what I meant was when you apply the print stylesheet (Harjita one), should we add some extra styling to deal with those elements.

• If you don't specify to print background image, the <meter> won't print at all. There isn't a simple way to force the meter to print the text, at least in Chrome.
• <kbd> have styling... like here Shift... should we do something with that in the print stylesheet?
• And yeah, the mark element is for highlighting, a dashed underline sounds good.

[Mottie]

And as for the HTML5 progress element, the graphic is all that prints, not the text.

To show the text, we could add the following to the print style (demo):

/* printing text of progress */
@media print {
    progress[value] {
        position: relative;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: auto;
        height: auto;
        border: none;
        box-shadow: none;
    }
    progress[value]:before {
        content: attr(value) '%';
        position: relative;
        top: -0.2em;
    }
    progress[value]::-webkit-progress-bar {
        background: white none;
    }
    progress[value]::-webkit-progress-value {
        background: white none;
    }
    progress[value]::-moz-progress-bar {
        background: white none;
    }
}

But this doesn't appear to work in Firefox :disappointed:

Maybe we should just leave it as-is.