DevRel-SAP: Part of the last letter ""rtl" placeholder"italic is cutoff
Reported by
malkiel....@sap.com,
Feb 20 2018
|
|||||||
Issue descriptionWhat is the version of Chrome (chrome://settings/help)? Version 64.0.3282.167 (Official Build) (64-bit) What is the OS Version? Windows 10 What are the steps to reproduce the problem? run the JS: http://jsbin.com/fafegaluka/edit?html,css,output What is the expected behavior? Part of the last letter from placeholder’s text should not be cut. What is the experienced behavior? When input field is in rtl mode (direction) and the placeholder text is in italic font-style part of the last letter of the text is cut off. This especially noticed in letters like b, e, f, h, k, l, and t. and Capitals letters like P,V,W, Y Has the experienced behavior changed? (If so) In what prior version of Chrome was the behavior as expected? Is the experienced behavior different in other browsers? it works fine in Firefox. the issue is notioced in MS Browser 11, Edge and Chrome Any other comments?
,
Feb 20 2018
,
Feb 20 2018
,
Feb 20 2018
This is a general issue of italic font-style and overflow. Reproduction without <input>: data:text/html;charset=utf-8,<div style="font-family:system-ui; font-style:italic; background:#0ff;" dir=rtl>Placeholder</div><div style="font-family:system-ui; font-style:italic; background:#0ff; overflow:hidden" dir=rtl>Placeholder</div>
,
Feb 22 2018
Thanks for the report, looks like we're rounding the bounding box incorrectly for italics.
,
Feb 23 2018
,
Feb 23 2018
Isn't this by-design from layout perspective? Italic glyphs overhangs, and if its block has 'text-overflow: clip', the overhang should be clipped.
<input placeholder="Placeholder>
generates shadow root as:
#shadow-root (user-agent)
<div pseudo="-webkit-input-placeholder"
id="placeholder"
style="display: block !important; text-overflow: clip;">Placelolder</div>
<div></div>
tkent@, is 'text-overflow: clip' necessary for some reasons? If yes, is adding some heuristic padding permitted? It can happen with LTR if its first glyph overhangs on left. Some glyphs, such as "T", "M", or "O" usually have slight overhang on left.
,
Feb 23 2018
> is 'text-overflow: clip' necessary for some reasons? Yes. If placeholder string is too long to fit in the INPUT content box, it should be cut off. e.g. data:text/html,<input placeholder="placeholder placeholder" size=12> I think placeholder string and INPUT's value string should have identical rendering result if their style are identical. So adding heuristic padding only to placeholder isn't welcome. This issue isn't only for placeholder. INPUT's value string also has this issue, and the value string must have overflow:scroll.
,
Apr 3 2018
This doesn't seem to be specific to RTL text, this reproduces the issue for a LTR placeholder: https://jsfiddle.net/jochakovsky/Lcv0p33L/4/ |
|||||||
►
Sign in to add a comment |
|||||||
Comment 1 by grt@chromium.org
, Feb 20 2018