typeplate/typeplate.github.io

Add support for subscript/superscript

Opened this issue · 13 comments

rdsubhas commented

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

September 30<sup>th</sup>

etc.

Melindrea commented

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 commented

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

rdsubhas commented

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 commented

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 commented

@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 commented

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 commented

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 commented

@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 commented

@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 commented

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 commented

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

grayghostvisuals commented

@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 commented

Yeah, that looks good to me.