Text outline changed when switching Sugarcube version.

Question

Hey.

When I switched from Sugarcube 1.0.23 to Sugarcube 2.18.0. My text, which before was aligned to the left, suddenly goes to the center when the window becomes larger than a certain width-height.

I tried adding text-align: left; under .passage to my css but that didn't seem to work. (I don't know why.)
My knowledge about css is limited, but the cause is definitly the update of the sugarcube version.

(Is something in the standard CSS code overwriting my own?)

Thanks.

Answer 1

If you look at the last 10 lines of the default  HTML structure documentation of SugarCube 2 you will see that there is a div elements with an ID of passages, and this element is where the HTML output generated for the current Passage will be added.

If you look at the last 4 lines of the core-display.css file within the CSS documentation you will see a #passages rule which is assigning a default maximum width to the passages element, it is also assigning an automatic adjusting left and right margin to the same element.

Your issue isn't caused by text justification, it is a result of the #story element becoming wider than the maximum width allowed by the #passages element settings, which in turn causes the size of #passages element's left and right margins to be automatically increased equally, and this results in the #passages element being centred within the #story element.

One simple way to fix this issue is to use CSS (like the following) within your story's Story Stylesheet area to change the #passages element's left margin to zero, that way any difference between the #story element's width and the #passages element's maximum allowed width will only be added to the right margin of the #passages element.

#passages {
	margin-left: 0;
}

 

Comments

Thanks. It works. :) Although I do find it strange that margin-right works in .passage (as well as in #passages) but margin-left only works in #passages.

---

You can assign a margin-left to the .passage classed div, as demonstrated by the following CSS which adds a 2em left margin to that element.

.passage {
	margin-left: 2em;
}

... what you can't do is assign an automatic adjusting margin, because that element doesn't have an assigned width.