On Friday, September 5, 2014 8:57:27 AM UTC-7, whatever wrote:
>
> I'm trying to mix HTML and markup using HTMLFormattingPlugin (1). It
> works, however, it breaks a bit when using markup lists like the following:
>
> <html>test1<br>Unordered list<br>*<span class='dummy'>Item</span> A - span
> class<br>*<b>Item</b> B - b tag<br>*<span style='font-weight:
> bold;'>Item</span> C - span style<br>* {{dummy{Item}}} D -
> class<br>*''Item'' E - markup<br>*@@font-weight:bold;Item@@ F -
> style<br><ul><li>Item G</li><li>Item H</li></ul></html>
>
> Here, there is a line break between the bullet and items A, B and C and a
> line break after. Items D, E and F are shown on the same line as the
> bullets, but they are followed by two empty lines. If I omit the asterisks,
> the items are shown in consecutive lines. Items G and H are always shown
> correctly.
>
TiddlyTools' HTMLFormattingPlugin works by first parsing the entire
<html>...</html> block using the browser's built-in HTML rendering engine.
This produces output that is a tree of DOM elements (such as BR and SPAN),
some of which contain TEXT elements holding the non-HTML content (e.g.,
"test1", "Unordered list", "*"). Then, the plugin recursively 'walks' this
DOM tree, and applies the TWCore wikify() function to each separate text
element that it finds.
The problem is that, once the HTML has been processed, the individual
sequences of embedded wiki syntax are then isolated into separate TEXT
elements and are processed separately from each other. Thus, for list
items A, B and C, the "*" that appears between the <br> and the following
<span> (or <b>) element, is processed as a single bullet item with no text
following it, resulting in just a bullet on a line by itself. Similarly,
although the bullets for items D, E, and F are not separated from the text
that follows, each individual bullet+text item is treated an entire
separate bullet list with just one item. By default, bullet lists are
surrounded by whitespace both before and after the list itself. Thus, each
"one item bullet list" has space above/below it. In addition, you
specified an explicit <br> following each bullet item, so the whitespace is
even larger between items.
Fortunately, you can use CSS to fix ALL of this....
Add this to your StyleSheet:
.myclass ul { margin-top:0; margin-bottom:0; display:inline-block; }
The first two rules (margin-top and margin-bottom) eliminate the extra
whitesapce before/after each bullet list. The third rule
(display:inline-block) prevents each bullet list from forcing content
following it to start on a new line. This makes it appear that items A, B,
and C appear as proper bullets with text following, rather than separate
bullet lists, each with *with no content*, followed by the item content
text on the *next line*.
Note the use of the ".myclass" in the CSS selector. This limits the
application of the rule to ONLY those bullet lists that occur inside a
"myclass" container, so that other "normal" bullet lists are unaffected.
To apply this CSS to your example content, you would wrap the entire HTML
block within a wiki syntax CSS class wrapper, like this:
{{myclass{<html>....</html>}}}
Also note that this only works as intended because you already have
specified explicit <br>'s between each bullet item definition. Without
those <br>'s, the bullet items would all run into a single line, except for
items G and H, which are defined as two <li> elements within a single <ul>,
where the line break between those items is handled by the <li> rendering
itself.
enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios
YOUR DONATIONS ARE VERY IMPORTANT!
HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...
http://TiddlyTools.github.com/fundraising.html#MakeADonation
Professional TiddlyWiki Consulting Services...
Analysis, Design, and Custom Solutions:
http://www.TiddlyTools.com/#Contact
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.
