Game notes max width

Cernel

Is it possible to fix a max width limit for the game notes and how do you do it?

I have this code:
<body bgcolor="776644" align="center" width="1200px">

That fixes the minimum width, adding a scroll bar when under 1200 width, but how do you avoid the notes display being possibly widened over 1200 pixels, instead?

Cernel

@Cernel I mean, beside turning the notes into a collection of images, like TWW.

redrum

@Cernel I think what you want is to create divs/tables/etc inside the notes HTML body and then set their width and have them centered. That would make it so even if you drag the window wider than say 1200 pixels, the text inside those would be limited to whatever width you set.

Cernel

@redrum So basically you are saying that it is not possible to set a max width for the entire body?

redrum

@Cernel Well you can set width and/or max-width on the body element but I'm not sure that will achieve what you want.

Cernel

@redrum So, look, I have this code:

<property name="notes" value="<body style="background-color:776644" width="1200px">aaa"/>

And this is what I get:

That is 1560 pixels, not 1200 pixels (exactly 30% more). Why is it giving me 1560 pixels, instead of 1200?

So, contrary to what I said, I believe that "width" is at least seen by the program, but fixed at a higher value than it should. I previously said that the body wideness was not limited at all, just because I didn't enlarge notes enough to actually hit the 1560 pixel maximum wideness.

Any explanation for this. Why is the program giving me 30% pixels more than I ask for?

Also, I've tested that if I set it at a lower level, so to get the wanted wideness after the program adds the 30%, then I cannot have images spanning the whole wideness, as the width will be ignored if, for example, I have an image 1200 pixels wide and I set the width at less than 1200, no matter if the program actually gives me more than that (while the image is correctly drawn at its actual wideness).

This is the same both for the release and the prerelease.

redrum

@Cernel I think what you are seeing is that TripleA's panel/window for the game notes probably is being set to a fixed width (that you can drag to adjust) but the actual HTML area is just the brown portion. I'd have to look at the code for the game notes window to check though. Its just like your internet browser if a page has a small width, it doesn't limit the size of the browser window.

Most likely what is better is to just have the HTML body take up the whole area and then add a div inside the is centered and has a fixed width.

Here you can see essentially how this forum is rendered with a width on the posts in the middle and extra space on the outside:

Cernel

@redrum said in Game notes max width:

@Cernel I think what you are seeing is that TripleA's panel/window for the game notes probably is being set to a fixed width but the actual HTML area is just the brown portion. I'd have to look at the code for the game notes window to check though. It just like your internet browser if a page has a small width, it doesn't limit the size of the browser window.

No, it is not. This is what I get if I set it at 100 pixels (that is, I get 130 pixels, instead (it always gives me 30% more pixels than I ask for)):
<property name="notes" value="<body style="background-color:776644" width="100px">aaa"/>

And this is what I get without width (that is also what I get if I set the width at any less than 1200 pixels, but have a 1200 pixels wide image, thus the program ignores the width):
<property name="notes" value="<body style="background-color:776644">aaa"/>

Most likely what is better is to just have the HTML body take up the whole area and then add a div inside the is centered and has a fixed width.

Isn't this basically a hack? Also, I've a background, so I would need to create background over backgrounds to have it look decent.

Basically the problem is that I cannot have a 1200 pixels width while also having a 1200 pixels wide image. If I would not have the image, I could hack it by setting at 1/1.3 the wanted wideness, since it always give me 30% more, apparently. Though, I would be still wary of the fact that maybe on some other terminals you don't get the plus 30%.

Can you please substitute whatever game xml with this code:
<property name="notes" value="<body style="background-color:776644" width="100px">aaa"/>
and see if it gives 130 pixels, instead of 100 pixels, to you too? Or just post a screenshot here and I will see.

Cernel

@Cernel Also I've tested that it gives me 30% more wideness also if I set it for a division ("div").

redrum

@Cernel So here's an example of what I think is the best way to have an image (as well as a consistent background color regardless of window size:

Here is the first part of the HTML:

<body bgcolor="DADADA" align="center">
<div style="text-align: center;">
<br>
<img src="mapScreenshot.png"/>
</div>
</body>

So essentially it sets a background color for the whole notes window to gray (DADADA) then has a div that is centered within the window that holds the image and text. That way if I increased the window size it stays centered:

Is that not what you are trying to achieve? Or are you trying to do something else?

Cernel

@redrum That is basically a hack in which you fix infinite wideness, then have all centred, then manually manage line breaks as to assure that no line is going to extend more than it should.

I just want to have a fixed wideness, like in whatever rulebook pdf, like the notes of TWW, but without going images only, to get that. Width works, both for min and for max, apparently, were it non that it is set at 30% more than I ask for, that I see now it is the only issue I have.

That means I want the background too extending for the wanted wideness, no more, also, I don't want to have to take care manually to put every single linebreak, not to exceed the wanted wideness, and, as I said, I tested that the "div" wideness is 30% more too, so, in your example, that would not work, as well, if I have a single line of text that is more than that, unless all text is centred, which I don't want to (I also want not centred text, while all image are centred, as well as some text), and I take care never to have too long lines, by manually managing linebreaks (which I don't want to, either).

So questions are you getting this 30% pixels more than set too and, if so, why is that, and can the program be fixed as taking the actual pixels you are setting?

Cernel

@Cernel I know I could solve the problem of having centred and not centred text by turning all notes into a single table, but I've also actual table, so that would get really messy, and it would be a hack anyways.

Really the only problem is this issue that every time you set a pixels wideness it gives you 130% of what you get. Why???

redrum

@Cernel Ok, so you want a fixed width in the center portion so you don't have to put lines breaks. Didn't we achieve that in WaW? Something like this shows not having a fixed width in the first line and having a fixed with in the bullet points so they wrap without line breaks?

      <br>(if "Add Elite Marine ArmoredCar Mot.Inf Mech.Inf Adv.Fighter Stuka B.Transport" is deselected at start game, Stuka are substituted with Fighter, in the setup)
      <br>
      <br>
      <br>
      <b>Capitals (shown by flags <img src="flags_small.gif"/>)</b>
      <br>
      <div>
         <ul style="text-align: left; display: inline-block; width: 400px">
            <li><b>Unconditional Surrender</b>: Victory is achieved at any moment the enemy alliance owns only 5 capitals or less (original plus conquered) (the Victory Notification is after Combat).</li>
            <li>Most allied nations (excluding Anzac and China) have multiple capitals.</li>
            <li>If and when any of these capitals are captured, the attacker gains all of the PUs of the owner nation.</li>
            <li>Nevertheless, the defender can collect income again and produce, as long as it holds at least one of its capitals.</li>
            <li>Exception: Russians may still collect income and even produce after all of its capitals are captured.</li>
         </ul>
      </div>

Cernel

@redrum That would not solve the issue of the background extending more than the wanted wideness but is it possible to have those block without them being all "bullet points"?

Basically, when you have this text:

For each territory owned at the start of the turn, a maximum of 1 new Bunker can be purchased/placed per turn (no stack limits) (bunker placement is additional to normal placement, if a Factory is present).

How can you assure it being as wide as those inline blocks, without putting a line break manually, and avoiding starting all the way to the left without being centred?

Cernel

@redrum Also, those are wrong too, by the way. Just noticing now, but the setting there is 400 pixels wide, while they appear to be 520 pixels wide actually, or anyway surely more than 400 pixels. Why TripleA cannot set the pixels correctly as defined in the file?

(EDIT: I wrote 560 pixels wide, but I meant 520 pixels wide; that was a typo)

redrum

@Cernel I believe if you put that text in a div and set a similar style to the ul it should work.

Not sure if that is exactly 400 pixels or not. Guess I just assumed that it was. Not sure the easiest way to figure out how many pixels it is displaying as.

Well my screen is 1920 wide and this fits across it 4 times and a little left over:

Cernel

@redrum said in Game notes max width:

@Cernel I believe if you put that text in a div and set a similar style to the ul it should work.

I guess I'll have to try that (basically a hack, as I see it), if this absurd thing of having +30% pixels than set is not going to be fixed. Or turn all into an image, using a better external program to display the html as coded, then adding it as an image in the game notes, but not a fan of that. I'd prefer if the TripleA notes themselves work as they should.

Not sure if that is exactly 400 pixels or not. Guess I just assumed that it was. Not sure the easiest way to figure out how many pixels it is displaying as.

Here you go, that is certainly not 400 pixels wide (just taking the image you posted):
20200227_redrum_01(01).png

Cernel

@redrum said in Game notes max width:

Well my screen is 1920 wide and this fits across it 4 times and a little left over:

This image is 489 pixels wide. Also you may notice that those things are more to the right than the actual centre, I guess because some space is left before the big dots. If you take that into account, it becomes exactly 520 pixels wide.

Cernel

@Cernel I've obtained the 520 because it extends of up to 260 pixels rightwards from the centre, thus I've extended of the same amount leftwards. It extends less than so to the left, instead. Anyways, those quadrangles are centred and, for sure, it doesn't fit in the 400 pixels wide one, anyways.

520 pixels would be exactly 30% more pixels than 400, that is what I'm getting in all cases.

So, it seems clear to me that TripleA has this major problem of setting any pixel dimensions to 30% more than you set. I guess, so far, mapmakers just set it and, then, look if it is good enough, instead of assuring it being of the wanted dimensions. It would be good if you can actually give a wanted layout to your rulebook, without having to go the TWW way and have it as all images. I can assure that if you call an image, instead, the image is not increased by 30% (of course, overwise the notes of TWW would be all blurred, for example, as well as whatever image).

Practically, if you have a centred image that is 400 pixels wide and, under it, a division that is centred and supposed to be 400 pixels wide too, the image will be 400 pixels wide, while the division will be 520 pixels wide, screwing up the relative layout, other than the absolute one.

redrum

@Cernel Hmm. Honestly I have no idea. I don't think TripleA does anything beyond using the standard Java HTML rendering so if its displaying 30% wider I don't have a clue to why that would be.

@RoiEX @LaFayette Any thoughts here?