How can I get special characters using the elm-html module?

Question

Disclaimer: I'm brand new to Elm

I was messing around with Elm online editor and I ran into a problem. I cannot find a way to get certain special characters (copyright, trademark, etc.). I tried:

import Html exposing (text) main = text "©" 

All that appeared was the actual text © . I also tried using the unicode character for it \u00A9 , but this resulted in a syntax error:

 (line 1, column 16): unexpected "u" expecting space, "&" or escape code 

The only way I found is to actually go to someone's website and copy / paste your copyright symbol into my application:

 import Html exposing (text) main = text "©" 

This works, but I would rather be able to quickly type in these characters, instead of tracking the actual characters on other sites. Is there a preferred / recommended method for getting unescaped text when returning HTML to Elm?

Edit:

Specifically for Mac:

• the + g option gives you ©
• option + 2 gives you ™
• the + r option gives you ®

All were tested in the online editor, and they worked. This still does not attack the underlying problem, but it is just great for these special characters.

Answer 1

Why is it (intentionally) not so simple

The "creators" of Elm, for obvious reasons, are reluctant to give us a way to insert "special" characters into HTML text. Two main reasons:

• This will open a "text entry hole" where an attacker can insert any HTML tags, even JavaScript code, into a web page. Imagine if you can do this on a forum site such as Stack Overflow: you can trick anyone who reads your input into executing the code of your choice in your browser.
• Elm is working hard to create optimal DOM updates. This only works with the contents of tags Elm knows about, and not with text that contains tags. When people embed text containing HTML tags in an Elm program, they eventually become part of a DOM that cannot be optimized.

How is this possible anyway

However, the Elm user community has discovered a loophole that provides a workaround. For the reasons stated above, this is not recommended, especially if your text is inconsistent, i.e. From a source outside your program. However, people will still want to do this, so I'm going to document it in order to save others from the troubles that I dug up and make it work:

• If you don’t have one yet,
  import Json.Encode exposing (string)
  This is in the elm-lang/core package, so it should already be in your dependencies.
• Similar,
  import Html.Attributes exposing (property)
• Finally, create a tag that has the property "innerHTML" and JSON-Value representation of your text, for example:
  span [ property "innerHTML" (string " ") ] []

Answer 2

I recently created an Elm package that solves this. If you use text' "©" , it will display the security symbol © instead of the exit code. Also works with "©" and "©" . Hope this helps!

Answer 3

I found that there is a better solution: you can convert special characters from Unicode to char, and then create a string from char:

 resString = String.fromChar (Char.fromCode 187) 

Answer 4

You do not need to search for characters, you can get them from a list, for example this one .

If it is too bothersome to copy and paste, you can also create a helper function that you can use with your escaped characters, such as:

 import Html exposing (..) import String htmlDecode str = let replace (s1, s2) src= String.join s2 <| String.split s1 src chrmap = [ ("&reg;", "®") , ("&copy;", "©" ) ] in List.foldl replace str chrmap main = text <| htmlDecode "hello &copy;"