I use iOS’s feature for adjusting the text size via the “Text Size” control in Control Center. I often change it during the day [1]. This works for the UI controls in DEVONthink To Go, but does not seem to change the scaling of text in rendered Markdown documents.
If I omit custom CSS styling in the DTTG preferences, the size of text in rendered Markdown documents seems to be controlled by the “Plain text size” slider in DTTG’s “Text settings” preferences. If I define custom CSS for Markdown documents, then when I view a document on DTTG, the text is always the same size no matter what size I set in the “Plain text size” slider or the iOS Text Size control center widget. This happens even though in my CSS I define what I think is the correct CSS property for font scaling. My overall CSS file is elaborate, but in it I’ve tested
html {
-webkit-text-size-adjust: auto;
text-size-adjust: auto;
}
and
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
and neither seem to make a difference: the text of markdown documents is always rendered the same size.
Is there a way to make text of rendered Markdown documents in DTTG follow the iOS Text Size setting? If so, what is the magic combination of CSS and/or other settings that will make it work? If not, is it a known limitation in DTTG, and is there hope this might change in the future?
Footnotes:
[1] My eyes are not as young as they used to be, and I have trouble reading text at the default font sizes on devices like iPhones. The degree of badness varies during the day.
The global setting of text size does not influence text size in Safari on iOS. Since MD preview must use the same HTML engine as Safari …
text-size-adjust:auto is the default, so it’s not going to do anything at all. I doubt that this attribute is helpful at all.
Your best bet might be a media query that sets the font size on a smaller device. That, however, will not give you any dynamic.
Also: Do you set a width on your document with CSS? If so, do you use absolute or relative units?
Edit: Ignore this question. The whole thing seems essentially broken: https://webaim.org/discussion/mail_thread?thread=9985
First, set text size doesn’t influence browser font size. Second, there’s no reflow on zoom in Safari/iOS (whatever made them not implement that). So, zooming entails horizontal scrolling.
Yes, but it wouldn’t have surprised me if the behavior of WebKit as used by an application was different than Safari’s behavior, for the simple reason that Safari has separate page zoom controls (the ones you get by tapping the address bar, shown below).
Update: it turns out there is a solution after all!
I asked a question about this on Apple Stack Exchange and someone answered with a solution. The basic point is to use -apple-system-body in your CSS. To make all text respect the system text size, one can use:
* { font: -apple-system-body !important; }
This unfortunately changes all font properties, but thankfully it is possible to then set font-family and other properties on individual elements and the result still respects the dynamic font size.
Isn’t it wonderful when companies build their own furniture for little corners of the web… instead of simply making the text reflow when the view is pinch-zoomed. As any self-respecting browser does on the desktop. But not on mobile, for whatever reason.
Update for anyone who is trying to use the CSS bits mentioned above: if you change font for *, you will break MathJax rendering. Here is an updated selector that works for my CSS on both desktop and DTTG on mobile:
The above is likely not a complete solution, and I suspect it will break code blocks and Prism rendering, but I regret I don’t have time to figure out a more complete set of selectors to post here. (My actual CSS contains many more customizations, including the font properties for pre and code, so the disruptive effects of setting font are probably masked in my case.)
