Comments (16)
Original suggestion:
Also, FWIW, a simple font comparison tool where people can directly compare a single body of text between 2 fonts may be your long term solution here. Perhaps you can include a few ready to code sample texts, one showing all the typical chars that vary (e.g., 0OIL1{}'") and then people may be able to choose a canonical code snippet of a chosen language, folded (so its a single line, stacked for easier comparison) and expanded (so its in block form).
from codeface.
Please update me with how you decide to address this, so I may follow and possibly contribute.
from codeface.
Sorry, this discussion has taken place in multiple issues and I am going to consolidate it here.
from codeface.
From @larsenwork
Personal preference but I'd say zooming in on examples can be a bit misleading and not really that relevant - I'd rather have a filterable preview of code examples.
So the user can set a couple of criteria like:
Pixel font
Semi-condensed
Slashed zero
Normal sized operators
Haskell ligatures
Supports all latin languages, cyrillic, greek
with live updates so only fonts meeting you criteria is shown.
from codeface.
From @larsenwork
I'd recommend you set it all up using github pages so read a bit about that if you're not familiar with how it works, buy a domain name and host the CDN at cloudflare.
Use modern web technologies and don't bother about legacy support - your visitors will not be browsing using IE8 and will have no problem switching a browser.
I saw this the other day and thought it looked great: http://tympanus.net/codrops/2015/06/16/filterable-product-grid/ (should be easy to change so you can make multiple selections)
from codeface.
From @chrissimpkins
Sounds great. I have multiple GH pages sites (for software documentation) and a paid Cloudflare account so we will be all set from that standpoint. I will need advice/help on the frontend design if you'd be willing to pitch in. Web design is definitely not my fortΓ©.
Like the concept in that link. That would work well with this project. Will get a repository set up for the website and be in touch once I do a bit more research into the best way to present it and am prepared to discuss a site scaffold in more detail. Thanks much.
from codeface.
from @larsenwork
You may already know this but it's really easy to loop through content with jekyll e.g. https://github.com/larsenwork/animalnoteheads/blob/gh-pages/_includes/tables.html#L13
from codeface.
from @larsenwork
So what we could do is to make every font a blog entry with a lot of metadata so it's filterable (and that meta data can always be expand/adjust down the line).
This way you only have to write the demo text once and just for-loop through all fonts.
Categories could be use for major groupings like bitmap, outline
from codeface.
from @chrissimpkins
Is it as simple as just adding new meta data fields to the header section of new posts?
from codeface.
from @larsenwork
could use tags for meta - they are defined in the frontmatter http://jekyllrb.com/docs/frontmatter/
from codeface.
The above discussion was merged from other issues and the discussion is current at this point. I will ask anyone commenting on this issue, to do so in this thread.
from codeface.
π So basically what we'll be creating is something like https://www.google.com/fonts but with preview + filters related to coding instead of general typography
from codeface.
What are your thoughts about this project to organize and display fonts by tags? It was recommended by a font foundry and looks pretty good:
from codeface.
Most of the work is done for you:
http://katydecorah.com/font-library/
from codeface.
thanks for sharing this. this would be perfect. let me dig through the site to see how she put it together and how we could transition it to these faces.
from codeface.
http://sourcefoundry.org/hack/playground.html
Most Codeface fonts are currently supported. Because of licensing issues you need to install fonts that are not available in Web font builds in order to compare. This uses the ACE editor and you can adjust text size, syntax highlighting, and the fonts used.
Enjoy!
from codeface.
Related Issues (20)
- Cousine has lost its semi-colon HOT 4
- + Nimbus Mono HOT 2
- add Mononoki
- Fastest way to install all the fonts? [windows/linux] HOT 6
- Idea: Categorize between coding fonts with ligatures and without and explain.. HOT 1
- Colorscheme name? HOT 7
- Replace Droid Sans Mono with Noto Sans Mono
- Designate which typefaces have programming ligatures HOT 14
- Show ligatures in examples HOT 4
- Aurulent Sans Mono's metadatum says OFL license HOT 2
- Font Rendering in Screenshots HOT 3
- Add Sarasa Gothic font HOT 1
- add font: Anka/Coder HOT 4
- Add three more weights to Roboto Mono
- please create a homebrew package HOT 4
- Wrong license for Liberation Mono? HOT 5
- DejaVu Sans Mono is not in the main gallery HOT 1
- Feature request: "[ home ]" link in the gallery. HOT 2
- [Feature Request] Add JetBrains Mono to CodeFace FontSet
- Add Twilio Sans Mono
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from codeface.