Стили для верх­не­го и ниж­не­го ин­дек­са в CSS

На­вер­ное, по­чти все зна­ют про теги SUP и SUB. До­воль­но по­дроб­ное опи­са­ние мож­но най­ти в ста­тье ан­глий­ской ви­ки­педии.

Ос­нов­ная про­бле­ма в стан­дарт­ной ре­а­ли­за­ции отоб­ра­же­ния этих те­гов —из­ме­не­ние вы­со­ты стро­ки за счёт того, что текст в этих те­гах вы­рав­ни­ва­ет­ся свой­ством CSS ver­ti­cal-align. Это из­ме­не­ние ва­рьи­ру­ет­ся от бра­у­зе­ра к бра­у­зе­ру, но, кро­ме того, вез­де раз­ли­ча­ют­ся как раз­ме­ры шриф­та для та­ких эле­мен­тов, так и сами от­сту­пы. Об этой про­бле­ме мно­гие зна­ют и, чаще все­го, пред­ла­га­ют два ре­ше­ния: умень­ше­ние вы­со­ты стро­ки этих эле­мен­тов, и их от­но­си­тель­ное по­зи­ци­о­ни­ро­вания.

Для себя я ре­шил это де­лать так:

SUP, SUB {
    ver­ti­cal-align: base­line;
    po­si­tion: rel­a­tive;
    font-size: .7em;
    line-height: 1;
    }
SUP {
    bot­tom: 1.4ex;
    }
SUB {
    top: .5ex;
    }

Как вид­но из кода, я «об­ну­лил» вер­ти­каль­ное вы­рва­ни­ва­ние, вос­поль­зо­вал­ся от­но­си­тель­ным по­зи­ци­о­ни­ро­ва­ни­ем, а та­к­же умень­шил вы­со­ту стро­ки. Кро­ме того, мож­но об­ра­тить вни­ма­ние на ве­ли­чи­ны от­сту­пов: я их за­дал в ex, т.к. по ло­ги­ке и по име­ю­щим­ся опи­са­ни­ям (на­при­мер, в уже упо­мя­ну­той ста­тье ан­глий­ской ви­ки­пе­дии) этот от­ступ дол­жен быть ос­но­ван имен­но на этой от­но­си­тель­ной еди­ни­це, ос­но­ван­ной на вы­со­те шриф­ты, неже­ли на ши­рине. Во­об­ще, это до­ста­точ­но об­щее опре­де­ле­ние, в иде­а­ле мож­но ис­поль­зо­вать раз­лич­ные клас­сы для циф­ро­вых зна­че­ний в ин­дек­сах, для слу­ча­ев ко­гда есть толь­ко про­пис­ные или толь­ко строч­ные бук­вы и пр. Од­на­ко, это уже тре­бу­ет вме­ша­тельств в раз­мет­ку, и к CSS уже не име­ет от­но­шения.

При­ме­ры как ис­прав­лен­ных те­гов, так и не ис­прав­лен­ных

Сто­ит упо­мя­нуть, что в неко­то­рых слу­ча­ях всё-таки мо­жет иметь смысл за­да­вать от­ступ для ин­дек­сов, уве­ли­чи­ва­ю­щий вы­со­ту стро­ки, ска­жем, ко­гда у нас есть боль­шая вло­жен­ность ин­дек­сов или ешё что-то, за счёт чего они мо­гут по­пасть на дру­гие стро­ки. Прав­да, чаще все­го про это мож­но забыть.