Giter Club home page Giter Club logo

Comments (4)

invicticide avatar invicticide commented on August 10, 2024

Try removing the softbreak: "<br/>" from the commonmark.HtmlRenderer constructor near the top of Compiler.ts, or alternately changing it to something else per the commonmark.js readme.

from fractive.

invicticide avatar invicticide commented on August 10, 2024

I added a hardLineBreaks option to fractive.json which controls this behavior. It's enabled by default which preserves the existing behavior without needing to rewrite our examples/documentation. It also feels easier and more intuitive to work with (to me), specifically for use cases like this:

{{Start}}

Here is some text in a regular ol' paragraph. This part is fine.

[Do a thing]({@DoThingA})
[Do another thing]({@DoThingB})

I find this sort of usage very natural. With hardLineBreaks:true this renders the links on two separate lines (not paragraphs) which is what I expect based on the Markdown source formatting:

Do a thing
Do another thing

With hardLineBreaks:false this renders the links side-by-side because the \n in the rendered HTML source is collapsed to a single space by the browser:

Do a thing Do another thing

That's fixable by putting the two trailing spaces after the first link, which is technically correct per the official Markdown spec, but is also counterintuitive and invisible, which makes me kind of hate it. 😒

Anyway, with the above-referenced commit this behavior can be switched on or off in fractive.json on a per-story basis so the only thing really left to resolve is what the default setting should be and why.

from fractive.

NQNStudios avatar NQNStudios commented on August 10, 2024

You're right about the use-case where links are separated by line breaks. It's what I've been doing, and when I tried switching to markdown-it-attrs, those links appearing on the same line was one of the major things that bothered me.

On the other hand, if using a text editor with automatic line wrapping (which is really nice), Fractive devs will end up with a story where line breaks are placed according to their text editor's settings, making responsive design impossible. Which is a huge problem for making webgames.

The best of both worlds would be adopting hard line breaks as the default, but hacking in some kind of solution for the link situation. Not pretty, but better for an average Fractive dev.

from fractive.

NQNStudios avatar NQNStudios commented on August 10, 2024

Or, just turn every set of links into an unordered list.

* [Do a thing]({#DoIT})
* [Do another thing]({#DoTHAT})

from fractive.

Related Issues (20)

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.