apple_cloud_notes_parser
apple_cloud_notes_parser copied to clipboard
threeplanetssoftware
Extra text styling
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.
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
Here it is:
1F8B08000000000000138D934B4C13511486E7F6C530BC6E07CA63A45A2A8F017924465D98D0C64A30261A0876AD41686943D3C65224CA06346030CA468D1112E3D688CFC4D74A63142506306834063471675C18E3C6F88A5EA6FFCCC0506BBBE93DDFF9CF7FFEB9D3F29CF8DDCE739493BEDAC5446B2C9AE87355BBBA629158BC4F10849640B0B33F92700559A39195E16030100F4435D01E8EF626D5ACF045FA035AD111E8D6CE6DF1CE688FDEDA150F04A25A2551C1B21C804550BE65A210C2885552BE6513482DCD06318358A919C422D9052B3B8D139A0B64954445C44354E422B20DAC86128D6581C9601C633C580E422CEBB2C128B5683A01AC88524D97837095F0B3CAB92055D4846C79883B49683E50BE54A8A00982B962E65500FFCD945718CF1805DB4EEB15E660CC8E0D41CCE6CA22480F488E5C0812529F532E428AE344BB4707D00942B3808A116C540D26B28525081146B03CC64AC10EE13DD9192B033B4A6D0A2B644CC28E21A225590774996857540E74875001C8892457085E818BB9AD07BC4EB0A282C10D18BEADAF70013DD4575400CDEACFEF86DB2375451D73DB08DDB47A296EB912E885EE5605B4A4FF04ABE1B64070255B985B0D748B6AB67A5906FAA8BBD5027DD3B3D501FDD4559BB0E087EAE5610BEA013FA937D2CC600386BFA8CFB0556E041AD6FD9AA46281677FC33FEC53C0FE92DAD9ED14D609F47447C39ED2AEB66DB70ADB06C65A3E88A299FF4D4413EFADCBE7CD22FBFF9692D0C2DCF9091BAB4DA85FA226A897505B50BF33D4EF0DFA574A2D303F0EE732A6359512295BC8DA110F7746F6FA652E74E6FE94D2B2AD6D9D45CBB4B6750E2DB2B6F556D9959B6CA11258A5766AB1AA4C28F1C5BA63D1F0BEC38923FE81D86EFF4EBFBFC1178BF532930B8A7F46D209484DFF974E424A32709D5FF91493F3FA5324CFEE64A7A3288FE386BC8ED7EE318FD3F3A0CF5BB55C86469545EE64A67F684E40634DA319CBC0E7A4A251935E426E65227411F316CC3F1FF4781C23EE118FB37C3C82F9A90C34570D395269AEADCA71115532C70DCC9B315F72AACBEB48CCBE69766E39CE7992F377A0C94AA3B9090D49A3B99B81E61E343668AC9FDBBD8EA73DBCD7B97F7CB839A9796C783FA9344F0CBB5269A60D9ACD07986659E85CF4DD34E431A5F19931DCE141BBE0710C1E6BF53A677E35C167CEE0934A336FB8E7549A9955EFF2D98A5FBF72FE0B1E4FACF6FE080000
That is how it looks in the Apple Notes.
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?
this is how Apple exports notes as html by default:
"<div><h1>Fonts & 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"
are you saying you also get access to the font family in your code and not specific font?
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?
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.
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.
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.
Ok, because this could easily introduce regressions, I've pushed another working branch to this repo. Check out 53-extra-styling (d691643d75c70523d4ec35c871524c630f8d94ec).
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.
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!
Ok. I think I found some new bug - since you mentioned that the change was huge.
If I have a list and part of the line is bold and part is regular. It would create 2 lists. First list would end with the bold part of the list item.
Here is an example - links are not important here. Can be regular text after bold text.
Thanks for flagging, I've reverted the merge into master and will leave this on the 53-extra-styling branch until it is solved more fully.
Ok, please check out the 53-extra-styling feature branch. I retooled how lists are handled and I think it should be More Correct(tm) now. Not going to push into master until you give it a look. This also incorporates the HTML escaping issue from #54.
found one bug so far. But previous case seems to be fixed.
This generates invalid HTML:
<ol><li>Apple</li><li><del>Orange</li><li></del>Watermelon</li></ol>
You see that del is closed after the next opened li.
Thanks for reporting that. Try the latest commit on that branch.
Wanted to check and see if the latest commit on the 53-extra-styling feature branch behaves as you intend.
I did a lot more testing and believe this is all solved in 5bac949921d245554deed62f89efad6fb3c00a12. This is now landed in master but I will keep 53-extra-styling around in case more tweaks are necessary.
@threeplanetssoftware I think colors are not rendered into the final html.
