         (for [{:keys [name i]} models]
           [:option {:value i :key i} name])
         ]
+
+       [:label {:style {:margin-top "20px" :font-size "large"}} "Input a text"]
        [:textarea
         {:style textarea-style
          :on-change (fn [evt] (do (re-frame/dispatch [:change-text (-> evt .-target .-value)]) (re-frame/dispatch [:syllaby]))) :value @text-in}]
-       [:pre @text-syllabied]
+       [:label {:style {:margin-top "20px" :font-size "large"}} "This is the output"]
+       [:p {:style {:background "azure"}} @text-syllabied]
+       [:label {:style {:margin-top "20px" :font-size "large"}} "The text in table form (without punctuation)"]
        [:table.table.table-striped.table-bordered.table-hover.table-condensed.syllabied
         [:tbody
          [:tr [:th] (for [{:keys [short name]} models] [:th {:key name :title name} short])]
          (for
-             [[word syll-models] (filter #(not= (first %) " ") @splitted-mapped)]
+             [[word syll-models] (filter #(not (contains? punctuation-set (first %))) @splitted-mapped)]
            [:tr {:key (rand) :value (not= word " ")} [:td word]
             (map-indexed (fn [ix word] [:td {:key ix} word]) syll-models)
             ]

   {:i 4 :name "SSP" :short "SM5"}
   ])

(defn textarea []
  (let [
        table (re-frame/subscribe [:key-in-db :table-syllabied])

  (:require [reagent.core :as reagent :refer [atom]]
            [reagent.session :as session]
            [reagent.core :as r]
            [russyll.text :as text]
            [russyll.globals :as globals]
            [re-frame.core :as re-frame]
            [secretary.core :as secretary :include-macros true]
            [goog.events :as events]
            [goog.history.EventType :as EventType])

  (:use
   [russyll.globals :only [sformat]]
   [russyll.syllab :only [syll-single]]
   [russyll.orphoep :only [orpho-single ++ --]]
   [russyll.usertest :only [serve-words-rand calc-stats]]
   )
  (:import goog.History)
  )
