One other big problem I ran into in this eASLRB venture was images and texts not getting along well. Sort of like images in MS Word!! Text formats would only encompass text and if an image was involved there would be problems with the image being outside the format of the text. Tables work but generally result in a lot of white space in the document.
See
thumbnail on LHS. I have minimal experience with images in the forum, so we'll see what happens. A thumbnail is shown, but the full image has been attached. edit: I see when a thumbnail is inserted, the full image can be shown with a click! Know for next time.
The image pushes out of the example bubble, into the parapragh below, even though the image is between <p class="ASLExample"></p>. The image leaks out. The solution is the "clearfix hack" as I finally found out.
The css portion of this is:
.clearfix::after { content:""; clear:both; display:block; }
By pu
tting in the <p class="clearfix ASLExample"> and having css deal with the image floats, the image stays in the bubble.
This also means on various displays, the text will wrap under the image if necessary. If the image is tall and thin, using clearfix several paragraphs down will keep the text flowing around the image and removing a lot of white-space. Generally, I do this for the Terrain portions of the rules. The image for the terrain can be shown beside multiple (sub)sections of the rules without causing any confusion.
Since clearfix keeps the images in their html container, it also removes the staircase effects when there are several images with text in succession. See the samples below.