Bug 260120

Summary:

No spacing within vertical upright text

Product:

WebKit

Reporter:

glmvc <ivanglmvc>

Component:

Text

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

ahmad.saleem792, fantasai.bugs, karlcow, mmaxfield, ntim, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 16

Hardware:

Mac (Apple Silicon)

OS:

macOS 13

Attachments:

Description	Flags
rendering in Safari, firefox, chrome	none
space size when selected in safari, firefox, chrome.	none
rendering in Epiphany on Linux	none

glmvc

Reported 2023-08-12 13:11:39 PDT

Safari displays spacing between words differently when writing-mode is set to a vertical value, for example vertical-lr, and text-orientation is set to upright. Depending on the font and the ones I tested, it looks like there is no space at all. I couldn't find anything helpful about this on the web and I am not familiar with font rendering. All I can say is that the spacing looks "correct" in the other major browsers. Here is a CodePen with a minimal setup where the issue can be seen and tested: https://codepen.io/glmvc/pen/YzRPoaX Checked in Safari Version 16.5.2 and Safari Technology Preview Release 176 on macOS Ventura 13.4; and in Safari on iOS Version 16.6.

Attachments
rendering in Safari, firefox, chrome (659.51 KB, image/png) 2023-08-20 17:32 PDT, Karl Dubost	no flags	Details
space size when selected in safari, firefox, chrome. (24.04 KB, image/png) 2023-08-20 17:38 PDT, Karl Dubost	no flags	Details
rendering in Epiphany on Linux (18.05 KB, image/png) 2023-08-21 16:09 PDT, fantasai	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Ahmad Saleem

Comment 1 2023-08-13 04:36:09 PDT

I am able to reproduce this bug in Safari Technology Preview 176 and WebKit ToT (266845@main) where the 'red' one is not matching Chrome Canary 117 and Firefox Nighty 118. Adding 'BrowserCompat' tag.

Ahmad Saleem

Comment 2 2023-08-13 04:37:34 PDT

Adding @Tim - he is doing writing mode these days and @Alan - since he fixed negative letter spacing issue recently. It might not be directly related to them but good to add them or get their inputs (if any).

alan

Comment 3 2023-08-13 06:32:01 PDT

Safari produces the same result when font is set to Ahem (or Monospace) which makes me think this is more about fonts than layout. Myles? <style> div { writing-mode: vertical-lr; text-orientation: upright; font-family: Ahem; } </style> <div>yes spacing</div>

Radar WebKit Bug Importer

Comment 4 2023-08-19 13:12:13 PDT

<rdar://problem/114140150>

Karl Dubost

Comment 5 2023-08-20 17:32:15 PDT

Created attachment 467349 [details] rendering in Safari, firefox, chrome The three browsers renders slightly differently indeed. from shortest length to longest safari, firefox and chrome.

Karl Dubost

Comment 6 2023-08-20 17:37:46 PDT

Previously Bug 86071 Bug 93304

Karl Dubost

Comment 7 2023-08-20 17:38:49 PDT

Created attachment 467350 [details] space size when selected in safari, firefox, chrome. We better the difference in the space sizes across the browsers.

fantasai

Comment 8 2023-08-21 16:09:25 PDT

Created attachment 467374 [details] rendering in Epiphany on Linux

Note You need to log in before you can comment on or make changes to this bug.