I use kramdown to convert users' markdown to HTML, effectively like this:

Kramdown::Document.new(text).to_html

However, the text can be in English, Hebrew, French, Arabic, or any other language, and each paragraph or header can be in a different language. For this reason, each block element in the HTML (<p>, <h3>, etc.) needs to have the attribute dir="auto" so the text direction is appropriate based on the content. This is what most popular platforms do with user markdown.

How do I do this with kramdown? I want the default HTML structure that the above code gives, just with dir="auto” on each block element.

I use kramdown to convert users' markdown to HTML, effectively like this:

Kramdown::Document.new(text).to_html

However, the text can be in English, Hebrew, French, Arabic, or any other language, and each paragraph or header can be in a different language. For this reason, each block element in the HTML (<p>, <h3>, etc.) needs to have the attribute dir="auto" so the text direction is appropriate based on the content. This is what most popular platforms do with user markdown.

How do I do this with kramdown? I want the default HTML structure that the above code gives, just with dir="auto” on each block element.

• ruby
• kramdown

Share Improve this question Follow asked Mar 22 at 11:02 NeatNitNeatNit 65611 gold badge55 silver badges1717 bronze badges 2

• For some unnecessary context, this is for OpenStreetMap, and this is the actual code: github/openstreetmap/openstreetmap-website/blob/… . I am actually totally new to Ruby and having trouble understanding the kramdown documentation. – NeatNit Commented Mar 22 at 11:08
• Slowly wrapping my head around this. Seems like I'll need to subclass the HTML converter: kramdown.gettalong./rdoc/Kramdown/Converter/Html.html – NeatNit Commented Mar 22 at 11:38

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

It's some workaround to patch Kramdown::Element class

This code will add to all elements attribute dir="auto"

module Kramdown
  class Element
    def initialize(type, value = nil, attr = nil, options = nil)
      @type, @value, @attr, @options = type, value, Hash(attr), options
      @children = []

      @attr['dir'] = 'auto'
    end
  end
end

You can add condition if you need to apply it only for block elements

@attr['dir'] = 'auto' if block?

In this case it will work such way

Kramdown::Document.new("1 *2*").to_html
# => "<p dir=\"auto\">1 <em>2</em></p>\n"

Of course you can specify your own condition depending on your needs

For example

@attr['dir'] = 'auto' if block? || type == :codespan # or any logics you want

Also I recommend to read about Ruby refinements if you want to avoid monkey patching

I ended up doing it by modifying the document after its creation:

doc = Kramdown::Document.new(text)

should_get_dir_auto = lambda do |el|
  dir_auto_types = [:p, :header, :codespan, :codeblock, :pre, :ul, :ol, :table, :dl, :math]
  return true if dir_auto_types.include?(el.type)
  return true if el.type == :a && el.children.length == 1 && el.children[0].type == :text && el.children[0].value == el.attr["href"]

  false
end

add_dir = lambda do |element|
  element.attr["dir"] ||= "auto" if should_get_dir_auto.call(element)
  element.children.each(&add_dir)
end
add_dir.call(doc.root)

doc.to_html