I just discovered something which might be a small rendering bug: I’m totally in love with bullet point lists which have a bold heading and some text in the following lines of each entry. In DEVONthink 3 Pro I tried to use this approach with Markdown and I worked fine for me. It looks exactly as I want it.
But when I try to sync the very same document to DTTG the rendering looks broken in terms of the line heights. It looks like DTTG adds an unwanted margin or padding to each line - see red arrows.
I successfully applied a CSS setting which is able to manipulate the element within a list entry.
ol li {
line-height: 1.2 !important;
vertical-align: top;
margin-top:1px;
margin-bottom:1px;
padding-top:1px;
padding-bottom:1px;
}
I can see that the CSS is applied in both DEVONthink Pro and DTTG but the general issue of the unwanted paddings (only) in DTTG is still present. I don’t understand why the renderings of DEVONthink Pro and DTTG differs this much.
Can someone give me a hint how to get rid of the margins in DTTG? Did I do something wrong?
i’m not sure that your CSS snippet has anything to do with the additional “padding” after the first/before the second line in a li element. If I convert a small example along your lines to HTML in DT, I get this:
<ol>
<li><p><strong>One entry</strong> <br />
With a second line for details </p></li>
<li><p><strong>Second entry</strong> <br />
With a second line for even more details </p></li>
</ol>
(No idea why this is in the normal lines but not in the first ones).
I’d guess that the br elements are causing the problem. The line heights are in fact ok on both platforms.
I’m quite certain that this has nothing to do with DT(TG), though. To make sure, you could convert the MD file to HTML on your Mac, sync that and see what it looks like.
Just did that and saw the exact same problem you’re describing: The br element causes an empty line both in the rendered MD and in the HTML on iOS.
Given that the HTML is corretly displayed in Firefox, Safari and Chrome on macOS, I’d chalk the problem up to WebKit on iOS.
To fix, add this to your CSS:
ol li strong {
display: block;
}
and get rid of all the escaped new lines (they’re not necessary).
I agree, my CSS only addressed the whole <li> object and not particular elements within the <li>
Therefore your idea to set display: block for the <strong> element is quite nice. This indeed forces a line break and the forced line break via \ seems needless.
On the other hand there are some good reasons for the manual forced line break (putting \ at the end of a line) because it gives some more flexibility which I often use. Let me extend my example a little bit:
I followed your advice and exported the .md file to html. This is what the export delivered for the second entry:
<li>
<p>
<strong>this is another entry in my list</strong>
<br/>
this entry has two additional lines for explanations
<br/>
this is the second one
<br/>
and
<br/>
some
<br/>
forced
<br/>
linebreaks
</p>
</li>
Looking at the differences of the outputs of DEVONthink vs DTTG it looks like the <br/> tag is handled differently. Maybe <br/> in DTTG is displayed as two line breaks? hmmm
I also found out that it is possible to address DTTG in CSS using @media rule.
Thank you for mentioning this. We will have a look at the built-in CSS that DEVONthink and DEVONthink To Go use for Markdown and harmonize the styling here.
I tried it out. The usage of display: block as you mentioned would break the first and the last entry of my latest example. As it forces a line break before and after the <strong> element, it would lead to unwanted line breaks when it comes to the usage of a bold
word in the middle of a sentence.
As soon as I have the time, I can try out to compare the behavior of WebKit between the iOS and MacOS (using my example as HTML) and share my knowledge with you. And of course I hope that the mentioned harmonization of the CSS used by DEVONthink and DTTG (by eboehnisch) might help here
sure, here come the content of my example .md file from my second post
# Heading
Document with forced line breaks
1. **this is one entry** (entry heading has a not bold part) \
It has a second line for details
2. **this is another entry in my list** \
this entry has two additional lines for explanations \
this is the second one \
and \
some \
forced \
linebreaks
3. **and this is the 3rd entry** \
and this entry has a very long description just to be sure the line is long enough so that it breaks when the end of the screen is reached. Also highlighting a word as **bold** should be possible. This let's us see how the line heigt looks like.
Another Lorem Ipsum Text
Just some thoughts, not related to the display problem here.
I have the impression that you want to mix semantic markup and presentation in a manner that’s bould to cause trouble. Like “the first line of every li element should be bold. But I also want to have some of these lines where not everything is bold.” So it looks like a heading, but in the disguise of a list element.
So what is it: A heading, introducing a new idea/concept/whatever and structuring the content? Or a list of similar ideas, objects, whatever? If they’re similar, why have the first line stand out? If they’re not similar, why have a list?
You can actually not have h1 (or h2 or any heading) element inside a li in HTML. And I suppose that’s for a reason. And perhaps you’re looking for dt/dlinstead (but that’s probably not available through MD).
A similar reasoning goes for the hard line breaks – what should they convey? The people over at MDN say that br might be used in addresses or poems, but that’s not what you’re doing here (or are you?). So why have those hard line breaks, instead of maybe a sub-list?
If you now understand it does not do what you want, why don’t you do what you want and add an empty line where you want it? Or use an editor on your iOS devices that edits MD files as you wish. Simpler.
Tank you very much! That will help me a lot.