Jump to content
Angelica Perduta

Avoiding long lines of text

Recommended Posts

Recently I started exploring modern web technology and have been wondering about how to avoid getting long lines of text that become hard to scan.

I made a demo with some ideas and would apreciate if anyone wants to coment.

http://piedpiper.site40.net/index.html?text=/design_website/web_design.html#visual

(Note: currently you have to resize the frame to get the multi column to do it's thing and IDK why it wont take you straight to the #visual label yet... but if I wait until I understand it all then I suspect I'll never get anywhere at all ;o)

 

Share this post


Link to post
Share on other sites

@davej - You are far from alone in that ;o)

 

I agree that frames are bad karma, especially for marketing. However, when I'm exploring technical information, I really do want some kind of index to hand + a separate area for examples to play with.

Originally I used a pop up window for my navigation but that's not good either, especially because if you enable them then my free web host will pop up annoying adverts. :^/

My aim is to load a different index depending what chapter/topic the viewer has selected. I notice pages like the jQuery API documentation has a nice menu on the left, but I also like the ability to shove it out of the way and make more space for images and samples when I need it.

 

Anyway... this was really more about the fact my reading tends to drift across lines of text when they get too long and so I need to find a way to limit their length. Exploring these things gives me incentive to learn new techniques.

Share this post


Link to post
Share on other sites

I'm not quite following what you are saying -- can you provide an example of a "long line?"

 

Menus need to get you where you want to go. Scroll bars are clumsy. Slide-out or drop-down menus are nice.

Share this post


Link to post
Share on other sites

I'm not quite following what you are saying -- can you provide an example of a "long line?"

 

Menus need to get you where you want to go. Scroll bars are clumsy. Slide-out or drop-down menus are nice.

 

Long text lines are when you maximize your window and the parapraph width could be well over 150 characters! When I was learning to read I used need my finger to keep track of what line I was on and I still find it hard when reading on screen.

 

Regarding scroll bars, many cases my web browsers puts them in for no real reason, e.g. http://www.youtube.com/watch?v=6d8g6v3_ADY

On my website http://piedpiper.site40.net/ (mentioned in my first post) FireFox, Chrome and IE all add a nonsensical horizontal scroll bar to my navigation frame and I have no idea why yet.

 

I do like drop down menus. There was a nice example on a web site about buying gold, presented on this forum.

I have not yet experimented with them: My concern is for when a page has substantial writing and thus make the reader scroll all the way back to your menu bar. They lose their place in the page they are reading. Also I want it to be consistent on multiple pages without having to update each and every one when I add to my site...

This naturally lead me to iframes but hopefully I can learn new techniques by taking part in this forum :Pleased:

Edited by Angelica Perduta

Share this post


Link to post
Share on other sites

A fixed width wrapper div is the traditional approach or you can now add a (CSS 2) max-width property if you want a maximum width limit. The simple fixed-width was quite popular until fluid layouts came on the scene. Scroll bars are usually the result of overflow set to scroll or auto. You can also use overflow: hidden, and with HTML5 CSS 3 it will soon be easy to use multiple column layouts.

 

http://www.w3schools.com/cssref/pr_dim_max-width.asp

 

http://www.w3schools.com/cssref/pr_pos_overflow.asp

 

http://www.w3schools.com/css3/css3_multiple_columns.asp

Edited by davej

Share this post


Link to post
Share on other sites

A fixed width wrapper div is the traditional approach or you can now add a (CSS 2) max-width property if you want a maximum width limit. The simple fixed-width was quite popular until fluid layouts came on the scene. Scroll bars are usually the result of overflow set to scroll or auto. You can also use overflow: hidden, and with HTML5 CSS 3 it will soon be easy to use multiple column layouts.

 

http://www.w3schools.com/cssref/pr_dim_max-width.asp

 

http://www.w3schools.com/cssref/pr_pos_overflow.asp

 

http://www.w3schools.com/css3/css3_multiple_columns.asp

Thanks davej and lovespells too.

The fixed width and max-width do seem to be the most common approach and I experimented with multi-column too. lovespells website is very attractive but there is a lot of wasted screen area which doesn't help when trying to present more verbose technical documents that I have in mind. For that the reason I have left navigation frame in: to use the wasted space on the side rather than force the user to scroll back to the top to find the menu.

Share this post


Link to post
Share on other sites

No to frames

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />    <link href="http://piedpiper.site40.net/angelica.css" type="text/css" rel="stylesheet" >    <title>Document Title</title>    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>    <!--<script src="http://piedpiper.site40.net/freestyle.js"> /* coordinate style for all pages */ </script>-->       <script type="text/javascript">		function getStyle() {			console.log("style="+parent.Style);			// any filename not mentioning print is considered screen			StyleForm.S[1].checked = (parent.Style.indexOf("print") >= 0);			StyleForm.S[0].checked = !StyleForm.S[1].checked		}    </script>    <style type="text/css">    html, body {height:100%; margin:0; padding:0;}    #wrapper {height:100%;}    #left_menu {height: 100%; width:26%; float:left;}    #top_row, #bottom_row {height:50%; width:74%; float:right; }        #left_menu, #top_row, #bottom_row {overflow-y: scroll;}    #bottom_row .outer_border {border-top-style: groove;}        #footer {width: auto;}    #left_menu > * {padding-left: 5%; padding-right: 5%;}    .note, .important {margin: 1em 5%;}    .outer {    margin-left: auto;    margin-right: auto;    max-width: 800px;    min-width: 300px;}    </style></head><body onload="getStyle()">        <div id="wrapper">            <div id="left_menu"><h1><abbr title="Information Technology">IT</abbr> research</h1><form name="StyleForm">	<!-- using same name, groups the radio buttons so only one at a time -->	<INPUT type="radio" name="S" onClick='parent.setStyle("web")' checked>Screen<br>	<INPUT type="radio" name="S" onClick='parent.setStyle("print")'>Printer</form><H2>Topics</H2><dl>	<dt><a href="../voter" target="_top">Online Opinion Polling</a></dt><dd>		A facility to create public opinion polls for your web blog.	</dd>	<dt><a href="../sundry/downloads.html" target="text">List of Downloads</a></dt><dd>		Downloads available from this site.	</dd>	<dt><a href="../phishing/phishing.htm" target="text">Phishing</a></dt><dd>		Phishing is a scam whereby a fake website records credentials that are supplied by it's unsuspecting victims.	</dd>	<dt><a href="../malware/malware.htm" target="text">Malware</a></dt><dd>		Malware is anything that has unwanted malevolent intent on your computer.	</dd>	<dt><a href="../malware/detective.htm" target="text">Internet Detective</a></dt><dd>		Tracing the cyber-criminals.	</dd>	<dt><a href="../server/server.htm" target="text">Hosting a Web Server</a></dt><dd>		Your own Web Server gives full control, access to log files and it liberates you from other terms and conditions	</dd>	<dt><a href="../server/persona.htm" target="text">Identity in Cyber-Space</a></dt><dd>		Getting started with some technology beyond account names and passwords.	</dd>	<dt><a href="../IP-harvester.htm" target="text">IP-harvester</a></dt><dd>		Example tool for gathering IP addresses... this will be part of discussion on hacks	</dd>	<dt><a href="../icons/icons.html" target="text">Icons</a></dt><dd>		How to create and use graphical icons on computers and the world wide web.	</dd>	<dt><a href="../gui/gui.html" target="text">graphical user interaction</a></dt><dd>		Simple tutorial to for creating computer programs that have a graphical		user interface.	</dd>	<dt><a href="../design_website/web_design.html" target="text">Website Design</a></dt><dd>		How this website works and why I do it this way.	</dd></dl><div class="important"><p>	The work presented here is original, although it does use products	available from other sources.	Any accidental copyright material on this site is governed	by "fair use policy":	It is for the purpose of education, or demonstration only and never to	distribute useable works made by others.</p></div><div id="footer">	Copyright© Angelica Perduta 2003-2013: GPL3</div>            </div>            <div id="top_row"><div class="outer"><div class="note"><p>	This document is a revision of a very much older document	that explained ideas of my own on website design.	I have now reconsidered the topics and skip past	discussions of how things used to be and how they developed.</p><p>	What you can learn here is why I choose	to make this website work the way it does and how it is done with the	current (2013) technology.</p></div><H1>Website Design</H1><p>	My purpose is to create a website for tutorials, educational and	discussion documents and some functions are experimental.	This kind of website has very different requirements from advertising,	or online sales. I'm not trying to sell you anything so I'll just get	straight to the point.</p><a id="visual"><h2>Visual</h2></a><div class="result" style="width:350px"><form method="post" action="http://piedpiper.site40.net/voter/poll_vote.php"><input type="hidden" name="pollId" value="85c58" /><input type="hidden" name="poll_title" value="Your preference:" /><input type="hidden" name="style" value="bar" /><h2>Your preference:</h2><img src="http://piedpiper.site40.net/tmp/poll85c58.png" alt="opinion poll graph"><fieldset><legend>Your choices (click one button to vote)</legend><br><input type="submit" name="vote" value="1" /> Dynamic multi-column<br><input type="submit" name="vote" value="2" /> Static width limit<br><input type="submit" name="vote" value="3" /> I would not use either of these</fieldset></form></div><p>	Long lines of text can be hard to read and so I limit the maximum width,	automatically adjusting the left and right margins.	As an alternative, using jQuery we can dynamically split	text over multiple collumns.	Try the options below. By adjusting frame size you can compare the two	strategies in my <cite>samples</cite> frame below.	Then please do cast your vote on which you prefer.	<ol>		<li><a href="ipsum_lorem_main.html" target='sample'>multi column</a></li>		<li><a href="ipsum_lorem_outer.html" target='sample'>width limited</a></li>	</ol></p><p>	When reading technical documents I find bright text on a plain dark background	far less tiring on the eye than ornate, or bright backgrounds with dark letters.	For printouts on the other hand, we don't want to waste ink coloring	the whole page and so the navigation menu also allows the user to switch	between a screen style or a printer style (although I will use the printer	style regardless when rendering on a printer device).	My web pages include a common javascript file that writes a link to the	currently selected style, as follows:</p><pre class="brush:js; gutter:false">var sLine = '<LINK rel="StyleSheet" HREF="../'+parent.Style+'" TYPE="text/css"	MEDIA="screen">';document.write(sLine);// always use printer style sheet for hard copysLine = '<LINK rel="StyleSheet" HREF="../print.css" TYPE="text/css" MEDIA="print">';document.write(sLine);</pre><p>	By right clicking in a frame you	can choose to print the document it displays. Thus the navigation frame	is excluded.	My print style also excludes any items I labelled as	<q>noprint</q> class such as links to previous and next page.	Serif fonts seem easier to read on printout, while	plain fonts and removal of borders and other clutter, render better to	computer screens.</p><div class="note" style="clear:both"><p>	Besides the main body of text, notes like this one are assigned to the class	<q>note</q> so they can be rendered differently.</p></div><div class="important"><p>	Items labeled with the class <q>important</q> are rendered like this and I	will try <strong>only</strong> to use it for <strong>really</strong>	important notes from here on. </p></div><H2>Site Entry</H2><P>	Given a domain name, a server will dish out the home page of a website.	A homepage should give general information what the site is all about and	then act as an index to the rest of the site.	I also include contact details and a <q>guest book</q> that records	visitors.</p><p>	However, mostly people find things via search engines, or by direct hyperlink	referral. Yet for my pages it is important that they are loaded in the necessary	frame set that include additional scripts, rendering style and navigation tools.	So each page invokes a script named <q>freestyle.js</q>. If that finds the	necessary parent window is missing then it redirects via my main website index	using an html query string to identify itself as the subject of the main text frame.</p><pre class="brush:js; first-line:10; gutter:false" style="padding: 1em 1em 1em 1em">// error handling (e.g. document loaded without necessary frameset context)function gohome() {	var sLine = "../index.html?text="+window.location.pathname;	console.log("gohome="+sLine);	location.replace(sLine); // back button won't reload the bad document.	return true; // error has been dealt with, elide the dialog box}if (!parent.Style) gohome();</pre><H2>Your Logo</H2><P><img src="../favicon.ico" alt="my logo" class="result">	Having found a document of interest, people might set a <Q>bookmark</Q>	so they can come back to it later e.g. after a quick scan of alternative	results listed by a search engine.	Make your web presence more memorable and prominent with your own	consistent and visually recognizable icon or logo.	I use my yin-yang fish logo also as the icon for applications that I	program and made a separate chapter with a Youtube about	<a href="../icons/icons.html">creating icons</a>. </p><h2>Navigation</h2><p>	Complete site navigation is in a separate frame (on the left) so that	it is consistent and always to hand.	In response to nuisance advertizing, web browsers today prevent pages	from creating new windows and so I abandoned	the option of having a separate window popup for that purpose.</p><p>	Depending on the selected topic I want the index of that topic	to load a sub menu of navigation links into the navigation frame.	This facility is under revision.</p><H2>Site Structure</H2><p>	Over time I build up a variety of topics and each one is a self	contained entity. The only common files are the bare necessities	of scripts and style sheets for coordinating the whole site.	Thus each project I work on	has it's own separate folder, complete with	its own collection of image and html files, regardless if they might also	be used in other parts of my web site.	Doing this avoids accidental file name clashes, version conflicts and	facilitates independent updates.</p><p>	To prevent people getting confusing directory listings, the	default entry <cite>index.html</cite> within each poject simply redirects	to the actual start page of the topic. I hope it reduces the danger	from getting files with this common name mixed up.	I don't use further subfolders unless there is a very good reason	to do so.	Having experienced problems with file name inconsistencies I decided to	start using only lower case names and underscore instead of	spaces. </p><H2>You've been framed</H2><p>	In the same way other site owners could place my documents in frames on their	own website and it might not be obvious to the visitor whose page they	are actually reading, so I like to give them a choice whether to reload	in my original frame.</p><p>	It occurred to me that any page you load in a frame can contain	more frames and even end up including the original in an infinite recursion	so I built into my top level site entry a protection against	<a href="recursive.html" target='sample'>excessive frame nesting</a>.</p><div class="note"><p>	Choosing to <q>cancel</q> instead of clicking <q>OK</q> reloads the page	as top frame, but that does not resolve the recursion in this case.</p></div><DIV class="noprint"><hr><p>	<A HREF="../terminator.html" style="float:right">Next Page</A>	<!-- reload frameset but allow it to be in a frame of something else -->	<A HREF="../index.html" target='_parent' style="float:left">Home</A></p></DIV></div></div>            <div id="bottom_row"><div class="outer_border"><div class="outer"><h1>Guest book</h1><div class="illustration"><table><tr><!-- using table for layout because css is being retarded --><th><script type="text/javascript" src="http://jd.revolvermaps.com/2/1.js?i=38pg1i0wogw&s=220&m=0&v=true&r=false&b=3f607b&n=true&c=ff0000" async="async"></script></th><td>	<p>Adjacent is a globe that counts and records the location of visitors to this page.</p>	<form id="email" method="post" enctype="text/plain">	<script src="mailto.js"></script><script>		var sMail = obfuscate_email('frameset2013');		console.log('mail='+sMail);		document.getElementById('email').action = sMail;	</script>	<h2><input class="goRight" type="image" title="send e-mail" src="1376748139_Send.png" alt="Send">Feedback</H2>	<INPUT type=hidden name="SOFTenquiry" value="Ver 2">	<textarea name="Message" style="width:100%" rows="5">-- Click envelope icon above to e-mail me with text you enter here --	</textarea>	</form></td></tr></table></div><div style="clear:both; text-align:center">	<style type="text/css" scoped>		.advert { width:18%; height:60px; }	</style><p>	<a href="http://www.000webhost.com/652093.html" target="_blank">		<img class="advert" src="../MyPictures/120x60_powered.png" alt="Web Hosting">	</a>	<a href="http://www.gnu.org/licenses/">		<img class="advert" src="../MyPictures/gplv3-127x51.png" alt="GPL3 license Logo">	</a>	<a href="http://hidemyass.com/vpn/r3670/" title="Hide My ######! Pro VPN" target="_blank">		<img class="advert" src="../MyPictures/seventwentyeightninety.png" alt="HideMyAss.com">	</a>	<a href="http://www.youtube.com/channel/UCtAjLMpbbeav06BM8pLM3VQ" title="Angelica's YouTube" target="_blank">		<img class="advert" src="../MyPictures/mytube.png" alt="YouTube.com">	</a></p></div></div></div>        </div></div></body></html>

Share this post


Link to post
Share on other sites

 

No to frames

 

Thanks for your demonstration how to do this layout without using iframes. I can certainly see it gives the same appearance, just using <div> containers with appropriate styles,.

 

However I use iframes because I want to display independent documents. e.g.

  1. - to maintain only a single site navigation menu
  2. - to have links that load alternative combinations of main text and example
  3. - to share the common javascript without having to reload it for each page on the site

Without iframes, don't I end up having to duplicate the menu on every page? Do I have to make a page for every combination of text and sample? How can I transfer common scripts and variables when loading a different page? These are the things that I solved using frameset back when I was learning html in 20th century. An awful lot has changed since then and IDK how it is done these days. :umnik2:

Share this post


Link to post
Share on other sites

Use server language such as php to include menu content within another file, use ajax to load content from other pages, without reloading. OR instead of frames use iframes instead, use same layout for top bottom row, with iframes full width and height.

Share this post


Link to post
Share on other sites

Use server language such as php to include menu content within another file, use ajax to load content from other pages, without reloading. OR instead of frames use iframes instead, use same layout for top bottom row, with iframes full width and height.

Thank, yes, I did actually use iframes, but it's currently just a reimplementation of the deprecated frameset that I learned about 10 years ago.

 

I just made a Youtube of my user experience of how other sites work. I'm trying to get some ideas for how I really want it to operate and haven't got round to understanding ajax at all. I feel php is horribly complicated and will be hard to maintain and debug.

 

Currently my plan is to make tabs down the left margin that then pop up a menu over the top of the current document rather than resizing things.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×