dir="..."

README.md

@@ -27,22 +27,25 @@ Here is an example usage of **ziba.js**:
 				Notice that the href now has the value of the title of the ziba-link
 			</p>
 			<p>
-				<ziba-link tramsform="lowercase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./once twice thrice fource">once Twice tHRICE FOURCE</a>
+				<ziba-link transform="lowercase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./once twice thrice fource">once Twice tHRICE FOURCE</a>
 			</p>
 			<p>
-				<ziba-link tramsform="uppercase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./ONCE TWICE THRICE FOURCE">once Twice tHRICE FOURCE</a>
+				<ziba-link transform="uppercase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./ONCE TWICE THRICE FOURCE">once Twice tHRICE FOURCE</a>
 			</p>
 			<p>
-				<ziba-link tramsform="lowersnakecase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./once_twice_thrice_fource">once Twice tHRICE FOURCE</a>
+				<ziba-link transform="lowersnakecase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./once_twice_thrice_fource">once Twice tHRICE FOURCE</a>
 			</p>
 			<p>
-				<ziba-link tramsform="uppersnakecase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./ONCE_TWICE_THRICE_FOURCE">once Twice tHRICE FOURCE</a>
+				<ziba-link transform="uppersnakecase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./ONCE_TWICE_THRICE_FOURCE">once Twice tHRICE FOURCE</a>
 			</p>
 			<p>
-				<ziba-link tramsform="lowerllamacase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./oncetwicethricefource">once Twice tHRICE FOURCE</a>
+				<ziba-link transform="lowerllamacase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./oncetwicethricefource">once Twice tHRICE FOURCE</a>
 			</p>
 			<p>
-				<ziba-link tramsform="upperllamacase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./ONCETWICETHRICEFOURCE">once Twice tHRICE FOURCE</a>
+				<ziba-link transform="upperllamacase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./ONCETWICETHRICEFOURCE">once Twice tHRICE FOURCE</a>
+			</p>
+			<p>
+				<ziba-link dir="apple Banana CHERRY">>once Twice tHRICE FOURCE</ziba-link> should become <a href="./apple Banana CHERRY/once twice thrice fource">once Twice tHRICE FOURCE</a>
 			</p>
 			<p>
 				ziba-link is designed to work for only local links.
@@ -64,8 +67,9 @@ Here is an example usage of **ziba.js**:
 
 * `<ziba-link>` — used for local links.
   * attributes:
-    * `title`
+    * `dir`
-    * `tramsform`
+    * `name`
+    * `transform`
 
 ## Import
 

ziba.js

@@ -99,7 +99,15 @@ function transform_link(rootElement) {
 			}
 		}
 
-		const href = "./"+ref
+		let dir = element.getAttribute("dir")
+
+		let href = "./"
+		if ('string' === typeof dir && "" !== dir) {
+			href += dir
+			href += "/"
+		}
+		href += ref
+
 		anchor.setAttribute("href", href)
 
 		element.replaceWith(anchor)

ziba_test.js

@@ -108,6 +108,10 @@ function testTransform() {
 			html:'<ziba-link transform="lowercase">apple Banana CHERRY</ziba-link>',
 			expected:'<a href="./apple banana cherry">apple Banana CHERRY</a>',
 		},
+		{
+			html:'<ziba-link dir="one TWO tHREE Four" transform="lowercase">apple Banana CHERRY</ziba-link>',
+			expected:'<a href="./one TWO tHREE Four/apple banana cherry">apple Banana CHERRY</a>',
+		},
 
 
 
@@ -143,6 +147,10 @@ function testTransform() {
 			html:'<ziba-link transform="uppercase">apple Banana CHERRY</ziba-link>',
 			expected:'<a href="./APPLE BANANA CHERRY">apple Banana CHERRY</a>',
 		},
+		{
+			html:'<ziba-link dir="one TWO tHREE Four" transform="uppercase">apple Banana CHERRY</ziba-link>',
+			expected:'<a href="./one TWO tHREE Four/APPLE BANANA CHERRY">apple Banana CHERRY</a>',
+		},
 
 
 
@@ -178,6 +186,10 @@ function testTransform() {
 			html:'<ziba-link transform="lowersnakecase">apple Banana CHERRY</ziba-link>',
 			expected:'<a href="./apple_banana_cherry">apple Banana CHERRY</a>',
 		},
+		{
+			html:'<ziba-link dir="one TWO tHREE Four" transform="lowersnakecase">apple Banana CHERRY</ziba-link>',
+			expected:'<a href="./one TWO tHREE Four/apple_banana_cherry">apple Banana CHERRY</a>',
+		},
 
 
 
@@ -213,6 +225,10 @@ function testTransform() {
 			html:'<ziba-link transform="uppersnakecase">apple Banana CHERRY</ziba-link>',
 			expected:'<a href="./APPLE_BANANA_CHERRY">apple Banana CHERRY</a>',
 		},
+		{
+			html:'<ziba-link dir="one TWO tHREE Four" transform="uppersnakecase">apple Banana CHERRY</ziba-link>',
+			expected:'<a href="./one TWO tHREE Four/APPLE_BANANA_CHERRY">apple Banana CHERRY</a>',
+		},
 
 
 
@@ -248,6 +264,10 @@ function testTransform() {
 			html:'<ziba-link transform="lowerllamacase">apple Banana CHERRY</ziba-link>',
 			expected:'<a href="./applebananacherry">apple Banana CHERRY</a>',
 		},
+		{
+			html:'<ziba-link dir="one TWO tHREE Four" transform="lowerllamacase">apple Banana CHERRY</ziba-link>',
+			expected:'<a href="./one TWO tHREE Four/applebananacherry">apple Banana CHERRY</a>',
+		},
 
 
 
@@ -283,6 +303,10 @@ function testTransform() {
 			html:'<ziba-link transform="upperllamacase">apple Banana CHERRY</ziba-link>',
 			expected:'<a href="./APPLEBANANACHERRY">apple Banana CHERRY</a>',
 		},
+		{
+			html:'<ziba-link dir="one TWO tHREE Four" transform="upperllamacase">apple Banana CHERRY</ziba-link>',
+			expected:'<a href="./one TWO tHREE Four/APPLEBANANACHERRY">apple Banana CHERRY</a>',
+		},
 	]
 
 	tests.forEach(function(test, testNumber){