Title
#thinking-together
Felix Kohlgrüber

Felix Kohlgrüber

07/30/2019, 10:57 AM
How would you render source code if you weren't tied to a 2D grid of monospace characters? I'd probably start by using a proportional font for all words in the code. I posted an example of this here: https://mobile.twitter.com/FKohlgrueber/status/1156152950093426688 After getting used to it, I feel like it's easier to scan the code in that representation. What do you think?
ogadaki

ogadaki

07/30/2019, 11:01 AM
I agree with you, I find it more readable! In your example I find nothing that is better in monospace.
Stefan

Stefan

07/30/2019, 11:45 AM
Hey, are you two sneakily making the point that “textual” is just a subset of “visual” and we’ve been using visual programming languages all along…? 🤨😆
Adrian Sieber

Adrian Sieber

07/30/2019, 12:58 PM
w

wtaysom

07/30/2019, 1:13 PM
Verdana has been my programming font of choice for some time. #what-is-Smalltalk-may-never-die
Felix Kohlgrüber

Felix Kohlgrüber

07/30/2019, 2:03 PM
My point is that "textual" is more than what our 70's terminals and text editors support currently. Websites and word processors have shown more advanced textual systems and it's time to make similar progress in programming tools.
w

wtaysom

07/30/2019, 2:24 PM
Though getting Word to not have weird hidden formatting oddities in a shared document? It's not a thing I'm managed to accomplish.
Felix Kohlgrüber

Felix Kohlgrüber

07/30/2019, 2:39 PM
@wtaysom this could be solved by separating the view and edit representation (think LaTeX)
2:41 PM
Or simply by doing formatting automatically using a code formatter like tool while editing
p

Philipp Krüger

07/30/2019, 3:10 PM
@Adrian Sieber Syvis looks interesting. Is it an open source project? I can't find any info about it.
Adrian Sieber

Adrian Sieber

07/30/2019, 3:10 PM
It’s supposed to be open source. Haven’t found the time to release it yet
3:11 PM
Will post it in #feedback when it’s published
3:11 PM
p

Philipp Krüger

07/30/2019, 3:14 PM
Weirdly, perhaps, I'm especially interested in where you drew your inspiration from in terms of visual style, that's why I was looking for a project page 🙂
Adrian Sieber

Adrian Sieber

07/30/2019, 3:16 PM
The design is my own. Not sure If i was inspired by anything in particular…
3:17 PM
Someone mentioned https://www.greenfoot.org/frames/, which looks eerily similar. But I hadn’t known it before, so it was definitely not an inspiration 😅
robenkleene

robenkleene

07/30/2019, 3:28 PM
TextMate uses mixing fonts to great effect in their Markdown rendering, one of their best tricks is using multiple font sizes for things like headers. Here's an image comparing TextMate and Atom's Markdown rendering
Adrian Sieber

Adrian Sieber

07/30/2019, 3:31 PM
I had been using that in the past, but I’m ambivalent. Markdown was explicitly designed to be readable as plain text. If people start formatting markdown shitty (e.g. more than 80 characters / line) just because it looked good in their editor, I get really annoyed ^^
robenkleene

robenkleene

07/30/2019, 3:47 PM
Ha, doesn't that apply to everything in this thread? 🙂 I'd consider plain text a file format, not a specific rendering (otherwise wouldn't syntax highlighted code not be plain text?) If you want to say "Markdown was designed to look good in Monospace fonts without colors or weights" then you can, but that seems awfully dogmatic to me personally. The beauty of plain text as a format everyone can use the tools they want, with the features they want, and we can all read and edit the same file!
Adrian Sieber

Adrian Sieber

07/30/2019, 3:49 PM
Sorry, but I’m awfully dogmatic 😂
3:50 PM
That’s why I’m in favor of storing the AST. Then we can finally all agree that this is definitely not meant to be edited as is =P
robenkleene

robenkleene

07/30/2019, 3:53 PM
Totally fair enough 😂
g

Garth Goldwater

07/30/2019, 4:35 PM
paging @andrew blinn since fructure takes this idea one step further:

https://www.youtube.com/watch?v=CnbVCNIh1NA

Felix Kohlgrüber

Felix Kohlgrüber

07/30/2019, 8:59 PM
@Garth Goldwater I know both projects and I'm interested to see where they'll go in the future. My current hypothesis is that standard text editing is actually a really powerful input method, both because it consists of only a few primitive operations and because people are used to it already. Generations of structure editors have failed to become mainstream and I think that a big factor for that is that the interaction (while being really clever and conforming to the inherent structure of the code) isn't intuitive / primitive enough to not stand in the programmer's way. That's why I'm currently exploring which features of structure editors (e.g. advanced rendering) can be used in an editor while keeping the interaction close to what users know already.
Edward de Jong / Beads Project

Edward de Jong / Beads Project

07/31/2019, 3:33 AM
Proportional fonts shrink the horizontal anywhere from 20 to 25 percent. This improves readability; however, most proportional fonts are not designed to highlight punctuation characters, which are incredibly meaningful in most languages. So that is a big drawback. Also, monospacing is much better for editing, as you often need to get to a specific point, and in proportional fonts some of the letters are optimized to be very close together; in fact, if your kerning is good, the letters will overlap quite a bit, and Apple is very good at kerning. So this works against you. You can fix the punctuation issue by forcing people to have a specific font, but that is not a recipe for acceptance. For this reason, although proportional fonts are a nicety and do increase readability significantly, during editing they are a drawback, and so i think a dual mode system will be necessary: proportional for printing, scanning, and monospaced during editing.
alltom

alltom

07/31/2019, 4:13 AM
How about some literate programming, elastic tabstops, hyperlinks, and schematic tables?
Felix Kohlgrüber

Felix Kohlgrüber

07/31/2019, 6:23 AM
@Edward de Jong / Beads Project That's why I've used a proportional font for words (keywords, variable names, ...) only. Punctuation characters and spaces are still monospace so that they're large enough. I don't see a problem in editing words displayed using a proportional font, I'm actually doing this right now to write this text. Using different fonts could easily be implemented in a code editor that supports syntax highlighting. In addition to color and weight, one would also specify a font for each token type.
g

guitarvydas

07/31/2019, 11:11 AM
@Felix Kohlgrüber Ron Baeker did some research on typography for code. I haven’t read this, but it turned up during searches: https://books.google.ca/books/about/Human_Factors_and_Typography_for_More_Re.html?id=QstWAAAAMAAJ&redir_esc=y
Felix Kohlgrüber

Felix Kohlgrüber

07/31/2019, 12:18 PM
@guitarvydas I think I've read a part of this book a while ago. I'm not sure how relevant it is nowadays because display and font technology have advanced a lot in the last 30 years, but I'll take a look at it again. Thanks for reminding me 😉
s

Steve Dekorte

08/01/2019, 10:29 PM
Fructure looks pretty good. Do you know if it supports drag and drop?
g

Garth Goldwater

08/02/2019, 7:45 PM
i don’t think so yet but it’s very much a work in progress
andrew blinn

andrew blinn

08/03/2019, 2:49 PM
@Steve Dekorte soooon... Most of the hooks are in for mouse support. But I'm taking a while to focus on perf and address some technical debt
j

Josh Marinacci

08/08/2019, 6:47 PM
This is my exploration of the topic from a few years ago. https://www.joshondesign.com/2014/08/25/typopl2