Extra text styling

[podviaznikov]

Ok, so this is the last 2 things that are missing in order to achieve parity with native Apple Notes html export (and I want to highlight that this library supports way more things already than native export):

• custom text color
• custom fonts

It's possible to do that in Apple Notes and native HTML export just set this as CSS property. Maybe it's possible to do the same.

[threeplanetssoftware]

Interesting, I'm not sure how to recreate this on an iOS device, although I do have places in the protobuf that already account for font and color.

Could you export the ZICNOTEDATA.ZDATA for a note that has some test color and font changes in it, please? I typically would make a bunch of variations, writing the words on each line that describe what I'm expecting in output, such as:

Red
Green
Bold Blue
Blue Sans
Red Sans
Bold Blue Bold Red
etc

That way there's enough variation in the protobuf to make sure the output will be consistent. If you can provide that here, I'll import it into my test database and see what I can do. Otherwise I'll have to wait until I can get back to my test Mac in a few days.

For example, if the Note ID listed in this parser's HTML output was "Note 16", this would be the right query:

SELECT hex(ZDATA) 
FROM ZICNOTEDATA
WHERE ZNOTE=16

[podviaznikov]

Here it is:

1F8B08000000000000138D934B4C13511486E7F6C530BC6E07CA63A45A2A8F017924465D98D0C64A30261A0876AD41686943D3C65224CA06346030CA468D1112E3D688CFC4D74A63142506306834063471675C18E3C6F88A5EA6FFCCC0506BBBE93DDFF9CF7FFEB9D3F29CF8DDCE739493BEDAC5446B2C9AE87355BBBA629158BC4F10849640B0B33F92700559A39195E16030100F4435D01E8EF626D5ACF045FA035AD111E8D6CE6DF1CE688FDEDA150F04A25A2551C1B21C804550BE65A210C2885552BE6513482DCD06318358A919C422D9052B3B8D139A0B64954445C44354E422B20DAC86128D6581C9601C633C580E422CEBB2C128B5683A01AC88524D97837095F0B3CAB92055D4846C79883B49683E50BE54A8A00982B962E65500FFCD945718CF1805DB4EEB15E660CC8E0D41CCE6CA22480F488E5C0812529F532E428AE344BB4707D00942B3808A116C540D26B28525081146B03CC64AC10EE13DD9192B033B4A6D0A2B644CC28E21A225590774996857540E74875001C8892457085E818BB9AD07BC4EB0A282C10D18BEADAF70013DD4575400CDEACFEF86DB2375451D73DB08DDB47A296EB912E885EE5605B4A4FF04ABE1B64070255B985B0D748B6AB67A5906FAA8BBD5027DD3B3D501FDD4559BB0E087EAE5610BEA013FA937D2CC600386BFA8CFB0556E041AD6FD9AA46281677FC33FEC53C0FE92DAD9ED14D609F47447C39ED2AEB66DB70ADB06C65A3E88A299FF4D4413EFADCBE7CD22FBFF9692D0C2DCF9091BAB4DA85FA226A897505B50BF33D4EF0DFA574A2D303F0EE732A6359512295BC8DA110F7746F6FA652E74E6FE94D2B2AD6D9D45CBB4B6750E2DB2B6F556D9959B6CA11258A5766AB1AA4C28F1C5BA63D1F0BEC38923FE81D86EFF4EBFBFC1178BF532930B8A7F46D209484DFF974E424A32709D5FF91493F3FA5324CFEE64A7A3288FE386BC8ED7EE318FD3F3A0CF5BB55C86469545EE64A67F684E40634DA319CBC0E7A4A251935E426E65227411F316CC3F1FF4781C23EE118FB37C3C82F9A90C34570D395269AEADCA71115532C70DCC9B315F72AACBEB48CCBE69766E39CE7992F377A0C94AA3B9090D49A3B99B81E61E343668AC9FDBBD8EA73DBCD7B97F7CB839A9796C783FA9344F0CBB5269A60D9ACD07986659E85CF4DD34E431A5F19931DCE141BBE0710C1E6BF53A677E35C167CEE0934A336FB8E7549A9955EFF2D98A5FBF72FE0B1E4FACF6FE080000

[podviaznikov]

That is how it looks in the Apple Notes.

[threeplanetssoftware]

I have this working in an ugly fashion, I'd like to clean it up a bit (HTML generation has always been the ugliest bit of this code). However, for the fonts, these look to be pretty specific fonts that the average user isn't likely to have. Are you intending to somehow just capture the font family as a whole (show me something Arial)? Or do you mean the specific font that Apple is using?

[podviaznikov]

this is how Apple exports notes as html by default:

"<div><h1>Fonts &amp colors</h1></div>\n<div><br></div>\n<div><br></div>\n<div><font face=\"ArialMT\">Default font.</font><br></div>\n<div><br></div>\n<div><font face=\"BodoniSvtyTwoITCTT-Book\">Different font.</font><br></div>\n<div><br></div>\n<div><font color=\"#FF44F2\">Pink color</font>.</div>\n<div><br></div>\n<div><font color=\"#2F42EB\">Blue color</font>.</div>\n<div><br></div>\n<div><font color=\"#E21A20\">Red color.</font></div>\n<div><font color=\"#E21A20\"><br></font></div>\n<div><font color=\"#D08710\">Orange color</font><font color=\"#CFD058\">.</font><font color=\"#D08710\"><br></font></div>\n<div><font color=\"#D08710\"><br></font></div>\n<div><font color=\"#22C52B\">Green color.</font><br></div>\n<div><br></div>\n"

[podviaznikov]

are you saying you also get access to the font family in your code and not specific font?

[threeplanetssoftware]

Correct, this line tells the client to use a particular font family:

<font face=\"ArialMT\">Default font.</font>

If the client doesn't have that font, the browser defaults to whatever its default is. The HTML I'm generating right now is almost the same as this, but I'm not on a Mac and I don't have these fonts, so there is no visual difference in the text. People who view your site on iOS devices will see the different font, others will just see the default. Make sense?

Is there a list of fonts available to you in Notes? One cheat would be to describe a fallback font, such as if I see "ArialMT", also include "Arial" as a fallback. But I don't know how long of a list it would be to implement that. Can you provide the list of fonts you're looking at?

[podviaznikov]

If the client doesn't have that font, the browser defaults to whatever its default is...
People who view your site on iOS devices will see the different font, others will just see the default.

This makes total sense. If font is not there it's fine.

One cheat would be to describe a fallback font, such as if I see "ArialMT", also include "Arial" as a fallback.

I don't think it's necessary to implement this in the library. I feel like library should export data that is available. And this extra processing and font fallback can be implemented by the clients. Like eg I can implement it myself as a post processing step.

[podviaznikov]

But here is the list of the default fonts that are available in my Notes app. I didn't install any additional fonts.

Sorry for all the images. Not really sure how to get it in the text format.

[threeplanetssoftware]

Thanks for that information. Given how many system fonts are represented, I will definitely go with carrying through the font as found in the note itself and leave any translations of that for the client.

[threeplanetssoftware]

Ok, because this could easily introduce regressions, I've pushed another working branch to this repo. Check out 53-extra-styling (d691643).

This is a fairly major refactor of the HTML generation code that dramatically simplifies it. I think it handles font faces and font colors nicely, but still am only working with your test example. I'd love for you to test it on your larger corpus to see if things still look as they did, and if you can test some examples where both the font face and the font color change at the same time, that would be good.

[podviaznikov]

colors and fonts are confirmed to work: https://demo.montaigne.io/fonts-colors

I did even more complex example with mixing color and font. Thank you!