Skip to content

Hashtag (#) breaks standard HTML/CSS #11

@rugaard

Description

@rugaard

I'm not sure using the # as a token is wise. Trying it out I hit quite a few cases where it completely standard HTML/CSS was interpreted as Leaf methods.


Two quick examples

A common way to "pop" modals is using an <a> where the href is just a #.

<a href="#" class="btn btn-primary" data-toggle="modal">

(I know you could just use <button> instead of <a> but not everybody do that)

You also won't be able to use inline hex-colors, which is also something a lot of people are doing (at least the lazy ones).

<h1 style="color: #ff0000">This heading is red</h1>

There are probably a lot more cases, where the # would make Leaf conflict with normal standard HTML/CSS. So maybe it would be better/wiser to use a different token?

Or maybe change it to a double ##? I don't know. All I know is a single # unfortunately causes quite the trouble :(

Activity

rugaard

rugaard commented on Sep 1, 2016

@rugaard
Author

Okay, so I figured out (by re-reading the README.md) that you can use#(). But imho this is not a very good way. People are starting to use SVG images more and more and in those you often end up using HEX colors. Which would result in this:

<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <defs>
        <linearGradient x1="0%" y1="100%" x2="100%" y2="0%">
            <stop offset="0%"></stop>
            <stop stop-color="#()37EF81" offset="100%"></stop>
        </linearGradient>
    </defs>
    <!-- ......... -->
</svg>

Also - returning to my "popping a modal" example - people who are using Bootstrap (which is quite a lot) are used to reference modals by their ID's.

<button type="button" data-toggle="modal" data-modal="#()modal"></button>
<div id="modal">This is a modal</div>

Having worked a lot with HTML/CSS and knowing others who do, turning every # into #() is something that will annoy them very very much.

Personal opinion is still that the token should either change to ## or a completely different token which doesn't conflict with ordinary HTML/CSS.

loganwright

loganwright commented on Oct 24, 2016

@loganwright
Member

Closing after a lot of discussion around this just to start some cleanup. Let's revisit if we need to 👍

dennishn

dennishn commented on Dec 22, 2016

@dennishn

I am not sure if this is the correct issue to resurrect this topic in, but here goes.

Unfortunately it is currently not possible to reference fragment identifiers in leaf templates. Example:

<a href=“#fooBarHeading”>Scroll the fooBarHeading into view</a>
…further down the doc…
<h1 id=“fooBarHeading”>fooBarHeading</h1>

As stated here: https://tools.ietf.org/html/rfc3986#section-2.2, the # (amongst others) is a reserved URI character and is used in URLs to reference fragments of a page.

A solution could be to make the token symbol customizable - but it would require configuration from developers if the default is kept as #.

Resources:
https://en.wikipedia.org/wiki/Fragment_identifier
https://tools.ietf.org/html/rfc3986#section-2.2 (Reserved Characters)
https://tools.ietf.org/html/rfc3986#section-3 (Syntax Components)

tanner0101

tanner0101 commented on Jan 16, 2017

@tanner0101
Member

@dennishn you can use #() to output a # in Leaf or use #raw() { } inside of which you can freely use #.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @rugaard@tanner0101@dennishn@loganwright

        Issue actions

          Hashtag (#) breaks standard HTML/CSS · Issue #11 · vapor/leaf