Git Product home page Git Product logo

keyrune's Introduction

Keyrune v3.14.0

The Magic: the Gathering set symbol font!

Heads up: the documentation page has been moved to keyrune.andrewgioia.com!

Keyrune is the first suite of complete Magic: the Gathering expansion and set symbols as a pictographic font. You can use this font anywhere you want to display set symbols—in your MtG app or website, documents, card images, anything!

Usage

Each set symbol has its own font character. Display them in a manner similar to Font Awesome using the <i class="ss ss-exp"></i> element. Class name codes are based on the expansion codes from MTG JSON.

To use Keyrune via source, NPM, or Bower, move the font files to your /fonts directory and include the keyrune.css stylesheet in your <head>:

<link href="css/keyrune.css" rel="stylesheet" type="text/css" />

NEW: you can now include Keyrune via CDN thanks to the amazing jsDelivr project! To include the latest version, reference:

<link href="//cdn.jsdelivr.net/npm/keyrune@latest/css/keyrune.css" rel="stylesheet" type="text/css" />

Note: as of v3.1.1 (June 2017) the URL format for jsDelivr changed to the above. They still maintain backwards compatibility for everything prior to that but going forward please use the above URL. You no longer need to explicitly include the font-family via @font-face as well, but if you still would like to here is the css ruleset:

@font-face {
  font-family: 'Keyrune';
  src: url('//cdn.jsdelivr.net/npm/keyrune@latest/fonts/keyrune.eot');
  src: url('//cdn.jsdelivr.net/npm/keyrune@latest/fonts/keyrune.eot?#iefix') format('embedded-opentype'),
    url('//cdn.jsdelivr.net/npm/keyrune@latest/fonts/keyrune.woff2') format('woff2'),
    url('//cdn.jsdelivr.net/npm/keyrune@latest/fonts/keyrune.woff') format('woff'),
    url('//cdn.jsdelivr.net/npm/keyrune@latest/fonts/keyrune.ttf') format('truetype'),
    url('//cdn.jsdelivr.net/npm/keyrune@latest/fonts/keyrune.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

Editing the Source

Feel free to edit the source files and compile Keyrune to fit your needs. Both LESS and Sass are supported.

Using Keyrune on the Desktop

To copy Keyrune symbols into your desktop software (or access to vectors directly), go to the Cheatsheet on the documentation site, copy the character (not the unicode representation), and then paste it into your desktop application after installing keyrune.ttf.

If you're having trouble and want step-by-step instructions and a sample Word document to use, head on over to the documentation page!

License

All set symbol images are trademarks of Wizards of the Coast (http://magicthegathering.com). Please see the LICENSE.md file for a complete description of the licenses that Keyrune is distributed under. Public attribution is greatly appreciated but not required!

Changelog

The Changelog and todo items have been moved to a dedicated file, CHANGELOG.md.

keyrune's People

Contributors

andrewgioia avatar ardeay avatar arjenbrandenburgh avatar jaygray avatar johannes-wolf avatar jordanbrauer avatar mikegioia avatar nogweii avatar pierce-edmiston-8l avatar pioz avatar silasary avatar thepiebandit avatar vito-royeca avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

keyrune's Issues

Trouble with the BRB symbol

We've found that the BRB symbol is prone to breakage, most likely due to an unclosed path.

screen shot 2017-05-16 at 10 06 22 am

Fixed SVG markup:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M917.3 622.4c0-17.9 13.4-52.5 13.4-52.5l40.2-19v-40.3l-40.2-19s-13.4-34.6-13.4-52.5c0-17.8 13.4-77 107.2-81.5 0 0-76-107.2-205.5-107.2S582.3 313 526.4 415.7c0 0 86-63.7 201.1-63.7 87.1 0 112.8 58.1 112.8 88.2 0 30.2-25.7 63.6-93.9 63.6-68.1 0-108.3-22.3-108.3-22.3S628 505 544.3 505H49.5l-22.4-10-24.5 35.7 24.5 35.8 22.4-10.1h494.7c83.7 0 93.8 23.5 93.8 23.5s40.2-22.3 108.3-22.3c68.2 0 93.9 33.5 93.9 63.6 0 30.2-25.7 88.2-112.8 88.2-115.1 0-201.1-63.6-201.1-63.6C582.2 748.6 689.4 811.1 819 811.1s205.5-107.2 205.5-107.2c-93.8-4.5-107.2-63.7-107.2-81.5z"/></svg>

How long does the CDN takes to update?

When I go under //cdn.jsdelivr.net/keyrune/latest/ and look for the files, I find that W17 is still missing there. So how long does it take to update? It would be nice to have a benchmark, so that I know when I should update the css of the wiki.

SCSS won't compile due to missing commas

Lines 272-274 of _variables.scss
Change:
("Xbox Media Promo" 'pxbox', "\e915"),
("Magic Premiere Shop" 'pmps', "\e919"),
("Mirrodin Pure" 'pmpu', "\e91a"),

to

("Xbox Media Promo", 'pxbox', "\e915"),
("Magic Premiere Shop", 'pmps', "\e919"),
("Mirrodin Pure", 'pmpu', "\e91a"),

Chain Lock Symbol

There was one April Fools Joke which announced From the Vaults: Vaults.

They also showed a set symbol for the set which is a Chain Lock.

chain_lock_symbol

Archenemy vs Archenemy: Nicol Bolas

Hi, I was looking at the two symbols and up until now I was thinking they should be identical. However the keyrunes are slightly different. Is there a reason for that?

Update to latest in npm (currently 1.7.1)

Hello,

I'm using npm (or yarn) to install keyrune but it seems to be not updated to the latest version of keyrune. Can you update to the latest version please on npm ?

I think you can create a webhook on github to synchronise npm repository and your repository in order to have the latest at each push.

Thanks for this amazing work!

https://www.npmjs.com/package/keyrune

Magic Duels

Some cards in Magic Duels (I think the base collection that you get with a new account) use a set symbol similar to the one for M10–M15, but showing a stylized capital D in the bezel. Here's a screenshot I found showing some cards with this set symbol.

Publishing on NPM

This issue is both for Keyrune and Mana. Could it be possible to publish them on npm? It would help to keep the dependencies in line with the rest of the application (especially versionning), and wouldn't rely on your repository availability (its name could change, your account could be hijacked and malicious commits be issued, or the repository itself could even be taken down).

On a related note, it seems that the keyrune package name is currently available, but mana is already used, which means that we can't use both the official package and yours with npm. Publishing your packages on npm would prevent this issue from happening again (granted, you would need to rename them first into something like mtg-keyrune / mtg-mana).

`ss-grad` adds `-webkit-text-stroke` which distorts some icons

It's mostly with set icons that have intricate details inside the icon, e.g. the core set icons. Here's an example:

screen shot 2016-06-11 at 2 12 29 pm

This example is showing the icons without ss-grad, with ss-grad, and with ss-grad and -webkit-text-stroke: 0.

Edit: This is on Chrome 53.0.2764.0 canary on OSX 10.11.4,

Trouble with the HOU symbol

I am currently not quite sure how to import the css properly into the wiki, so I usually update the common css: https://mtg.gamepedia.com/MediaWiki:Common.css

From my point of view that looks correct. However when I try to display the HOU symbol it simply does not work: https://mtg.gamepedia.com/User:Yanderesliver/sandbox2 (at least in my browser I only see white rectangles)

I cleared the cache multiple times already... Any idea what might cause the issue?
Did something went wrong with the update?

Allow for linkable symbols in the documentation site

I'd like a way to link to set symbols via URL, so that you could point directly to andrewgioia.github.io/Keyrune/icons/mmq and go to the icons.html page with a large preview of the Mercadian Masque symbol.

This should also be what shows in a modal when you click on one of the icons on the icons.html page as well. Currently all it does is hover and make the icon slightly larger.

Unofficial set symbols

We've received some requests for icons representing sets or collections of cards that have no official symbol or set code. I'm going to list them here and perhaps include a new section in the repo for "Unofficial symbols" that, while not ever used by Wizards and would need to be "custom," could be helpful for projects that need some way of uniquely distinguishing these cards.

[Editing this to be a checklist with update:]

  • Collector's Edition — blank core set icon with CE on it
  • International Collector's Edition — blank core set icon with IE on it
  • Revised FBB / FWB — kicking this, I don't think they need their own set symbols and agree with @csuhta on the use case
  • 4th Edition Alternate — while this is the same as above and I don't think this needs an alternate icon (they're still "4th Edition"), I'm going to make a 4th edition icon with an asterix for now and see if it's usable
  • Introductory Two-Player Set — this seems extremely minor to create an icon for but "2PS" stylized the same way as MPS will work here
  • Pro Tour and World Cup — these already have correct symbols in pmei and parl depending on the year
  • APAC and Euro lands — still investigating
  • Anthologies — this already has an icon in Keyrune
  • Judge Rewards — see Pro Tour and World Cup, icons exist

Contents missing when adding through npm

I have a project where I am using both Keyrune and Mana. I've added both to my package.json like this:

"dependencies": {
"keyrune": "git+https://[email protected]/andrewgioia/Keyrune.git",
"mana": "git+https://[email protected]/andrewgioia/Mana.git"
}

When I do a npm install, both folders get created in my node_modules as expected. However, the Mana package comes out fine, while in the Keyrune package files are missing. The only files that are available are package.json and README.md. There are no css, fonts or less folders.

Archenemy: Nicol Bolas (E01)

Some cards from this set were spoiled today, looks like another variant on the horns.
rzeggofc

Note the set code is E01 (with a zero, not an "oh")

Renaissance

Renaissance, the German/French equivalent of Chronicles, and Rinascimento, the Italian version, don't have official set symbols, but sometimes (e.g. on MKM) the Chronicles symbol is modified to use the letters R (for Renaissance) or Ri (for Rinascimento) instead of the C.

Follow up on set codes.

Two sets are a bit problematic: Nemesis and Portal 2.
Nemesis has two commonly used set codes: NMS and NEM (I think we found more evidence for NEM being the correct code, but NMS is used as well).
For Portal 2 you have PO2 and P02 (here is the main problem if the thing in the middle is an o or a 0).

Plans for an SCSS version/conversion?

I know this isn't an issue exactly, but I ask because SASS/SCSS has become a lot more popular than LESS.

If you are planing on doing this, do you need hand?

Card Icons

Hi,

Are there any plans to add card icons such as mana-type, energy, tap, etc. ?
I guess it would be useful to add those for apps that want to a have consistent iconography.

Thanks :)

Timeshifted Rarity

I worked on timeshifted rarity a bit looks like this: https://mtg.gamepedia.com/User:Yanderesliver/sandbox

I put the following code in the mtg wiki css, not sure if you would want to add it to the project:

.ss-time {
color: #800080;
}
.ss-time.ss-grad {
background: -webkit-gradient(linear, left top, right top, color-stop(1%, #800080), color-stop(50%, #D8BFD8), color-stop(100%, #800080));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #800080 1%, #D8BFD8 50%, #800080 100%);
-webkit-text-stroke: 0.03em #000;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.ss-time.ss-grad.ss-no-border {
-webkit-text-stroke: 0;
}

MPS promo symbol

Some of the MPS promos (particularly the Japanese ones) used an "MPS" promo set symbol. References are hard to find online but I think these might be usable:

screen shot 2017-01-26 at 4 44 25 pm

screen shot 2017-01-26 at 4 44 56 pm

Update certain icons to more accurately resemble card symbols

It looks like the official card symbols are a bit different than their Keyrune icons for a number of symbols. For the next major release these should all be corrected and redrawn if necessary.

  • 4th, 5th, and 6th Editions: the bars are taller (thicker) in the original icons
  • 7th Edition: the stem of the 7 has a larger angle
  • 8th Edition: the "8" appears to be a different font
  • Ice Age: the card symbol is inverted from the Keyrune icon, I think this should be two versions for now as even though the thinner lines might be accurate to the card symbol it might not translate to the web
  • Mirage: the tree trunk is about the same but the leaves in Keyrune are tighter than those in the original symbol
  • Visions: the "V" is a different font and there is no bar extending from the black flag to the circle on the bottom
  • Portal Second Age: all lines are convex in the offical symbol, not straight, and the hole in the middle is smaller [redraw]
  • Shadowmoor: the left wing is wider in the official symbol

Thanks to Ron <greendisenchantproject.jimdo.com> for noticing these and compiling the original list.

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.