html-sketchapp/html-sketchapp

Text element with nested element that needs to wrap, overlaps layers in sketch

Open

#179 创建于 2019年11月1日

在 GitHub 查看
 (0 评论) (0 反应) (0 负责人)JavaScript (1,845 star) (158 fork)batch import
bughelp wanted

描述

When a text element has child elements like a link or span, and needs to wrap, the text layers are placed on top of one another.

html-sketchapp version: 4.3.0

minimal example:

<p>
  <a href="/contact-us">Visit our Contact Us page</a> to find retail centres, opening hours and more.
</p>

I've seen the same behaviour with divs and spans too:

<div>
  Lorem ipsum dolor ist amet <span>integer velit luctus hac nunc adipiscing</span> eget enim consectetur maecenas libero iaculis.
</div>

screenshot from the browser: image

screenshot from Sketch: image

(please ignore the funky icons 😁 )

贡献者指南

技术栈
javascripthtmlcss
领域
designtooling
议题类型
bug
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
3
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
half day
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
stale
清晰度议题是否清楚说明期望改动、验收标准和下一步。
clear
前置要求
JavaScriptHTML/CSSSketch layer model
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
40
研究方向
Investigate the code responsible for generating Sketch text layers from HTML elements with nested inline children. Look at how the tool currently places text layers when there are child elements like spans or links, and adjust the positioning algorithm so that layers do not overlap. Examine the 'html sketchapp' source, particularly files related to text node conversion and line wrapping.