Jump to content

How to convert text to html?


Recommended Posts

Hi guys,

I have a new little question and need some advice. I want to convert my text file/s into a html file what then also must be shown like in text file.

Example of a test text

This is a test.

Yes, it is!

Right here and now.

Now if I try to save this text as html and load it into tools what can load html then its not showing like that its showing like this...

This is a test. Yes, it is! Right here and now.

...without the line breaks CRLF etc you know. I think problem are the missing html tags. So what can I do in this case and how to convert my txt or any other file with plain normal text into html? Any tools maybe I could try?

greetz

Link to comment

Very good and thank you guys. :) Now I get it work as I wanted and looking for.

greetz

Link to comment

Hi again,

I got one more question about that HTML tags. So if use the <pre> </pre> tags and put text into between them then the text looks not same as the other text in br tags. The text in br tags is more bold/er somehow etc. Its just not looking same.

Example:

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>


<pre>
234 not br
234 not br
</pre>

<br>234 yes br<br>

Just paste this into..

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_br2

...and run and now you see how it looks and not same. So I want that the text between pre tags also looks same like the text between br tags. How can I do that? Seems that there is used a other font style or so when using pre tags. But why?

greetz

Link to comment

Text shown in a pre tag uses a fixed width font as default so will not match normal text unless you style it

Default values...

pre {
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0;
}

 

  • Like 1
Link to comment

Hi NOP,

and how to style all the text in the pre tags? So normaly I'am using color font etc on top of html....

<body  style="background-color:#F4ECD8; color: #5B4636; font-family: Helvetica,Arial,sans-serif; width: 90%; margin: 0 auto; line-height: 1.5em; font-size: 18px; padding: 0px 0 50px 0;" >

...so how to make it work (font) in pre tags? Is that doable?

greetz

Link to comment

It's not really good practise to inline all your CSS but you can do if you prefer

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>


<pre style="background-color:#F4ECD8; color: #5B4636; font-family: times, serif; width: 90%; margin: 0 auto; line-height: 1.5em; font-size: 18px; padding: 0px 0 50px 0;">
234 not br
234 not br
</pre>

<br>234 yes br<br>

 

  • Like 1
Link to comment

Thanks but this also dosent work. :(

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>
<body  style="background-color:#F4ECD8; color: #5B4636; font-family: Helvetica,Arial,sans-serif; width: 90%; margin: 0 auto; line-height: 1.5em; font-size: 18px; padding: 0px 0 50px 0;" >

<pre style="background-color:#F4ECD8; color: #5B4636; font-family: times, serif; width: 90%; margin: 0 auto; line-height: 1.5em; font-size: 18px; padding: 0px 0 50px 0;">
234 not br
234 not br
</pre>

<br>234 yes br<br>

greetz

Link to comment

It changes the font for me although I chose a different font, what is it doing for you?

 

You can also change the default style sheet for your browser instead of changing inline if it's easier for you?

  • Like 1
Link to comment

No I need to setup the html page itself only without doing something in browser. :(

Link to comment

It's working for me...

CourierNew.JPG.90928eb94777897423737b96ee372720.JPG

helvetica.JPG.c7e087d6c76fdcff27f1ca4027280ac9.JPG

wingdings.JPG.f1fc4c92dd3609c1cfd78549a625fe53.JPG

 

As you can see the font is changing

If you want them to match then check what your browsers stylesheet has them set to and use the same in your new html file

Edited by NOP
  • Like 1
Link to comment

Hi NOP,

seems you are right. I think I was using a wrong font before. Now I tried this...

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>
<body  style="background-color:#F4ECD8; color: #5B4636; font-family: Helvetica,Arial,sans-serif; width: 90%; margin: 0 auto; line-height: 1.5em; font-size: 18px; padding: 0px 0 50px 0;" >


<pre style="background-color:#F4ECD8; color: #5B4636; font-family: Helvetica,Arial,sans-serif; width: 100%; margin: 0 auto; line-height: 1.5em; font-size: 18px; padding: 0px 0 50px 0;" >
234 not br
234 not br

</pre>



<br>234 yes br<br>

....which seems to look same now. So then I can use this as template to enter some text between pre tags.

greetz

  • Like 1
Link to comment

You could reduce duplicate code and improve readability by putting all your css in the head section

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style type="text/css">
.defaultCss {
	background-color:#F4ECD8;
    color: #5B4636;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0 auto;
    line-height: 1.5em;
    font-size: 18px;
    padding: 0px 0 50px 0;
    }
.bodyCss {
	width: 90%;
    }
.preCss {
	width: 100%;
    }
</style>
</head>
<body class="defaultCss bodyCss">
<pre class="defaultCss preCss">
234 not br
234 not br
</pre>

<br>234 yes br<br>

And then if you want to change any settings then you just edit the default css instead of every single inline css

Or you could create a separate css file where all your style settings are stored which leaves your html much smaller

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<pre>
234 not br
234 not br
</pre>

<br>234 yes br<br>

styles.css

body {
	background-color:#F4ECD8;
    color: #5B4636;
    font-family: Helvetica,Arial,sans-serif;
    width: 90%;
    margin: 0 auto;
    line-height: 1.5em;
    font-size: 18px;
    padding: 0px 0 50px 0;
    }
pre {
	background-color:#F4ECD8;
    color: #5B4636;
    font-family: Helvetica,Arial,sans-serif;
    width: 100%;
    margin: 0 auto;
    line-height: 1.5em;
    font-size: 18px;
    padding: 0px 0 50px 0;
    }

This is just a suggestion which might make things easier especially if you have large html files

  • Like 1
Link to comment

Thanks again for the infos NOP. :)

Just have one more question. So in this html field on right side you see the results. Now I did notice that there is a difference when trying to select anything via mouse doubeclick. Somehow its working else as in Notepad file.

Example: Enter this time below in html field and notepad...

23:12:56

...and now doubleclick on it. In Notepad you get selected all and in html field just 23 or 12 or 56 or just the ":". Why? Is it doable in the html stuff / tag to set anything what makes it possible to get the entire string / time selected like in notepad? Just wanna know why it gets handled else and how to make it same.

greetz

Link to comment

I can't reproduce your problem

Wherever I try double click it selects part numbers only, triple click will select all which is normal windows behaviour

But I'm unsure which browser you are using and different browsers or apps might have different click events

In Firefox about:config there is a setting which might help

layout.word_select.stop_at_punctuation

 

Edited by NOP
  • Like 1
Link to comment

Hey NOP,

so the tripple click does select the entire line. :( Seems to work in Firefox if I change that flag to false you told me. :) Good to know. Problem is I'am using a extern tool which seems to use or have internet explorer etc. How can I setup or change this for IE? In Internet Options Panel anywhere maybe? Do you know that?

greetz

Link to comment

I don't use or have IE installed and have no idea of it's settings sorry

You will get different results using different browsers / apps. Some use their own click handlers so if there is no setting for it, you need to find an alternative or ask the developer to add the option

  • Like 1
Link to comment

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
×
×
  • Create New...