[SOLVED] I'm trying to set the width of an html page

LinuxPoser777 · 12-18-2022, 09:25 AM

I was on an Internet tutorial and I noticed the following code to set the width of an element on a webpage and it nicely causes the text to wrap inside the box which is what I want but I want it throughout the entire page. I want the entire webpage to have a fixed width of A4 paper. How can I do that? And why does my code not work?
Their code works to set the width of an element but I want the code to apply to the entire page as A4 size (the width of A4, not the height though).
I'm new to html and I need this behavior for a document conversion that I'm doing that is going nicely but for the width of the html stage is not right. Everything else is pretty much ok except that the text looks dumb. I just need the text to wrap at the width boundary of an A4 page or thereabouts.

I'm converting a .tex document to .odt. I've found that the best solution so far is to first convert it to html because the other converters incorrectly map a vector symbol into a rightarrow. I can try to edit those at some stage - I will try, but for now, I am taking the html avenue as the best approach since the html document looks almost perfect so far. The other ways create ugly documents. Ways such as make4ht oolatex, etc.. I know these other ways have intermediate stages but I haven't had time to open up the .tmp files and see why the \vec in .tex becomes rightarrow - kind of dumb isn't it?

So the below code works on a website I found it on, the text wraps nicely but it only does it for the element of the div. Can we make the div apply to the entire page?

<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the height and width of an element</h2>

<div>This div element has a height of 100px and a width of 500px. These words word-wrap in the element nicely.</div>

</body>
</html>

My code below does NOT work:

<!DOCTYPE html>
<html>
<body>
width: 210mm;
height: 297mm;
<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html

Thank you.

boughtonp · 12-18-2022, 09:55 AM

CSS is a series of rules inside style tags (or in a separate file referenced by a link tag).

Each CSS rule consists of a selector, then a series of property declarations enclosed in braces (aka "curly brackets").

Your code has neither of those things.

teckk · 12-18-2022, 10:32 AM

Simple example:

Code:

<!DOCTYPE HTML>
<html lang = "en">

<head>
    <title>Stuff</title>    
    <style>
        h1, h2, h3 {color: black; font-size:22px}
        table {cellpadding: 3; width: 210mm; height: 297mm;}
        td {align: left; vertical-align: top; width: 33%}
        td:nth-child(1) {background-color: lightpink}     
        td:nth-child(2) {background-color: lightblue} 
        td:nth-child(3) {background-color: lightgreen}
        a {font-size: 16px; background-color: #FFFF99; color:darkblue}
        a:link:nth-child(odd) {background-color: white; color: darkblue}
        a:visited {background-color: yellow; color: darkblue} 
    </style>
</head>

<body> 
<table> 
<tr> 
    
<td>
<h3>Reference</h3>
<a href="http://www.hardwarebook.info/" >The-Hardware-Book</a>
<a href="http://www.tomshardware.com/" >Toms-Hardware</a>
</td>

<td>
<h3>Linux</h3>
<a href="https://www.linuxquestions.org/questions/" >LinuxQuestions-Forum</a>
<a href="http://www.archlinux.org/" >Arch-Linux</a>
</td>

<td>
<h3>BSD</h3>
<a href="http://www.freebsd.org/" >The-FreeBSD-Project</a>
<a href="http://forums.freebsd.org/" >The-FreeBSD-Forums</a>
</td>

</td>
</tr>
</table>
</body>
</html>

Turbocapitalist · 12-18-2022, 10:47 AM

Quote:

Originally Posted by LinuxPoser777

I want the entire webpage to have a fixed width of A4 paper. How can I do that? And why does my code not work?

You can make an A4 sized document by making a PDF with A4 formatting or else use LaTeX likewise.

HTML is not for setting fixed width, fixed height, or even fixed type sizes. The client controls all of that, especially with width and height of the window, and has to. So don't spend too much time worrying about the formatting and layout. Concentrate on the content.

michaelk · 12-18-2022, 11:08 AM

Code:

width: 210mm;
height: 297mm;

As posted your css code needs to be within style tags similarly to the posted examples. For the entire page not just a table I believe the following should work.

Code:

<style>
  html, body {
      width:  210mm;
      height: 297mm;
  }
</style>

dugan · 12-18-2022, 12:26 PM

I don’t think you should be trying to convert documents in a format designed for typesetting into a format that isn’t. TeX is a typesetting format. ODT and HTML are not.

What exactly is the use case here?

LinuxPoser777 · 12-18-2022, 01:02 PM

[QUOTE=michaelk;6398715]

Quote:

width: 210mm;
height: 297mm;[/code]
As posted your css code needs to be within style tags similarly to the posted examples. For the entire page not just a table I believe the following should work.

Code:

<style>
  html, body {
      width:  210mm;
      height: 297mm;
  }
</style>

Thank you, your idea works very well as it makes the text automatically wrap. Now I can start with an html file that doesn't
look so dumb - it looks more like a book or article should. Below is the code so far and I've also shown you a snippet that
represents the actual beginning of the file I want to put your idea into. Where do I put the code in that file which references
some style sheets but otherwise is just an XHTML file. Are they different (XHTMLs?)?

[code]

<!DOCTYPE html>
<html>
<style>
html, body {
width: 210mm;
height: 297mm;
}
</style>
<h1>This div element has a height of 100px and a width of 500px. These words word-wrap in the element nicely.</h1>
</html>

Output in browser:

This div element has a height of 100px and a
width of 500px. These words word-wrap in the
element nicely.

Now, when I put it into my xhtml document, do I simply put the style right after the html tag - I'm not sure where
to put your code as I tried it once and I had troubles - not sure why?

Here's the beginning of the actual file I will apply your changes to:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Title</title>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<meta name="generator" content="TeX4ht (https://tug.org/tex4ht/)">
<meta name="originator" content="TeX4ht (https://tug.org/tex4ht/)">

<meta name="src" content="TheTexFile.tex">
<link rel="stylesheet" type="text/css" href="TheTitle.css">
</head>
<body>
<div class="maketitle">
<h2 class="titleHead">The Title As Heading</h2>
<div class="author"><span class="cmr-12">The Author,
United States</span><span class="cmr-12"> </span><br
class="and">
<span class="cmr-12">The Other Author</span></div>
<div class="date"><span class="cmr-12">February 24, 2019</span></div>
</div>

I would venture a guess that I can simply replace the </body /body> section with your code with the word style.

This below code preamble works beautifully, the output of the file is gorgeously book-afied now. Thank you so much!
I am not giving you the actual file just a proxy of what it was - in the actual file, the text lines are hundreds of characters
long and wrap beautifully now. Wow! It really works to add only one tiny piece of code and I can leave the body closing
brace untouched. Beautiful, you can claim the solution if you want to.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Title</title>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<meta name="generator" content="TeX4ht (https://tug.org/tex4ht/)">
<meta name="originator" content="TeX4ht (https://tug.org/tex4ht/)">

<meta name="src" content="TheTitleFile.tex">
<link rel="stylesheet" type="text/css" href="TheTitle.css">
</head>
<style>
html, body {
width: 210mm;
height: 297mm;
</style>

It's a shame, because of copyrighting, I cannot show you the actual file, but you just have to imagine a document with many paragraphs
all laid out in the html file as long lines of text that are now transmogrified by your A4 code into being many shorter lines rather
than a few longer lines which looked incredibly dumb. It looks great now. So you've proven that an html file CAN look like a book
or article. It really looks very nice now. The other posters who are supposedly gurus or whatever don't have any idea, that's all.

And this means that I don't have to do something weird just because it's an xhtml file rather than a simple html file - it's still
behaving like an html file as far as the programming language (the layout language) goes. I don't know html very well yet.

LinuxPoser777 · 12-18-2022, 01:20 PM

Quote:

Originally Posted by Turbocapitalist

You can make an A4 sized document by making a PDF with A4 formatting or else use LaTeX likewise.

HTML is not for setting fixed width, fixed height, or even fixed type sizes. The client controls all of that, especially with width and height of the window, and has to. So don't spend too much time worrying about the formatting and layout. Concentrate on the content.

Do me a favor? Beat a hasty retreat, I just reported your post, so-called Guru that you're not!

Turbocapitalist · 12-18-2022, 01:29 PM

Screens are not paper, get over it. You're looking for technical characteristics which are not part of HTML but will be met by PDF or a type setting program like LaTeX: Appearance and layout in web pages is fluid by design, since day one, and your visitors are not all using the same resolution, dimensions, or even aspect ratio for either their screens or their web browser windows and tabs. Even if they were, they will not have the same use-cases or the same vision abilities. Don't take my word for it though, start instead with the basics of usability design rather than making an abomination (at best) or flipping out to distract from your mistake.

LinuxPoser777 · 12-18-2022, 01:36 PM

Quote:

Originally Posted by Turbocapitalist

Screens are not paper, get over it. You're looking for technical characteristics which are not part of HTML but will be met by PDF or a type setting program like LaTeX: Appearance and layout in web pages is fluid by design, since day one, and your visitors are not all using the same resolution, dimensions, or even aspect ratio for either their screens or their web browser windows and tabs. Even if they were, they will not have the same use-cases or the same vision abilities. Don't take my word for it though, start instead with the basics of usability design rather than making an abomination (at best) or flipping out to distract from your mistake.

What? Did you read my post above? I'm only using the html as an intermediate stage, no user is going to read it unless I include it - actually, it's nice
enough to include. It will print out or be converted to a typesetting program fine.

Please understand the problem before you post something that is just wrong. I've already flagged one guy - do you want the same?

I'm getting tired of hearing from people who just don't have the right concept of what I just did.

Please, enough of the arrogance. There is nothing wrong with viewing the html page as it is now, even though
it is not the final stage of the long process I have started. I haven't explained to you.

But don't to trying to get people banned by your harassment.

Turbocapitalist · 12-18-2022, 01:49 PM

The process, as you have incompletely explained it so far, indicates that HTML is the wrong tool for the job. As mentioned by others, TeX is typesetting while HTML and the OpenDocument Format are not. More information is needed about the original document's structure.

dugan · 12-18-2022, 03:14 PM

Report if you want to, but keep in mind that there’s already a moderator participating in this thread.

Okay, sure. Maybe I’m wrong. How are your end-result ODTs actually looking?

LinuxPoser777 · 12-18-2022, 03:17 PM

Quote:

Originally Posted by Turbocapitalist

The process, as you have incompletely explained it so far, indicates that HTML is the wrong tool for the job. As mentioned by others, TeX is typesetting while HTML and the OpenDocument Format are not. More information is needed about the original document's structure.

The problem has been solved, the thread can go into dormancy for all I care. A guy named michaelk suggested a method and I put his code word for word into my html file and it worked. Please read the posts before you post, particularly, if you didn't suggest a solution. There was a problem to solve and it's solved.

astrogeek · 12-18-2022, 03:34 PM

@LinuxPoser777: Please see the LQ Rules for appropriate use of these forums. In particular:

Quote:

* Personal attacks on others will not be tolerated.
* Flame Wars will not be tolerated.

Others have given you good advice which you may not fully understand until you have a better understanding of HTML, XHTML, CSS and other web and document formatting and markup languages. If you will consider what has been posted and try to understand the advice offered you may save yourself a great deal of time and frustration along the way.

HTML and XHTML are markup languages for specifying document structure, not document formatting. Of themselves they are not suited to specifying a document for typeset output.

CSS is a language used to specify styles and formatting of the structural elements defined by your HTML or XHTML document, but is still subject to, and must work with constraints imposed by the device on which the document is to be displayed, and as such is not itself suitable for strict typesetting of documents.

TeX/LaTeX/Postscript and PDF (which derives from them), are typesetting markup languages which give you total control over the appearance of your document.

You should carefully consider what your ultimate goal is and choose the markup language most suited to the task. If your intended "end product" is a web page, then HTML/XHTML and CSS are the right choice. If your goal is to produce a typeset article or book which will look the same to all users, then you will need something else such as TeX/LaTeX or PDF, which is the point others have tried to make.

So the starting point is to explicitly define your intended endpoint.

Good luck!

LinuxPoser777 · 12-18-2022, 08:03 PM

Quote:

Originally Posted by dugan

Report if you want to, but keep in mind that there’s already a moderator participating in this thread.

Okay, sure. Maybe I’m wrong. How are your end-result ODTs actually looking?

They probably won't look good unless I first convert the html to doc as the engine of Libre Office Writer does NOT yet seem to
have enough XML markup per the nice engine that runs in HTML right now. They map the \vec directive of tex to rightarrow - not
good. And when I fix the problem and replace rightarrow with vec, the arrows are too thin and don't look as good as the html
file or the original tex outputted. This is why I ask people what is inside the converters? What are they TRYING to do? I might
have to intercept the process which by the way, leaves files on my PC which I could read. I use htlatex to produce the html
file and it does a good job although I have to slightly edit the html file (very slightly - I just have to add a style for the
sizing of the page width so it looks nice). But if I use the following:
1. latex filename.tex
2. bibtex filename.aux
3. mk4ht oolatex filename.tex

The odt file doesn't look good but I have not tried to look yet at the intermediate files or intercept anything with the markups.
Maybe the process can be made to work somehow but I wonder how Libre Office represents the markup - I know it used markup but
does it do it really well, maybe not.

https://www.w3.org/Math/draft-spec/m...er3_presm.mrow

I will probably struggle some, but the HTML looks super nice. I don't yet feel like springing for the $52.00 a guy just offered
me to sell Microsoft Office for. I am so worried that the moment I open the document in Writer and try to turn it into
an odt file that the same problem with vectors will happen again.

I have already started a .tex version of my book in anticipation that the odt problems will still be here. But if I can convert
the html file somehow, my problem would be solved and I could then go back to editing the book exclusively in Libre Office Writer, but
currently I am hedging and starting a new book in Latex, using various tools such as Geany and TexWorks and TexLive. I used to
do all of that on Windows years ago when I did it more often, but now I can also do it on Linux which is nice since that's where
I spend a lot of my time. I also use Windows still and still program for Windows, but I also have to program for Android, IOS, and Linux.