Printable Page

ክፍል 2፥ ንባብ

ንባብ ስንል፥ ተነባቢ ተከታታይ ፊደላት ማለታችን ነው። እንደ ቃል ወይም ቃላት። ፊደላቱ በዩንኮድ ወይም ተመሳሳይ ደንብ ኮድ የተሰጣቸው መሆን አለባቸው። የኢትዮጵያ ፊደል በዩንኮድ ደንብ ውስጥ አለ። ተገቢ የዩንኮድ ፎንቱ እስካለ፥ ፊደላቱን መጻፍና ማንበብ ይቻላል።

2.1 የንባብ መሠረታዊ ጠባይ

ንባብን በ<text> ቃል እንጽፋለን። ይህ የሥዕል-ቃል ያቀፈውን ንባብ በታዘዘው መሠረት የኮምፕዩተሩ ገጽ ላይ ይጽፋል። የ<text> ሥዕላዊ-ቃልና የንባብ አጻጻፍ እንዲህ ነው።

   <text x="36" y="100">
      Text with default look
   </text>

				

ለSVG ማንኛውም ንባብ የሚታየው እንደ ሥዕል ነው። ስለሆነም ሥዕል ላይ የምንሠራቸውን ተግባራት ንባብም ላይ ማዋል ይፈቀዳል። ስለ <text> ቃል መሠረታዊ መላዎች።

• ያንድ ንባብ የx-አክሰስና የy-አክሰስ ሥፍራ ካልተሰጠ የx እና የy መነሻ ሥፍራ እንደ (0,0) ይቆጠራል።
• የቀለም አይነት ካልተሰየመ፥ እንደ ጥቁር ቀለም ይታያል።
• ቁመት ካልተወሰነ፥ እንደ መካከለኛ ይቆጠራል።
• የ<text> ቃል በራሱ አዲስ መስመር አይከፍትም ወይም ንባብን አዲስ መስመር ላይ አይቀጥልም።

ምሳሌ እነሆ።

2.2 ንባብና ፊደል አጣጣል

2.2.1 የሉክ አለካክ ስልት

ለማስታወስ ያህል፥ የካርትዣን የቦታ አለካክ ስልት እንደገና እንጐበኛለን። ንባብም ይሁን ሥዕል፥ በሉክ ላይ ሊወስድ የሚገባውን ሥፍራ የምንወስነው በx እና በy አቅጣጫዎች ሥፍራዎችን (ልኮቹን) በመስጠት ነው። የx አክሰስ ከላይ ካለው የሉኩ የግራ ጠርዝ ተነስቶ ወደ ቀኝ መጠኑ እየጨመረ ይሄዳል። የy አክሰስ ከላይ ካለው የሉኩ ጠርዝ ተነስቶ ወደ ታች መጠኑ እያደገ ይመጣል። ስለዚህ፥ የንባብን አቀማመጥ ወይም የፊደላትን አጣጣል ስናስብ ይኸንን ስልት በሂሊናችን መጠብቅ አለብን።

2.2.2 የ<tspan> ቃል አጻጻፍ

አንዳንድ ጊዜ አያሌ መስመሮችን የያዘ ንባብ መጻፍ ከተፈለገ፥ ወይም ያንድ ቃል የሥፍራ አቀማመጥ ከሌላው አንፃር ይወሰን ዘንድ ከታሰበ፥ የ<tspan> ቃል አመቺ መፍትሔ ነው። አጻጻፉና አጠቃቀሙ እንዲህ ይመስላል።

01.   <text x="36" y="100">
02.       First line text
03.      <tspan x="36" dy="18">
04.         Second line text
05.      </tspan>
06.      <tspan x="36" dy="18">
07.         Third line text
08.      </tspan>
09.      <tspan x="36" dy="18">
10.         Fourth line text
11.      </tspan>
12.   </text>

				

በመዋቅር ረገድ የ<tspan> ቃል በ<text> ሰውነት ውስጥ መዋል አለበት። ስንት ጊዜ ለሚለው፥ እንደ ፍላጐታችን ነው። በዚህ ምሳሌ ሦስት ጊዜ ተጠቅመነዋል። በተራ ቁጥር 3-5፥ 6-8፥ እና 9-11።

የንባቡን ሥፍራ በፍጹማዊ ወይም ባንጻራዊ ወይም በሁለቱም መንገድ መግለጽ እንችላለን። በተራ ቁጥር 3 ላይ ያለው ቃል «x=36» ሲል አለካኩ ፍጹማዊ ይሁን ማለቱ ነው። ከሉኩ ጠርዝ ተነስተህ 36 ቁጠርና ሥፍራውን ወስን እንደማለት። በy አክሰስ ረገድ «dy=18» ሲል፥ ልክያው መጀመር ያለበት ቀደሞ ከተጻፈው ንባብ አንጻር ለማለት ነው።

2.3 ንባብና መልክ

2.3.1 የንባብ ስታይል

በዩንኮድ ደንብ መሠረት፥ ልዩ ልዩ ቋንቋዎችን መጠቀም እንችላለን። ነገር ግን፥ የሚጻፈው ፊደል ይታይ ዘንድ ተክክለኛ ፎንት ይጠይቃል። በተጨማሪ ከፊደላት ጋር ስንሠራ ቁመታቸውን መወሰን፥ ቀለማቸውን መቀያየር፥ አቋቋማቸውን መለዋወጥ፥ አጣጣለቸውን መቆጣጠር ተፈላጊ ይሆናል። የንባብ መልክና አቀማመጥ የሚከተሉትን ባህሪዎች ይጨምራል።

• የፎንት አይነት፥ የፎንት ስም፥ የፎንት ስታይል፥ የፎንት መጠን፤
• የፊደላት ጠርዝና መጠን፤
• ቀለም፥ ቀለም አቀባብ፤
• ሰረዞች፤
• የፊደላት አጣጣል፥ የኆኅት መጠን፤

3.3.2 የስታይል አሰያየምና መንገዶች

ከላይ ያየናቸውን የንባብ ባህሪያት፥ በእንግሊዘኛ «style» ብለው በጅምላ ይጠሯቸዋል። ስለሆነም ከዚህ በኃላ፥ እኛም ስታይል ብለን እንጠቅሳቸዋለን። በነገራችን ላይ፥ የስታይል ቃል እንደ ሁኔታዎች ትርጉሙ ስለሚለያይ ጥንቃቄ ይጠይቃል። የስታይል አጻጻፍ ይኸን ይመስላል።

• የፎንት ዐይነት ውሰና

  <text x="36" y="100" font-family="Ethiopia Jiret"> ፊደል በ«ጅረት» ፎንት </text>

  ወይም

  <text x="36" y="100" style="font-family: Ethiopia Jiret"> ፊደል አጣጣል </text>

  ሁለቱም መንገዶች ውጤታቸው አንድ ነው። ምርጫው የራሳችን ነው።

• የፎንት ስታይልና መጠን

  <text x="36" y="100" font-size="18pt" font-style="italic"> Text with italic style </text>

  ወይም

  <text x="36" y="100" style="font-size: 18pt; font-style: italic"> Text with italic style </text>

  እንደገና የሁለቱም መንገዶች ውጤቶች ተመሳሳይ ነው።

• የፊደላት ጠርዝና መጠን

  <text x="36" y="100" stroke="red" stroke-width="3" fill="none"> Text in outline form </text>

  ወይም

  <text x="36" y="100" style="stroke: red; stroke-width: 3"> Text in outline form </text>

• ቀለምና ቀለም አቀባብ

  የቀለም ዓይነቶች በሦስት ዘዴዎች ይገለጻሉ፦ በስም፥ በዴስማልና በሄክሳዴስማል (hexadecimal) የቁጥር ስልት።

  በውል ተቀባይነት ያላቸው በSVG ደንብ የተደገፉ የቀለም ስሞች አሉ። ለምሳሌ፦ black፥ blue፥ brown፥ chocolet፥ cyan፥ gold፥ gray፥ green እና ሌሎችም። ለዝርዝር ስማቸው የSVGን ደንብ ይመልከቱ። አጻጻፍና አጠቃቀማቸው ይኸን ይመስላል።

  <text x="36" y="100" style="background-color: gray; fill: white"> Text in gray background and white foreground </text>

  ስም ያልተሰጣቸው ቀለሞች የግድ በዴስማል ወይም በሄክሳዴስማል የቁጥር ስልት መገለጽ አለባቸው። ሁሉም ባይሆኑ፥ አብዛኛዎቹ ቀለሞች ከሦስት መሠረታዊ ቀለሞች ይመጣሉ ወይም ይመነጫሉ።

  እነዚህ መሠረታዊ ቀለሞች ቀይ፥ አርንጓዴ እና ሰማያዊ ናቸው። የያንዳንዳቸውን ድመቀት (intensity) ከ0 እስከ 255 ሰይሞ በማዋሀድ ሌሎች ቀለሞች ይወጣሉ። ቴሌቪዥኖችና ሞኒተሮች ኀብረ-ቀለማትን የሚያሳዩት ይኸን መላ በመጠቀም ነው። ለምሳሌ ጥቁር ቀለም ለማውጣት በዴስማል የቁጥር ስልት rgb(0, 0, 0) ይጻፋል። ወይም ሰማያዊ ቀለም ብቻ ለማውጣት rgb(0, 0, 255) ይጻፋል። ወይም ግሬይ ቀለም ለማውጣት rgb(128, 128, 128) ይጻፋል።

  <text x="36" y="100" style="background-color: rgb(210, 105, 30); color: rgb(255, 255, 255)"> Text in gray background and white foreground </text>

  ሦስተኛውና የመጨረሻው መንገድ፥ የዴስማል የቍጥር ስልት ትቶ ሄክሳዴስማል ይጠቀማል። ስልቱ እንጂ በሌላ እላይ ካየነው አይለይም።

  <text x="36" y="100" style="background-color: D2691E; fill: FFFFFF"> Text in gray background and white foreground </text>

• ያንድ ንባብ (ፊደላት) ስታይል ባሕሪ ብዙ ነው። እዚህ ያየነው ለመተዋወቅ ያህል ስለሆነ አንባቢው በግል የSVGን ድንብ በቅርብ መመለከት ይኖርበታል። የተወያየናቸውን በግብር የሚያሳይ ምሳሌ እነሆ።

• ምሳሌ፦ svg_text_style.svg
• ምሳሌ፦ svg_text_with_gradient.svg