On March 31st, after about a month's work on a secret project, Silk Rose and I published a 1 chapter story titled "This Story Will Explode In 24 Hours". Over the course of those 24 hours the story was updated on a strict schedule, until finally, after a long wait at zero hours and zero minutes, the exploding story...
Fimfiction does not allow users to upload images, other than avatars and story covers. This has resulted in a need for external image hosting. However, there seems to be no high quality, detailed, or up to date source of information on the subject.
Below is a slightly shortened version of a problem & solution I posted on The Writers' Group.
The Problem
Floated Content
Unfloated Content
As you can see, there is some content above this paragraph. 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!
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 blog 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'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.
(And then I begged for help.)
The 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 for now, I'll leave it at that. I can always expand this blog in the future if I find anything else of interest.
I've looked into and wrestled with issues of text alignment enough that I appreciate your doing a writeup about some of it like this! (I mean, I didn't USE this writeup of yours because I didn't know about it, but I can see how it could save some people significant work replicating what you've done here.)
(After doing some experiments to help another writer with alignment issues, I got to wrestle with alignment issues again when I made the author's note for a recent-ish story of mine. [figure=left] and [figure=right] tags worked for me in that context too, to show two things side-by-side, to show them as alternative options.)
I guess we should also mention that on mobile devices left and right figures might not be floated to side-by-side positions, though, but instead just display with one above the other? :
P.S. You can also find the figure tag used in a similar way somewhere on my user page.
5733588 Yes, figure tags aren't floated on the mobile view. For some purposes that's ok, but for others, not so much. I didn't mention this in the blog because it's already explained in the BBCode reference page, but might be worth clarification.
I've looked into and wrestled with issues of text alignment enough that I appreciate your doing a writeup about some of it like this! (I mean, I didn't USE this writeup of yours because I didn't know about it, but I can see how it could save some people significant work replicating what you've done here.)
(After doing some experiments to help another writer with alignment issues, I got to wrestle with alignment issues again when I made the author's note for a recent-ish story of mine.
[figure=left]and[figure=right]tags worked for me in that context too, to show two things side-by-side, to show them as alternative options.)Self-promotion warning ahead:
- MLP: FiM
- Horror
- Sci-Fi
Every day, all day, Trixie transforms pebbles and bits of rubbish into teacups, and she is happy.I guess we should also mention that on mobile devices left and right figures might not be floated to side-by-side positions, though, but instead just display with one above the other?
:
P.S. You can also find the figure tag used in a similar way somewhere on my user page.
5733588
Yes, figure tags aren't floated on the mobile view. For some purposes that's ok, but for others, not so much. I didn't mention this in the blog because it's already explained in the BBCode reference page, but might be worth clarification.