Indeksy górne i dolne na pomocą CSS
Problemy indeksami
Tworząc indeksy górne i dolne z pomocą tagów sup i sub napotkamy na problem nierównomiernych interlinii. Na poniższym paragrafie widać, że interlinia pomiędzy wierszem z godziną i go poprzedzającym jest inna niż interlinia pomiędzy pozostałymi wierszami.
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. 1500–1645 Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque H2SO4 lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia. Nulla vitae erat sed erat. Integer aliquam tellus nec augue. Donec urna quis sollicitudin a, pretium tincidunt. Maecenas ligula enim ac ipsum. Donec eget augue a dolor sapien et magna. Mauris suscipit urna orci a sapien. Aliquam posuere ligula turpis, accumsan at, molestie placerat, molestie placerat, molestie turpis egestas. Integer metus eu mi
Sposób I: Zwiększenie interlinii dla całego tekstu
Najłatwiejsze rozwiązanie — zwiększyć interlinię dla całego tekstu, np. line-height: 1.6em;. Wprawdzie nierównomierne interlinie zostały poprawione, ale zmiany są drastyczne. Na poniższym przykładzie widać, że cały paragraf wygląda znacznie inaczej niż w poprzednim przypadku. Większa interlinia w większości przypadków wygląda korzystniej, czasami jednak nie można jej tak powiększyć.
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. 1500–1645 Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque H2SO4 lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia. Nulla vitae erat sed erat. Integer aliquam tellus nec augue. Donec urna quis sollicitudin a, pretium tincidunt. Maecenas ligula enim ac ipsum. Donec eget augue a dolor sapien et magna. Mauris suscipit urna orci a sapien. Aliquam posuere ligula turpis, accumsan at, molestie placerat, molestie placerat, molestie turpis egestas. Integer metus eu mi
Sposób II: Zerowa interlinia dla indeksów
Powyższy efekt można poprawić ustawiając zerową interlinię dla indeksów, czyli w CSS: line-height: 0;. Można też wypróbować właściwości vertical-align. Efekt obrazuje poniższy przykład.
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. 1500–1645 Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque H2SO4 lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia. Nulla vitae erat sed erat. Integer aliquam tellus nec augue. Donec urna quis sollicitudin a, pretium tincidunt. Maecenas ligula enim ac ipsum. Donec eget augue a dolor sapien et magna. Mauris suscipit urna orci a sapien. Aliquam posuere ligula turpis, accumsan at, molestie placerat, molestie placerat, molestie turpis egestas. Integer metus eu mi
Sposób III: Pozycjonowanie absolutne
Można też mechanicznie skorygować wielkość tekstu w indeksie i na sztywno ustawić do względem normalnego tekstu. Za pomocą CSS można to zrobić na przykład tak:
sup {
font-size: smaller;
vertical-align: baseline;
position: relative;
bottom: 0.33em;
}
sub {
font-size: smaller;
vertical-align: baseline;
position: relative;
bottom: -0.25em;
}Wielkości należy ustalić eksperymentalnie w zależności od użytego kroju pisma. Powyższe rozwiazanie wydaje się być najbardziej odpowiednim, co widać na poniższym przykładzie.
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. 1500–1645 Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque H2SO4 lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia. Nulla vitae erat sed erat. Integer aliquam tellus nec augue. Donec urna quis sollicitudin a, pretium tincidunt. Maecenas ligula enim ac ipsum. Donec eget augue a dolor sapien et magna. Mauris suscipit urna orci a sapien. Aliquam posuere ligula turpis, accumsan at, molestie placerat, molestie placerat, molestie turpis egestas. Integer metus eu mi