Git Product home page Git Product logo

Comments (8)

keshikan avatar keshikan commented on July 19, 2024

Hi, I have never encountered such problem.
Please give me more details.

  • html, css, JS, DSEG fonts to reproduce your environment (if you could).
  • Your browzer name, versions.

from dseg.

trivedi avatar trivedi commented on July 19, 2024

I'm using Chrome 83 with DSEG7 Classic Regular

The code is written in React, but the html/css translates to something like this:

<div class="time">
  08:30:00
</div>

.time {
  font-family: 'DSEG7 Classic';
  font-size: 8rem;
  margin-top: 1rem;
}

@font-face {
    font-family: 'DSEG7 Classic';
    font-style: normal;
    font-weight: 300;
    src: url(data:application/font-woff2;charset=utf-8;base64,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) format('woff2'),
    url(${DSEG7ClassicWoff}) format('woff');
  }

The font

Two important notes:

  • The text is dynamic via some javascript (updating every second); it's supposed to be like a clock
  • I am using the Classic-Regular.woff file and a base64 version of the .woff2 format. Please see the font-face pasted above (this is in a JS file due to using React).
    First, I deleted glyphs that were not numbers or the colon using RoboFont (also tried with FontForge).
    Then, the font was minified using font squirrel

I only need the numbers and colon, hence the manual glyph deletion. Do you have some other suggestion for that?

from dseg.

trivedi avatar trivedi commented on July 19, 2024

Also, I'm pretty sure that this white line is coming from the text itself. If I change the color property of the div, the line will also be that color.

from dseg.

trivedi avatar trivedi commented on July 19, 2024

@keshikan I made a demo that shows the problem. I think this is only happening in Chrome (I'm on 83.0.4103.116 (Official Build) (64-bit)).

demo: https://glitch.com/~lyrical-fierce-eclipse

fyi, sometimes the lines are very thin. also if you zoom in or resize the browser window, it disappears.

from dseg.

keshikan avatar keshikan commented on July 19, 2024

Hi, sorry for the answer delay.

I tried your demo on Chrome 84.0.4147.89, I couldn't reproduce your problem.
When the font changed, no white line can be seen.
(Your demo has been deleted, but I saw it a few days ago.)

In addition, I suspected that my font files are wrong,
but I couldn't find any problems.

image

from dseg.

alex-mathew avatar alex-mathew commented on July 19, 2024

I am facing the same issue with a timer I built using DSEG7 Classic Bold. I am using mac big sur os and my browser is brave version 1.27.109 chromium: 92.0.4515.115. The issue is occurring with the numbers 1 and 4. Also, it's not a consistent issue as sometimes they will be rendered fine. Attaching a gif demonstrating the issue.

Aug-04-2021 01-17-06

from dseg.

trivedi avatar trivedi commented on July 19, 2024

Yup, it's not a consistent issue for us either. Which it makes it hard to reproduce and debug unfortunately.

from dseg.

alex-mathew avatar alex-mathew commented on July 19, 2024

any solutions?

from dseg.

JapanYoshi avatar JapanYoshi commented on July 19, 2024

Are you (or the renderer) using an image file to store the digits? It might be that the glyph stored above the 1 and 4 in the spritesheet has the lowest segment enabled, and scaling the image makes the glyph bleed down. It also explains why the issue only happens on 1 and 4, which have the highest segment disabled.

from dseg.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.