Line-height a zaznaczanie

Następny akapit został potraktowany już CSS-em, który ustawia wysokość linii na 175%. Po zaznaczeniu takiego tekstu widoczne są przerwy. O ile zwiększenie interlinii ułatwia czytanie, to jednak wpływa właśnie na zaznaczanie. Przeglądarki bowiem zaznaczają tylko sam tekst a nie linijki. W ten sposób podczas kopiowania albo czytania zaznaczenia powstają brzydkie przerwy.

Nie udało mi się znaleźć wyjścia z tej sytuacji - znaczy uzyskać pełnego efektu zaznaczenia. Nie działa dodawanie paddingu do dostawionego spana w akapicie, vertical-align, zamienianie display elementów, czarowanie z line-height. Widocznie zaznaczanie tekstu ma być z definicji operacją na samych literach. Szkoda trochę.

Gdyby jednak przyszło nam wyróżnić jakiś kawałek tekstu - zaznaczyć go trwale za pomocą znacznika span (albo ins, del, small… jak kto woli), może ustawić kolor tła i powiększyć padding pionowy i dolny. Nie należy tylko przesadzać, zawsze skorelować wartość z line-height oraz upewnić się że padding jest wyrażony w jednostkach relatywnych (zwykle em).

Internet Explorer tutaj zachowuje się z punktu widzenia estetyki bardzo ciekawie - pozwala zaznaczać padding tego insa wyróżnionego na jasnożółto. Efekt przechodzi też na nieobjęte insem fragmenty tekstu sąsiadujących poziomo z zaznaczeniem. Dalej zaznacza normalnie, korzystając z odstępów utworzonych przez line-height.

W celu polepszenia czytelności zaznaczanego tekstu (niektóre kombinacje kolorystyczne zaznaczają się prawie niewidocznie) wymyślono w CSS3 pseudoelement ::selection. Na razie można przetestować jego działanie w przeglądarkach Mozilli. ::-moz-selection. W przykładzie span jest zaznaczany na różowo. Nie da się ustawić takiemu elementowi nic innego jak background-color i color, więc zastosowanie paddingu i rozwiązanie poprzedniego problemu z interlinią także odpada.