PseudoBob Delightus #1 · Feb 13th, 2023 · 3 · ·

　　Floated Content　　

　　Unfloated Content　　

　
As you can see, there is some content at the top of this post. On the left is Unfloated Content - i.e. a regular paragraph. On the right is Floated Content - i.e. text in a right-floated figure tag. I am writing a story where I want these to be aligned, as if they were part of the same line. They aren't. And nothing I do will make them align. Arrrggghhh!

Here's the unaltered text:

[figure=right][u]　　Floated Content　　[/u][/figure]

[u]　　Unfloated Content　　[/u]

If I place this at the top of a chapter document and click "Show Preview", they seem to be aligned well enough. However, if I save the chapter and view it as a reader, it is severely misaligned, such that the Floated Content appears a full line lower than where it should be. Try it out yourself, if you've never encountered this before.

The chapter after clicking "Show Preview"

The same chapter when saved & viewed as a reader

　
(It's entirely possible that the content is aligned properly at the top of this forum post. This is because fimfiction renders bbcode differently in different contexts. Probably the most obvious example is quotes, which are totally different in previews and comments than they are in chapters. It seems floated content is another more subtle example.)

I can get slightly better results by putting a character between these two paragraphs, like so:

[figure=right][u]　　Floated Content　　[/u][/figure]
~
[u]　　Unfloated Content　　[/u]

　
However, that causes the Unfloated Content to appear maybe half a line lower than the Floated Content, like so:

The same chapter, with an invisible character between Floated and Unfloated content

　
I've tried additional characters, small text, headers and line breaks above, other content below, and it seems nothing I try gives me the alignment I'm looking for - the alignment I'm shown when I click Show Preview.

Finally, I suppose all this bother with floated content is not essential - I could just make the Floated Content part of the Unfloated Content line, like this:

　　Unfloated Content　　　　　　　　　　　　　　　　　　　　　　　　　　"Floated" Content　　

　
... but, since they are a fixed width apart, it's likely that this will cause very ugly wrapping issues on readers with lower width settings than me, or leave the "Floated" Content as an island in the middle of the line if the reader has higher width settings.

So, at last I summon ye, underappreciated bbcode wizards and erudite horseword experts - help me! For the good of the nation, for the good of the world, for the good of... my dumb story! Also, I'll give you a cookie.

(Thanks for reading, at least)

Shakespearicles

Shakespearicles #2 · Feb 13th, 2023 · 1 · ·

Reply

Thank you for this.

Aroddo

Aroddo #3 · Feb 13th, 2023 · 2 · ·

Reply

Can't be done. Not with the bbcode on this site. You'd need stylesheets (css) to display two containers on the same line.
You'd need either stylesheets or tables enabled.

PseudoBob Delightus

PseudoBob Delightus #4 · Feb 14th, 2023 · 1 · ·

Reply

7802053
Well, I found this response profoundly unhelpful at first. What do you mean native bbcode can't display two containers on the same line? I'm doing it right there in the OP! It just doesn't work the way I expect/want it to!

However, my frustration turned me back to the drawing board, and in trying to prove you wrong, I found a solution. So, genuinely, thank you! I might not have thought of the following without your help.

7801910
I don't know if you've had this issue before - I didn't expect anyone had ever had this issue before - but either way, I hope this helps.

Solution

The solution is to float both left & right blocks, rather than just the right one. Kinda obvious in hindsight!

This also doesn't require any nonsense with invisible characters acting as spacers.

　Right Content　
　Left Content　

[figure=right][u]　Right Content　[/u][/figure]

[figure=left][u]　Left Content　[/u][/figure]

　
I'll also share some experimentation below that might be useful, if you want to use this stuff in your own stories/posts. Keep in mind, however, that these are silly, barely-used formatting tricks, and the site FAQ on BBCode warns us against "trying to be clever". That said, I do be a clever boy sometimes, so I'll be having my fun with it.

Surrounding Paragraphs

It's important to understand how these elements interact with surrounding text.

Some text above.
　Right Content　
　Left Content　
Some text in between the floaters.
This looks better when centered.
Three unbroken lines fit here.
Text below.

Some text above.

[figure=right][u]　Right Content　[/u][/figure]

[figure=left][u]　Left Content　[/u][/figure]

Some text in between the floaters.
This looks better when centered.
Three unbroken lines fit here.
Text below.

Some text above.
　Right Content　
　Left Content　
If the lines are separate paragraphs,
Only two will fit here.
Text below.

Some text above.

[figure=right][u]　Right Content　[/u][/figure]

[figure=left][u]　Left Content　[/u][/figure]

If the lines are separate paragraphs,

Only two will fit here.

Text below.

Multi-line Spacing

The multi-line figures below are functional, but they take up more vertical space than expected. Can you guess why?

(Hint: This will occur in any context, it's just much more annoying when figure tags are involved)

Some text above.
　Right Content　
right!
　Left Content　
left!
Text having fun in the middle,
staying away from the text below it.
Surely nothing will go wrong...
Allow me to introduce myself.

Some text above.

[figure=right]
[u]　Right Content　[/u]
[center][b]right![/b][/center]
[/figure]

[figure=left]
[u]　Left Content　[/u]
[center][b]left![/b][/center]
[/figure]

Text having fun in the middle,
staying away from the text below it.
Surely nothing will go wrong...

[i]Allow me to introduce myself.[/i]

　
The cause of this is the [center] tags. It appears Fimfiction considers a change in text alignment to also be a change in paragraph. Probably a very reasonable rule in 99.999% of cases, but it's somewhat unexpected here. We can fix that by making the alignment apply to all the figure contents.

Some text above.
　Right Content　
right!
　Left Content　
left!
Text having fun in the middle,
staying away from the text below it.
Surely nothing will go wrong...
　
Alas! I have been foiled!

Some text above.

[figure=right][center]
[u]　Right Content　[/u]
[b]right![/b]
[/center][/figure]

[figure=left][center]
[u]　Left Content　[/u]
[b]left![/b]
[/center][/figure]

Text having fun in the middle,
staying away from the text below it.
Surely nothing will go wrong...
　

[i]Alas! I have been foiled![/i]

I'm sure there's much more experimentation to be done and edge-cases to be found, but I'll leave it at that for now. I put a slightly shortened version of these posts on my blog to make it more discoverable - I'll keep that updated if anything else comes up.

Aroddo