Jakie są najlepsze praktyki radzenia sobie z pożądanymi podziałami linii w responsywnym projektowaniu stron internetowych?


17

Projektuję wiele prostych pojedynczych stron internetowych na sprzedaż lub pocztę elektroniczną. Często mam problemy z nagłówkami i pożądanymi podziałami linii przy różnych szerokościach mediów.

Na przykład mógłbym mieć taki nagłówek, jak:

Nasz nowy rzecz jest najlepszą rzeczą od krojonego chleba!

Bez absolutnie braku uwagi na łamanie linii, łamanie linii wygląda następująco:

Nasz nowy rzecz jest najlepszą rzeczą od
krojonego chleba!

W pełnym rozmiarze strony chciałbym przerwać linię po „the”. Tworzenie dwóch linii.

Nasz nowy
rzecz jest najlepszą rzeczą od krojonego chleba!

W przypadku ekranu o średniej szerokości złamałbym dwa razy:

Nasz nowy
rzecz jest najlepszą rzeczą
od krojonego chleba!

W przypadku jeszcze węższych ekranów łamałbym się po „nowym”, po „thingamabob” i po „thing”. Tworzenie czterech linii.

Nasz nowy
thingamabob
to najlepsza rzecz
od czasu krojonego chleba!

I naprawdę nie chcesz używać znaczników Break ( <br>), ponieważ takie trudne ustawianie przerwy we wszystkich rozmiarach. Do tej pory używałem zapytań o media i szerokość procentowych dla różnych h1- h5znaczniki tak, że szerokość sił tagów przerwy. Ale wydaje mi się to „hacking” ( czasami jest również bardzo temperamentne w oparciu o rzeczywisty tekst).

Jaki jest najlepszy sposób kontrolowania podziałów linii bez twardego kodowania ich w HTML?

Odpowiedzi:


12

Radzę to tylko na tej podstawie, że używa się go do krótkich fragmentów tekstu, a nie akapitów.

Formatowanie nagłówków może i powinno być kontrolowane w jak największym stopniu w rozsądnych granicach . JavaScript lub dodatkowe niepotrzebne elementy nie są „rozsądnymi limitami” .

Z drugiej strony, niełamliwe spacje ... mogą być przydatne, gdy są używane z umiarem.
Umieszczenie ich między parami słów i trojaczkami, które chcesz zachować razem, może dać pożądane rezultaty.

Jednak nie można używać wielu kolejno, w zależności od długości użytych słów, połączenie zbyt wielu spowoduje, że tekst wyleje się z okienka ekranu lub jego kontenera.

Kilka szybkich eksperymentów na twoim własnym zestawie słów powinno ujawnić najlepsze słowa do połączenia.

Na przykład w tym pytaniu HTML może wyglądać następująco:

<span>Our&nbsp;New thingamabob is&nbsp;the best&nbsp;thing since&nbsp;sliced&nbsp;bread!</span>

W rzeczywistości nie ma tutaj potrzeby CSS. CSS w tym przykładzie, który stworzyłem, jest po prostu dla zabawy.


W skrócie, kluczem do tej metody jest ograniczenie liczby miejsc, w których tekst może się łamać.


Po ponownym przeczytaniu pytania zdaję sobie sprawę, że nie do końca spełniłem wymagania. W tym konkretnym przypadku i przy założeniu, że istnieją inne strony, które wymagają takiej samej uwagi, zdefiniowałbym jeden<br> dla punktu przerwania o pełnej szerokości. Następnie użyłbym tej samej klasy na każdej ze stron w najbardziej idealnym miejscu w nagłówku.

Ta <br>klasa zawaliłaby się na czymkolwiek mniejszym niż na całej szerokości, działając tak, jakby jej nawet nie było, przy użyciu zapytań o media. Przy rozmiarach okienek mniejszych niż pełna szerokość polegamy na&nbsp; tylko na nich.

Kolejny przykład z jednym <br> który jest bliżej znaku.

HTML:

<span>
    Our&nbsp;New thingamabob is&nbsp;the<br class="full-width-breakpoint"/> best&nbsp;thing since&nbsp;sliced&nbsp;bread!
</span>

CSS:

@media screen and (max-width:550px) {    /* Max Width depends on your design */     
    .full-width-breakpoint {             /* only experimentation or */
        display:none;                    /* calculation will reveal */
        line-height:0;                   /* the best max-width */
    }
}

4
Jeśli chodzi o coś tak szczegółowego, jak przykład w pytaniu, jest to właściwy sposób
Zach Saucier,

1
To wydaje się być najłatwiejszą, najprostszą metodą. Dzięki.
Scott

6

Najlepszą praktyką jest potwierdzenie, że nie masz rzeczywistej kontroli nad łamaniem linii w sieci i najlepiej jest projektować z myślą o tym.

Każde przeciwne rozwiązanie będzie niezmiennie nieznośne. Jak będzie być hack jak HTML nie przywiera do zdefiniowanych przez użytkownika podziały wiersza poza ciężko kodowania. Możesz to zrobić z JS dość łatwo. Skonfiguruj punkty przerwania z pustymi rozpiętościami z unikalnymi klasami, a następnie w oparciu o rozmiar rzutni, do której możesz wstawić tagi BR do każdego pożądanego zakresu.

Istnieje kilka stylów CSS, które będą działać w nowszych przeglądarkach, aby kontrolować sposób, w jaki przeglądarka obsługuje zawijanie wierszy, ale nadal nie da ci dokładnej kontroli, której szukasz w tej sytuacji.

Z drugiej strony, jeśli twoim celem nie jest kontrolowanie określonych podziałów linii, ale aby upewnić się, że blok tekstowy „układa się” we względnie równych wierszach, ustawiłbym szerokość DIV inaczej dla każdej rzutni. Nie będzie idealny, ale prawdopodobnie dość blisko i może być najlepszym kompromisem.


To. Ponadto, jeśli jeszcze go nie widziałeś, przeczytaj A Dao of Web Design Johna Allsoppa tutaj: alistapart.com/article/dao
bemdesign

3

Jest do tego wtyczka jquery, Balance Text .

Jest to wtyczka stworzona przez Adobe,text-wrap: balance; stworzona wraz z propozycją Adobe, aby uzyskać opcję CSS, która działałaby tak jak funkcja Balance Ragged Lines w programie Adobe InDesign (brzmi świetnie, ale nawet jeśli zostanie zaakceptowana, miną lata, zanim przeglądarki ją obsługują).

Wtyczka działa jednak teraz. Równoważy wszystkie elementy, które mają klasę balance-text, lub przy użyciu jQuery jak$('.some-elements').balanceText();

Ograniczenia

Ten kod obecnie działa tylko na tekście w tagach na poziomie bloku bez elementów wbudowanych.

W demo 4 zobaczysz, jak wszystko w swoim bloku wyważony tekst jak <a>łącza, <span>S lub nacisk podobnego <em>, <strong>, <b>, <i>etc zostanie usunięty.

Ponadto, porównując wersje demo 1, 2 i 5, zobaczysz, że musisz użyć zarówno klasy CSS, jak i wywołania jQuery.


Wydaje się być umiarkowanie niezawodny, ale czasami nieładny - w chwili pisania czasami odsuwa się, gdy znajduje się w bocznej kolumnie, pozostawiając samotne sieroty (ale wydaje się, że działa przez ponad 95% czasu i jeszcze nie widziałem, żeby się ślizgało, z wyjątkiem gdy znajduje się w kolumnie bocznej) i z niewyjaśnionych powodów moje dema nie działają w Firefoksie, ale dema Adobe działają (dobrze w IE9 +, nie można teraz przetestować w IE8). Jeśli go użyjesz, weź pod uwagę czas testowania.


Nie mam pojęcia, ale strona GitHub zawiera opis działania. Wygląda na to, że po prostu korzysta z wyszukiwania DOM i podstawowych czynności manipulacyjnych, więc możesz być w stanie uciec po prostu za pomocą Sizzle (selektora jQuery), a następnie załatanie elementów manipulacyjnych w razie potrzeby. Ale to może łatwo przerodzić się w DUŻO pracy ...
user56reinstatemonica8

Wyobrażam sobie, że to „algorytm” opisany na początku pliku readme. Zasadniczo mówią tylko, że użyli jQuery dla łatwiejszej kompatybilności z różnymi przeglądarkami.
user56reinstatemonica8

@DumbNic Jeśli martwisz się o rozmiar jQuery, możesz spróbować użyć Zepto.js , ale nie jestem w 100% pewien, że działa on z tą wtyczką natywnie. Nie sądzę, żeby dostępna była waniliowa wersja js (choć można ją zrobić)
Zach Saucier

Tajemnica negatywna ... Myślę, że ktoś naprawdę nie lubi jQuery
user56reinstatemonica8

3

Muszę sobie z tym poradzić dość regularnie, z wkładem projektantów, którzy chcą, aby coś się zepsuło. Znalazłem najprostszy sposób, aby to zrobić, umieszczając przedział z klasą w tekście, a następnie dostosuj go display: block;do zapytań o media.

Więc wyglądałoby to tak:

<p>This is some text and I want <span class="mobile-only-line-break">only this text to break, but only on mobile</span></p>

Potem miałbym CSS z czymś takim:

@media all and (max-width: 767px) {
.mobile-only-line-break { 
display: block;
}
}

Nadal musisz przejść i dopracować, aby upewnić się, że wszystko idzie tak, jak chcesz dla wszystkich szerokości.

Jeśli jest to częsty problem, możesz utworzyć własny zestaw klas podziału linii, na przykład Twitter Bootstrap lub dowolny inny system siatki, którego używasz, modelując nazwy klas na podstawie jakiejkolwiek konwencji nazewnictwa, której używasz.


2

Możesz użyć JavaScriptu, aby wykryć szerokość ekranu i napisać poprawną wersję (z <br> takimi, jakie masz w swoim poście) do pustego diva przez innerHTML.

Niestety „pożądane przerwy sieciowe” i „najlepsze praktyki internetowe” nie pasują do siebie. Porzuć swoje perfekcjonistyczne pragnienie, aby każde słowo znalazło się we właściwym miejscu - jest po prostu zbyt wiele możliwości ekranu i zbyt wielu czytelników, którzy nie mają nastawienia projektanta, musisz nawet dbać o podziały linii w ich tytułach. Poszukaj Responsive Web Design, aby lepiej zrozumieć te problemy.


1
Jest to bardzo trudne do wykonania w sposób responsywny i wymaga wielu obliczeń. Nie polecam korzystania z tego podejścia
Zach Saucier,

Pytanie wydaje się ulec zmianie. Udzieliłem odpowiedzi na pytanie, które zadał w tamtym czasie, a mianowicie wyświetlanie podziałów linii tam, gdzie chciał.
Steve,

Mówiłem o „pożądanych podziałach linii”. Dałem mu teoretyczną implementację JS, aby uzyskać to, czego chce. Mój drugi para mówi jednak o mojej pozycji i jestem przeciwny takiemu podejściu. RWD to droga, którą używam w swoich aplikacjach.
Steve

2

Moja obecna metoda ...

<h1>Our New thingamabob is the best thing since sliced bread!</h1>

I CSS:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
   h1 { margin: 0 auto; text-align: center; width: 280px; }
}

@media only screen 
and (min-width : 321px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (max-width : 320px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-width : 1224px) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
    h1 { margin: 0 auto; text-align: center; width: 1200px; }
}


@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}

Szerokości trzeba czasami pewne korekty w oparciu o rzeczywisty tekst używany, ale jest to ogólny schemat używam. Zasadniczo zmniejsza szerokość h1znacznika, tak że linia łamie się tam, gdzie chcę, aby się złamała.

To działa, wymaga jedynie dokładnego przetestowania, aby upewnić się, że przerwy występują w razie potrzeby. Ale w każdym razie potrzebne są dokładne testy. Tak więc niekoniecznie jest to więcej pracy w tym zakresie.


Uwaga: możesz złożyć wniosek margin: 0 auto; text-align: center;tylko raz poza zapytaniem medialnym i dotyczy to wszystkich
Zach Saucier

1
Co więcej, w przypadku czegoś tak specyficznego dla treści lepiej byłoby po prostu użyć wewnętrznych zakresów ... Cały ten CSS jest trochę większy i jak tylko zmienisz rozmiar czcionki lub coś podobnego, wszystko będzie musiało zostać odpowiednio zmienione
Zach Saucier

Zgoda. Rozmiary czcionek są kontrolowane bardziej globalnie dla wszystkich rozmiarów mediów. To była tylko próbka znaczników.
Scott

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.