js server text width 다운로드 -JS js server text width 소스 코드 다운로드

js server text width

글꼴 다운로드

1.0.0

다운로드

JS-Server-Text-width

이 모듈은 픽셀에서 텍스트 너비를 계산하기위한 기능을 제공합니다. 브라우저에는 해당 기능이 상자 밖에서 (캔버스 또는 숨겨진 요소 포함)가 있지만 nodejs에는 없습니다. 텍스트를 고정 된 크기로 줄이거 나 텍스트 주위에 무언가를 그려야 할 때 서버 측 렌더링에 유용합니다.

설립

 npm install server-text-width

또는

 yarn add server-text-width

특징

의존성 없음
노드와 브라우저에서 동일한 방식으로 작동합니다
유니 코드 문자를 지원합니다 (라틴어 또는 ASCII뿐만 아니라)
여러 글꼴을 지원합니다 (자신의 글꼴도)
여러 글꼴 크기를 지원합니다
글꼴 무게를 지원합니다
TypeScript 정의가 포함되어 있습니다
테이블 데이터의 크기를 최소화합니다

어떻게 작동합니까?

독창적 인 아이디어는 https://github.com/adambisek/string-pixel-width에서 차용되었습니다

해당 패키지에 포함 된 특수 공구 mappingTool.html 엽니 다
이 도구에서는 글꼴 이름, 크기 및 무게를 선택하십시오. 또한 유니 코드 문자 범위를 선택하십시오.
이 도구는 각 문자에 대해 너비를 가진 테이블을 생성합니다.
상수로 테이블을 소스에 넣고 모듈을 초기화하십시오.
이제 텍스트 너비를 측정 할 수있는 기능이 있습니다.

단계별

브라우저에서 mappingTool.html 열십시오. github https://raw.githubusercontent.com/evgenus/js-server-text-width/main/mappingtool.html에서 다운로드 할 수 있습니다

측정하려는 글꼴, 글꼴 크기, 글꼴 무게 및 문자 범위를 선택하십시오. 모든 유니 코드 페이지는 이미 여기에 있습니다. 사용하는 로케일 (또는 로케일)을 기준으로 선택할 수 있습니다. 위에 입력을 사용하여 텍스트를 실험 할 수도 있습니다. 선택된 유니 코드 범위로 덮지 않은 모든 문자는 빨간색으로 강조 표시됩니다.

바로 맨 아래에서 도구는 테이블 데이터를 생성하여 모듈에 공급해야합니다. 각 문자 너비는베이스 64 인코딩에서 2 개의 기호로 표시됩니다. 하나는 정수 용이고 하나는 분수 부품 용입니다 (글꼴로 렌더링 된 문자는 픽셀에서 분수 폭이 있습니다). 그것은 JSON에 데이터를 저장하는 것보다 훨씬 작습니다.

코드에서 해당 값으로 상수 변수를 만듭니다.

 const TEXT_WIDTH_LOOKUP_TABLE = {
    "Times|32px|bold|0" : "aAaAaAaAaAaAaAaAaAIAIAIAIAIAaAaAaAaAaAaAaAaAaAaAaAaAaAaAIAIAIAIAIAKqRxQAQAgAaqI5KqKqQASOIAKqIAI5QAQAQAQAQAQAQAQAQAQAKqKqSOSOSOQAdxXGVVXGXGVVTiY5Y5MdQAY5VVeMXGY5TiY5XGRzVVXGXGgAXGXGVVKqI5KqSmQAKqQARzOMRzOMKqQARzI5KqRzI5aqRzQARzRzOMMdKqRzQAXGQAQAOMMmHCMmQoaA" ,
    "Times|32px|bold|400" : "VVVVaqS9W5RzMdMdQAdkdkbRY5ZdYIY5XGVVVVS9WRVVfRUKZdZdY5WEeMY5Y5Y5TiXGVVYIbXXGY5X9e9e9Y5e9UKW5fdXGQAQAPsN7QAOMYRNTSXSXRzRRU7RzQARzRzOMPsQAXuQARbRMZzZzSuYMPiOiYORMOMOMRMN7OiMdI5IsKqXgXgRMRzSXQARzoATzYbTMgOVOXGQAjIYxfoXMrgf9Q5M3Y9WAY5QAaGTXaGTXruiRaXSunkZ1oATzXGOMKzAAAAAAAAAAAAAAY5SbVKQ7TiRzS9N7S9N7XGSdfRYRUKNTY5RzY5TEXMSbagUKY5RzdgVVjqbAXVREXGOMVVPuXGXGXiXiXGQAbxTgX9RMX9SGX9RMcKSCcKSCMdfRYRXmTAX1R9Y5SbY5SbXgSCeMVzI5XGQAXGQAgAXGVVOMVAOMVAOMfRYRUKNTQ5OqZdSXZdSXY5QAY5QAY5QAW5OiYIQAYIQAYIQAX9RMUXOie9YMUXOiXGQAXGQA" ,
    "Times|32px|bold|591" : "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALoAAKqAAAAKqAAAAKGAAaAaAaAaAaAaAaAaAQ3OsLuO3QZJiKKQIQ7J7OoORN7QXREKbKGPTQOPxOoSEQdPdO1WCQkaAaAaAaAaATGTgT3IKOu"
} ;

참고 : 여러 글꼴, 크기, 무게 또는 범위가 필요한 경우 사전을 수동으로 병합하십시오. 이 도구는 단순성을 위해 당시에 하나의 세트 만 생산하는 것으로 제한됩니다.

그런 다음 모듈을 가져오고 초기화하십시오

 import { init } from 'server-text-width' ;

const { getTextWidth } = init ( TEXT_WIDTH_LOOKUP_TABLE ) ;

const width = getTextWidth ( 'Measure my text' ) ;