<commit_before># multilingual.js

multilingual.js는 [어도비 인디자인의 합성글꼴 기능](https://helpx.adobe.com/incopy/using/using-fonts.html#composite_fonts)처럼, HTML/CSS 환경에서 보다 섬세하게 다국어 섞어쓰기를 제어하기 위한 오픈소스 자바스크립트 라이브러리이다.

이 플러그인은 HTML문서 안에서 특정 문자세트로 표기된 단어들을 정규식(Regular Expression)으로 골라내어 그 단어들을  `<span>` 태그로 감싸고, 언어 및 부호에 따라 별도의 클래스 이름을 부여한다. 기본으로 지원되는 문자세트는 영문(`en`), 한글(`ko`), 중문(`cn`), 일문(`jp`), 숫자(`num`), 문장부호(`punct`)가 있고, 별도로 낱자들을 골라내어 별도의 클래스 이름을 지정하는 것도 가능하다.

[![NPM](https://nodei.co/npm/multilingual.js.png?downloads=true)](https://nodei.co/npm/multilingual.js/)


## 설치하기

#### 다운로드 하기
최신 버전은 https://github.com/multilingualjs/multilingual.js/releases 에서 다운로드 가능하다.

HTML의 head 태그 안에 스타일시트 파일을 삽입한다.

    <link href="multilingual.css" rel="stylesheet" />

### 자바스크립트 파일 설치

## jQuery
```HTML
<script src="jquery.multilingual.min.js"></script>
```

## npm
```HTML
npm install multilingual.js
```


## 사용하기

설치가 완료되면, 자바스크립트에서 아래와 같이 설정하고 초기화할 수 있다.

jQuery의 경우
```javascript
<script>
  $(document).ready(function(e){
    $(".content").multilingual([
      "en", "num"
    ]);
  });
</script>
```

npm을 통해 사용할 경우 
```javascript
var MultiLingual = require('multilingual.js');

var ml = new MultiLingual({
  "en", "num"
});
```

위의 예시에서는 페이지가 로딩될 때마다 `content` 클래스를 가진 요소 안의 모든 내용을 검색하여, 영문(`en`)과 숫자(`num`)을 골라내어 각각 의 단어/글자에 `ml-en` 또는  `ml-num` 클래스 이름을 할당한다. 이렇게 처리된 문서의 HTML 구조는 다음과 같다.

원본:
```HTML
<p>모든 CCL의 메타데이터에는 최소한 license 값을 기술하는 1개의 RDF 트리플이 반드시 포함됩니다.</p>
```

처리후:
```HTML
<p>모든 <span class="ml-en">CCL</span>의 메타데이터에는 최소한 <span class="ml-en">license</span> 값을 기술하는 <span class="ml-num">1</span>개의 <span class="ml-en">RDF</span> 트리플이 반드시 포함됩니다.</p>
```
처리후에는 각각의 문자세트가 독자적인 클래스 이름으로 구별되어 있기 때문에, 각 클래스 이름에 해당하는 CSS 스타일을 적용해 주는것으로, 섞어쓰기의 세부적인 사항들을 제어할 수 있다.

```CSS
/* example css for multilingual.js */
p {
  font-family: NotoSans, Helvetica, Arial, sans-serif;<commit_msg>리드미파일 수정<commit_after># multilingual.js

multilingual.js는 [어도비 인디자인의 합성글꼴 기능](https://helpx.adobe.com/incopy/using/using-fonts.html#composite_fonts)처럼, HTML/CSS 환경에서 보다 섬세하게 다국어 섞어쓰기를 제어하기 위한 오픈소스 자바스크립트 라이브러리이다.

이 플러그인은 HTML문서 안에서 특정 문자세트로 표기된 단어들을 정규식(Regular Expression)으로 골라내어 그 단어들을  `<span>` 태그로 감싸고, 언어 및 부호에 따라 별도의 클래스 이름을 부여한다. 기본으로 지원되는 문자세트는 영문(`en`), 한글(`ko`), 중문(`cn`), 일문(`jp`), 숫자(`num`), 문장부호(`punct`)가 있고, 별도로 낱자들을 골라내어 별도의 클래스 이름을 지정하는 것도 가능하다.

[![NPM](https://nodei.co/npm/multilingual.js.png?downloads=true)](https://nodei.co/npm/multilingual.js/)


## 설치하기

#### 다운로드 하기
최신 버전은 https://github.com/multilingualjs/multilingual.js/releases 에서 다운로드 가능하다.

HTML의 head 태그 안에 스타일시트 파일을 삽입한다.

    <link href="multilingual.css" rel="stylesheet" />

### 자바스크립트 파일 설치

## jQuery
```HTML
<script src="jquery.multilingual.min.js"></script>
```

## npm
```HTML
npm install multilingual.js
```


## 사용하기

설치가 완료되면, 자바스크립트에서 아래와 같이 설정하고 초기화할 수 있다.

jQuery의 경우
```javascript
<script>
  $(document).ready(function(e){
    $(".content").multilingual([
      "en", "num"
    ]);
  });
</script>
```

npm을 통해 사용할 경우 
```javascript
var MultiLingual = require('multilingual.js');

var ml = new MultiLingual({
  containers: document.getElementsByClassName("content"), // 배열 형태를 띈 dom 요소를 불러옵니다. $(".content") 와 같은 형태 
  configuration: ["en", "num"]
});
```

위의 예시에서는 페이지가 로딩될 때마다 `content` 클래스를 가진 요소 안의 모든 내용을 검색하여, 영문(`en`)과 숫자(`num`)을 골라내어 각각 의 단어/글자에 `ml-en` 또는  `ml-num` 클래스 이름을 할당한다. 이렇게 처리된 문서의 HTML 구조는 다음과 같다.

원본:
```HTML
<p>모든 CCL의 메타데이터에는 최소한 license 값을 기술하는 1개의 RDF 트리플이 반드시 포함됩니다.</p>
```

처리후:
```HTML
<p>모든 <span class="ml-en">CCL</span>의 메타데이터에는 최소한 <span class="ml-en">license</span> 값을 기술하는 <span class="ml-num">1</span>개의 <span class="ml-en">RDF</span> 트리플이 반드시 포함됩니다.</p>
```
처리후에는 각각의 문자세트가 독자적인 클래스 이름으로 구별되어 있기 때문에, 각 클래스 이름에 해당하는 CSS 스타일을 적용해 주는것으로, 섞어쓰기의 세부적인 사항들을 제어할 수 있다.

```CSS
/* example css for multilingual.js */
p {
  font-family: NotoSans, Helvetica, Arial, sans-serif;
{'fraction_non_alphanumeric': 0.16683804627249357, 'fraction_numerical': 0.0010282776349614395, 'mean_word_length': 4.119736842105263, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 39, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2386276', 'n_tokens_mistral': 2474, 'n_tokens_neox': 3103, 'n_words': 461}