Obracanie tekstu przy pomocy CSS i JQuery

4 Komentarzy · Tagi: , , , , , , , , , , , ,

Podczas przeglądania kodu Chris’a Coyier’a na Css-Tricks.com poczułem się zainspirowany do szerszego opisania moim czytelnikom tematu jakim jest: Obracanie tekstu.

W tym artykule postaram się rozwinąć trochę ten temat i przedstawić dwa (a właściwie trzy) sposoby obracania tekstu. Pierwszy z nich bazuje na czystym kodzie CSS (oczywiście z małym hakiem dla IE ;) ), drugi natomiast wykorzystuje prosty plugin do JQuery. Oba sposoby mają swoje wady i zalety, które postaram się opisać w dalszej części artykułu.

Sposób 1 (CSS)

Pierwszą opcją jaką mamy do wybory przy obracaniu tekstu na stronie są style CSS. Jak zawsze przy tego rodzaju sztuczkach problemem jest niekompatybilność z niektórymi przeglądarkami.

Przedstawione rozwiązanie wykorzystuje możliwości CSS3, więc jest obsługiwane przez przeglądarki pracujące na silniku Webkit (Safari oraz Chrome), Firefox’a od wersji 3.5 oraz Operę 10.5 (póki co w wersji testowej).

HTML
<div class="example">
	<span class="rotate-css">
		CSS
	</span>
</div>
Transformacja CSS
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
Kompletny CSS
.example {
	position:relative;
}

.rotate-css {
	display:block;
	position:absolute;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
}

Atrybut display:block w powyższym kodzie jest niezbędny, aby transformacja zadziałała. position:relative oraz position:absolute (przy elemencie rodzica) zostały dodane, by utrzymać nasz tekst w porządanym miejscu. Bez tego zostałby on przesunięty gdzieś na dół ekranu.

Kompatybilność z IE

Podczas obracania tekstu w przeglądarce Internet Explorer przychodzi nam z pomocą filtr o nazwie BasicImage. Poniższy kod zadziała dla IE w wersji 5.5+ i należy go dodać w sekcji <head> za inicjalizacją głownego arkusza stylów.

<!--[if IE]>
<style>
	.rotate-css {
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	}
</style>
<![endif]-->

Filtr zostanie zastosowany jeśli użytkownik będzie przeglądał stronę przy pomocy przeglądarki IE. Minusem tej sztuczki jest to, że tekst może być obrócony jedynie o wielokrotność kąta prostego, tj. 0, 90, 180, 270 stopni. Kąt ten można modyfikować poprzez zmianę wartości „rotation” (’0′ => 0 stopni, ’1′ => 90, ’2′ => 180, ’3′ => 270).

Więcej o filtrze BasicImage na stronie Microsoft’u.

Kompatybilność z IE (wersja nr 2)

Szukając informacji na temat obracania tekstu wpadłem na ciekawe rozwiązanie opisane przez thecssninja.com. Cała sztuczka polega na zastosowaniu właściwości writing-mode do zmiany kierunku pisania tekstu. Atrybuty tego parametru przyjmują następujące opcje:

  • lr-tb – wartość domyślna, od lewej do prawej, z góry na dół
  • rl-tb – odwraca tekst w poziomie, tekst jest pisany od prawej do lewej, z góry na dół
  • tb-rl – odwraca tekst w pionie, tekst pisany z góry na dół i od prawej do lewej
  • bt-rl – od dołu do góry, od prawej do lewej
  • tb-lr – (ta i poniższe wartości sądostępne od wersji IE 8+ i wymagają użycia właściwości -ms-writing-mode) od góry do dołu, od lewej do prawej
  • bt-lr – od dołu do góry, od lewej do prawej
  • lr-bt – od lewej do prawej, od dołu do góry
  • rl-bt – od prawej do lewej i od dołu do góry

Więcej informacji na temat tego sposobu we wspomnianym wyżej artykule.

Sposób 2 (JQuery + Plugin)

Kolejny sposób wymaga pobrania dodatkowego plugina do Jquery o nazwie jquery mb.flipText. Jest on dostępny do pobrania tutaj:

Dodatkowo wymagane jest dołączenie do strony biblioteki JQuery.

HTML
<span class="rotate-jquery">
	JQuery
</span>
Kod JS
$(document).ready(function(){
	$('.rotate-jquery').mbFlipText(false);
});

Cały kod jaki należy umieścić w nagłówku powinien wyglądać mniej więcej tak:

<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" src="jquery.mb.flipText.min.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		$('.rotate-jquery').mbFlipText(false);
	});
</script>

Używanie tego pluginu jest dość proste. Jedyną rzeczą, która wymaga wyjaśnienia jest atrybut przy funkcji ‘mbFlipText’. Nadając mu wartość true tekst jest wygląda jak pisany z góry na dół, false natomiast obraca tekst od dołu do góry.

Podczas testów zauważyłem, że w niektórych przeglądarkach (Opera, Google Chrome) dookoła tekstu powstaje czarne tło. Aby je usunąć należy elementowi z góry narzucić tło.

.rotate-jquery {
	background:#fff;
}

W akcji

Klikając w poniższy link możesz przetestować działanie opisanej powyżej transformacji.

Zobacz demo

Przykład obracania tekstu przy pomocy CSS oraz JQuery

Podsumowanie

Oba przedstawione sposoby mają swoje wady i zalety. Za sposobem CSS-owym przemawia większa możliwość obrotu tekstu. W zasadzie oprócz IE możemy obracać go o pełne 360 stopni. Wadą tego rozwiązania jest niewątpliwie to, że nie działa on na wszystkich przeglądarkach. Mimo to, jako zwolennik CSS3, polecam korzystanie z tego sposobu.

Jeśli chodzi o drugą opcję do zalet można zaliczyć to, że działa na niemal wszystkich przeglądarkach. Minusem jest to, że do działania potrzebuje pluginu oraz biblioteki JQuery, co jak wiadomo zwiększy czas ładowania strony, gdyż serwer musi przetworzyć większą ilość kodu.

Aktualizacja:

Wyżej napisałem, że w IE nie ma możliwości obracania o kąt inny niż wielokrotność kąta prostego. Wpadłem jednak przed chwilą na przykład, że jest to wykonalne. Aby obrócić tekst o określony kąt, należy go pomnożyć przez 0.011. Przykładowo dla obrotu o 30 stopni należy wykonać obliczenie: 30 * 0.011 = 0.33. Więc cała deklaracja filtru będzie miała postać:

filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.33);

Podobał Ci się ten wpis? Subskrybuj kanał RSS aby być na bieżąco! Możesz również podzielić się nim ze znajomymi klikając jeden z przycisków poniżej!


Autor: Piotr Kulpiński

Dyskusja

4 komentarzy do tego wpisu

Trackbacki

Skomentuj wpis