이 문서는 캐릭터 시트를 인쇄 가능하게 하는 방법에 대한 완전한 기술 가이드를 제공하는 것이 아니라, 알아야 할 사항들에 대한 요약입니다.
책과 달리 웹 페이지 및 캐릭터 시트와 같은 경우, 한 페이지에 들어갈 데이터 양을 디자이너가 완전히 제어할 수 있는 것은 아닙니다. 예를 들어, 한 시트에서는 동적으로 채워지는 섹션에 4개의 항목이 있을 수 있지만 다른 시트에서는 동일한 섹션에 36개의 항목이 있을 수 있습니다. 또는 다른 섹션에서는 플레이어가 캐릭터가 지니고 있는 장비를 나열할 수 있습니다.
브라우저는 콘텐츠가 여러 페이지로 분할되는 방법을 지정하는 방법을 제공하지만, 현재로서는 특히 Flexbox와 Grid와 같은 최신 레이아웃 기술을 사용할 때 완벽하지 않습니다.
미디어 쿼리
미디어 쿼리를 사용하면 디바이스의 일반적인 유형이나 화면 해상도 또는 브라우저 뷰포트 너비와 같은 특성에 따라 CSS 스타일을 적용할 수 있습니다 (1). 시트가 레거시 모드를 사용하지 않는 경우, 캐릭터 시트를 인쇄할 때만 적용되는 스타일을 조건부로 지정할 수 있습니다. 다음은 이 작업 방식에 대한 요약입니다:
/* Your sheet CSS file: */
/* Rules outside any media query will apply on any
Device Type*/
.highlight {
font-size: 1rem;
}
@media print (orientation: landscape) {
/* Rules that will only take effect when printing your sheet
on landscape orientation. */
html {
Font-size: 12pt;
}
.highlight {
color: black;
font-weight: bold;
}
}
@media print (orientation: landscape) {
/* Rules that will only take effect when printing your sheet
in landscape mode. */
}
@media print (orientation: portrait) {
/* Rules that will only take effect when printing your sheet
in portrait mode. This is the default mode for most printers */
}
@media screen {
/* Rules that will only take effect when seeing your
character on a screen (Computer, Mobile). */
html {
Font-size: 14px;
}
.highlight {
color: red;
}
}The Page Rule
The @page at-rule is a CSS at-rule used to modify different aspects of a printed page property. It targets and modifies the page's dimensions, page orientation, and margins (2).
/* Your sheet CSS file: */
@page {
size: letter portrait; /* specifies sheet will be printed on letter size in portrait orientation */
margin: 0.25in /* specifies a page margin of 0.25 inches */
}
The page rule accepts the following pseudo-selectors:
@page page :first { /* first-page of the document */ }
@page page :last { /* last-page of the document */ }
@page page :left { /* even-numbered pages */ }Page Breaks
In the beginning of this article we mentioned that browsers offered us some tools to control how content should be displayed across multiple pages. 다음은 시트에서 페이지 흐름을 제어하는 데 사용할 수 있는 몇 가지 기법입니다.
/* 시트 HTML 파일: */
<div class="section__container">
<h2 class="section__title">섹션 1</h2>
<p class="section__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non finibus lacus. Nam ullamcorper felis urna, in vestibulum enim semper euismod. Phasellus cursus gravida rhoncus…</p>
<figure class="section__thumbnail>
<img src="imgs/section1.jpg" alt="Section 1">
<figcaption>Fig.1 - Nam ullamcorper felis</figcaption>
</figure>
</div>
<div class="section__container">
<h2 class="section__title">섹션 2</h2>
<p class="section__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non finibus lacus. Nam ullamcorper felis urna, in vestibulum enim semper euismod. Phasellus cursus gravida rhoncus…</p>
<figure class="section__thumbnail">
<img src="imgs/section2.jpg" alt="Section 2">
<figcaption>Fig.2 - Lorem ipsum dolor sit amet</figcaption>
</figure>
</div>
/* Your sheet CSS file: */
.section__container {
/* Makes each section start on a new page */
break-before: page;
}
.section__thumbnail {
/* indicates that whenever possible, the browser should avoid splitting the content inside the section thumbnail across multiple pages. In that way the caption stays close to the relevant picture. */
break-inside: avoid;
}Think Like a Printer
If you have made this far you should have a grasp of the basic concepts needed to make your character sheet printable. Great, now comes the hardest part: Forget the way you used to think about character sheets, there is no mouse or touch screen involved, all interaction is done with a pencil and origami techniques (although very rarely). Here is a couple of design tips that may help you among the way:
캐릭터 시트를 반응형으로 만드세요. 이렇게 하면 시트를 다른 해상도와 창 크기에 맞게 제공하는 데 도움이 되며, 다른 종이 크기로 인쇄할 때도 도움이 됩니다. 전 세계 사람들은 다른 종이 크기 (Letter, A4…)를 사용하며, 랜드스케이프로 인쇄하거나 하나의 페이지에 여러 시트를 설정하여 빠른 몬스터 참조를 만들 수도 있습니다.
레거시 모드를 해제하세요. 모든 멋진 기능에 액세스하려면 시트를 최신 표준으로 업데이트해야 합니다.
불필요한 항목을 숨기세요. 시트에는 내부에 정보가 없는 몇 개의 굴림 버튼이 포함될 수 있습니다. 그런 경우 사용자가 사용할 수 없으므로 숨겨야 합니다. 반복 섹션 컨트롤러, 매크로 버튼 등에도 동일한 말을 할 수 있습니다.
스타일을 적절하게 변경하세요. 좋아보이는 정보가 포함된 굴림 버튼이 있다면 스타일을 변경하세요. 그런 경우 해당 스타일을 반영하세요. 클릭 가능한 요소처럼 보이는 대신 종이에 인쇄될 때 의미 있는 것으로 생각해보세요.
노트를 위한 공간을 비워 두세요. 게임 세션 동안 사람들이 노트를 작성할 것입니다. 캐릭터 시트의 장비 섹션이나 플레이어가 캐릭터가 받은 피해량을 추적하는 곳에 몇 줄을 비워 두는 것이 좋습니다.
흑백은 친구입니다. 사람마다 컬러 프린터를 갖고 있지 않습니다. 그리고 컬러 프린터를 갖고 있더라도 여전히 흑백으로 출력하는 경우가 많습니다. 대부분의 컴퓨터가 자동으로 콘텐츠를 회색조로 변환할 수 있지만, 콘텐츠의 흑백 버전을 제공하는 것이 더 좋습니다. 색상, 테두리 및 이미지를 지정하여 캐릭터 시트가 올바른 대비로 인쇄되도록 할 수 있습니다.
글꼴 크기에 주의하세요. 인쇄 디자인이 다양한 사용자에게 접근 가능하도록 하기 위해 16 포인트 글꼴 크기를 사용하는 것이 좋습니다.
배경 색상과 이미지는 피하세요. 기본적으로 브라우저에서는 이들을 인쇄하지 않습니다. 사용자가 수동으로 인쇄할 수도 있지만, 안전을 위해 이들을 인쇄하지 않는 것이 좋습니다. CSS 배경 색상과 이미지를 사용해야 하는 경우, print-color-adjust CSS 속성 (3)을 확인해보세요. 완전히 지원되지는 않지만, 특히 Chrome에서는 원하는 결과를 얻는 데 도움이 될 수 있습니다. 또 다른 접근 방식은 절대 위치 이미지나 이미지 테두리가 있는 div를 사용하는 것입니다.
줄 길이 균형. 긴 텍스트 줄을 읽는 것은 피로를 유발합니다. 독자는 각 줄의 끝에서 머리를 움직이고 다음 줄의 시작을 찾아야 합니다. 너무 짧은 줄은 일반적으로 하나의 단어나 구를 읽는 데 방해가 됩니다 (4). 이를 피하기 위해 인쇄용으로 디자인할 때 줄 길이를 45~75자(공백과 구두점 포함)로 유지해야 합니다. 시도해볼만한 재미있는 것은 column count css 속성을 사용하여 콘텐츠를 동적으로 여러 열로 분할하는 것입니다.
/* Your sheet HTML file: */
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non finibus lacus. Nam ullamcorper felis urna, in vestibulum enim semper euismod. Phasellus cursus gravida rhoncus. Cras et odio in tellus efficitur congue vitae ut eros. Sed non arcu vitae purus semper sagittis. Nullam ipsum arcu, rhoncus sed pharetra quis, porttitor quis tortor.</p>/* Your sheet CSS file: */
p {
column-count: 2;
}This will split your paragraph content dynamically into two columns. It also works with nested content like repeating sections.
Expand and collapse content as needed. Last but not least, a lot of the time your character sheet will have collapsible components that can be toggled to show more information about a specific trait of a character. When it comes to print, you may want to ignore how the user left those sections on the screen and expand them instead. Or perhaps you could print just the title and create a new section, visible only when printing, that can be printed on demand on a separate page.
Sheet Configuration
The last step to make your character sheet printable is let us know that your sheet was designed to be print friendly. 그렇게 하려면 sheet.json 파일에 printable 속성을 추가하고 그 값을 true로 설정하십시오. 다음과 같이:
{
"html": "pritablesheet.html",
"css": "pritablesheet.css",
"authors": "Roll20 Team (@roll20app)",
"roll20userid": "1",
"preview": "pritablesheet.png",
"instructions": "**This sheet is print fiendlyt**\n\nYou can put Markdown-formatted instructions here for how to use your sheet.",
"legacy": false,
"printable": true
}축하합니다. 이제 성공했습니다
이 간단한 지침이 인쇄 버전의 캐릭터 시트를 디자인하고 코딩하기 위해 충분한 아이디어를 제공할 것을 바랍니다. 이 문서를 개선하기 위한 질문이나 제안이 있으면 정의되지 않은 주소로 문의하십시오.
안녕하세요. 행운을 빕니다!
추가 자료
- https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
- https://developer.mozilla.org/en-US/docs/Web/CSS/@page
- https://developer.mozilla.org/en-US/docs/Web/CSS/print-color-adjust
- J. Craig and W. Bevington, "Designing with Type: A Basic Course in Typography" in , New York:Watson-Guptill.
- https://developer.mozilla.org/en-US/docs/Web/CSS/column-count
다운로드 가능한 ZIP 파일
D&D 5E by Roll20 캐릭터 시트의 다양한 파일과 예제가 포함된 ZIP 파일이 포함되어 있습니다. 이를 통해 인쇄 가능한 시트를 구성하는 데 일부 실제 사용 사례를 제공하는 데 도움이 될 것입니다!