Different rendering of CSS Style in DT3 and DTTG

DEVONthink Feedback
,
1

I use usually markdown in my work and I set the same css style for rendering it in DT3 and DTTG.

But the same markdown-document render different in DT3 and DTTG.
For example, marked checkboxes in DTTG look more noticeable than in DT3.

‎Screenshot
‎Screenshot815×294 40.6 KB

Why is there such a difference? And is it possible to make checkboxes in DT3 the same as in DTTG?

1 Like
2

I’d guess because WebKit’s default style sheets differ on the platforms. If you don’t like that, you should define your own CSS. The one provided by DT/DTTG keeps mum about checkboxes. Easily verifiable by converting the MD to HTML and then looking at the HTML’s source code.

3

Welcome @Yana_B
DEVONthink To Go and DEVONthink are not the same application on the same platform. This means there are certain technological differences. While we are moving toward more parity between them bear that in mind as there will be some differences in features and function between them.

However, your issue is noted.

1 Like
4

Thanks a lot for explanation @chrillek

5

Hello, @BLUEFROG

Many thanks!

6

You’re welcome :slight_smile:

7

This is due to different fonts.

  • Press ⌘⌃O on your Mac to activate the Character Viewer.
  • Search for a unicode character named “ballot box with check”.
  • The Font Variation pane shows how the same symbol is rendered by different fonts.

To make them look the same, change your CSS to use font(s) that are available on both platforms. (Note that your text has been rendered differently as well.) system-ui is good enough for me, but YMMV.

1 Like
8

Thanks, @meowky. I try use your advise.

9

Jim small issue, anyway to make the checkboxes a little bigger than default in Mac? Any CSS snippet you know to make it a little bigger? If not, no big deal. Steve

10

Try this:

li[style="list-style: none;"]::first-letter {font-size: 3em;}

You might want to experiment with different font sizes and, perhaps, with other aspects of the checkbox list.

2 Likes
11

Here’s a variation with some finer-tuned positioning, noting the font and it’s size can change the alignment.

<style type="text/css">
body {
font: normal 1.2rem/1.1 "SF Pro", sans-serif;
}
li[style="list-style: none;"]::first-letter {
font-size: 1.4rem;
vertical-align:-.15rem;
padding-right: .3rem;
}
</style>

This…
Screenshot 2024-12-07 at 2.36.46 AM

becomes…
Screenshot 2024-12-07 at 2.36.58 AM

3 Likes
12

A side question: Does this work in CSS without having to download the font first from developer.apple.com ?

13

I’m on my Ventura Mac with it already installed. You can choose other fonts or just opt for serif or sans-serif if you have no particular preference.

14

If the first font is not instated, the CSS falls back to the second one (sans-serif).