Add support for subscript/superscript

[rdsubhas]

Add support for HTML <sub> and <sup> tags, for subscript and superscript text. For example,

September 30<sup>th</sup>

etc.

[Melindrea]

What exactly is it you want to do with the <sub> and <sup> tags? What kind of styling would you have in mind for it that is not covered by the way the browsers render them automatically?

[grayghostvisuals]

Yeah I'm clueless myself. Can you explain a bit further @rdsubhas?

[rdsubhas]

Looks like I'm using some other Reset other than Normalize. Let me try using Normalize to see if the sub/sup tags are rendered properly...

[rdsubhas]

Just checked it out, works fine with Normalize.css, but doesn't well with other CSS. Guess TypePlate works best when paired with Normalize...

[grayghostvisuals]

@rdsubhas

1. Can u send me screenshots of both scenarios (w/Normalize and w/your reset currently in use)?
2. What reset are you using besides Normalize?
3. How would you like Typeplate to style <sup> and <sub> by default for authors?

[rdsubhas]

Sure - in fact here are the actual links:

With Normalize: http://rdsubhas.github.io/railsgirls/chennai With our Reset: http://railsgirls.com/chennai You can see the differences under the "Schedule" table, "Important Dates" sub/superscripts, and "FAQ" dl/dt. (Just deployed to github, pls check in a few mins if you can't see anything. And if you find the scrolling animations distracting, pls click "see full site" below keep scrolling)

We are using Eric Meyer's Reset

And well, I'm not really an expert in Typography, but I'd like TypePlate to consistently style the sub/superscripts irrespective of browser/reset being used, with the right offsets and smaller font size. I saw normalize does specific styling for sub/sup which looks good.

[Melindrea]

Yes, the issue there is that the Reset resets everything, see:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, 
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, 
legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

That said, picking up the Normalize code for <sup> and <sub> might not be a bad idea, what do you think? @grayghostvisuals

[grayghostvisuals]

@rdsubhas Thanks for sending that over and nice site by the way. Love the movement when you scroll into the teams section. We'll surely be putting this into the gallery of our project's WIKI https://github.com/typeplate/typeplate.github.io/wiki/Typeplate-in-the-Wild

@Melindrea Thinking about it some more still, but here is an example of how they are rendered by default http://codepen.io/grayghostvisuals/pen/28fd9e0c3d9ea80dc4bc44eb0b065284

If it does get included it needs a way to be turned on/off.

[Melindrea]

@grayghostvisuals Yeah, the only real time it's necessary is if people are using some kind of full-on reset rather than leaving things be, or using Normalize.

[rdsubhas]

Thanks @grayghostvisuals guess I did get something good by raising this issue ;)

So without Normalize the sub/sup tags don't work well, and the Table TD/TH stylings (in the Schedule section) are a bit odd. I can fix this on my side.

If you think TypePlate doesn't play well with a full-on reset (e.g. sub/sup/th/td) - probably might be worth mentioning it somewhere in the site or wiki...

[rdsubhas]

Btw - I'd still like sub/sup tags in TypePlate, let's keep this issue open unless you plan otherwise...

[grayghostvisuals]

@Melindrea Maybe a @mixin for the style declarations in order to customize the property values?

// Custom Vars
$superscript-boolean: false;
$subscript-boolean: false;

// Only set to true if you're using 
// a reset that wipes out everything.
// If you use normalize leave as is.
$superscript-boolean: false !default;
$subscript-boolean: false !default;

@if $superscript-boolean == true {
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        top: -0.5em
        vertical-align: baseline;
    }
}

@if $subscript-boolean == true {
    sub {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
        bottom: -0.25em;
    }
}

[Melindrea]

Yeah, that looks good to me.