Preserving text formatting

I have a text file stored in a database:

Hatchlands Park		Repairs to the Walker Organ      					        2,800
Hatchlands Park    	        5 octagonal picnic tables							2,225
Abinger Roughs		        Two Oak Benches							        1,200
Ankerwycke		        New Benches for Visitors							1,000  
Denbies Hillside		        Step to the top								           705
Knole			        Gainsborough Painting							2,000
Polesden Lacey 
House			       Mrs Greville's Bed Hangings						        4,000
Runnymede		       Magna Carta Legacy							        1,000
Wey Navigations	       Digitise the Wey Improvement Scheme
			               document and the Stevens journal					1,800
Winkworth
Arboretum		              Aerial viewing platform extension					        2,000
Clandon Park
Appeal			      National Appeal								        2,000
Project Neptune		      National Appeal								        2,000
Stowe Gardens 
Appeal			      National Appeal								        2,000
Funds for furure allocation						                                                5,270
											                                       _____
Total											                                      30,000

When I display this on my website the tabulation goes awry:

Hatchlands Park Repairs to the Walker Organ 2,800
Hatchlands Park 5 octagonal picnic tables 2,225
Abinger Roughs Two Oak Benches 1,200
Ankerwycke New Benches for Visitors 1,000
Denbies Hillside Step to the top 705
Knole Gainsborough Painting 2,000
Polesden Lacey
House Mrs Greville's Bed Hangings 4,000
Runnymede Magna Carta Legacy 1,000
Wey Navigations Digitise the Wey Improvement Scheme
document and the Stevens journal 1,800
Winkworth
Arboretum Aerial viewing platform extension 2,000
Clandon Park
Appeal National Appeal 2,000
Project Neptune National Appeal 2,000
Stowe Gardens
Appeal National Appeal 2,000
Funds for furure allocation 5,270
_
Total 30,000

How do I preserve the formatting?

The formatting is not preserved in the forum’s output! What can I do?

I just edited it to add the formatting back.

1 Like

First an observation… the tabbed formatting in the upper box does not align in even columns in my browser. The same will be true in user’s browsers if their font is different than yours or their tabs display at a width that is different than yours, etc.

Separate/format the stored data using spaces, not tabs.
You can then export the data into a text box that will preserve its formatting.

<pre>
import your text here
</pre>

style the “pre” element to render your output with a generic monospaced font.

If you are not familiar with the <pre> element, you can look it up. There are many references:
http://reference.sitepoint.com/html/pre

2 Likes

Thanks cpradio, but it doesn’t line up like the original, which was tabbed into three columns.

Thanks ronpat. I’ve reformatted the text using single spaces instead of tabs, tried a monospaced font family and used a white-space:pre-wrap style but the formatting is still not working. Also, I cannot justify the text if I use pre-wrap, so I am a bit stuck. For maintenance reasons I don’t want to split up the page to include a separate table for this output.

I think the problem is the difference between source and what a browser displays.

For line breaks it’s as easy as adding a <br> tag.
But there is no such thing as a <tab> tag.

The <pre> tag can work, but as explained, how many spaces a tab should be displayed as often differ.

When I am intent on preserving the alignment, I often output the content in either a <table> or in elements that I target with CSS to give them the look of a table.

1 Like

…which was the basis for my “observation” about cross-browser tab width inconsistencies. The text is indeed in three columns and it is full of tabs.

What font did you use when you wrote the data for the databse? a monospaced font? or a proportional font? What are your tab settings?

Because I cannot find a tab width that renders three columns with a monospaced font, I am inclined to believe that the orignal font was proportional

Please post a “working page” showing the relevant HTML and CSS code for the text box where the text will be displayed. The “working page” should start with a doctype, contain a proper head section and end with a closing html tag. Please include the CSS at the top of the page. Also, please includle a sample of text that you have stored in your database if different from the above.

I don’t have any more blind guesses at the moment.

EDIT: This is a screen shot showing how the text in the top box is entered. The dots are spaces, the double greater-thans are tabs, and cr/lf are carriage returns. That will not render consistently in HTML. AND it will never be fluid.

1 Like

When you say

do you mean the file’s content is stored in a single field?

Or is it multiple rows in a table with fields something like “name”, “description”, “number” ?

1 Like

If and only if the text data is stored in three table columns, which it should be… try extracting the data into an array and populating a table.

The biggest advantage is the table will auto format column widths depending on the maximum string length of a column.

Excel will export data as a comma or tab delimited file. I would think that would be a convenient way to create an uncomplicated text file to store in a database cell. I would also think that a PHP file could read that stored data as an array and create an HTML table which would produce a columnated, fluid container on a web page.

<disclaimer>
Just thinking out loud. No personal programming experience with PHP.
</disclaimer>

But you are correct. PHP can work with CSV (Comma Separated Values) files quite well.

And the delimiter does not need to be a comma. Tabs should work as delimiters as long as there aren’t any in the values.

Thanks again ronpat.

I didn’t prepare the text that was loaded into the database, but I think it was Times New Roman. I don’t think there were any tab settings; layout used the tab key and space bar.

Attached below are the css, HTML and database text files.

News1.cs

body
{
	font-family: Comic Sans MS;
	font-style: italic;
	color: red;
	max-width: 100%;
}

.header
{
	
}

.LogoWrapper
{
	position: relative;
	left: 4.0%;
}

.title
{
	font-size: 2em;
	font-weight: bold;
	position: relative;
	top: -3.5em;
	left: 23.7%;
}

.strap
{
	font-size: 1em;
	font-weight: bold;
	position: relative;
	top: -9.0rem;
	left: 23.5%;
	border-top: 5px solid red;
	width: 53%;
	text-align: center;
	
}

nav 
{
	background-color: white;
	max-width: 100%;
	position: relative;
	left: 15%;
	top: -10em;
	
}

nav ul
{
	#background: red;
	display:inline-table;
	list-style-type: none;
	margin-left: -5em;
}

nav ul li
{
	#background: blue;
	float: left;
	#margin: 0px 5px 0px 5px;
}

nav ul li a
{
	background-color: white;
	text-decoration: none;
	display: block;
	margin: 0px 41px 0px 41px;
	color: black;
	font-weight: bold;
}





nav ul li a:hover
{
	color: red;
}

.welcome
{
	position: relative;
	left: 6.7%;
	top: -6.65em;
	font-size: 1.5em;
}

.table
{
	max-width: 100%;
	#background: blue;
	position: relative;
	#top: -7em;
	left: 25%;
	#max-width: 150px;
		
}

.table tr
{
	#background: green;
	#max-width: 20em;
	text-align: verify;
}

.table .td1
{
	#background: red;
	border: 1px solid black;
	width: 10em;
	
}

.table input
{	
	width: 15em;
	
	
}
.scroll
{
	text-align: verify;
	width: 50%;
	color: black;
	position: relative;
	left: 25%;
	top: -10em;
}


.text
{
	#display: block;
	color: black;
	max-width: 50%;	
	#white-space: normal;
	position: relative;
	top: -10em;
	left: 15%;
	
	#margin: auto;
	word-wrap: normal;
        #white-space: pre-wrap;
        text-align: justify;
}

News1.html.php

<!DOCTYPE html>
<html class = "no-js" lang = "en">
	<head>
		<meta charset ="utf-8">
		<meta http-equiv = "X-UA-Compatible" content = "IE=edge, chrome=1">
		<meta name = "viewport" content = "width=device-width">
		<title>News</title>
		<link rel = "stylesheet" href = "news.css">
	</head>
	<body>
		<header class = "header">
			<a href = "/" class = "LogoWrapper"><img src = "NTLogo.png" alt = "NT Logo"/></a>
			<p class = "title">West Surrey National Trust Centre</p>
			<p class = "strap">In support of the National Trust since 1971</p>
			<nav>
				<ul>
					<li><a href = "index.php">Home</a></li>
					<li><a href = "?news">News</a></li>
					<li><a href = "?activities">Activities</a></li>
					<li><a href = "?membership">Membership</a></li>
					<li><a href = "?contact">Contact Us</a></li>
				</ul>
			</nav>
		</header>
		<div class = "welcome">
			<p>Make the most of your National Trust Membership - join the West Surrey Centre.</p>
		</div>	
			<?php if (isset ($news)):?>					
				<div class = "scroll">
					<?php foreach ($news as $new):?>
						<form class = "form" action = "" method = "post">
					
							<table class = "table">
						
								<tr>
									<td class = "td"><input type = "hidden" name = "id" value = "<?php htmlout($new['id']);?>"></td>
									<td class = "td1"><input type = "submit" name = "news" value = "<?php htmlout($new['Title']);?>"></td>
								</tr>
							</table>
						</form>	
					<?php endforeach;?>						
				</div>
			<?php endif;?>
		<div class = "text">			
			<?php markdownout($text);?>
		</div>	
	</body>
</html>

Database text

{**NEWSLETTER SUMMER 2016**}

From your Chairman

We had an excellent attendance at the AGM which took place on 9th May last.   The Assistant Director of the National Trust, Jim Foy, joined us and updated everyone on the proposed plans for Clandon Park.   He also presented much deserved 30 year service awards to Mary King and Sue Terry for the voluntary work they have done for the Centre.   Jim Foy thanked the audience for the West Surrey Centre's generous donations over so many years.   Mary added that working for the Centre is very enjoyable and wishes that more members were prepared to get involved, for example in organising outings.

We have as usual had some very successful and interesting trips over the past few months.   However, sadly some of the proposed trips did not prove to be so popular and had to be cancelled.   We would welcome your comments on why you think this may have been and also suggestions for the type of trips or events you would like us to arrange.   Howe er, in order for us to continue to do this we are in need of some more volunteers.   In particular we would like to find someone who would be able to possibly arrange some canal trips and visits by members' own transport to local gardens.   If you feel that you could help us in this way please contact me either by telephone on 01252 810708 or by Email saaragwsnt@gmail.com.

Sadly Diana Trayler has resigned as Publicity Officer and we thank her for everything she hs done for the Centre.   We need now to recruit someone who would be prepared to take over this role.   This would entail putting together the Newsletter, ensuring that local National Trust properties have supplies of our membership application forms and distribution of leaflets to advertise our local events.   If you might be interested in doing this please contact me for further information: I will be very pleased to hear from you.

We are lucky to be able to use Hatchlands for parking as Clandon Park will not be available for the foreseeable future.   Please carefully observe the instructions in the Programme and respect that day's gatekeeper.

We are now planning our events for later in the year and will be holding the Autumn Lecture, Coffee morning and Bazaar, Christmas music and Christmas Lunch.   This year these will take place at the Clandon Regis Golf Club which we hope will prove to be a very suitable venue for us.

Regretfully, due to personal circumstances, I have stood down as Chairman and passed the baton to Steve Duckworth.   The Committee have asked me to continue in the role of Vice Chairman.

Saara Graham.

AGM

Over 150 members attended our 46th AGM at Ripley Village  Hall, more than could have been accommodated in the saloon at Clandon Park.   Dame Penelope Keith, our President, ensured that as always the proceedings ran smoothly. Saara Graham, our Chairman, reported that the committee had been busy trying to find an alternative to our beloved Clandon Park.   Clandon Regis Golf Club had been selected as the most suitable venue for the next events such as the Autumn Lecture and Coffee Morning, and she hoped that members would turn up in great numbers.   Saara also thanked the outings organisers for the excellent progamme of outings and lectures.

Our Treasurer, Alan Terry, reported that the Centre had donated ÂŁ30,000 this year to the National Trust; this figure had been boosted by a bequest from Mrs McKay, who had been a member for many years.   At the rear of the hall was a display of thanks you letters from the NT properties we had supported.

The AGM was followed by a very enjoyable talk from Dame Penelope Keith entitled:-

An afternoon with Dame Penelope Keith

“How do you learn your lines?” is a question Dame Penelope has been asked frequently.   “While doing the ironing! This probably is not the case today, as young people don't iron anymore.”

Dame Penelope told us that she had always wanted to be an actress, from drama school straight into repertory theatres. Then followed TV work.   Can you imagine the first TV programmes went out live!   What stress for the actors, totally unknown to the current generation.   She loved doing 'The Good Life' and 'Tyo the Manor Born'.   When asked whether she preferred the stage or the theatre, she replied that when doing one, she sometimes thinks that the other side is better. She is now in the happy position to choose, having recently completed a run at Chichester Theatre where she played the legendary 19th century actress Mrs Patrick Campbell, she is now involved in another TV series of “Hidden Villages” and a new “At Her Majesty's Service” which explores the Officers of the Realm.   How many know the the Duke of Argyll was court marchalled for fraternising with the enemy, because he allows the famous football match at Christmas during the First World War?

Looking into the “Secret Files of the BBC” was an experience she relished.   “If the BBC did not exist, we would have to invent it”.

An Amazing afternoon with our amazing President.,

Donations

Thanks to your continued support, donations to properties were:-    
                                                          Hatchlands Park         Repairs to the Walker Organ                                              2,800
Hatchlands Park         5 octagonal picnic tables                                                2,225
Abinger Roughs          Two Oak Benches                                                          1,200
Ankerwycke              New Benches for Visitors                                                 1,000  
Denbies Hillside        Step to the top                                                            705
Knole                   Gainsborough Painting                                                    2,000
Polesden Lacey 
House                   Mrs Greville's Bed Hangings                                              4,000
Runnymede               Magna Carta Legacy                                                       1,000
Wey Navigations         Digitise the Wey Improvement Scheme
                        document and the Stevens journal                                         1,800
Winkworth
Arboretum               Aerial viewing platform extension                                        2,000
Clandon Park
Appeal                  National Appeal                                                          2,000
Project Neptune         National Appeal                                                          2,000
Stowe Gardens 
Appeal                  National Appeal                                                          2,000
Funds for furure allocation                                                                      5,270
                                                                                                 _____
Total                                                                                           30,000

Web Site

The construction of the WSNTC website nears completion with only a couple of minor items remaining.   The website will then be tested and approved by your Committee before being made available this Autumn.

Centre Events for 2016

Autumn Lecture                  17th October at Clandon Regis Golf Club
Coffee Morning                  10th November at Clandon Regis Golf Club
Christmas Music                  5th December at Clandon Regis Golf Club
Christmas Lunch                 12th December at Clandon Regis Golf Club


Donations of raffle prizes, chocolates, bottles, gifts and books are much needed and will be most welcome in advance of the event.   Home-made cakes and biscuits should be brought along on the day.   Donated items can be given to any of our events organisers  or committee members.   If you need contact details for this or for any other enquiries regarding this event, please contact Saara Graham 01252 810708.   We always need extra hands on th eday and offers of help would also be very much appreciated.

Clandon Park Update

Following the archaeological salvage from the house the NT has considered many plans ranging from leaving it as a ruin to a full restoration.   They have decided to restore the historically significant parts of the house to their 18th century glory whilst also creating a building of relevance to modern times.   The most important rooms on the ground floor will be restored whilst the upper floors will be transformed to create flexible spaces which could be used for exhibitions, events and performances.   A competition will be held later this year to find the right archotect to bring this space alive.   Research around the house has produced a picture of the original 18th century gardens and it is hoped to rejuvenate these.

Lost Property

1 Grey fleece, a pair of lady's black leather gloves, 1 brown knitted glove.   All left on coach trips.   Contact Mary King 01252 713641.   If they are not claimed soon they will go to a charity shop.

I don’t think this is going to easy to do by script alone.

There is HTML being added to the text content, please explain what’s doing that.

It might be possible to add ids/class to the tabular section that could make things easier.

<pre> does work. The problem is not how to “preserve” the formatting but how to “correct” the formatting. (eg. the “Hatchlands Park Repairs” line.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.