Text rendering is altered

[ghivert]

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:

Any idea?

[Alhadis]

Hi @ghivert,

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

[ghivert]

/*
 * 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]

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):

   

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

   

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

   

[kencruz07]

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".

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

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

[Alhadis]

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]

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]

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... :confused:

[ghivert]

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]

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... :thinking:

[dimpiax]

@ghivert thanks for solution!