Workaround to eliminate double space in preview when using 'Drop-Words' like I use in my posts (and floating pictures)
So,
anyone who reads my stuff knows that I make them distinct from most other authors by putting a 'drop-word' (large typeface used for the first word) in the first line of the start of my articles.
I decided to fully examine ways to eliminate the appearance of a second space character in the previews, and I have now got it fully worked out.
<div class="pull-left"><h1> So,</h1></div><h1> </h1>anyone
These kinds of bugs really bug the shit out of me. As far as I'm concerned, I should be able to do proper drop-caps in my posts, but unless the first word is only one character, the space you see there with is needed to create a Header 1 <h1> sized initial word that neatly lines up with the top edge of the first paragraph.
Not only that, you can't do a decorative one like the floating dropcap in the picture above, because the preview parser will not substitute the alt-text for the image in the preview, another glaring omission, in my opinion.
The main part of the trick in eliminating the extra space in the preview, is you can see that there is no space from the end of the Drop-word, until after the second word.
That is necessary to line up the top (due to the CSS style that puts an absurd amount of space above H1 class text lines, and thus, any other spaces between the first and second word doubles the space. means 'non breaking space', which basically forces the rendering of an empty space character.
Not
only that, but this trick only works on the very first paragraph. To achieve this drop-cap effect requires another trick if the paragraph is not the first paragraph. I have done the tweak once or twice before in previous posts, but I'll try and achieve it again.
Also note, that the next paragraph after this first one with this trick done to it, must be prefixed with <br /> or it has no space above it and looks messy, like an improperly broken paragraph, very messy if the wrapping leaves the last line of the first paragraph short)
Not
only that, but this trick only works on the very first paragraph. To achieve this drop-cap effect requires another trick if the paragraph is not the first paragraph. I have done the tweak once or twice before in previous posts, so, here it is. And don't forget the <br /> before the subsequent paragraph, of course.
To achieve that, the character has to be surrounded with a <h3> tag:
<div class="pull-left"><h1> Not</h1></div><h3> </h3>only
Floating Pictures
You may also wonder how I do those floating pictures on the top right of the article. Here is the code that gives you it, as used in this post:
(btw, surround html/markdown code in backticks `` to make it visible to the reader - though sometimes this will not work, like what happens if you put a <br /> tag - which sometimes works but sometimes puts a linebreak in).
<div class="pull-right"><h1></h1>http://evangelicalbible.com/wp-content/uploads/2015/10/reddropcap.png</div>
Opinions from me about this
This is why there should be a more open development system for Steemit's coding workshop, or at least, to not simply ignore people with good ideas because their criticism makes Steemit 'look bad'.
You know what really looks bad? Incompetent programs and a beta badge that is generous in the extreme.
Make Steemit.com rendering Markdown Extra compliant, and add quirk processing that recognises old tricks like the ones I show above, for rendering old posts with these hacks, and yes, add the ability to actually put drop-caps. It's not that hard.
If you insist that I make my suggestions here in the forum, then prepare for the storm of questions that is going to come from why exactly one of the most avid supporters of your platform, who actually tries to contribute somethting of value, who is trying to shock people out of complacency, most especially the self-satisfied pigs who are still sitting on their premined super powers, and start doing something about it.
Or, be prepared to have your userbase migrate to someone else's platform, who, like me, actually does what is needed.
By the way, I concede that I could have been a bit more gentle when I castigated @good-karma over the non-notified 5% rewards diversion in eSteem, but Steemit, Inc.'s butthurt coders made a big mistake by preventing me from being able to:
- Submit bug reports about noncritical BUGS on the github issues list, and
- Basically telling me to make this more spectacular by publishing glaring evidence of their incompetence on the chain, instead of doing the right thing, and rewarding me for caring enough to demand they fix glaring errors.
Until such time as they either employ me, or compensate me for each bug I point out, I will see how much compensation I can get by publishing it on the chain itself. I pride myself on being good at winning staring contests.