Skip to content

Improve image export when line breaks have background #9685

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.

Sign up for GitHub

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

Jump to bottom
Closed
3 tasks done
Achuan-2 opened this issue Nov 18, 2023 · 8 comments
Closed
3 tasks done

Improve image export when line breaks have background #9685

Achuan-2 opened this issue Nov 18, 2023 · 8 comments
Assignees
@Vanessa219
Labels
Enhancement
Milestone
2.11.0

Comments

@Achuan-2
Copy link
Member

Is there an existing issue for this?

  • I have searched the existing issues

Can the issue be reproduced with the default theme (daylight/midnight)?

  • I was able to reproduce the issue with the default theme

Could the issue be due to extensions?

  • I've ruled out the possibility that the extension is causing the problem.

Describe the problem

in siyuan
image
export to picture
image

Expected result

style in exported picture can be the same with that in siyuan

Screenshot or screen recording presentation

No response

Version environment

- Version: 2.10.15
- Operating System: Win11
- Browser (if used):

Log file

none

More information

No response
@Achuan-2 Achuan-2 changed the title Problems with displaying highlighted text in exported images Problems with displaying wrapped highlighted text in exported images Nov 18, 2023
@Vanessa219
Copy link
Member

按照图片中用了加粗和标记，无法重现。是还需要进行什么操作？

image

@Achuan-2
Copy link
Member Author

Achuan-2 commented Nov 20, 2023 •
edited
Loading

@Vanessa219 是导出图片，不是导出pdf。不需要加粗，只需要高亮文本，且这段文本是跨两行以上就能重现了

@Vanessa219 Vanessa219 added this to the 2.11.0 milestone Nov 22, 2023
Vanessa219 added a commit that referenced this issue Nov 22, 2023
@Vanessa219
🎨 fix #9685
fffc5a5
@Vanessa219 Vanessa219 changed the title Problems with displaying wrapped highlighted text in exported images Improve image export when line breaks have background Nov 22, 2023
@Achuan-2
Copy link
Member Author

Achuan-2 commented Nov 24, 2023 •
edited
Loading

@Vanessa219 能否也加上超链接的处理呢，因为有些主题会给链接加下划线，导出图片也是有问题的
image

哦哦，我发现是我图片导出是用的border-bottom
image

改成text decoration就没问题了

.export-img.protyle-wysiwyg a {
    /* border-bottom: 1px solid var(--b3-protyle-inline-blockref-color); */
    text-decoration: underline;
}

image

@Vanessa219
Copy link
Member

这样任何元素都会有这个问题，建议在代码片段中重置 css 或者修改主题。

@Achuan-2
Copy link
Member Author

这样任何元素都会有这个问题，建议在代码片段中重置 css 或者修改主题。

好滴

@tcmtom
Copy link

tcmtom commented Nov 29, 2023

还是没修好
未导出前：
ac57d8c89c470cf806ad095f4302c22

751beb6d4db1b7dc159ecc8cf7013bc

导出后：

b13b7e4ef54ef389d4762251101487f

@Vanessa219

@Vanessa219
Copy link
Member

@tcmtom 麻烦发一下 .sy 文件。这个仅修改了行内标记元素。

@tcmtom
Copy link

tcmtom commented Nov 29, 2023

测试.sy.zip

构造了一个，在安卓端导出就能看到问题了
@Vanessa219

@Vanessa219 Vanessa219 mentioned this issue Nov 30, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Vanessa219 Vanessa219

Labels
Enhancement
Projects
None yet
Milestone
2.11.0
Development

No branches or pull requests
3 participants
@Vanessa219 @Achuan-2 @tcmtom