How reliable is vertical-align 'sub' and 'super'?
I've been looking into css resets and several normalise.css-style documents to get ideas for my own reboot/reset. one tidbit I've seen in a couple is a total rehaul of the way sub and sup elements are aligned on the vertical axis.
in essence, what they typically do is set the vertical-align to baseline, then make them relatively positioned, and finally apply negative top and bottom em measures to each element in order to make them sub or super-script again.
personally after a bit of testing, I don't know if it's a good call or not. the default for sub and sup elements (un the user-agent styles) is to have them be vertical-align sub or super.
the issue is.. vertical-align 'sub' and 'super' do NOT behave the same way as the way the rehaul sets them up - especially 'vertical-align: super.'. most noticeably when comparing super elements nested within elements that have differing font-sizes -- the rate at which the super element is positioned higher doesn't scale at the same rate as em positioning them does.
now the question is.. is this a bug or feature? my humble assumption is it's a feature, considering how complex fonts and baselines/descender-lines/ascender-lines are. but I don't have any evidence for that just by looking at documentation
does anyone have any information on this or thoughts? personally I'm more inclined to NOT mess with the sub and sup elements vertical-align.. but I'm curious since it's present in a few popular resets like the tailwind one (iirc) - which leads me to believe there's some reason behind it
in essence, what they typically do is set the vertical-align to baseline, then make them relatively positioned, and finally apply negative top and bottom em measures to each element in order to make them sub or super-script again.
personally after a bit of testing, I don't know if it's a good call or not. the default for sub and sup elements (un the user-agent styles) is to have them be vertical-align sub or super.
the issue is.. vertical-align 'sub' and 'super' do NOT behave the same way as the way the rehaul sets them up - especially 'vertical-align: super.'. most noticeably when comparing super elements nested within elements that have differing font-sizes -- the rate at which the super element is positioned higher doesn't scale at the same rate as em positioning them does.
now the question is.. is this a bug or feature? my humble assumption is it's a feature, considering how complex fonts and baselines/descender-lines/ascender-lines are. but I don't have any evidence for that just by looking at documentation
does anyone have any information on this or thoughts? personally I'm more inclined to NOT mess with the sub and sup elements vertical-align.. but I'm curious since it's present in a few popular resets like the tailwind one (iirc) - which leads me to believe there's some reason behind it
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
