การจัดรูปแบบและ HTML

• การจัดรูปแบบการ์ด
• การปรับขนาดรูปภาพ
• การจัดรูปแบบฟิลด์
• ปุ่มเล่นเสียงซ้ำ
• ทิศทางข้อความ
• HTML อื่นๆ
• ลักษณะที่ปรากฏของเบราว์เซอร์
• CSS เฉพาะแพลตฟอร์ม
• การติดตั้งแบบอักษร
  • เพิ่มแบบอักษรไปยังโฟลเดอร์สื่อ
  • อัปเดตเทมเพลตเพื่อใช้แบบอักษรนั้น
• โหมดกลางคืน
• การเฟดและการเลื่อน
• Javascript

การจัดรูปแบบการ์ด

คุณสามารถดู วิดีโอเกี่ยวกับการจัดรูปแบบการ์ด ได้บน YouTube วิดีโอแสดงส่วนต่อประสานของ Anki 2.0 แต่แนวคิดส่วนใหญ่ เหมือนกัน

ส่วนการจัดรูปแบบของหน้าจอการ์ดสามารถเข้าถึงได้โดยคลิกที่ ปุ่ม “การจัดรูปแบบ” ถัดจากปุ่ม “เทมเพลตด้านหลัง” ในส่วนนั้น คุณสามารถเปลี่ยนสีพื้นหลังของการ์ด แบบอักษรเริ่มต้น การจัดแนวข้อความ และอื่นๆ ได้

ตัวเลือกมาตรฐานที่มีให้คุณคือ:

font-family ชื่อของแบบอักษรที่จะใช้บนการ์ด หากแบบอักษรของคุณมีช่องว่างเช่น “MS Unicode” คุณต้องล้อมรอบชื่อแบบอักษรด้วย เครื่องหมายคำพูดคู่ เช่น font-family: "MS Unicode"; นอกจากนี้ยังสามารถใช้หลายแบบอักษร บนการ์ดใบเดียวได้ สำหรับข้อมูลเกี่ยวกับเรื่องนั้น โปรดดูด้านล่าง

font-size ขนาดของแบบอักษรเป็นพิกเซล เมื่อเปลี่ยน ตรวจสอบให้แน่ใจว่าคุณเว้น px ไว้ที่ท้าย

text-align ว่าข้อความควรจัดชิดกลาง ซ้าย หรือขวา

color สีของข้อความ ชื่อสีอย่างง่ายเช่น “blue”, “lightyellow” และอื่นๆ จะใช้งานได้ หรือคุณสามารถใช้รหัสสี HTML เพื่อเลือกสี ตามอำเภอใจได้ โปรดดู เว็บเพจนี้ สำหรับ ข้อมูลเพิ่มเติม

background-color สีของพื้นหลังการ์ด

CSS ใดๆ ก็ได้สามารถวางไว้ในส่วนการจัดรูปแบบได้ – ผู้ใช้ขั้นสูงอาจต้องการ ทำสิ่งต่างๆ เช่น เพิ่มภาพพื้นหลังหรือการไล่ระดับสี เป็นต้น หาก คุณสงสัยว่าจะได้รับการจัดรูปแบบบางอย่างได้อย่างไร โปรดค้นหา เว็บสำหรับข้อมูลเกี่ยวกับวิธีการทำใน CSS เนื่องจากมี เอกสารประกอบมากมาย

การจัดรูปแบบจะใช้ร่วมกันระหว่างการ์ดทั้งหมด ซึ่งหมายความว่าเมื่อคุณทำการ ปรับเปลี่ยน มันจะมีผลต่อการ์ดทั้งหมดสำหรับประเภทบันทึกย่อนั้น นอกจากนี้ยัง สามารถระบุการจัดรูปแบบเฉพาะการ์ดได้อีกด้วย ตัวอย่างต่อไปนี้ จะใช้พื้นหลังสีเหลืองกับการ์ดทั้งหมดยกเว้นการ์ดใบแรก:

.card {
  background-color: yellow;
}
.card1 {
  background-color: blue;
}

การปรับขนาดรูปภาพ

Anki จะย่อขนาดรูปภาพให้พอดีกับหน้าจอโดยค่าเริ่มต้น คุณสามารถเปลี่ยนสิ่งนี้ได้โดยการเพิ่ม สิ่งต่อไปนี้ที่ด้านล่างของส่วนการจัดรูปแบบของคุณ (นอก .card { ... } เริ่มต้น):

img {
  max-width: none;
  max-height: none;
}

AnkiDroid บางครั้งมี ปัญหาในการปรับขนาดรูปภาพให้พอดีกับ หน้าจอ การตั้งค่าขนาด รูปภาพสูงสุดโดยใช้ css ควรจะแก้ไขปัญหานี้ได้ แต่ดูเหมือนว่าจะถูกละเลย ณ AnkiDroid 2.9 วิธีแก้ไขคือการต่อท้าย !important กับแต่ละคำสั่งสไตล์ ตัวอย่างเช่น:

img {
  max-width: 300px !important;
  max-height: 300px !important;
}

หากคุณพยายามเปลี่ยนสไตล์สำหรับรูปภาพและพบว่าดาวที่ ปรากฏบนการ์ดที่ทำเครื่องหมายไว้ได้รับผลกระทบ (เช่น มันใหญ่เกินไป มาก) คุณสามารถกำหนดเป้าหมายได้ด้วยสิ่งต่อไปนี้:

img#star {
  ...;
}

คุณสามารถสำรวจการจัดรูปแบบของการ์ดแบบโต้ตอบได้โดยใช้ Chrome:

https://addon-docs.ankiweb.net/porting2.0.html#webview-changes

Anki 2.1.50+ รองรับการปรับขนาดรูปภาพภายในตัวแก้ไขโดยกำเนิด

การจัดรูปแบบฟิลด์

การจัดรูปแบบเริ่มต้นจะใช้กับการ์ดทั้งหมด คุณยังสามารถทำให้ฟิลด์บางฟิลด์ หรือบางส่วนของการ์ดใช้แบบอักษร สี และอื่นๆ ที่แตกต่างกันได้ สิ่งนี้มีความสำคัญอย่างยิ่งเมื่อศึกษาภาษาต่างประเทศ เนื่องจาก Anki บางครั้งจะไม่สามารถแสดงอักขระได้อย่างถูกต้องเว้นแต่จะมีการเลือก แบบอักษรที่เหมาะสม

สมมติว่าคุณมีฟิลด์ “Expression” และคุณต้องการให้มันใช้แบบอักษร macOS Thai “Ayuthaya” ลองนึกภาพว่าเทมเพลตของคุณอ่านว่า:

{{Expression}} คืออะไร?

{{Notes}}

สิ่งที่เราต้องทำคือล้อมรอบข้อความที่เราต้องการจัดรูปแบบด้วย HTML บางอย่าง เรา จะใส่สิ่งต่อไปนี้ไว้ข้างหน้าข้อความ:

<div class=mystyle1>

และสิ่งต่อไปนี้ไว้ข้างหลัง:

</div>

โดยการล้อมรอบข้อความเช่นข้างต้น เราบอก Anki ให้จัดรูปแบบ ข้อความที่ล้อมรอบด้วยสไตล์ที่กำหนดเองชื่อ “mystyle1” ซึ่งเราจะสร้างขึ้นในภายหลัง

ดังนั้นหากเราต้องการให้ทั้งนิพจน์ “อะไรคือ … ?” ใช้แบบอักษรภาษาไทย เราจะใช้:

<div class=mystyle1>{{Expression}} คืออะไร?</div>

{{Notes}}

และถ้าเราต้องการให้เฉพาะฟิลด์นิพจน์เองใช้แบบอักษรภาษาไทย เราจะใช้:

อะไรคือ <div class=mystyle1>{{Expression}}</div>?

{{Notes}}

หลังจากที่เราแก้ไขเทมเพลตแล้ว ตอนนี้เราต้องย้ายไปที่ส่วนการจัดรูปแบบ ระหว่างเทมเพลต ก่อนแก้ไข มันควรจะมีลักษณะดังนี้:

.card {
  font-family: arial;
  font-size: 20px;
  text-align: center;
  color: black;
  background-color: white;
}

เพิ่มสไตล์ใหม่ของคุณที่ด้านล่าง เพื่อให้มีลักษณะดังนี้:

.card {
  font-family: arial;
  font-size: 20px;
  text-align: center;
  color: black;
  background-color: white;
}

.mystyle1 {
  font-family: ayuthaya;
}

คุณสามารถรวมการจัดรูปแบบใดๆ ที่คุณต้องการในสไตล์ได้ หากคุณต้องการ เพิ่มขนาดตัวอักษรด้วย คุณจะต้องเปลี่ยนส่วน mystyle1 ให้มีลักษณะ ดังนี้:

.mystyle1 {
  font-family: ayuthaya;
  font-size: 30px;
}

นอกจากนี้ยังสามารถรวมแบบอักษรที่กำหนดเองกับสำรับของคุณได้ ดังนั้นคุณไม่ จำเป็นต้องติดตั้งบนคอมพิวเตอร์หรืออุปกรณ์พกพาของคุณ โปรดดู ส่วน การติดตั้งแบบอักษร สำหรับข้อมูลเพิ่มเติม

ปุ่มเล่นเสียงซ้ำ

เมื่อมีเสียงหรือข้อความเป็นคำพูดรวมอยู่ในการ์ดของคุณ Anki จะแสดง ปุ่มที่คุณสามารถคลิกเพื่อเล่นเสียงซ้ำได้

หากคุณไม่ต้องการเห็นปุ่ม คุณสามารถซ่อนได้ใน หน้าจอการตั้งค่า

คุณสามารถปรับแต่งลักษณะที่ปรากฏได้ในการจัดรูปแบบการ์ดของคุณ ตัวอย่างเช่น เพื่อให้มันเล็กลงและมีสี คุณสามารถใช้สิ่งต่อไปนี้:

.replay-button svg {
  width: 20px;
  height: 20px;
}
.replay-button svg circle {
  fill: blue;
}
.replay-button svg path {
  stroke: white;
  fill: green;
}

ทิศทางข้อความ

หากคุณใช้ภาษาที่เขียนจากขวาไปซ้าย เช่น ภาษาอาหรับหรือฮีบรู คุณสามารถเพิ่มคุณสมบัติ CSS direction ลงในส่วน .card เพื่อให้แสดงผลอย่างถูกต้องระหว่างการทบทวน:

.card {
  direction: rtl;
}

สิ่งนี้จะเปลี่ยนทิศทางของการ์ดทั้งหมด คุณสามารถเปลี่ยนทิศทาง ของเฉพาะบางฟิลด์ได้โดยการล้อมรอบการอ้างอิงของฟิลด์ด้วย HTML บางอย่าง:

<div dir="rtl">{{Front}}</div>

หากต้องการเปลี่ยนทิศทางของฟิลด์ในตัวแก้ไข โปรดดู ส่วน การแก้ไข

HTML อื่นๆ

เทมเพลตของคุณสามารถมี HTML ตามอำเภอใจได้ ซึ่งหมายความว่าความเป็นไปได้ ในการจัดวางทั้งหมดที่ใช้ในหน้าเว็บอินเทอร์เน็ตยังสามารถใช้กับการ์ดของคุณได้อีกด้วย สิ่งต่างๆ เช่น ตาราง รายการ รูปภาพ ลิงก์ไปยังหน้าภายนอก และอื่นๆ ล้วนได้รับการสนับสนุน ด้วยตาราง ตัวอย่างเช่น คุณสามารถเปลี่ยน เค้าโครงเพื่อให้ด้านหน้าและด้านหลังของการ์ดปรากฏทางด้านซ้ายและขวา แทนที่จะเป็นด้านบนและด้านล่าง

การครอบคลุมคุณสมบัติทั้งหมดของ HTML อยู่นอกขอบเขตของคู่มือนี้ แต่ มีคู่มือแนะนำ HTML ที่ดีมากมายบน เว็บหากคุณต้องการเรียนรู้เพิ่มเติม

ลักษณะที่ปรากฏของเบราว์เซอร์

หากเทมเพลตการ์ดของคุณซับซ้อน อาจเป็นการยากที่จะอ่าน คอลัมน์คำถามและคำตอบ (เรียกว่า “ด้านหน้า” และ “ด้านหลัง”) ใน รายการการ์ด ตัวเลือก “ลักษณะที่ปรากฏของเบราว์เซอร์” ช่วยให้คุณสามารถกำหนด เทมเพลตที่กำหนดเองเพื่อใช้เฉพาะในเบราว์เซอร์ได้ ดังนั้นคุณจึงสามารถรวมเฉพาะ ฟิลด์ที่สำคัญและเปลี่ยนลำดับได้หากต้องการ ไวยากรณ์ เหมือนกับในเทมเพลตการ์ดมาตรฐาน

เมื่อใช้ตัวเลือกนี้ หากข้อความในคอลัมน์คำถามซ้ำกับตอนต้นของคอลัมน์คำตอบ Anki จะแสดงข้อความเฉพาะในคอลัมน์คำถาม ตัวอย่างเช่น หากข้อความในคอลัมน์คำถามคือ “คนในลาดักพูด” และคำตอบคือ “คนในลาดักพูดภาษาลาดัก” คอลัมน์คำตอบจะแสดงเฉพาะ “ภาษาลาดัก” โดยละเว้นส่วนที่เหลือ

CSS เฉพาะแพลตฟอร์ม

Anki กำหนดคลาส CSS พิเศษบางอย่างที่ช่วยให้คุณสามารถกำหนด การจัดรูปแบบที่แตกต่างกันสำหรับแพลตฟอร์มต่างๆ ได้ ตัวอย่างด้านล่างแสดงวิธีการเปลี่ยน แบบอักษรขึ้นอยู่กับว่าคุณกำลังทบทวนที่ไหน:

/* Windows */
.win .example {
  font-family: "Example1";
}
/* macOS */
.mac .example {
  font-family: "Example2";
}
/* Linux desktops */
.linux:not(.android) .example {
  font-family: "Example3";
}
/* ทั้ง Linux desktops และอุปกรณ์ Android */
.linux .example {
  font-family: "Example4";
}
/* ทั้ง Android และ iOS */
.mobile .example {
  font-family: "Example5";
}
/* iOS */
.iphone .example,
.ipad .example {
  font-family: "Example6";
}
/* Android */
.android .example {
  font-family: "Example7";
}

และในเทมเพลต:

<div class="example">{{Field}}</div>

คุณยังสามารถใช้คุณสมบัติเช่น .gecko, .opera และ .ie เพื่อเลือก เบราว์เซอร์เฉพาะเมื่อใช้ AnkiWeb ได้ โปรดดู http://rafael.adm.br/css_browser_selector/ สำหรับรายการตัวเลือกทั้งหมด

การติดตั้งแบบอักษร

คุณสามารถติดตั้งแบบอักษรลงใน Anki ได้โดยตรง ซึ่งมีประโยชน์หากคุณใช้ Anki บน คอมพิวเตอร์ที่ทำงานหรือโรงเรียนซึ่งคุณไม่มีสิทธิ์ติดตั้งแบบอักษรใหม่ หรือหากคุณใช้ Anki บนอุปกรณ์พกพา

Anki รองรับรูปแบบแบบอักษรที่ใช้กันอย่างแพร่หลายที่สุด เช่น TrueType (.ttf), OpenType (.otf), Web Open Font Format (.woff) และอื่นๆ

เพิ่มแบบอักษรไปยังโฟลเดอร์สื่อ

เมื่อคุณดาวน์โหลดแบบอักษรที่รองรับแล้ว เช่น “Arial.ttf” คุณต้องเพิ่ม ไปยังโฟลเดอร์สื่อ

1. เปลี่ยนชื่อไฟล์โดยเพิ่มขีดล่างที่จุดเริ่มต้น เพื่อให้กลายเป็น เหมือน “_arial.ttf” การเพิ่มขีดล่างจะบอก Anki ว่าไฟล์นี้ จะถูกใช้ในเทมเพลต และไม่ควรถูกลบเมื่อ ตรวจสอบหาสื่อที่ไม่ได้ใช้

2. ในเบราว์เซอร์ไฟล์ของคอมพิวเตอร์ของคุณ ให้ไปที่โฟลเดอร์ข้อมูลแอปพลิเคชัน Anki ของคุณ (ดู ตำแหน่งไฟล์ สำหรับรายละเอียด) จากนั้นเข้าไปในโฟลเดอร์โปรไฟล์ของคุณ (เช่น “User 1”)

3. ภายในโฟลเดอร์ คุณควรเห็นโฟลเดอร์ชื่อ collection.media ลากไฟล์ที่เปลี่ยนชื่อแล้วไปยังโฟลเดอร์นั้น

อัปเดตเทมเพลตเพื่อใช้แบบอักษรนั้น

หลังจากเพิ่มแบบอักษรไปยังโฟลเดอร์สื่อแล้ว คุณต้องอัปเดต เทมเพลต

1. คลิก เพิ่ม ที่ด้านบนของหน้าจอหลัก แล้วเลือก ประเภทบันทึกย่อที่คุณต้องการเปลี่ยนด้วยปุ่มบนซ้าย

2. คลิก การ์ด

3. ในส่วนการจัดรูปแบบ ให้เพิ่มข้อความต่อไปนี้ที่ด้านล่าง (หลัง อักขระ “}” ตัวสุดท้าย) โดยแทนที่ “_arial.ttf” ด้วยชื่อของ ไฟล์ที่คุณคัดลอกไปยังโฟลเดอร์สื่อของคุณ:

@font-face {
  font-family: myfont;
  src: url("_arial.ttf");
}

เปลี่ยนเฉพาะส่วน “arial” เท่านั้น ไม่ใช่ส่วน “myfont”

หลังจากนั้น คุณสามารถเปลี่ยนแบบอักษรสำหรับการ์ดทั้งหมด หรือสำหรับ ฟิลด์แต่ละฟิลด์ได้ หากต้องการเปลี่ยนแบบอักษรสำหรับการ์ดทั้งหมด เพียงค้นหา บรรทัด font-family: ในส่วน .card และเปลี่ยนแบบอักษรเป็น “myfont” หากต้องการเปลี่ยนแบบอักษรสำหรับเฉพาะบางฟิลด์ โปรดดู คำแนะนำ การจัดรูปแบบฟิลด์ ด้านบน

โปรดตรวจสอบให้แน่ใจว่าชื่อไฟล์ตรงกันทุกประการ หากไฟล์ชื่อ arial.TTF และคุณเขียน arial.ttf ในเทมเพลตการ์ดของคุณ มันจะไม่ทำงาน

โหมดกลางคืน

คุณสามารถปรับแต่งลักษณะที่ปรากฏของเทมเพลตเมื่อเปิดใช้งานโหมดกลางคืนใน หน้าจอการตั้งค่าได้

หากคุณต้องการพื้นหลังสีเทาอ่อน คุณสามารถใช้ สิ่งต่อไปนี้:

.card.nightMode {
  background-color: #555;
}

หากคุณมีสไตล์ “myclass” สิ่งต่อไปนี้จะแสดงข้อความ สีเหลืองเมื่อเปิดใช้งานโหมดกลางคืน:

.nightMode .myclass {
  color: yellow;
}

การเฟดและการเลื่อน

Anki จะเลื่อนไปยังคำตอบโดยอัตโนมัติโดยค่าเริ่มต้น มันจะค้นหาองค์ประกอบ HTML ที่มี id=answer และเลื่อนไปที่นั่น คุณสามารถวาง id บนองค์ประกอบอื่นเพื่อปรับตำแหน่งการเลื่อน หรือลบ id=answer เพื่อปิดการเลื่อน

ด้านคำถามของการ์ดจะค่อยๆ ปรากฏขึ้นโดยค่าเริ่มต้น หากคุณต้องการปรับ การหน่วงเวลานี้ คุณสามารถวางสิ่งต่อไปนี้ที่ด้านบนของ เทมเพลตการ์ดด้านหน้าของคุณ:

<script>
  qFade = 100;
  if (typeof anki !== "undefined") anki.qFade = qFade;
</script>

100 (มิลลิวินาที) เป็นค่าเริ่มต้น ตั้งค่าเป็น 0 เพื่อปิดใช้งานการเฟด

Javascript

เนื่องจากการ์ด Anki ถูกปฏิบัติต่อเหมือนหน้าเว็บ จึงเป็นไปได้ที่จะฝัง Javascript บางอย่างในการ์ดของคุณผ่านเทมเพลตการ์ด สำหรับ การอ้างอิงที่ดี โปรดอ่าน โพสต์นี้ ในฟอรัม

เนื่องจาก Javascript เป็นคุณสมบัติขั้นสูงและมีหลายอย่างที่อาจผิดพลาดได้ ฟังก์ชัน Javascript จึงมีให้โดยไม่มีการสนับสนุนหรือ การรับประกันใดๆ เราไม่สามารถให้ความช่วยเหลือในการเขียน Javascript ได้ และไม่สามารถรับประกันได้ว่าโค้ดใดๆ ที่คุณเขียนจะยังคงทำงาน โดยไม่มีการแก้ไขในการอัปเดต Anki ในอนาคต หากคุณไม่สะดวก ที่จะแก้ไขปัญหาใดๆ ที่คุณพบด้วยตนเอง โปรดหลีกเลี่ยงการใช้ Javascript

ไคลเอ็นต์ Anki แต่ละตัวอาจใช้งานการแสดงผลการ์ดแตกต่างกัน ดังนั้นคุณจะต้อง ทดสอบพฤติกรรมข้ามแพลตฟอร์ม ไคลเอ็นต์จำนวนมาก ถูกนำไปใช้โดยการรักษาหน้าเว็บที่ทำงานยาวนานและอัปเดต ส่วนต่างๆ แบบไดนามิกเมื่อมีการทบทวนการ์ด ดังนั้น Javascript ของคุณจะต้อง อัปเดตส่วนต่างๆ ของเอกสารโดยใช้สิ่งต่างๆ เช่น document.getElementById() แทนที่จะทำสิ่งต่างๆ เช่น document.write()

ฟังก์ชันเช่น window.alert อาจไม่พร้อมใช้งาน Anki จะเขียน ข้อผิดพลาด javascript ไปยังเทอร์มินัล ดังนั้นคุณจะต้อง ดูคอนโซล เพื่อ ดูข้อผิดพลาดเหล่านั้น ในการแก้ไขปัญหาเกี่ยวกับ JavaScript คุณสามารถใช้ inspector ของ Chrome ได้