Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Digging into table rendering #54

Closed
07akioni opened this issue Mar 25, 2024 · 2 comments
Closed

Digging into table rendering #54

07akioni opened this issue Mar 25, 2024 · 2 comments
Labels
question Further information is requested

Comments

@07akioni
Copy link

07akioni commented Mar 25, 2024

I'm currently exploring markdown rendering (to implement a ChatGPT like app) on iOS and find it's hard to implement a basic table in text view.

However I found it's implemented in an App called 豆包(a ByteDance app, the company who made TikTok) in China mainland & CiCi outside China mainland.

豆包:https://www.doubao.com/
Cici:https://www.ciciai.com/

豆包 table
IMG_0504 IMG_0503

As you mentioned in your article https://medium.com/zrealm-ios-dev/%E6%89%8B%E5%B7%A5%E6%89%93%E9%80%A0-html-%E8%A7%A3%E6%9E%90%E5%99%A8%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B-2724f02f6e7

實測原生的 NSAttributedString.DocumentType.html 是用 Private macOS API NSTextBlock 來完成顯示,因此能完整顯示 HTML 表格樣式及內容。
有點作弊!我們無法用 Private API

Would you like to tell about your thought about how they achieved it?

I've also explored ChatGPT's app. They haven't implement table rendering in their iOS App.

@zhgchgli0718 zhgchgli0718 added the question Further information is requested label Mar 26, 2024
@07akioni
Copy link
Author

07akioni commented Mar 26, 2024

I got a very hack way to make a table with rich text inside:

However the problem is round corner can't be achieved by border radius CSS property.

CleanShot 2024-03-26 at 18 39 45@2x

CleanShot 2024-03-26 at 18 39 02@2x

@zhgchgli0718
Copy link
Member

ZMarkupParser serves as a converter from HTML strings to NSAttributedString. If you can use the styles set by NSAttributedString.Key(attributes), there is a chance to implement them in ZMarkupParser, and vice versa. Unfortunately, I couldn't find a perfect way to adapt HTML table styles in ZMarkupParser after searching through the documentation.

Using NSAttributedString.DocumentType.HTML renders HTML using the original NSAttributedString approach. I speculate that it is rendered through WebKit and uses NSTextBlock, which is not available in the iOS Public API. Therefore, I'm unable to utilize it.

Currently, the only solution is to fallback to using NSAttributedString.DocumentType.HTML or create a new project to explore TextKit-related content (more low-level) or simply use ASCII tables as a substitute for tables.

ZMarkupParser 只作為一個 HTML String to NSAttributedString 的轉換器,如果能使用NSAttributedString+ NSAttributedString.Key(attributes) 設定的樣式,都有機會在 ZMarkupParser 實現,反之亦然;很遺憾的我翻片了文件找不到能完美適配 HTML Table 樣式的方式。

使用 NSAttributedString.DocumentType.HTML 就是原始的 NSAttributedString 渲染 HTML 方式,我猜測是透過 WebKit 渲染,他所使用的物件是 NSTextBlock,這不存在在 iOS Public API 中,因此我無法調用實踐。

目前的解決辦法只有回頭使用 NSAttributedString.DocumentType.HTML 或是新建立另一個專案研究 TextKit 相關內容(更底層) 或是簡單使用 ASCII-Table 替代表格。

謝謝.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants