HTML/CSS for formatting a document

Hello,

I am designing a health and safety course that has 8 modules. We created the course using Word 2007. When we copy/paste the text over to our course creator (UDUTU), it will strip the Word formatting out. This has casued nightmares for me! I do have the abilty to go into the page and edit the HTML, so when I run into a issue, I will go and play with that. At times the line space will be at 150%, which I thought would be 1.5 spacing.....when it jump it up to 200%, it will read fine. Strange.....

Here is my plan. If I save the document as a .TXT file, then copy paste if over....that will work. The only problem is that I need the text to be 12pt arial with a 1.5 spacing. How can I make where when I paste it over, it will paste with those parameters?

Is this a CSS issue? I haven't a clue...only less hair!

I hope to get some input from 'the masters'.

Cheers,

Dave

 

Does UDUTU put the appropirate semantic tags after striping out the Word Formatting document ?
ie. put <h1> on title, <p> on paragraph etc.
if so, you'd just need to adjust the typography on your css.

I.e

body{
font: normal 12pt/150% Arial, sans-serif; /*this will set the baseline of every text into  12pt with 1.5 spacing, you'll then need to adjust the style for heading,etc */
}

or
p{ /*this will set for only paragraph*/
font: normal 12pt/150% Arial, sans-serif;
}

Code (markup):

 

You can't do past on .txt file with any proprieties, but you can add the proprieties which you want using CSS like this:


font-size:12px;
letter-spacing:12px;

 

i think what wisedave meant by spacing is the space between lines, not between character.
if you use letter-spacing property on css, it will define the distant between character. u should be using line-height instead ( i.e line-height : 150% , setting the line-height 150% of character size ).
on my css code above i set it using the font shorthand ( 12pt/150% means set the font-size to 12 and line-height 150% ). Btw i'm abit itchy about that 12pt setting, using px (absolute size) or em ( relative size ) would be better.

 

Thanks for the input....

You nail it by the way as far as it being the space between line and not characters....nice one!

Can you give me an idea as to why one way (12pt) or another (px) is better or more advantageous? Also, if I follow your question abour UDUTU, if I open a blank HTML screen of where I am going to paste something, it does not have HTML already in there (I.E. body, header, paragraph, etc) If I paste from a Notepad doc, it will put in there the following:

<p>This is a test for formatting.</p>
<p>It is a Notepad document<br></p>



Here is an example of some HTML that I pasted from a Word 2007 file into UDUTU:

<p style="LINE-HEIGHT: 150%"><span style="LINE-HEIGHT: 150%; FONT-FAMILY: 'Arial', 'sans-serif'; COLOR: windowtext"><font size=3>The majority of civil cases are handled by the County Courts. The person who initiates the action is called the claimant and the person against whom the action is taken is known as the defendant.</font></span></p>
<p style="LINE-HEIGHT: 150%"><span style="LINE-HEIGHT: 150%; FONT-FAMILY: 'Arial', 'sans-serif'; COLOR: windowtext"></span></p>
<p style="LINE-HEIGHT: 150%"><span style="LINE-HEIGHT: 150%; FONT-FAMILY: 'Arial', 'sans-serif'; COLOR: windowtext"><font size=3>The claimant sues the defendant who will be found either ‘liable’ or ‘not liable.’ The standard of proof for civil cases is known as ‘the balance of probabilities’ and boils down to the claimant proving that it is more likely than not that the defendant was in the wrong and is therefore liable. If the defendant is found liable, he will usually have to pay damages (a sum of money which acts as compensation).</font></span></p>


I have attached a screen shot of how this looks in the UDUTU format. It does not show 1.5 spacing. I have also attached a screen shot of the Word doc used to copy from.

If I go in and adjust all of the 'LINE-HEIGHT' after the 'span-style' up to 200% instead of the 150%, it will give me the spacing of 1.5 that I am looking for.

Any ideas gurus?

Thanks for the help! I really appreciate it.

-Dave

 

I've just checking out Udutu earlier, but i'm currently out of town and i don't have Ms Office on my Powerbook so i can't really have a decent test case.

About the HTML generated by udutu editor, let me rephrase my question :
- on the udutu editor there's 'Paste from Word' icon on toolbar, after you pasted your content via that tool do you had good html from that editor ( i don't mean full html , we're just want the udutu editor places the tags accordingly, i.e : <p> </p> for paragraph, and <h2> etc for heading and so on).

The html from the notepad is good, that clean html is what we want ( remove the <br/> ). We really dont want lots of unnecessary <span> there.

pt vs px, the pt is actually used for print not for screen.. so browser's interpretation on pt units might varied. However generally it'll go something like this : 1em = 12pt = 16px = 100% .. or so . pt stands for point that used for printing measurement, while px for pixel that used on screen.

ok, back to the case. supposed you already had that neat html ( on udutu editor click on the <> icon on the bottom to show html code of your content )

<p>This is a test for formatting.</p>
<p>It is a Notepad document</p>

Code (markup):

Save that content, and what we need to do is go to 'Administration" tab, then 'themebuilder' sub-Tab . Next for safety you might want to clone your active theme u're going to use. and edited it. There's 2 tabs on theme editor that handle text-style, thats [3] text-style , and [+] optional : Advanced.
The [3]text-style didn't provide option to set line-height, so we'll go to the Advanced method.

Go to its Css Edit, and put this below the body { .. }

p {
 font-weight : normal;
font-size: 12px;
line-height: 150%;
font-family: Arial, sans-serif;
}

Code (markup):

or using shorthanded properties

p{
font : normal 12px/150% Arial,sans-serif;
}

Code (markup):

not sure if 150% or 200% would work best for you. Just use what you like
Save and activate that theme. that would set the styling of your content.

Why we don't want that <span> ( with the inline styling, style="...") on your code ? because that would make creating css pointless. And you would need to adjust the style of every paragraph everytime you update content. The thing is we use css to handle styling of our content, so that we could have neat and semantic html code, and we don't need to adjust the style everytime we update our content.