Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

elm

Disclaimer: I'm brand new to Elm

I'm fiddling around with the online Elm editor and I've run into an issue. I can't find a way to get certain special characters (copyright, trademark, etc.) to show up. I tried:

import Html exposing (text)

main =
  text "©"

All that showed up was the actual text ©. I also tried to use the unicode character for it \u00A9 but that ended up giving me a syntax error:

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

The only way I found was to actually go to someone's website and copy/paste their copyright symbol into my app:

import Html exposing (text)

main =
  text "©"

This works, but I would much rather be able to type these characters out quickly instead of having to hunt down the actual symbols on other websites. Is there a preferred/recommended method of getting non-escaped text when returning HTML in Elm?


Edit:

Specifically for Mac:

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

All tested in the online editor and they worked. This still doesn't attack the core issue, but it's just something nice to note for these specific special characters.

like image 328
Sam Avatar asked Nov 28 '15 12:11

Sam


People also ask

Which are the special characters in HTML and how are they specified in HTML?

HTML special characters are assigned an entity name and an entity number, both of which can be used to render the character in an HTML document. These codes and names have a specific format, which is generally represented as &#xxxx; for numbers and &xxxx; for names, where xxxx is either a name or a number.

How special characters are used in HTML5 with an example?

Some characters are reserved in HTML5. For example, you cannot use the greater than and less than signs or angle brackets within your text because the browser could mistake them for markup. HTML5 processors must support the five special characters listed in the table that follows.

What are special characters called in HTML?

Characters with special meaning in HTML are called reserved characters.


4 Answers

Why this is (intentionally) not so easy

The "makers" of Elm are understandably reluctant to give us a way to insert "special" characters into HTML text. Two main reasons:

  1. This would open a "text injection" hole where a malicious user could insert any HTML tags, even JavaScript code, into a Web page. Imagine if you could do that in a forum site like Stack Overflow: you could trick anyone reading your contribution into executing code of your choosing in their browser.
  2. Elm works hard to produce optimal DOM updates. This only works with the content of tags that Elm is aware of, not with text that happens to contain tags. When people insert text containing HTML tags in an Elm program, there end up being parts of the DOM that can't be optimized.

How it's possible anyway

That said, the Elm user community has found a loophole that affords a workaround. For the reasons above, it's not recommended, especially not if your text is non-constant, i.e. comes from a source outside your program. Still, people will be wanting to do this anyway so I'm going to document it to save others the trouble I had digging everything up and getting it working:

  1. If you don't already have it,
    import Json.Encode exposing (string)
    This is in package elm-lang/core so it should already be in your dependencies.
  2. Similarly,
    import Html.Attributes exposing (property)
  3. Finally, create a tag having a property "innerHTML" and a JSON-Value representation of your text, e.g.:
    span [ property "innerHTML" (string " ") ] []
like image 62
Carl Smotricz Avatar answered Sep 17 '22 21:09

Carl Smotricz


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)
like image 28
YevheniiHloba Avatar answered Sep 18 '22 21:09

YevheniiHloba


You can use directly the unicode escape code in Elm strings and chars:

We have a util module containing all our special chars like:

module Utils.SpecialChars exposing (noBreakSpace)

noBreakSpace : Char
noBreakSpace = '\x00A0'

Which can be used as:

let
  emptyLabel = String.fromChar noBreakSpace
in
label []
    [ span [ ] [ text emptyLabel ]
    ]

This will render a <span>&nbsp;</span>

like image 45
Samuel Avatar answered Sep 20 '22 21:09

Samuel


I recently created an Elm package that solves this. If you use text' "&copy;" it'll render the copyright symbol © instead of the escape code. Also works with "&#169;" and "&#x000A9;". Hope this helps!

like image 35
Jason Mahr Avatar answered Sep 17 '22 21:09

Jason Mahr