New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text rendering is altered #708

Closed
ghivert opened this Issue Feb 20, 2018 · 10 comments

Comments

Projects
None yet
4 participants
@ghivert

ghivert commented Feb 20, 2018

Hi!

I'm a huge fan of the package, but I noticed some bugs with the last version of atom: the name of a file is not always good.

For instance:

capture d ecran 2018-02-20 a 12 13 15 pm

Any idea?

@Alhadis

This comment has been minimized.

Member

Alhadis commented Feb 20, 2018

Hi @ghivert,

It's a styling issue. What styles do you have in ~/.atom/styles.less?

@ghivert

This comment has been minimized.

ghivert commented Feb 20, 2018

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed and saved.
 *
 * Add your own CSS or Less to fully customize Atom.
 * If you are unfamiliar with Less, you can read more about it here:
 * http://lesscss.org
 */


/*
 * Examples
 * (To see them, uncomment and save)
 */

// style the background color of the tree view
.tree-view {
  // background-color: whitesmoke;
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  // color: white;
  // background-color: hsl(180, 24%, 12%);
  text-rendering: optimizeLegibility;
}

// To style other content in the text editor's shadow DOM, use the ::shadow expression
atom-text-editor.cursor {
  // border-color: red;
}

atom-text-editor .vertical-scrollbar,
atom-text-editor.editor .vertical-scrollbar {
  opacity: 0;
  width: 0;
}

.syntax--comment {
  font-style: normal;
}

atom-text-editor .syntax--comment {
  font-style: normal;
}

[data-font='hasklig-medium'] atom-text-editor .syntax--comment {
  font-style: normal;
}

atom-text-editor .syntax--underline {
  text-decoration: none;
}

.lisp-paredit-status {
  display: none;
}

atom-text-editor, html {
  atom-text-editor-minimap {
    .minimap-visible-area {
      background-color: #7c7c7c;
      // Color of Visible area.
      opacity: 0;
      // Default 0 when you not working with minimap
      cursor: default;
      // Change cursor style to pointer.
      transition: 0.5s opacity;
      // Better UI.
      &:hover {
        opacity: 0.2;
      } // Only display Minimap visible area when working.
      &:active {
        cursor: default;
      } // Change cursor when dragging.
    }
    &:hover {
      .minimap-visible-area {
        opacity: 0.2;
        transition: opacity 1s;
      } // When Hover to all minimap area, visible area will display.
    }

    &:active {
      .minimap-visible-area {
        opacity: 0.2;
        transition: opacity 0.5s;
      } // Display Minimap visible area when dragging.
    }
  }
}

atom-text-editor {
  .syntax--source.syntax--js.syntax--jsx {
    .syntax--graphql {
      .syntax--alias {
        font-style: normal
      }
      .syntax--support.syntax--type.syntax--builtin {
        -webkit-filter: brightness(80%);
      }
    }
    .syntax--jsx {
      .syntax--entity {
        &.syntax--other {
          &.syntax--attribute-name {
             font-style: normal // color: @cyan;
          }
        }
      }
      .syntax--constant.syntax--character.syntax--entity {
        font-style: normal
      }
    }
  }
  .syntax--source.syntax--css.syntax--styled {
    .syntax--support.syntax--type.syntax--property-name.syntax--unknown {
      -webkit-filter: brightness(75%);
    }
  }
}

.linter-elm-make-inferred-type-annotation {
  font-style: normal;
}
@Alhadis

This comment has been minimized.

Member

Alhadis commented Feb 20, 2018

Have you installed file-icons to ~/.atom/packages/file-icons?

If so, check what styles are being applied to the affected tabs:

  1. Right-click the affected icon and select Inspect Element to open the dev-tools

  2. Screenshot or copy the properties that're being applied (visible in the bottom-left panel below):

Figure 1

  1. Reveal the origin of the offending stylesheet by clicking the greyed-out <style>…</style>:

Figure 2

  1. Screenshot or copy the highlighted <style> element. It should look something like this:

Figure 2

@kencruz07

This comment has been minimized.

kencruz07 commented Mar 1, 2018

Hi @Alhadis and @ghivert

I'm also having this same issue with atom
Atom 1.24.0
File Icons 2.1.17

It seems that this happens with the ruby-icon class. Upon using the inspector, the ruby-icon class is using "Octicons Regular".

image

As a quick fix, I've modified styles.less with:

.ruby-icon {
  font-family: inherit;
  font-size: inherit;
}
@Alhadis

This comment has been minimized.

Member

Alhadis commented Mar 1, 2018

Hey @kencruz07,

It seems like a theme or package is applying its own styling to .ruby-icon. The selector should be .ruby-icon::before, which targets the tab's icon and not its label. Could you tell me what themes and packages you have enabled?

@kencruz07

This comment has been minimized.

kencruz07 commented Mar 1, 2018

Thanks @Alhadis !

You're right, this seems to be the case. Tried inspecting where this new .ruby-icon class is coming from, and it's from the package language-ethereum. Same with @ghivert 's case, I assume he's working with this package too. For now I've disabled this package, since I'm already done experimenting with .sol files and such. But for his case, the snippet above may be useful.

Thanks for your help!

@Alhadis

This comment has been minimized.

Member

Alhadis commented Mar 1, 2018

Same with @ghivert 's case, I assume he's working with this package too

Seems likely, given he recently filed an issue to an Ethereum-related repository. I also noticed there's a PR still sitting open at caktux/language-ethereum#13 since June 2017 (one I even forgot I commented on... heh).

No recent activity from the owner for the last year, and the repository was last modified July 2016. Think it's safe to consider the package unmaintained at this point... 😕

@ghivert

This comment has been minimized.

ghivert commented Mar 1, 2018

Hi!

Sorry for not responding, I completely forgot about it… 😳

I ended up with uninstalling language-ethereum, because of the built-in styles.less in the package, which overrides file-icons behavior. I think file-icons is still the best solution for everything icon related in Atom, and nothing should override it.

language-ethereum seems like completely obsolete, and Latrasis/linter-solidity packs everything for developping Solidity contracts, including grammar file for .sol files.

It definitely was a problem from other package, not from file-icons. Thanks for your awesome work @Alhadis.

@Alhadis

This comment has been minimized.

Member

Alhadis commented Mar 1, 2018

No problem! Gonna close this now as there's really nothing we can do on our end.

It's strange that the package would even add this styling in the first place, though... 🤔

@Alhadis Alhadis closed this Mar 1, 2018

Alhadis added a commit that referenced this issue May 19, 2018

Update troubleshooting docs to explain #739
It's unlikely caktux/language-ethereum#13 will ever be merged, since the
package appears well-and-truly abandoned by its author.

References: #708, #718
@dimpiax

This comment has been minimized.

dimpiax commented Jun 10, 2018

@ghivert thanks for solution!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment