หน้านี้ได้รับการแปลโดย Cloud Translation API

คําแนะนําเกี่ยวกับไอคอนสื่อการเรียนการสอนของชั้นเรียน

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

ไอคอนสื่อการเรียนการสอนของชั้นเรียนคืออะไร

ไอคอนระบบดีไซน์ Material นั้นเรียบง่าย ทันสมัย เป็นมิตร และบางครั้งก็ดูแปลกๆ แต่ละไอคอนสร้างขึ้นโดยใช้หลักเกณฑ์การออกแบบของเราเพื่อให้เห็นภาพแนวคิดสากลที่ใช้กันโดยทั่วไปตลอด UI ในรูปแบบที่เรียบง่ายและเรียบง่าย ไอคอนเหล่านี้ได้รับการเพิ่มประสิทธิภาพให้อ่านง่ายและชัดเจนทั้งขนาดเล็กและขนาดใหญ่ ไอคอนเหล่านี้ได้รับการเพิ่มประสิทธิภาพเพื่อการแสดงผลที่สวยงามในแพลตฟอร์มและความละเอียดในการแสดงผลทั่วไปทั้งหมด

ดูไอคอน Material Design ทั้งหมดได้ในไลบรารีไอคอน Material

กำลังเรียกดูไอคอน

ไอคอนมีในหลายรูปแบบและเหมาะกับโครงการและแพลตฟอร์มประเภทต่างๆ สำหรับนักพัฒนาซอฟต์แวร์ในแอป และสำหรับนักออกแบบในการจำลองหรือต้นแบบ

การอนุญาตให้ใช้สิทธิ

เราได้เปิดให้คุณใส่ไอคอนเหล่านี้ไว้ในผลิตภัณฑ์ภายใต้ใบอนุญาต Apache เวอร์ชัน 2.0 คุณสามารถรีมิกซ์และแชร์ไอคอนและเอกสารเหล่านี้อีกครั้งในผลิตภัณฑ์ของคุณได้ เราต้องการให้ระบุแหล่งที่มาในหน้าจอaboutของแอปคุณ แต่ก็ไม่จำเป็น

เรียกดูและดาวน์โหลดแต่ละไอคอน

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

กำลังดาวน์โหลดทุกอย่าง

ดาวน์โหลดไฟล์ ZIP ที่เสถียรล่าสุด (ประมาณ 310 MB) ของไอคอนทั้งหมดหรือเวอร์ชัน Bleeding-edge จากต้นฉบับ

ที่เก็บ Git

ไอคอน Material จะพร้อมใช้งานจากที่เก็บ Git ซึ่งมีชุดไอคอนที่สมบูรณ์ รวมถึงรูปแบบต่างๆ ทั้งหมดที่เราเปิดให้ใช้งาน

$ git clone https://github.com/google/material-design-icons/

แบบอักษรของไอคอนสำหรับเว็บ

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

การใช้แบบอักษรไม่เพียงแค่เป็นวิธีที่สะดวกที่สุดเท่านั้น แต่ยังมีประสิทธิภาพและดูดีอีกด้วย

ไอคอนกว่า 900 รายการจากไฟล์ขนาดเล็กเพียงไฟล์เดียว
แสดงจากเซิร์ฟเวอร์แบบอักษรเว็บของ Google หรือจะโฮสต์ด้วยตนเองก็ได้
สนับสนุนโดยเว็บเบราว์เซอร์รุ่นใหม่ทั้งหมด
โดยใส่สี ปรับขนาด และจัดตำแหน่งด้วย CSS
อิงตามเวกเตอร์: ดูดีทุกขนาด จอแสดงผลแบบเรตินา หน้าจอแสดงผลที่มี dpi ต่ำ

แบบอักษรของไอคอนมีขนาดเพียง 42 KB ในรูปแบบ woff2 ที่เล็กที่สุดและ 56KB ในรูปแบบ Woff มาตรฐาน เมื่อเปรียบเทียบกันแล้ว โดยทั่วไปแล้ว ไฟล์ SVG ที่บีบอัดด้วย gzip จะมีขนาดประมาณ 62 KB แต่ก็สามารถลดขนาดลงได้อย่างมากโดยการรวบรวมเฉพาะไอคอนที่คุณต้องการลงในไฟล์ SVG ที่มีสัญลักษณ์สไปรท์ไฟล์เดียว

วิธีการตั้งค่า 1 ใช้ผ่าน Google Fonts

วิธีที่ง่ายที่สุดในการตั้งค่าแบบอักษรของไอคอนเพื่อใช้ในหน้าเว็บต่างๆ คือการใช้ Google Fonts คุณเพียงต้องใส่ HTML บรรทัดเดียว

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

เช่นเดียวกับ Google Web Fonts อื่นๆ จะมีการแสดง CSS ที่ถูกต้องเพื่อเปิดใช้งานแบบอักษร "Material Icons" สำหรับเบราว์เซอร์โดยเฉพาะ ระบบจะประกาศคลาส CSS เพิ่มเติมที่มีชื่อว่า .material-icons องค์ประกอบที่ใช้คลาสนี้จะมี CSS ที่ถูกต้องเพื่อแสดงไอคอนเหล่านี้จากแบบอักษรของเว็บ

วิธีการตั้งค่า 2 โฮสติ้งด้วยตนเอง

สำหรับผู้ที่ต้องการโฮสต์เว็บฟอนต์ด้วยตนเอง จำเป็นต้องมีการตั้งค่าเพิ่มเติมบางอย่าง โฮสต์แบบอักษรไอคอนในตำแหน่ง เช่น https://example.com/material-icons.woff และเพิ่มกฎ CSS ต่อไปนี้

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

นอกจากนี้ จะต้องมีการประกาศกฎ CSS สำหรับการแสดงผลไอคอนเพื่อให้แสดงผลแบบอักษรได้อย่างถูกต้อง ปกติกฎเหล่านี้จะเป็นส่วนหนึ่งของสไตล์ชีต Google Web Font แต่คุณจะต้องรวมกฎเหล่านี้เองในโปรเจ็กต์เมื่อคุณโฮสต์แบบอักษรด้วยตัวเอง

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

การใช้ไอคอนใน HTML

คุณสามารถรวมไอคอนไว้ในหน้าเว็บได้ง่ายๆ ตัวอย่างเล็กๆ น้อยๆ มีดังนี้:

ใบหน้า

face

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

ฟีเจอร์นี้ใช้ได้ในเบราว์เซอร์รุ่นใหม่ส่วนใหญ่ ทั้งบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่

เบราว์เซอร์	เวอร์ชันที่รองรับ Ligature
Google Chrome	11
Mozilla Firefox	3.5
Apple Safari	5
Microsoft IE	10
Microsoft Edge	18
โอเปร่า	15
Apple MobileSafari	iOS 4.2
เบราว์เซอร์ Android	3.0

สำหรับเบราว์เซอร์ที่ไม่รองรับการรวมตัวอักษร (Ligature) ให้ย้อนกลับไประบุไอคอนโดยใช้การอ้างอิงอักขระที่เป็นตัวเลขตามตัวอย่างด้านล่างนี้

ปกติ



ค้นหาทั้งชื่อไอคอนและจุดโค้ดในไลบรารีไอคอนวัสดุโดยเลือกไอคอนใดก็ได้แล้วเปิดแผงแบบอักษรไอคอน แบบอักษรของไอคอนแต่ละรายการจะมีดัชนี Codepoints ในที่เก็บ Git ที่แสดงชื่อและรหัสอักขระที่สมบูรณ์ (ที่นี่)

ไอคอนจัดรูปแบบในดีไซน์ Material

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

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

ขนาด

แม้ว่าไอคอนในแบบอักษรจะสามารถปรับขนาดเป็นขนาดใดก็ได้ แต่ตามหลักเกณฑ์ไอคอนดีไซน์ Material เราขอแนะนำให้แสดงไอคอนขนาด 18, 24, 36 หรือ 48 พิกเซล ค่าเริ่มต้นคือ 24 พิกเซล

กฎ CSS สำหรับหลักเกณฑ์การปรับขนาดของดีไซน์ Material มาตรฐานมีดังนี้

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

ไอคอน Material จะดูดีที่สุดที่ 24px แต่หากไอคอนต้องแสดงในขนาดอื่น การใช้กฎ CSS ด้านบนอาจช่วยได้ดังนี้

18px

face

24px

face

36 พิกเซล

face

48 พิกเซล

face

ระบายสี

การใช้แบบอักษรไอคอนช่วยให้สามารถจัดรูปแบบไอคอนได้ง่ายในทุกสี สำหรับไอคอนที่ใช้งานอยู่ เราขอแนะนำให้ใช้สีดำที่ความทึบแสง 54% หรือสีขาวที่ความทึบแสง 100% เมื่อแสดงไอคอนเหล่านี้บนพื้นหลังสีอ่อนหรือสีเข้มตามหลักเกณฑ์ไอคอนของดีไซน์ Material หากไอคอนถูกปิดใช้หรือไม่ได้ใช้งาน ให้ใช้สีดำที่ 26% หรือสีขาวที่ 30% สำหรับพื้นหลังสีอ่อนและสีเข้มตามลำดับ

ต่อไปนี้เป็นตัวอย่างบางส่วนโดยใช้รูปแบบ CSS ของวัสดุตามที่อธิบายไว้ข้างต้น

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

ตัวอย่างการวาดไอคอนบนพื้นหลังสีอ่อนโดยมีสีเบื้องหน้าเป็นสีเข้ม

ปกติ

face

ปิดใช้

face

ตัวอย่างการวาดไอคอนบนพื้นหลังสีเข้มด้วยสีพื้นหน้าอ่อน

ปกติ

face

ปิดใช้

face

หากต้องการกำหนดสีของไอคอนที่กำหนดเอง ให้กำหนดกฎ CSS โดยระบุสีที่ต้องการสำหรับแบบอักษรดังนี้

.material-icons.orange600 { color: #FB8C00; }

แล้วใช้ชั้นเรียนเมื่อพูดถึงไอคอน

ปกติ

face

รูปภาพไอคอนสำหรับเว็บ

ไอคอน Material ยังมีเป็นภาพทั่วไปทั้งในรูปแบบ PNG และ SVG

SVG

ไอคอน Material จะแสดงเป็น SVG ที่เหมาะสำหรับโปรเจ็กต์บนเว็บ คุณจะดาวน์โหลดไอคอนแต่ละรายการได้จากคลังไอคอนวัสดุ SVG ยังดูได้จากไอคอนดีไซน์ Material ที่เก็บ Git ใต้เส้นทางด้วย

material-design-icons/src/

ตัวอย่างเช่น ไอคอนสำหรับแผนที่จะอยู่ใน src/maps

material-design-icons/src/maps/

หากในเว็บไซต์หนึ่งใช้ไอคอนหลายรายการ ขอแนะนำให้สร้างภาพต่อเรียงจากรูปภาพ ดูข้อมูลเพิ่มเติมได้ในเอกสารในไดเรกทอรี Sprite ของที่เก็บ Git

PNG

PNG เป็นวิธีการแบบดั้งเดิมที่สุดในการแสดงไอคอนบนเว็บ การดาวน์โหลดของเราจากไลบรารีไอคอนวัสดุจะแสดงความหนาแน่นแบบเดี่ยวและ 2 ชั้นสำหรับแต่ละไอคอน ในการดาวน์โหลดจะเรียกว่า 1x และ 2x ตามลำดับ นอกจากนี้ยังมีไอคอนในที่เก็บ Git ในส่วนต่อไปนี้

material-design-icons/png/

หากในเว็บไซต์หนึ่งใช้ไอคอนหลายรายการ ขอแนะนำให้สร้างภาพต่อเรียงจากรูปภาพ ดูข้อมูลเพิ่มเติมได้ในคำแนะนำในไดเรกทอรี Sprite ในที่เก็บ Git

ไอคอนสำหรับ Android

PNG ที่เหมาะสำหรับ Android จะมีให้จากคลังไอคอนวัสดุ ซึ่งมีความหนาแน่นของหน้าจอที่รองรับทั้งหมด จึงน่าจะดูดีในทุกอุปกรณ์

ไอคอนนี้ยังพร้อมใช้งานในที่เก็บของไอคอนดีไซน์ Material โดยใช้สีและขนาดเดียวกันดังนี้

ขณะนี้ Vector Drawable พร้อมให้ใช้งานในรูปแบบไอคอนขนาด 24dp สีดำเท่านั้น ซึ่งเป็นความเข้ากันได้กับขนาดไอคอนมาตรฐานที่สุดของเรา หากต้องการแสดงผลไอคอนเป็นสีอื่น ให้ใช้การแต้มสีที่วาดได้ซึ่งมีอยู่ใน Android Lollipop

เมื่อใช้ Vector Drawable อาจไม่จำเป็นต้องรวมความหนาแน่นของ xxxhdpi PNG เนื่องจากอุปกรณ์ที่รองรับความหนาแน่นของหน้าจอไม่รองรับ Vector Drawable

ไอคอนสำหรับ iOS

ไอคอน Material ยังทำงานได้ดีในแอป iOS ด้วย ทั้งในไลบรารีไอคอน Material และที่เก็บ Git ไอคอนเหล่านี้จะรวมกันอยู่ในชุดรูปภาพ Xcode ซึ่งจะทํางานกับแคตตาล็อกเนื้อหา Xcode (xcassets) ได้อย่างง่ายดาย คุณสามารถเพิ่มชุดรูปภาพเหล่านี้ลงในแคตตาล็อกเนื้อหา Xcode ใดก็ได้โดยลากลงใน Xcode ไปยังแคตตาล็อกเนื้อหาหรือคัดลอกโฟลเดอร์ลงในโฟลเดอร์ xcasset

ชุดรูปภาพ iOS

ชุดรูปภาพมีรูปภาพที่มีความหนาแน่นแบบเดี่ยว 2 เท่า และ 3 เท่า (1x, 2x, 3x) เพื่อให้ทำงานได้กับความหนาแน่นของหน้าจอ iOS ที่ทราบทั้งหมด มีไอคอนสีขาวและสีดำให้ใช้งาน แต่เราขอแนะนำให้ใช้ imageWithRenderingMode ของ UIImage กับ UIImageRenderingModeAlwaysTemplate ซึ่งจะช่วยให้สามารถใช้รูปภาพเป็นมาสก์อัลฟ่าซึ่งสามารถย้อมให้เป็นสีใดก็ได้

ตัวอย่าง Objective-C:

UIButton *button = [[UIButton alloc] init];
UIImage *closeImage =
    [[UIImage imageNamed:@"ic_close"]
       imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f];
[button setImage:closeImage forState:UIControlStateNormal];

ตัวอย่าง Swift:

let button = UIButton()
let closeImage = UIImage(named:"ic_close")?.imageWithRenderingMode(
    UIImageRenderingMode.AlwaysTemplate)
button.tintColor = UIColor(white:0, alpha:0.54)
button.setImage(closeImage, forState:UIControlState.Normal)

ไอคอนใน RTL

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

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

ไอคอน RTL บน Android

บทความสำหรับนักพัฒนาซอฟต์แวร์ Android นี้อธิบายวิธีใช้อินเทอร์เฟซผู้ใช้ RTL ในเชิงลึก โดยค่าเริ่มต้นใน Android ไอคอนจะไม่มิเรอร์เมื่อทิศทางของเลย์เอาต์ไปในทางเดียวกัน คุณจำเป็นต้องมิเรอร์ไอคอนที่เหมาะสมโดยเฉพาะเมื่อจำเป็น ด้วยการให้เนื้อหาพิเศษสำหรับภาษา RTL หรือใช้ฟังก์ชันเฟรมเวิร์กเพื่อมิเรอร์เนื้อหา

หากต้องการจัดเตรียมเนื้อหาเฉพาะสำหรับภาษาที่อ่านจากขวาไปซ้าย คุณสามารถใช้ตัวระบุ ldrtl ในไดเรกทอรีทรัพยากร เช่น res/drawable-ldrtl/ ทรัพยากรภายในไดเรกทอรีดังกล่าวจะใช้กับภาษาที่อ่านจากขวาไปซ้ายเท่านั้น สำหรับอุปกรณ์ที่ใช้ Android API 19 ขึ้นไป เฟรมเวิร์กยังจะมีแอตทริบิวต์autoMirrored สำหรับ Drawables ด้วย เมื่อตั้งค่าแอตทริบิวต์นี้เป็น "จริง" ระบบจะแสดงโฆษณาที่ถอนออกได้โดยอัตโนมัติในภาษาที่อ่านจากขวาไปซ้าย

การใช้ autoMirrored

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0"
        android:tint="?attr/colorControlNormal"
        android:autoMirrored="true">
  <path
        android:fillColor="@android:color/white"
        android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,
                          8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>

หากไม่สามารถใช้การมิเรอร์อัตโนมัติหรือการให้ทรัพยากรที่ถอนออกได้อื่นๆ คุณจะใช้แอตทริบิวต์ ImageViewscaleX เพื่อมิเรอร์อุปกรณ์ที่ถอนออกได้ (เช่น ด้วยการระบุเลย์เอาต์เฉพาะ RTL ในไดเรกทอรี res/layout-ldrtl)

การมิเรอร์ภายในไฟล์เลย์เอาต์

<ImageView
    android:id="@+id/my_icon"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:scaleX="-1" />

สุดท้าย รายการที่ถอนออกได้สามารถมิเรอร์แบบเป็นโปรแกรม

ตรวจสอบทิศทางการจัดวางด้วยตนเองโดยใช้ getLayoutDirection ดังนี้

if (ViewCompat.getLayoutDirection(view) == ViewCompat.LAYOUT_DIRECTION_RTL) {
  // custom code
}

การมิเรอร์เนื้อหา ImageView แบบเป็นโปรแกรม ให้ทำดังนี้

imageView.setScaleX(-1);

ไอคอน RTL บน iOS

iOS มีแนวคิดเป็น UISemanticContentAttribute ที่แนบอยู่กับข้อมูลพร็อพเพอร์ตี้แต่ละรายการ ซึ่งอาจเป็น unspecified, forceLeftToRight, forceRightToLeft, playback หรือ spatial iOS ใช้ค่านี้และการตั้งค่า (ซ้ายไปขวา (LTR)/RTL ของอุปกรณ์ที่แสดงอินเทอร์เฟซเพื่อกําหนด EffectiveLayoutDirection ของมุมมอง performanceLayoutDirection นี้จะกำหนดว่าจะมิเรอร์รูปภาพเมื่อแสดงหรือไม่

โดยค่าเริ่มต้น ระบบจะตั้งค่าเนื้อหาเชิงความหมายของรูปภาพเป็น unspecified ซึ่งจะทำให้วิดีโอมิเรอร์ในโหมด RTL หากไม่ต้องการให้ระบบมิเรอร์ไอคอน คุณต้องตั้งค่าเป็น forceLeftToRight อย่างชัดเจน Apple ระบุข้อยกเว้นบางอย่างที่ไม่ควรมิเรอร์ เช่น การเล่นสื่อ (กรอไปข้างหน้า กรอกลับ ฯลฯ) โน้ตดนตรี รูปภาพที่แสดงเวลาผ่านพ้นไปแล้ว ฯลฯ

ตัวอย่าง Objective-C:

// Prevent an icon from being mirrored in RTL mode
UIImage *icon = [UIImage imageNamed:@"my_icon.png"];
UIImageView *iconView = [[UIImageView alloc] initWithImage:icon];
iconView.semanticContentAttribute =
  UISemanticContentAttributeForceLeftToRight;

ตัวอย่าง Swift:

// Prevent an icon from being mirrored in RTL mode
let iconImage = UIImage.init(named: "my_icon.png")
let iconView = UIImageView.init(image: iconImage)
iconView.semanticContentAttribute = .forceLeftToRight;

โปรดอ่านเอกสารประกอบ RTL ของ Apple เพื่อดูเอกสารเชิงลึกเพิ่มเติมเกี่ยวกับวิธีใช้ RTL ใน iOS และ macOS

มีการเพิ่มเนื้อหาเชิงความหมายใน iOS 9 หากคุณรองรับ iOS เวอร์ชันก่อนหน้า เฟรมเวิร์กการปรับให้เป็นสากลของ Material จะย้อนกลับฟังก์ชันการทํางานบางรายการไปยัง iOS 8

ไอคอนขวาไปซ้ายบนเว็บ

เราขอแนะนำให้อ่านบทความต่อไปนี้เป็นข้อมูลเบื้องต้นสำหรับ RTL บนเว็บ https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1 https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2

โดยค่าเริ่มต้น ไอคอนจะไม่แสดงผลตามทิศทางของเลย์เอาต์เมื่อทิศทางของเลย์เอาต์สอดคล้องกัน คุณจำเป็นจะต้องมิเรอร์ไอคอนที่เหมาะสม หากจำเป็น

ตัวอย่างด้านล่างแสดงวิธีใช้กฎ RTL CSS อย่างง่าย หรือจะดูใน Codepen ก็ได้

page.html

<html dir="rtl">
  <img class="material-icons" src="my_icon.png" alt="my icon"/>
</html>

page.css

html[dir="rtl"] .icon {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

สร้างไอคอน RTL ของคุณเองโดยใช้ ImageMagick

หากการมิเรอร์ไอคอนเป็นโค้ดไม่สามารถทำได้ คุณสามารถใช้ ImageMagick เพื่อมิเรอร์รูปภาพในแนวนอนได้

convert -flop my_icon.png my_icon_rtl.png

ไอคอนใดที่ควรมิเรอร์สำหรับ RTL

รายการไอคอนที่มิเรอร์ไปยัง RTL แบบเป็นโปรแกรมได้มีดังนี้


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