Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wyświetlenie treści artykułu w kilku kolumnach
Forum PHP.pl > Forum > PHP
barthpl
26.08.2008, 10:32:34
Temat Przełamywanie ciągłego tekstu zainspirował mnie i tak sobie pomyślałem, że fajnie byłoby podzielić wyświetlany artykuł na kolumny. Czy ma ktoś może pomysł w jaki sposób efektywnie to zrobić??. Chodzi mi aby wyświetlać go w taki sposób jak ma to miejsce w gazetach.

Jeżeli artykuł skład się z samego tekstu problem nie jest zbyt skomplikowany. Da się go rozwiązać w sposób łopatologiczny, np.:
[PHP] pobierz, plaintext 
  1. <?php
  2. function displayInColumn( $text, $columnNo = 2, $wordMaxLength = 21, $rowPattern = '%s ', $wordPattern = '<span style="word-spacing: -1px;">%s</span>' )
  3. {
  4. 	// przygotowanie tekstu /////////////////////////////////////////////////////////////////////
  5. 	$words = explode( ' ', $text );
  6. 	foreach( $words as $key => $vals) {
  7. 		$words[$key] = trim( $vals );
  8. 		if( strlen($words[$key]) >= $wordMaxLength ) {		// Wyraz dłuższy niż dopuszczalna  
  9. 			$tmpWord = '';									// długośc linijki rozbijany jest 
  10. 			for( $i = 0; $i < strlen($words[$key]); ++$i )	// na literki rozdzielone spacją, 
  11. 				$tmpWord .= $words[$key][$i].' ';			 // które będą zamkniętę w specjalny
  12. 			$words[$key] = trim($tmpWord);					// tag $wordPattern (*);
  13. 		}
  14. 	}
  15.  
  16. 	// podział na linijki ///////////////////////////////////////////////////////////////////////
  17. 	$lines = array();	// Tablica zawierająca wszystkie linijki z czego każda  
  18. 						 // zawiera nie wiecej niż $wordMaxLength znaków;
  19. 	$linesNo = 0;		// Liczba wszystkich linijek; 
  20. 	foreach( $words as $word ) {
  21. 		$lettersNo = strlen( strip_tags($lines[$linesNo]) );
  22. 		$wordLength = strlen($word);
  23. 		if( $lettersNo + $wordLength < $wordMaxLength )
  24. 			$lines[$linesNo] .= $word.' ';
  25. 		else if( $wordLength < $wordMaxLength ) {
  26. 			$lines[++$linesNo] .= $word.' ';
  27. 		}
  28. 		else {			// (*) Zamykanie długiego wyrazu w teg $wordPattern;
  29. 			for( $i = 0; $i < $wordLength; ) {
  30. 				$tmpLength = $wordMaxLength - strlen( strip_tags($lines[$linesNo]) );
  31. 				$lines[$linesNo] .= sprintf( $wordPattern, substr($word, $i, $tmpLength) ).' ';
  32. 				$i += $tmpLength + ($tmpLength % 2 == 0 ? 0 : 1);
  33. 				if( strlen(strip_tags($lines[$linesNo])) > $wordMaxLength-1 )
  34. 					$linesNo++;
  35. 			}
  36. 		} 
  37. 	}
  38.  
  39. 	// podział na kolumny /////////////////////////////////////////////////////////////////////// 
  40. 	$inColumn = (int)($linesNo / $columnNo);	
  41. 	if( $inColumn * $columnNo < $linesNo )		 // aby kolumna pierwsza była dłuższa niż ostatnia
  42. 		$inColumn += 1; 
  43.  
  44. 	$columns = array();							// Zawartość poszczególnych kolumn;						
  45. 	$column = 0;
  46. 	foreach( $lines as $key => $val ) {
  47. 		if( $key % $inColumn == 0 )
  48. 			$column++;
  49. 		// Zamknięcie poszczególnej linijki w tag $rowPattern. 
  50. 		$columns[$column] .= sprintf( $rowPattern, $val ); 
  51. 	}
  52.  
  53. 	return $columns;
  54. }
  55. ?>
[PHP] pobierz, plaintext

i przykład zastosowania:
[PHP] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3. <head>
  4. 	<title>Wyświetlenie treści artykułu w kilku kolumnach</title>
  5. 	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  6. 	<style type="text/css">
  7. 	div.column { 
  8. 		margin: 10px; width: 200px; overflow: hiiden; float: left;	
  9. 		font-family:Times; font-size:12px; text-align: justify; 
  10. 		word-spacing: 2px; 
  11. 	}
  12. 	</style>
  13. </head>
  14. <body style="width: 900px;">
  15. <?php
  16.  
  17. $text = "Lorem ipsum dolor sit amet, consectetuer adipiscingadipiscingadipiscingadip
    iscingadipiscing elit. Aenean vel eros. Lorem ipsum dolor sit amet, consectetuer 
    adipiscing elit. Nunc ut dolor sed mi ultrices pulvinar. Nam non ipsum et magna c
    onsequat commodo. Quisque in risus in diam condimentum malesuada. Aenean commodo.
     Donec in lacus. Quisque tortor nulla, mattis eu, congue ut, hendrerit ac, risus.
     Etiam tellus arcu, viverra in, elementum eu, tincidunt vitae, magna. Fusce pelle
    ntesque metus in leo ultricies molestie. Donec ullamcorper turpis sed pede. Donec
     aliquet urna. Vestibulum luctus. Nullam enim. Phasellus id ante ut nisi lobortis
     sagittis. Sed in sem. Nam felis nulla, faucibus vel, iaculis sit amet, sagittis 
    at, urna. Nullam laoreet faucibus dolor."    .
  18. 		"Maecenas in eros vitae metus lobortis dictum. Integer gravida velit eu augu
    e. Maecenas eget tortor. Proin dolor dolor, vehicula in, cursus nec, commodo et, 
    erat. Suspendisse potenti. Nunc vulputate quam molestie massa. Donec ut arcu. Sus
    pendisse mollis. Cras fermentum. In diam justo, faucibus nec, commodo sit amet, h
    endrerit nec, enim. Aliquam erat volutpat. Curabitur ut sapien. Fusce eu arcu vit
    ae felis varius vehicula. Fusce massa massa, laoreet ac, ullamcorper non, tempor 
    eget, ligula. Nunc nec sem. Fusce mattis porttitor quam. Curabitur nibh nisl, tri
    stique quis, fringilla sit amet, cursus non, odio. Sed tempor varius elit."    .
  19. 		"Donec mollis turpis vel erat. Pellentesque et libero. Nam iaculis pharetra 
    ante. In hac habitasse platea dictumst. Suspendisse pede. Proin leo metus, vehicu
    la semper, tincidunt eu, luctus in, ipsum. Curabitur non nibh. Integer eget leo. 
    In nunc. Maecenas condimentum pretium libero. Mauris mollis odio ac ipsum. Praese
    nt adipiscing porta lorem. Duis porta lorem et ante. Fusce elit. Duis viverra iac
    ulis odio. Duis vehicula tempus metus. Nullam nec risus. Vivamus ac nunc sed sem 
    rhoncus convallis. Morbi arcu risus, lacinia rutrum, vehicula quis, faucibus ut, 
    nunc. Nulla in odio sed urna dapibus convallis."    .
  20. 		"Cras vehicula urna non neque. Morbi justo. Duis in enim. Quisque viverra so
    llicitudin leo. Nunc ultricies, nibh non feugiat viverra, neque arcu ultrices nis
    l, id gravida nunc felis vel turpis. Praesent bibendum nulla a magna. Nulla sit a
    met quam. Cras mollis, justo non pellentesque viverra, lectus purus rutrum pede, 
    id elementum nunc nibh id diam. Fusce velit. Curabitur quis est."    .
  21. 		"Sed elit. Integer bibendum felis ac ipsum. Maecenas ultricies. Nulla a ante
     ut dolor mollis accumsan. Mauris sem felis, hendrerit eu, tincidunt non, feugiat
     non, nunc. Proin posuere ipsum eget nisi. Duis a velit. In odio. Donec vitae lac
    us. Sed porttitor, tortor ac egestas ornare, ante dui elementum nulla, ac volutpa
    t tellus lorem rhoncus felis. Sed scelerisque venenatis risus. Etiam odio. Suspen
    disse potenti. Fusce aliquam urna nec mi."    ;
  22.  
  23. // przykład 1: każda linijka zamknięta w osobnym div'ie;
  24. $columnPattern1 = '<div class="column">%s</div>';
  25. $rowPattern = '<div style="margin: 0px">%s</div>'; 
  26. foreach( displayInColumn($text, 4, 36, $rowPattern) as $columnText )
  27. 	echo sprintf( $columnPattern1, $columnText );
  28.  
  29. echo '<hr style="clear: both"/>';
  30.  
  31. // przykład 2: wyjustowany tekst
  32. $columnPattern2 = '<div class="column" style="width: 270px;">%s</div>';
  33. foreach( displayInColumn($text, 3, 50) as $columnText )
  34. 	echo sprintf( $columnPattern2, $columnText );
  35.  
  36. ?>
  37. </body>
  38. </html>
[PHP] pobierz, plaintext


No i teraz moje problemy (jeszcze nie rozwiązane), każda sugestia mile widziana:
1) Nie mam pomysłu jak sprytnie dodać myślniki przy wyrazach dzielonych pomiędzy linie. Jeżeli by założyć iż każda linia zamknięta jest w osobnym div'ie nie jest to super trudne o tyle przy założeniu justowania jak w przykładzie 2 nie mam zielonego pojęcia jak to zrobić.

2) Jak optymalnie obsłużyć tekst w którym są wykorzystane tagi HTML. Problem jest taki że przy dzieleniu dwu wyrazowego linku pomiędzy dwie linie, jak w przykładzie 1 (z div'ami) trzeba de facto zrobić dwa takie same linki.

3) W przypadku wyjustowanych kolumn kolumny się skracają - w sposób nie kontrolowany.

4) Jak obsłużyć wstawianie rysunków, co by odpowiednio się to dzieliło??
wookieb
26.08.2008, 10:37:13
2. Zaprzęgasz do roboty wyrazenia regularne i dzielisz bez brania pod uwagę tagów.
4. Musisz znac parametry obrazka. A jak chcesz to zrobić to ja nie wiem

Nie sądzisz, że to zbyt ambitne i bezsensowne przedsięwzięcie? Strona internetowa to nie gazeta która bedzie sie "przesuwało" w rękach cały czas.
W gazecie stosuje się kolumny dla lepszego czytania. Gazeta jest szeroka i "walnięcie" w niej całego tekstu a potem szukanie linijki byłoby uciążliwe dlatego dzieli się na kolumny. Ale to rozwiazanie jest wręcz idiotyczne jak na strone internetową.

Jeżeli się upierasz to do pisania artykułu uzywaj wtedy edytora WYSIWYG.
barthpl
26.08.2008, 11:00:10
Cytat(wookieb @ 26.08.2008, 11:37:13 ) *
2. Zaprzęgasz do roboty wyrazenia regularne i dzielisz bez brania pod uwagę tagów.
Nie bardzo czaje. Jak się pozbędę się tagów przy dzieleniu wyrazów to w jaki sposób je potem powsadzać w odpowiedni miejsca??

Cytat(wookieb @ 26.08.2008, 11:37:13 ) *
4. Musisz znac parametry obrazka. A jak chcesz to zrobić to ja nie wiem
Zastanawiałem się co by pobierać informacje o wysokości obrazka (przy pomocy wyrażenia regularnego) z atrybutu "style". Lub może ustalić jakąś stałą wysokość. Tutaj nie tyle zastanawiam się jak to zrobić (z oprogramowanie sobie raczej poradzę) tylko jakie rozwiązanie będzie bardziej intuicyjne, bardziej logiczne.

Cytat(wookieb @ 26.08.2008, 11:37:13 ) *
Nie sądzisz, że to zbyt ambitne i bezsensowne przedsięwzięcie?
W tej chwili robię to bardziej dla sportu aniżeli dla jakiegoś konkretnego zastosowania. Jak się uda to fajnie a jak nie to też nic się nie stanie.

Cytat(wookieb @ 26.08.2008, 11:37:13 ) *
Gazeta jest szeroka i "walnięcie" w niej całego tekstu a potem szukanie linijki byłoby uciążliwe dlatego dzieli się na kolumny. Ale to rozwiazanie jest wręcz idiotyczne jak na strone internetową.
Monitory panoramiczne też są szerokie winksmiley.jpg Nie mówię że stosowanie kolumn jest optymalne ale uważam, że w jakiś specyficznych układach graficznych (krótki artykuł, który mieści się na jednym ekranie) może znaleźć zastosowanie.

Cytat(wookieb @ 26.08.2008, 11:37:13 ) *
Jeżeli się upierasz to do pisania artykułu uzywaj wtedy edytora WYSIWYG.
To byłoby zbyt proste winksmiley.jpg a poza tym zmiana układu, to znaczy liczby kolumn, wiązała by się z koniecznością przedytowania tekstu - a to nie o to chodzi, prawda??
wookieb
26.08.2008, 11:10:41
Cytat(barthpl @ 26.08.2008, 12:00:10 ) *
Zastanawiałem się co by pobierać informacje o wysokości obrazka (przy pomocy wyrażenia regularnego) z atrybutu "style". Lub może ustalić jakąś stałą wysokość. Tutaj nie tyle zastanawiam się jak to zrobić (z oprogramowanie sobie raczej poradzę) tylko jakie rozwiązanie będzie bardziej intuicyjne, bardziej logiczne.

a jak dasz samo <img src="obrazek.jpg" alt=""/> :/ Ze styli nie pobierzesz. Bedziesz musial przekazywac parametry rozmiarów,
Cytat(barthpl @ 26.08.2008, 12:00:10 ) *
W tej chwili robię to bardziej dla sportu aniżeli dla jakiegoś konkretnego zastosowania. Jak się uda to fajnie a jak nie to też nic się nie stanie.

Rozumiem ale ja bym na twoim miejscu zająłbym się czymś bardziej pożytecznym smile.gif Swego czasu moja ambicja mi się opłaciła. Powiedziałem sobie, że napiszę cms który nada się do każdej strony oraz taki który zawiera chociaż podstawowe własciwości ezPublish a przy tym działa bardzo szybko i... Udało się smile.gif
Cytat(barthpl @ 26.08.2008, 12:00:10 ) *
Monitory panoramiczne też są szerokie winksmiley.jpg Nie mówię że stosowanie kolumn jest optymalne ale uważam, że w jakiś specyficznych układach graficznych (krótki artykuł, który mieści się na jednym ekranie) może znaleźć zastosowanie.

Osobiście jestem w nich zakochany smile.gif Jednakże zauważ że strony maja głównie max szerokosc 900px i to wystarczy smile.gif Są strony które są oczywiście o wiele szersze ale to już ich problem.

Cytat(barthpl @ 26.08.2008, 12:00:10 ) *
To byłoby zbyt proste winksmiley.jpg a poza tym zmiana układu, to znaczy liczby kolumn, wiązała by się z koniecznością przedytowania tekstu - a to nie o to chodzi, prawda??


Pewnie, że nie smile.gif Ale chyba lepiej do tego celu użyć JS ponieważ za pomocą niego możesz uzyskać o wiele więcej parametrów niz w php. (szerokość obrazków. szerokość tekstu, wysokość tekstu itd.)
barthpl
26.08.2008, 11:39:17
Cytat(wookieb @ 26.08.2008, 12:10:41 ) *
a jak dasz samo <img src="obrazek.jpg" alt=""/> :/ Ze styli nie pobierzesz. Bedziesz musial przekazywac parametry rozmiarów,
Czyli aby było to logiczne należało by pobrać ścieżkę do obrazka i go dostosować do szerokości kolumny a przy okazji obliczyć sobie jego wysokość...

Cytat(wookieb @ 26.08.2008, 12:10:41 ) *
Ale chyba lepiej do tego celu użyć JS ponieważ za pomocą niego możesz uzyskać o wiele więcej parametrów niz w php. (szerokość obrazków. szerokość tekstu, wysokość tekstu itd.)
Jest to pomysł wart rozważenia. Ale na razie skupię się na opracowaniu rozwiązania (możliwie bliskiego optymalnemu) w PHP.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.