Simple Multilingual Blogging with Tabber Javascript

2008/04/28 20:03
왜?

나는 처음부터 영어권 친구들과 한국의 방문자들을 위해 동시에 2개국어로 블로그를 운영해보고 싶었다. 그러나 정확히 어떻게 할 지 몰랐었다. 자동 번역은 아예 거들떠 보지도 않고, 일단 한 페이지에 위에는 한국어, 밑에는 영어로 직접 글을 썼다. 하지만 역시 그림등 다른 것들과 함께 작성할때는 둘 중 한 언어로만 읽어보면 좀 어색할 듯한 면이 있었다.

텍스트큐브같은 블로그에서, 시스템 코어 코드를 수정하지 않고도, 간단하게 2개국어로 블로깅을 할 수 있는 방법은? 하고 쭉 생각하던 어느날 기발한 아이디어가 떠올랐으니!

이 블로그에 예전부터 쭉 방문해왔다면 언제부터인가 메인 포스팅 제목 밑에 “사용 가능 언어”라는 문구와, 상황에 따라 “English”와 “한국어”의 옵션이 나타난 것을 발견했을 것이다.

이것이 바로 “태버” 자바스크립트를 이용해 만든 기능이다.

어떻게?

구글에서 “tabber javascript”로 검색한 수많은 결과중 무료이고, 가볍고 단순한 스크립트를 찾아냈다. 내가 선택한 것은 BarelyFitz Designs라는 사이트의 Javascript Tabifier이라는 스크립트였다.

몇분간 예제를 관찰하고 나름대로 연구한 결과 내 블로그에 알맞는 간단한 버전을 만들어 낼 수 있었다.

이 기능은 여러 방법으로 사용할 수 있겠지만, 이 포스팅에서는 텍스트큐브에서 다국어 인터페이스를 만들기 위한 튜토리얼로 설명하겠다.

동작 원리

동작 원리는 꽤나 간단하다. 말 그대로 외부 자바스크립트 파일을 이용해서 본문의 글을 탭으로 그룹해주는 것이다. (자바스크립트 언어는 잘 모르니 정확한 내부 동작 원리는 묻지 마시길. ㅋ)

1. 스크립트 파일 업로드

2170633821.js스크립트 작동에 필요한 파일은 단 하나: 옆의 tabber.js를 다운로드해 스킨 폴더 루트에 업로드한다.

2. 블로그에 코드 삽입

자바스크립트 기능인 만큼, 일단 스킨 (skin.html)의 헤더 부분에 다음 코드를 삽입해야한다:

<script type="text/javascript" src="./tabber.js"></script>

3. 태버 스타일시트 삽입

다음으로 탭이 페이지에 어떻게 나타날지 정해주는 CSS 코드를 메인 스킨 style.css에 삽입해야 한다. 사용 스킨에 따라 색상이나 크기를 바꿔줘야 되지만 일단은 그냥 아래 코드를 복사해서 style.css의 맨 아래 부분에 붙여넣는다:

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-top:1em;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
.article ul.tabbernav li a{
	color: #eee;
	border-bottom: none;
}
.article:hover ul.tabbernav li a{
	color: #eee;
	border-bottom: none;
}
ul.tabbernav{
	background-position: left center;
	margin: 0px 0px 20px 0px;
	padding: 3px 0;
	list-style-type: none;
	list-style-image: none;
	text-align: right;
	background-image: url('./images/languages.gif');
	background-repeat: no-repeat;
	width: 400px;
}
.nobg ul.tabbernav{
	background-position: left center;
	margin: 0px 0px 20px 0px;
	padding: 3px 0;
	list-style-type: none;
	list-style-image: none;
	text-align: right;
	background-image: none;
	width: 400px;
}
ul.tabbernav li{
	padding: 0px;
	list-style: none;
	margin: 0;
	display: inline;
	list-style-type: none;
	list-style-image: none;
	background-image: none;
}
ul.tabbernav li a{
	padding: 3px 0.5em;
	margin-left: 3px;
	text-decoration: none;
}
.article:hover ul.tabbernav li a:hover{
	color: #c36;
}
ul.tabbernav li.tabberactive a{
	color: #accb53;
	font-weight: bold;
}
.article:hover ul.tabbernav li.tabberactive a{
	color: #accb53;
	border-bottom: none;
}
.article:hover ul.tabbernav li.tabberactive a:hover{
	color: #c36;
	font-weight: bold;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is 
  set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
}

코드를 복사한 후에는 “Available Languages // 사용 가능 언어” 문구를 표시해주는 이미지 파일도 업로드해주어야 한다.

다음 두 버전중 하나를 선택해서 다운로드 해서, languages.gif로 이름을 바꾼뒤, 사용중인 스킨 폴더의 images 폴더에 업로드 해준다:

기타 스타일 지정은 좀 시행착오를 격으며 해야한다. 자신의 스킨의 색상에 맞춰서 편집해준다. 실제로 “탭”처럼 보이게 테두리를 이용해 스타일링할 수도 있지만, 여기는 단순히 “모드 변경”하는 듯한 느낌으로 오른쪽 정렬 해주고 단순히 링크처럼 호버 이펙트만 주었다.

4. 블로그 본문에 코드 삽입

마지막으로 블로그 글쓰기 모드로 들어가 HTML모드로 전환한 후에 다음 코드를 삽입하면 된다.
아예 서식으로 저장해 놓아서 글 작성할때마다 한번 클릭해서 로드할 수 있게 해 놓는것도 좋은 방법이다.

<div class="tabber">
<div class="tabbertab" title="한국어">
--한국어--
</div>

<div class="tabbertab" title="English">
--English--
</div>
</div>

코드를 붙여넣은 뒤 다시 WYSIWYG모드로 돌아가서, –한국어–부분을 지우고 한글로 글을 쓰고, 밑의 –English–부분엔 영문 버전의 글을 쓰면 된다. 위지윅모드에서는 탭 인터페이스가 보이지 않아서 어디까지가 한글이고 어디까지가 영문인지 보이지 않기 때문에 후에 HTML모드로 전환해 반드시 한글은 한글안에, 영문은 영어안에 있는지 확인해 준다.
여기까지 제대로 따라 했다면 글을 저장하고 블로그 페이지로 돌아가서 보면 탭 인터페이스가 적용된 것을 확인할 수 있을 것이다!

옵션: 다국어 외의 다른 용도로 사용?

이런 포스팅처럼 다국어 모드 전환이 아닌 다른 용도로 쓰고 싶다면,
<div class="nobg"></div><div class="tabber"> ... </div>를 감싸준다.
그러면 “언어 선택” 문구가 없이 탭 인터페이스가 표시되어 2개 이상 여러개의 탭을 사용해도 문제 없이 이용할 수 있다.

다 끝났냐?

끝!! 이게 다임.

* * *

하나 좋은 소식은, 얼마전 배포한 (그유명한;;ㅋ) BlackNoir2 스킨에는 이미 이 기능이 내장 되어 있다. 태버 기능을 사용하기 위해서 해야할 일은 위의 4단계의 코드를 본문에 삽입하는 것 밖에 없다! 🙂

[알림: 현재 알수 없는 이유로;; 텍스트큐브의 “URLKeeper” 플러그인과 충돌합니다. 둘중 하나는 포기하셔야 할 듯.. orz (한비님 감사합니다^^) ]

PS: 허접한 가이드 죄송합니다. 제가 설명하는데는 좀 서툴러서 ㅜㅜ
PS2: 당연히 XHTML1.0 Transitional /CSS2.1 W3C 웹표준 인증 통과 코드이니 안심하고 사용~
PS3: muhootsaver님, 이 기능 강추입니다!! 후후훗 😛

 

Why do it?

From the very beginning, I wanted to run this blog in two languages: English and Korean at the same time. But I didn’t quite know how I could do it, and so I just tried writing in Korean and then write the same thing in English under it. However that way, when posts got longer with pictures and other stuff, it was always awkward looking with for one (translated) language.

And so I kept thinking of how I could make this work, without having to modify the source code of Textcube (this blogging platform)…
…and one day a brilliant idea came to my mind…!

How?

I tried searching Google for a “tabber javascript”, and from thousands of results, I picked out a lightweight, free one: Javascript Tabifier from a site called BarelyFitz Designs

After looking at the demo source code and figuring out how it works, I succeeded in setting it appropriate for my “multilingual” purposes.

Of course, this Tabber Javascript can be used in many ways, here I’ll just explain how to use this as a Multilingual “switching” interface, and specifically how to do it on Textcube.

How it works…

It’s pretty simple. The script just groups parts of the text and displays it as “tabs,” hiding one part when the other is showing and vice versa. Since I don’t know much about Javascript itself, please don’t ask me how exactly the script is made… 😛

1. Download the script file

2170633821.jsFirst, download the tabber.js linked on the right and upload it to the skin folder.

2. Insert code into the skin file

Then of course you have to link the script file to the skin file. (skin.html)

<script type="text/javascript" src="./tabber.js"></script>
3. Insert Tabber Stylesheet

Now you have to set the stylesheet which determines how the tabs are gonna look like. You’re going to have to modify the width/height/margin etc values depending on the skin you’re using, but for now just copypasta the following codes into style.css:

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-top:1em;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
.article ul.tabbernav li a{
	color: #eee;
	border-bottom: none;
}
.article:hover ul.tabbernav li a{
	color: #eee;
	border-bottom: none;
}
ul.tabbernav{
	background-position: left center;
	margin: 0px 0px 20px 0px;
	padding: 3px 0;
	list-style-type: none;
	list-style-image: none;
	text-align: right;
	background-image: url('./images/languages.gif');
	background-repeat: no-repeat;
	width: 400px;
}
.nobg ul.tabbernav{
	background-position: left center;
	margin: 0px 0px 20px 0px;
	padding: 3px 0;
	list-style-type: none;
	list-style-image: none;
	text-align: right;
	background-image: none;
	width: 400px;
}
ul.tabbernav li{
	padding: 0px;
	list-style: none;
	margin: 0;
	display: inline;
	list-style-type: none;
	list-style-image: none;
	background-image: none;
}
ul.tabbernav li a{
	padding: 3px 0.5em;
	margin-left: 3px;
	text-decoration: none;
}
.article:hover ul.tabbernav li a:hover{
	color: #c36;
}
ul.tabbernav li.tabberactive a{
	color: #accb53;
	font-weight: bold;
}
.article:hover ul.tabbernav li.tabberactive a{
	color: #accb53;
	border-bottom: none;
}
.article:hover ul.tabbernav li.tabberactive a:hover{
	color: #c36;
	font-weight: bold;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is 
  set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
}

After inserting the code, don’t forget uploading the image that displays “Available Languages” in the left. (The ones I have are made for Korean/English, you can always make your own and upload it by your self)

Choose one of the following, and rename it to “languages.gif”, and upload it to the “images” folder in the skin folder:

As I said before, you have to modify the CSS to match the skin, but unfortunately it seems like trial-and-error is the best way to do it.

4. Insert code to blog post

Lastly, of course you have to input codes which into the main article, that will determine which part of the text is going to be grouped as a tab. It might be a good idea to copy this and save it as a template, so that later you can load the code right away with just a click.

<div class="tabber">
<div class="tabbertab" title="한국어">
--한국어--
</div>

<div class="tabbertab" title="English">
--English--
</div>
</div>

After inserting the code, go back to WYSIWYG mode, and in place of “–한국어–” you just write in Korean,(or any other language) and in place of “–English–” below, write in English. since in WYSIWYG mode you can’t see where the <div> divider ends, check often in HTML mode if your text are where they’re supposed to be, that they are correctly grouped.

If you followed till here and did everything right, go back and check to your new post and see how the tabber interface works! 🙂

Option: Using this for different purposes?

Just like this post I wrote some time before, If you want to use this tabber interface for a different purpose other than Multilanguage, simply enclose <div class="tabber"> ... </div> with <div class="nobg"></div>.
Then the “Choose language” text(image) won’t show up so you can put more than 2 tabs with long titles, etc.

Ok so is it done yet?

Yep that’s all.

* * *

One good information is, that the BlackNoir2 Skin for Textcube already includes all the files needed to use the tabber feature. Just follow step 4 and insert the code in the main article to group text in tabs.

[Notice: I don’t get why, but somehow this feature conflicts with Textcube
s “URLKeeper” Plugin. Just give up one or the other. 😛 (thx to 한비(Hanbi) ]

PS: sorry for sucky guide. I guess I’m not good at explaining stuff after all =_=
PS2: XHTML 1.0 Transitional / CSS2.1 W3C Validation passed.
PS3: @muhootsaver: HIGHLY reommended!  🙂