x/pkgsite: incorrect rendering of fixed-size unicode box-drawing characters on Firefox #38763

ribasushi · 2020-04-30T10:51:33Z

What is the URL of the page with the issue?

https://pkg.go.dev/github.com/ipfs/[email protected]?tab=doc#hdr-Implementation_notes

What is your user agent?

N/A

Screenshot

Rendered as:

What did you do?

Wrote godoc

What did you expect to see?

https://github.com/ipfs/go-qringbuf/blob/4dee18e945251b41fb7adf99969a855d1ccdbb13/qringbuf.go#L103

What did you see instead?

See above

bcmills · 2020-05-01T02:46:01Z

What browser and platform did you view it with?

(https://crbug.com/807361 may be relevant, with similar bugs for other platforms & browsers.)

ribasushi · 2020-05-01T05:41:36Z

Firefox 75.0, Macos Mojave 10.14.6

ribasushi · 2020-05-01T05:43:57Z

@bcmills the reason I didn't start digging into browser specifics is that both a local godoc server on http://127.0.0.1:6060/, and github render the code as expected, on the very same browser/OS. The problem only manifests itself on https://pkg.go.dev

ribasushi · 2020-05-01T06:04:18Z

Dug a bit more. I guess "more ~~cowbell~~ Menlo" would be the answer for Macos?

this is what a local godoc serves ( renders really well ):

This is what github serves ( renders well ):

this is what pkg.go.dev serves ( renders badly ):

julieqiu · 2020-05-01T14:39:08Z

Thanks for the feedback!

/cc @spf13 @fflewddur @Joanne881107 for product/UX input

spf13 · 2020-05-01T15:05:29Z

This is an odd bug. I can confirm that I see the odd rendering in my browser. My first instincts were that it's an issue with the font, but I opened a text editor on my PC and set it to the same font and it rendered as expected, see screenshot.

It will require some deeper investigation to determine why the browser is causing this to happen.

smasher164 · 2020-05-02T07:27:05Z

The unicode-range properties for the "Source Code Pro" @font-face do not include the box-drawing characters, which are in the range U+2500 to U+257F.
Adding unicode-range: U+2500-257F; to one of the "Source Code Pro" definitions fixes the rendering issue.

ribasushi · 2020-05-08T07:43:55Z

@smasher164 so does this mean that this issue should move to https://github.com/adobe-fonts/source-code-pro ?

smasher164 · 2020-05-08T13:25:41Z

@ribasushi No, the font is fine. I was referring to the CSS on go.dev, which defines @font-faces. Each @font-face definition takes a unicode-range, so that it won't use those characters from a font unless specified. Since none of the definitions have a range that includes the box-drawing characters, it isn't applied to the code.

Here is the current list of @font-faces. We'd just have to add another one for box-drawing characters.

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro Regular'), local('SourceCodePro-Regular'), url(https://fonts.gstatic.com/s/sourcecodepro/v11/HI_SiYsKILxRpg3hIP6sJ7fM7PqlMOvWnsUnxlC9.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro Regular'), local('SourceCodePro-Regular'), url(https://fonts.gstatic.com/s/sourcecodepro/v11/HI_SiYsKILxRpg3hIP6sJ7fM7PqlOevWnsUnxlC9.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro Regular'), local('SourceCodePro-Regular'), url(https://fonts.gstatic.com/s/sourcecodepro/v11/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPuvWnsUnxlC9.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro Regular'), local('SourceCodePro-Regular'), url(https://fonts.gstatic.com/s/sourcecodepro/v11/HI_SiYsKILxRpg3hIP6sJ7fM7PqlMuvWnsUnxlC9.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro Regular'), local('SourceCodePro-Regular'), url(https://fonts.gstatic.com/s/sourcecodepro/v11/HI_SiYsKILxRpg3hIP6sJ7fM7PqlM-vWnsUnxlC9.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro Regular'), local('SourceCodePro-Regular'), url(https://fonts.gstatic.com/s/sourcecodepro/v11/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevWnsUnxg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/worksans/v7/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K5fQBiAJoI3ZKyHaQfhf.woff) format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/worksans/v7/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K5fQBiEJoI3ZKyHaQfhf.woff) format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/worksans/v7/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K5fQBi8JoI3ZKyHaQQ.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

ribasushi · 2020-05-17T02:55:28Z

@spf13 @julieqiu so this seems a rather simple fix as outlined by @smasher164 . What could be done to move this along? Thanks!

andybons · 2020-05-18T20:53:58Z

@ribasushi not so simple. Those definitions are served by Google Fonts. We’d have to either serve the fonts directly (not really a fan of that) or file an issue with the Fonts team. We’ll likely do the latter.

ribasushi · 2020-05-18T21:16:33Z

@andybons I agree: "doing the right thing" (bugging the Fonts team) is the right thing to do. I just don't know how/where to do that, and don't want this issue to freeze is all ;)

smasher164 · 2020-05-19T00:05:14Z

I opened google/fonts#2465, which appears to be the correct place for this issue as per https://developers.google.com/fonts/faq2.

gopherbot · 2020-07-09T13:29:30Z

Timed out in state WaitingForInfo. Closing.

(I am just a bot, though. Please speak up if this is a mistake or you have the requested information.)

ribasushi · 2020-07-09T13:46:42Z

This is still an issue :(
Please reopen.

julieqiu · 2020-11-20T17:59:51Z

This should now be fixed.

gopherbot added this to the Unreleased milestone Apr 30, 2020

gopherbot added the pkgsite label Apr 30, 2020

julieqiu added the UX Issues that involve UXD/UXR input label May 1, 2020

smasher164 mentioned this issue May 19, 2020

Add Box Drawing block to Source Code Pro google/fonts#2465

Closed

julieqiu mentioned this issue May 19, 2020

x/pkgsite: godoc.org redirect feedback - tracking issue #39144

Closed

14 tasks

julieqiu added WaitingForInfo Issue is not actionable because of missing required information, which needs to be provided. and removed NeedsInvestigation Someone must examine and confirm this is a valid issue and not a duplicate of an existing one. labels Jun 9, 2020

julieqiu changed the title ~~go.dev: incorrect rendering of fixed-size unicode box-drawing characters~~ x/pkgsite: incorrect rendering of fixed-size unicode box-drawing characters Jun 15, 2020

gopherbot closed this as completed Jul 9, 2020

julieqiu reopened this Jul 9, 2020

andybons removed the WaitingForInfo Issue is not actionable because of missing required information, which needs to be provided. label Jul 9, 2020

julieqiu removed this from the Unreleased milestone Jul 29, 2020

julieqiu added this to the pkgsite/godoc.org-redirect milestone Jul 29, 2020

andybons changed the title ~~x/pkgsite: incorrect rendering of fixed-size unicode box-drawing characters~~ x/pkgsite: incorrect rendering of fixed-size unicode box-drawing characters on Firefox Jul 30, 2020

jba added the NeedsFix The path to resolution is known, but the work has not been done. label Aug 24, 2020

julieqiu removed the UX Issues that involve UXD/UXR input label Nov 18, 2020

julieqiu closed this as completed Nov 20, 2020

golang locked and limited conversation to collaborators Nov 20, 2021

gopherbot added the FrozenDueToAge label Nov 20, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

x/pkgsite: incorrect rendering of fixed-size unicode box-drawing characters on Firefox #38763

x/pkgsite: incorrect rendering of fixed-size unicode box-drawing characters on Firefox #38763

ribasushi commented Apr 30, 2020 •

edited

Loading

bcmills commented May 1, 2020

ribasushi commented May 1, 2020

ribasushi commented May 1, 2020 •

edited

Loading

ribasushi commented May 1, 2020

julieqiu commented May 1, 2020

spf13 commented May 1, 2020

smasher164 commented May 2, 2020

ribasushi commented May 8, 2020

smasher164 commented May 8, 2020

ribasushi commented May 17, 2020

andybons commented May 18, 2020 •

edited

Loading

ribasushi commented May 18, 2020

smasher164 commented May 19, 2020

gopherbot commented Jul 9, 2020

ribasushi commented Jul 9, 2020

julieqiu commented Nov 20, 2020

x/pkgsite: incorrect rendering of fixed-size unicode box-drawing characters on Firefox #38763

x/pkgsite: incorrect rendering of fixed-size unicode box-drawing characters on Firefox #38763

Comments

ribasushi commented Apr 30, 2020 • edited Loading

What is the URL of the page with the issue?

What is your user agent?

Screenshot

What did you do?

What did you expect to see?

What did you see instead?

bcmills commented May 1, 2020

ribasushi commented May 1, 2020

ribasushi commented May 1, 2020 • edited Loading

ribasushi commented May 1, 2020

julieqiu commented May 1, 2020

spf13 commented May 1, 2020

smasher164 commented May 2, 2020

ribasushi commented May 8, 2020

smasher164 commented May 8, 2020

ribasushi commented May 17, 2020

andybons commented May 18, 2020 • edited Loading

ribasushi commented May 18, 2020

smasher164 commented May 19, 2020

gopherbot commented Jul 9, 2020

ribasushi commented Jul 9, 2020

julieqiu commented Nov 20, 2020

ribasushi commented Apr 30, 2020 •

edited

Loading

ribasushi commented May 1, 2020 •

edited

Loading

andybons commented May 18, 2020 •

edited

Loading