🚀 go-pugleaf

On Friday, April 6, 2018 at 2:14:17 PM UTC+2, Marek S wrote:

> W jaki sposób "nazwa" zamieniana jest na konkretny obrazek? Nie ma do 

to ligatury

W dniu 2018-04-07 o 14:34, satellite pisze:
> On Friday, April 6, 2018 at 2:14:17 PM UTC+2, Marek S wrote:
> 
>> W jaki sposób "nazwa" zamieniana jest na konkretny obrazek? Nie ma do
> 
> to ligatury
> 

Niby jak otrzymać w ten sposób np. ikonę Androida (2-gi rząd) lub 
jakąkolwiek inną z poniższego zbioru?

https://material.io/icons/

Analizując ruch sieciowy wyraźnie widzę, że nie są to ligatury lecz 
czcionka. Każdy obrazek to jeden znak.

Tak czy owak ma to związku z moim pytaniem. A pytanie brzmiało: w jaki 
sposób na podstawie tekstu i bez zastosowania CSS/JS zamienić tekst w 
tagu w konkretny znak?

-- 
Pozdrawiam,
Marek

Dnia Sat, 7 Apr 2018 20:06:59 +0200, Marek S napisał(a):

> Tak czy owak ma to związku z moim pytaniem. A pytanie brzmiało: w jaki 
> sposób na podstawie tekstu i bez zastosowania CSS/JS zamienić tekst w 
> tagu w konkretny znak?

Musisz mieć font ze zdefiniowanymi ligaturami, w tym przypadku korzystasz z
ligatury "android":

https://github.com/google/material-design-icons/blob/master/iconfont/codepoints
http://alistapart.com/article/the-era-of-symbol-fonts

-- 
Borys Pogoreło
borys(#)leszno,edu,pl

W dniu 10.04.2018 o 00:38, Borys Pogoreło pisze:

> 
> Musisz mieć font ze zdefiniowanymi ligaturami, w tym przypadku korzystasz z
> ligatury "android":

Tak, to wiem. Tylko za diabła nie wiem w jaki sposób tag:

<tag class="material-icons">nazwa</tag>

konwertowany jest na androida czy inną ikonkę. Rozumiałbym gdyby pod 
literą A kryła się ikona androida a pod B ikona Apple w danym foncie. 
Natomiast nie rozumiem w jaki sposób ciąg znaków zamieniany jest na 
jeden znak. W tym przypadku ciągiem znaków jest "nazwa".

-- 
Pozdrawiam,
Marek

W dniu 10.04.2018 o 09:24, Marek S pisze:
> W dniu 10.04.2018 o 00:38, Borys Pogoreło pisze:
> 
>>
>> Musisz mieć font ze zdefiniowanymi ligaturami, w tym przypadku 
>> korzystasz z
>> ligatury "android":
> 
> Tak, to wiem. Tylko za diabła nie wiem w jaki sposób tag:
> 
> <tag class="material-icons">nazwa</tag>
> 
> konwertowany jest na androida czy inną ikonkę. Rozumiałbym gdyby pod 
> literą A kryła się ikona androida a pod B ikona Apple w danym foncie. 
> Natomiast nie rozumiem w jaki sposób ciąg znaków zamieniany jest na 
> jeden znak. W tym przypadku ciągiem znaków jest "nazwa".
> 

Pod spodem fragment jak to jest zrobione w fontawesome.
Podobnie jest w bootstrapie i innych.

np:
<span class="fa fa-flag"></span>
i widzisz flagę

------------------------------------------------------------

@font-face {
   font-family: 'FontAwesome';
   src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
   src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') 
format('embedded-opentype'), 
url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), 
url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') 
format('svg');
   font-weight: normal;
   font-style: normal;
}
.fa {
   display: inline-block;
   font: normal normal normal 14px/1 FontAwesome;
   font-size: inherit;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

[...]

.fa-flag:before {
   content: "\f024";
}
.fa-headphones:before {
   content: "\f025";
}
.fa-volume-off:before {
   content: "\f026";
}
.fa-volume-down:before {
   content: "\f027";
}
.fa-volume-up:before {
   content: "\f028";
}

W dniu 2018-04-10 o 14:22, Tomek pisze:

> Pod spodem fragment jak to jest zrobione w fontawesome.
> Podobnie jest w bootstrapie i innych.
> 
> np:
> <span class="fa fa-flag"></span>
> i widzisz flagę

Nie rozumiem w czym rzecz bo cały czas dochodzi do nieporozumień. Być 
może ja czegoś nie ogarniam.

W przykładzie jaki pokazuje masz CSS, który tą falgę wyświetla. Klasa 
nazywa się fa-flag i sam ją cytujesz:

.fa-flag:before {
   content: "\f024";
}

A teraz spróbuj ostylować coś takiego:

<span class="fa">fa_flag</span>

aby wyświetlić tą samą flagę. A następnie zmień ciąg znaków:

<span class="fa">fa_volume_off</span>

by wyświetlić "mute". Jak tego dokonasz?

-- 
Pozdrawiam,
Marek

W dniu 07.04.2018 o 20:06, Marek S pisze:
> W dniu 2018-04-07 o 14:34, satellite pisze:
>> On Friday, April 6, 2018 at 2:14:17 PM UTC+2, Marek S wrote:
>>
>>> W jaki sposób "nazwa" zamieniana jest na konkretny obrazek? Nie ma do
>>
>> to ligatury
>>
> 
> Niby jak otrzymać w ten sposób np. ikonę Androida (2-gi rząd) lub 
> jakąkolwiek inną z poniższego zbioru?
> 
> https://material.io/icons/
> 
> Analizując ruch sieciowy wyraźnie widzę, że nie są to ligatury lecz 
> czcionka. Każdy obrazek to jeden znak.
> 
> Tak czy owak ma to związku z moim pytaniem. A pytanie brzmiało: w jaki 
> sposób na podstawie tekstu i bez zastosowania CSS/JS zamienić tekst w 
> tagu w konkretny znak?
> 


Jakbyś lepiej poklikał w link co sam dałeś to byś znalazł odpowiedź w 5 min.

http://google.github.io/material-design-icons/#icon-font-for-the-web
http://alistapart.com/article/the-era-of-symbol-fonts

W dniu 11.04.2018 o 09:51, Tomek pisze:

> 
> Jakbyś lepiej poklikał w link co sam dałeś to byś znalazł odpowiedź w 5 
> min.

W linku jaki dałem nie ma informacji na poruszony temat. Nie zadawałabym 
pytania na forum gdyby tam była odpowiedź.

Ponadto gdybyś odpowiedział mi wprost jak odbywa się konwersja ciągu 
znaków w pojedynczy znak, to zajęłoby to Tobie mniej czasu niż takie 
komentarze.

> http://alistapart.com/article/the-era-of-symbol-fonts

Wynika z tego, że fonty same w sobie posiadają możliwość mapowania ciągu 
znaków w pojedynczy znak. Przeglądarka korzysta z tego mechanizmu. Czy tak?

-- 
Pozdrawiam,
Marek

W dniu 11.04.2018 o 10:16, Marek S pisze:
> W dniu 11.04.2018 o 09:51, Tomek pisze:
> 
>>Nie zadawałabym  pytania na forum gdyby tam była odpowiedź.
> 

Linki, które podałem i gdzie jest odpowiedź na Twoje pytania
znalazłem wyłącznie sprawdzając link, który sam przysłałeś.
Nie użyłem wyszukiwarki.


> Wynika z tego, że fonty same w sobie posiadają możliwość mapowania ciągu 
> znaków w pojedynczy znak. Przeglądarka korzysta z tego mechanizmu. Czy tak?
> 

O takim nowym mechanizmie to ja się dowiedziałem też dopiero dzisiaj i 
za bardzo tego nie testowałem.

Cały czas można użyć starego mechanizmu
np
<i class="material-icons">&#xE87C;</i>


Skopiowane z linków, które podałem wcześniej
------------------------------------------------------------------------


Using the icons in HTML

It’s easy to incorporate icons into your web page. Here’s a small example:
face
<i class="material-icons">face</i>

This example uses a typographic feature called ligatures, which allows 
rendering of an icon glyph simply by using its textual name. The 
replacement is done automatically by the web browser and provides more 
readable code than the equivalent numeric character reference.

This feature is supported in most modern browsers on both desktop and 
mobile devices.
Browser 	Version supporting ligatures
Google Chrome 		11
Mozilla Firefox 	3.5
Apple Safari 		5
Microsoft IE 		10
Opera 			15
Apple MobileSafari 	iOS 4.2
Android Browser 	3.0

For browsers that do not support ligatures, fall back to specifying the 
icons using numeric character references like the example below:

<i class="material-icons">&#xE87C;</i>

Find both the icon names and codepoints on the material icons library by 
selecting any icon and opening the icon font panel. A codepoints index 
is also available on our git repository which shows the complete set of 
names and character codes.

W dniu 11.04.2018 o 10:57, Tomek pisze:

>> Wynika z tego, że fonty same w sobie posiadają możliwość mapowania 
>> ciągu znaków w pojedynczy znak. Przeglądarka korzysta z tego 
>> mechanizmu. Czy tak?
>>
> 
> O takim nowym mechanizmie to ja się dowiedziałem też dopiero dzisiaj i 
> za bardzo tego nie testowałem.
> 
> Cały czas można użyć starego mechanizmu
> np
> <i class="material-icons">&#xE87C;</i>
> 
> 
> Skopiowane z linków, które podałem wcześniej
> ------------------------------------------------------------------------
> 
> 
> Using the icons in HTML
> 

Starego mechanizmu nie chcę używać. Testowałem nowy i działa poprawnie - 
stąd wątek. Natomiast nadal nie wiem do końca jak. Zgaduję:

1. Obecnie fonty mają wbudowanie dwa niezależne mapowania
	a) znak -> reprezentacja graficzna
	b) ciąg znaków -> reprezentacja graficzna

2. Aby wykorzystać cechę B to przeglądarka musi mieć zaimplementowaną tą 
nową(?) funkcjonalność. Ponadto font musi mieć osadzone mapowanie przez 
ciąg znaków.

Z przytoczonych materiałów mogę jedynie domyślać się, że tak to funkcjonuje.

-- 
Pozdrawiam,
Marek

On Wed, 11 Apr 2018 13:40:40 +0200, Marek S wrote:

> Starego mechanizmu nie chcę używać. Testowałem nowy i działa poprawnie - 
> stąd wątek. Natomiast nadal nie wiem do końca jak. Zgaduję:
> 
> 1. Obecnie fonty mają wbudowanie dwa niezależne mapowania
> 	a) znak -> reprezentacja graficzna
> 	b) ciąg znaków -> reprezentacja graficzna
> 
> 2. Aby wykorzystać cechę B to przeglądarka musi mieć zaimplementowaną tą 
> nową(?) funkcjonalność. Ponadto font musi mieć osadzone mapowanie przez 
> ciąg znaków.
> 
> Z przytoczonych materiałów mogę jedynie domyślać się, że tak to funkcjonuje.

Ty czytasz co Tomek cytuje? W ostatnim jego poście jest to dokładnie
opisane.

-- 
pozdrawiam
Roman Tyczka

W dniu 11.04.2018 o 22:19, Roman Tyczka pisze:
> 
> Ty czytasz co Tomek cytuje? W ostatnim jego poście jest to dokładnie
> opisane.

Ja tego nie widzę. Jedyne zdanie jakie tami widzę to:

This example uses a typographic feature called ligatures, which allows 
rendering of an icon glyph simply by using its textual name. The 
replacement is done automatically by the web browser and provides more 
readable code than the equivalent numeric character reference.

Nic z tego nie wynika poza tym, że jest to proces automatyczny 
realizowany przez przeglądarkę. Może ślepy jestem, może nie znam 
angielskiego na tyle więc wskaż mi fragment, w którym jest jasno 
napisane skąd przeglądarka wie, ze kod "cos_tam" odpowiada np. 

-- 
Pozdrawiam,
Marek

On Thu, 12 Apr 2018 09:01:19 +0200, Marek S wrote:

>> Ty czytasz co Tomek cytuje? W ostatnim jego poście jest to dokładnie
>> opisane.
> 
> Ja tego nie widzę. Jedyne zdanie jakie tami widzę to:
> 
> This example uses a typographic feature called ligatures, which allows 
> rendering of an icon glyph simply by using its textual name. The 
> replacement is done automatically by the web browser and provides more 
> readable code than the equivalent numeric character reference.

> Nic z tego nie wynika poza tym, że jest to proces automatyczny 
> realizowany przez przeglądarkę. Może ślepy jestem, może nie znam 
> angielskiego na tyle więc wskaż mi fragment, w którym jest jasno 
> napisane skąd przeglądarka wie, ze kod "cos_tam" odpowiada np. 

Jak to skąd wie? Bo wspiera ten "patent" i ma to zakodowane w sobie? Na tym
polega bycie zgoodnym ze standardem X.

"This feature is supported in most modern browsers on both desktop and 
mobile devices.
Browser 	Version supporting ligatures
Google Chrome 		11
Mozilla Firefox 	3.5
Apple Safari 		5
Microsoft IE 		10
Opera 			15
Apple MobileSafari 	iOS 4.2
Android Browser 	3.0"

czyli od tych wersji przeglądarka kuma co to znaczy "rendering of an icon
glyph simply by using its textual name". Czego więcej potrzebujesz?


-- 
pozdrawiam
Roman Tyczka

W dniu 2018-04-12 o 17:14, Roman Tyczka pisze:

> Czego więcej potrzebujesz?

Tylko odpowiedzi na moje pytanie postawione w wątku otwierającym. Nie 
pytam się co trzeba zrobić wy wyświetlić literały, bo to wiem. Nie pytam 
jakie przeglądarki to wspierają, bo to też wiem.

Pytam się w kółko skąd wiadomo, że dany ciąg znaków ma się zmienić w tą 
a nie inną ikonę? Czy gdzieś w definicji fontu glyphowego są zaszyte dwa 
niezależne mapowania znaków:
1) jako kodu HEX/ASCII/cokolwiek na znak graficzny (czyli tradycyjne 
mapowanie np litera A wygląda jak A)
2) mapowanie ciągu znaków na pojedynczy znak (ikonkę) - np. ciąg znaków 
"android" wygląda jak robocik

Czy piszę niejasno o co mi chodzi? Otrzymuję odpowiedzi nie na temat a 
do tego zarzucasz mi, że nie czytam ich. Potem zresztą sam nie potrafisz 
przytoczyć fragmentów wyjaśniających jak to działa.

-- 
Pozdrawiam,
Marek

Dnia Tue, 10 Apr 2018 09:24:02 +0200, Marek S napisał(a):

> <tag class="material-icons">nazwa</tag>
> 
> konwertowany jest na androida czy inną ikonkę. Rozumiałbym gdyby pod 
> literą A kryła się ikona androida a pod B ikona Apple w danym foncie. 

Czemu uparcie patrzysz na to jak na pojedyncze litery?

Ligatury służą do specyficznego wyświetlenia *kilku* liter. Przeglądarka
dostaje w tekście np. "ffi", w foncie ma zdefiniowaną ligaturę dla tego
zbitku liter, więc podmienia całość. Fonty z symbolami po prostu
wykorzystują (czy też wręcz nieco nadużywają) tę właściwość.

-- 
Borys Pogoreło
borys(#)leszno,edu,pl

W dniu 2018-04-12 o 22:34, Borys Pogoreło pisze:

>> konwertowany jest na androida czy inną ikonkę. Rozumiałbym gdyby pod
>> literą A kryła się ikona androida a pod B ikona Apple w danym foncie.
> 
> Czemu uparcie patrzysz na to jak na pojedyncze litery?

Nie patrzę uparcie lecz uparcie pytam o wyjaśnienie jak to technicznie 
jest realizowane. Odnoszę wrażenie, że popełniam jakiś nietakt chcąc to 
wiedzieć.

> Ligatury służą do specyficznego wyświetlenia *kilku* liter. Przeglądarka
> dostaje w tekście np. "ffi", w foncie ma zdefiniowaną ligaturę dla tego
> zbitku liter, więc podmienia całość. Fonty z symbolami po prostu
> wykorzystują (czy też wręcz nieco nadużywają) tę właściwość.

Czyli wynika z tego, że jest tak jak zacząłem (w innej gałązce dyskusji) 
to podejrzewać a dopiero teraz wreszcie ktoś odpowiada na moje pytanie :-)

Potwierdź zatem czy dobrze myślę. Skoro ikonę np. wspomnianego androida 
mogę wyświetlić na dwa sposoby:

1. podając kod znaku
2. podając ciąg znaków

... to implikuje, że font musi być odpowiednio przygotowany i posiadać 
dwa niezależne mapowania: pierwsze tradycyjne znak->reprezentacja 
graficzna i drugie nowe (przynajmniej dla WWW) ciąg znaków -> 
reprezentacja graficzna. Czy tak to się odbywa?

-- 
Pozdrawiam,
Marek

W dniu 12.04.2018 o 22:25, Marek S pisze:
> W dniu 2018-04-12 o 17:14, Roman Tyczka pisze:
  Czy gdzieś w definicji fontu glyphowego są zaszyte dwa
> niezależne mapowania znaków:
> 1) jako kodu HEX/ASCII/cokolwiek na znak graficzny (czyli tradycyjne 
> mapowanie np litera A wygląda jak A)
> 2) mapowanie ciągu znaków na pojedynczy znak (ikonkę) - np. ciąg znaków 
> "android" wygląda jak robocik
> 

Otwórz sobie edytorem dowolny plik TTF i poszukaj sobie ciągów np 
"Aogonek", "oacute" (to akurat polskie) itp a przekonasz się, że NAZWY 
literek są zaszyte w środku.

W dniu 13.04.2018 o 10:29, Tomek pisze:

> Otwórz sobie edytorem dowolny plik TTF i poszukaj sobie ciągów np 
> "Aogonek", "oacute" (to akurat polskie) itp a przekonasz się, że NAZWY 
> literek są zaszyte w środku.

I trzeba było tak właśnie odpowiedzieć na moje pytanie zamiast 
przytaczać obszerną dokumentację nie na temat.

-- 
Pozdrawiam,
Marek

Dnia Thu, 12 Apr 2018 22:52:09 +0200, Marek S napisał(a):

> ... to implikuje, że font musi być odpowiednio przygotowany i posiadać 
> dwa niezależne mapowania: pierwsze tradycyjne znak->reprezentacja 
> graficzna i drugie nowe (przynajmniej dla WWW) ciąg znaków -> 
> reprezentacja graficzna. Czy tak to się odbywa?

Nawet Ci wcześniej wkleiłem listę mapowań:
https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

-- 
Borys Pogoreło
borys(#)leszno,edu,pl

W dniu 2018-04-13 o 11:48, Borys Pogoreło pisze:

> Nawet Ci wcześniej wkleiłem listę mapowań:
> https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

I co z tego miało wynikać? Na stronie Material Icons również jest taka 
lista https://material.io/icons/ Napisałem w wątku otwierającym, że nią 
się posługuję więc zdublowana informacja nie była mi potrzebna. I 
właśnie ta lista była przyczyną, dla której zadałem pytanie bo nie 
rozumiałem związku przyczynowo-skutkowego.

W jaki sposób mam dowiedzieć się z listy kodów jak to technicznie 
działa? Cisnąć, nalegając udało mi się uzyskać od Was tą informację więc 
temat się zamyka. Teraz wiem już, że to funkcjonalność zawarta w foncie 
i - umiejącej ją wykorzystać - przeglądarce. Nie rozumiem tylko dlaczego 
tak trudno było odpowiedzieć?

-- 
Pozdrawiam,
Marek