od zera do webmastera

Napis na całą szerokość

Strona WWW o zmiennej szerokości

Ta strona która właśnie czytasz ma stałą szerokość, takich stron jest najwięcej w internecie, ponieważ najłatwiej zapanować nad układem strony. Czasem jednak robi się strony o zmiennej szerokości, gdzie tekst swobodnie się przelewa dostosowując do okna przeglądarki.

Do takiej strony o zmiennej szerokości chciałem dać tytuł który by się dostosowywał elastycznie do szerokości, by odstępy miedzy literami same się zmieniały zależnie od szerokości okna przeglądarki. Oto moje próby rozwiązania tego problemu.

Zobacz przykłady (najlepiej w osobnym oknie) W czasie oglądania spróbuj powiekszać/pomniejszać okno przeglądarki.

Przykład 1. to zwyczajny nagłówek o stałej szerokości.

w Przykładzie 2. każdą literkę włożyłem w osobny SPAN i eksperymentowałem z MARGIN i PADDING przypisanym do każdego SPAN_u i wyrażone w wielkości procentowej. (100/17 liter [w tym spacja] i to na pół]) Napis zrobił się elastyczny, ale przy pewnych szerokościach okna lub się obcinał, lub zostawało za nim puste miejsce.

CSS: span {margin:2.4%}

w Przykładzie 3. dalej mamy SPAN_y dla każdej litery, ale teraz są wyświetlane jako bloki. Rezultat lepszy, teraz mam naprawdę na całą szerokość i działa dalej jak okno zmniejszam i powiększam.

CSS: span {display:block; width:5.8%; float: left; }

Ładniej ułożyły się litery gdy dałem im wyrównanie centralne Przykład 4. I to rozwiązanie uważam za najlepsze.

CSS: span {display:block; width:5.8%; float: left; text-align: center; }

Ale można też to zrobić używając TABLE - tabelki. Przykład 5. W działaniu się sprawdza, a przy wąskim oknie wygląda nawet lepiej (litery ładniej się ustawiają). Jednak wada jest taka, ze korzystając ze SPAN_ów mamy to dalej odczytywane np. przez Google jako tekst. W wypadku tabelki są to pojedyncze litery.

CSS: td { width:5.8%; font-size:20px; font-weight: bold; text-align: center; }

Przykład 6. pokazuje, że wprawdzie istnieje w stylach CSS cecha LETTER-SPACING która by wydawała się najprostsza w zastosowaniu, niestety nie można dać wielkości w procentach. Można więc zrobić tytuł na całą szerokość, ale tylko dla stron o stałej szerokości, a nie ma mowy o dostosowywaniu się elastycznym.

CSS: h3 { letter-spacing: 20px; }

Przykład 7. rozszerzenia funkcji CSS dały wyrównywanie zawartości wg odstępów między elementami. w tytule H3 każda literka to osobny SPAN. Wyglada dobrze!

CSS: div { display:flex; justify-content:space-between; }

Zobacz przykłady jak powyzsze rozwiazania działaja w praktyce.