HT_lz_cont_head
================
Unicode-Zeichen im CSS und anderswo ...
Ad
Inhalt
das Problem
vor einiger Zeit hatte ich im Support https://www.hpm-support.de/t546897f11769...vorheben-1.html einen Tipp gegeben, wie man Links per CSS markieren und unterscheiden kann, z.B:
.xquoteable a[href*='search.php']::before { content:'🔎 '} /* Lupe */ um Suchlinks gleich zu erkennen. Speichert man dies ab, erhält man aber:
.xquoteable a[href*='search.php']::before { content:'🔎 '} /* Lupe */ und dieser Textstring 🔎 wird den Links angehängt
die Lösung vorweg, zur Zeit muss das in die Administration eingetragen werden:
.xquoteable a[href*='search.php']::before { content:'\01F50E '} /* Lupe */
damit man das erhoffte Aussehen 🔎 search.php?q=CSS erhält.
jetzt habe ich noch festgestellt, dass z.Z. auch keine Sonderzeichen wie "ä,ö,ü,ß" vorkommen dürfen, weil sonst der CSS-Parser ein Speichern nicht zulässt.
Auch diese Zeichen lassen sich jetzt mit der hier vorgestellten Methode darstellen
Problem im Support https://www.hpm-support.de/t546897f11769...html#msg7344488
Grundlagen
Hilfe findet man wie immer bei SELFMTML
wiki.selfhtml.org/wiki/Zeichencodierung/Unicode_in_der_Praxis#CSS
wiki.selfhtml.org/wiki/Zeichencodierung/Unicode
um Angaben in hex-Schreibweise erhalten zu können, habe ich auf dieser Seite page-utf_convert.html ein Tool gebastelt:
das script
die wichtigsten Elemente hier
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<form id="utf">
<label>Text/Quelltext</label>
<textarea placeholder="Eingabefeld ... z.B.: abc äöü 😀 💚">
</textarea>
<div style="text-align:center">
<button type="reset">clear</button>
<button id="go_test">Testbeispiel</button>
<button id="go_encode">encode starten</button>
</div><br>
<fieldset><legend>Ergebnisse</legend>
<label>CSS</label>
<textarea placeholder="Ausgabe wird erzeugt ... "></textarea>
<label>javascript</label>
<textarea placeholder="Ausgabe wird erzeugt ... "></textarea>
<label>encodeURI() javascript</label>
<textarea placeholder="Ausgabe wird erzeugt ... "></textarea>
<label>HTML</label>
<textarea placeholder="Ausgabe wird erzeugt ... "></textarea>
</fieldset></form>
❗❗ Korrektur: für js muss der hex-Code 4-stellig sein, z.B. α β ❗❗ 5.7.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<script>// Version 5.7.
const frm=document.getElementById("utf");
const ta_lst=frm.getElementsByTagName("textarea");
var encode=function(utf8_string){
const eingabe=0,css=1,js=2,enc=3,html=4;
var c,hi,low;
for (let i=css;i<=html;i++) { ta_lst[i].value=""; }
var uhex=function(number) {return number.toString(16).toUpperCase(); }
for (var codepoint of utf8_string) {
let c=codepoint.charCodeAt(0);
if (c <128 ) {
for (let i=css;i<=html;i++) ta_lst[i].value += codepoint;
} else if (0xD800 <= c && c <= 0xDBFF) {
hi = c;
low = codepoint.charCodeAt(1);
// c=((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
c= codepoint.codePointAt(0);
ta_lst[css].value += '\\'+uhex(c)+" " ;
ta_lst[js].value += '\\u'+uhex(hi)+'\\u'+uhex(low) ;
ta_lst[html].value += '&#x'+uhex(c)+";" ;
} else {
ta_lst[css].value += '\\'+uhex(c)+" ";
// ta_lst[js].value += c<256 ? ('\\u00'+uhex(c)) : ('\\u'+uhex(c)); // Fehler 5.7.
ta_lst[js].value += c< 0x0100 ? ('\\u00'+uhex(c))
: ( c< 0x1000 ? ('\\u0'+uhex(c)) : ('\\u'+ uhex(c)) ) ;
ta_lst[html].value += '&#x'+uhex(c)+";";
}
} // codepoint
ta_lst[enc].value=encodeURI(utf8_string).replaceAll("%20"," ").replaceAll("%0A","\n");
} // encode()
if (frm ) {
frm.onsubmit=function(){
encode(ta_lst[0].value);
return false;
}
}
document.getElementById("go_test").onclick=function() {
ta_lst[0].value=decodeURI(
"Test: %C3%A4 %C3%B6 %C3%BC %C3%9F %CE%B1 %CE%B2 %CE%B3 - Smileys Emoji: %F0%9F%98%8E %F0%9F%A5%B4 "
+"\na.lupe::before, .xquoteable a%5Bhref*='search.php'%5D::before %7B content:'%F0%9F%94%8E '%7D /* Lupe */ "
+"\na.extern::after, .xquoteable a%5Btarget*='blank'%5D::after %7B content:' %F0%9F%93%8C '%7D /* Sticker */ "
+"\nalert(%22%E2%9D%A4 sei gegr%C3%BC%C3%9Ft %F0%9F%98%80 %22);");
return false;
}
</script>
❗ der Fehler für "α β ..." ist korrigiert
... hoffe, ich konnte etwas Klarheit in diese Sache bringen ....
19.01.2022 Test-v6 online
l2
habe mal nach dem Unicode Link-Symbol gesucht: https://www.compart.com/de/unicode/U+1F517
"🔗“ U+1F517 🔗 U+1F517 leider lässt es sich nicht einfärben oder fett darstellen
vielleicht vergrößern 🔗 U+1F517 oder verkleinern 🔗 U+1F517
🔗 U+1F517 auf hellem Hintergrund gefällt's mir schon besser
... Beitrag noch nicht fertig, zumindest gibt es einen Link zur neueren Version page-utf_convert2.html, die ich noch um einige anschauliche Beispiele erweitern möchte ....
Das Thema ist geschlossen
Sie haben keine Rechte zu antworten
Bereits Mitglied?
Jetzt anmelden!
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!
Jetzt registrieren!
Beiträge dieses Themas (vers 8.5.) V4 V6 [ ✖ ]
Statistik der gezeigten Beiträge
sessionStorage-Daten verwalten
zusätzlich Beitragstexte speichern.
mehr ...(Kontrolle)
hier können die sessionStorage-Daten einzelner Threads gelöscht werden
und festgelegt werden, ob die Beitragstexte gecacht/gebuffert werden sollen.
Den Standardwert legt der Admin fest, hier wird nicht standardmäßig gebuffert. Man muß also jeden einzelnen Wert festlegen.
mit schließen des BrowserTabs werden diese sessionStorage-Daten komplett gelöscht. Sie enthalten die eingelesenen "Verzeichnisse" und die Textbeiträge. wikipedia.org/wiki/Web_Storage
- Threadkbsdelbuff Thema
die Kontrolldaten werden permanent im Browser gespeichert (localStorage)
