Upgrade to Pro — share decks privately, control downloads, hide ads and more …

O básico que ainda deveríamos entender sobre Unicode e encondings

O básico que ainda deveríamos entender sobre Unicode e encondings

Representar caracteres em computadores evoluiu muito nas últimas 3 décadas. Como funcionam exatamente: Unicode, conjunto de caracteres, ��� (diamante preto com interrogação), plain text, ASCII, UTF-8, BOM? Essas e outras coisas básicas que todo(a) desenvolvedor(a) ainda deveria saber em 2019.

Thiago Colares

March 24, 2019
Tweet

More Decks by Thiago Colares

Other Decks in Programming

Transcript

  1. Thiago Colares
    Agilize Contabilidade Online
    O b�sico que ainda
    dever�amos entender
    sobre Unicode e
    encondings
    Semana de Computação da UFBA, 24/03/2019

    View full-size slide

  2. OLÁ!
    THIAGO COLARES
    CTO e Co-fundador @ Agilize
    Google Launchpad Accelerator
    Colaborador de projetos FLOSS
    thicolares.com

    View full-size slide

  3. POR QUE MEU APLICATIVO
    FICOU ASSIM?

    View full-size slide

  4. COMEÇANDO DO
    COMEÇO

    View full-size slide

  5. COMPUTADORES
    LIDAM COM NÚMEROS
    01100001
    aENCODE
    DECODE
    Character encodings
    Definem símbolo ⇆ número.

    View full-size slide

  6. ASCII American Standard Code for Information Interchange
    ○ 1960
    ○ É um character encoding
    ○ Só letras em Inglês antigo importavam
    ○ Um caracter em 7 bits
    ○ Usa a faixa entre 32 e 127
    ○ Abaixo de 32: não imprimíveis (controle)

    View full-size slide

  7. 1111111
    2
    = 7F
    16
    = 127
    10

    View full-size slide

  8. “ “ = 20
    16
    = 32
    10
    = 00100000
    2
    “A” = 41
    16
    = 65
    10
    = 01000001
    2

    View full-size slide

  9. $ xxd -b a.txt
    00000000: 01100001 00001010 a.
    00000000 → posição inicial
    01100001 → hex “61”
    00001010 → hex “0A”

    View full-size slide

  10. TUDO ESTAVA ÓTIMO!
    ○ Computadores da época: 8-bit bytes
    ○ Se você só falasse Inglês

    View full-size slide

  11. TEM 1 BIT LIVRE!
    MAN, VAMOS USAR
    OS CÓDIGOS 128-255
    PARA NOSSAS
    NECESSIDADES!
    VÁRIOS PENSARAM
    A MESMA COISA.

    View full-size slide

  12. IBM-PC OEM character set
    ○ Acentos para idiomas europeus
    ○ Linhas para interface gráfica

    View full-size slide

  13. IBM-PC GANHOU O MUNDO.
    VARIAÇÕES DE OEM SURGIRAM!
    ○ Para um PC, 135 seria ç
    ○ Para outro PC, 135 seria θ (Grego)
    Enviar um façade para Grécia viraria:
    faθade

    View full-size slide

  14. Padrão ANSI
    ○ Organiza decisões sobre 128-255
    ○ Um decisão para cada região
    ○ Code pages

    View full-size slide

  15. E MULTI-LÍNGUAS EM UM PC SÓ?
    ○ MS-DOS: vendido com várias code pages
    ○ E dois idiomas ao mesmo tempo?
    ○ Esperanto e Galego? Ok!
    ○ Grego e Ídiche? Não dá!
    ○ Alguns idiomas usam códigos muito diferentes
    ○ Vou deixar a Ásia para sua imaginação

    View full-size slide

  16. É UM CÓDIGO 16-BITS
    ○ É um character encoding
    ○ Mapeia letras com até 16 bits
    ○ 65.536 caracteres possíveis
    ○ Não é verdade!
    ○ Unicode pensa diferente

    View full-size slide

  17. UNICODE
    ○ É um tabelão com códigos universais
    ○ Mapeados por vários character encodings
    ○ Todos os sistemas de escritas do mundo
    ○ Inclusive da ficção, como Klingon

    View full-size slide

  18. EMOJIS TAMBÉM SÃO UNICODE!
    https://unicode.org/emoji/charts-12.0/full-emoji-list.html (14/03/2019)

    View full-size slide

  19. ANTES
    A → 01000001
    Mapeamento para um byte de 8 bits para
    memória ou disco.

    View full-size slide

  20. UNICODE
    A → U+0041 → ??
    ○ Letras e símbolos → code point
    ○ U+ significa “Unicode”
    ○ Números na base hexadecimal
    ○ Representação na memória?
    Depende do character encoding!

    View full-size slide

  21. CHAR ENCODING INICIAL:
    CADA CODE POINT EM 2 BYTES
    Então, Ninja:
    U+004E U+0069 U+006E U+006A U+0061
    Viraria:
    00 4E 00 69 00 6E 00 6A 00 61

    View full-size slide

  22. DIFERENTES ESTRATÉGIAS DE
    ORDENAÇÃO DE BITS
    Esse é o modo high-endian:
    00 4E 00 69 00 6E 00 6A 00 61
    Se eu precisar do modo low-endian?
    4E 00 69 00 6E 00 6A 00 61 00

    View full-size slide

  23. BOM (Unicode Byte Order Mark)
    INDICA A ORDENAÇÃO DOS BITS
    ○ Usar FE FF no começo da String Unicode
    ○ FF FE no começo? Inverta todo o resto
    ○ Nem toda String Unicode tem isso!

    View full-size slide

  24. ○ “E essa quantidade toda de zeros?”
    ● No Inglês, quase não se usa letra acima de U+00FF
    ○ “Ah, já tem muita coisa em ANSI, DBCS…”
    ● Ninguém queria converter
    ○ Unicode foi ignorado por muito tempo
    QUE TAL UM ENCODING PADRÃO?

    View full-size slide

  25. UTF-8
    Unicode Transformation Format de 8 bits
    Um character encoding para
    Unicode code points usando bytes de 8-bits.

    View full-size slide

  26. UTF-8
    ○ Code points de 0-127 → em um único byte
    ○ Code points a partir de 128 → até 6 bytes
    ○ Uso de espaço sob demanda
    ○ Grego e Klingon ao mesmo tempo

    View full-size slide

  27. A
    ↓ Unicode
    U+0041 (code point)
    ↓ UTF-8 (mapping)
    41 (code unity)

    01000001
    ENCODE

    View full-size slide

  28. COMO O TEXTO SERIA
    ARMAZENADO?
    Então, Ninja:
    U+004E U+0069 U+006E U+006A U+0061
    Tornar-se-ia:
    00 4E 00 69 00 6E 00 6A 00 61
    4E 69 6E 6A 61

    View full-size slide

  29. COMO O TEXTO SERIA
    ARMAZENADO?
    Espera um pouco...
    4E 69 6E 6A 61

    View full-size slide

  30. UTF-8 PARA OS AMERICANOS
    ○ Compatível com ASCII, ANSI, OEMs!
    ○ Sem zeros extras
    ○ Mesma quantidade de bits
    ○ Começou a adotado

    View full-size slide

  31. Unicode over 60 percent of the web, Google Official Blog
    https://googleblog.blogspot.com/2012/02/unicode-over-60-percent-of-web.html

    View full-size slide

  32. UTF-8 is used by 93.3% of all the websites whose character encoding we know and that rank in the top 1,000,000.
    https://w3techs.com/technologies/cross/character_encoding/ranking

    View full-size slide

  33. ALÉM DO UTF-8!
    ○ UCS-2 (2 bytes)
    ○ UTF-16 (bytes com 16 bits)
    ○ UTF-32 (bytes com 23 bits)
    ○ UTF-7 (igual ao UTF-8, mas primeiro bit = 0)
    ○ UCS-4 (4 bytes)

    View full-size slide

  34. Character
    Code
    point
    Encoding
    form
    Code unit
    sequence
    A U+0041
    UTF-8 41
    UTF-16 0041
    UTF-32 00000041
    ឩ U+17A9
    UTF-8 E1 9E A9
    UTF-16 17A9
    UTF-32 000017A9
    U+1F60A
    UTF-8 F0 9F 98 8A
    UTF-16 D83D DE0A
    UTF-32 0001F60A

    View full-size slide

  35. Character
    Code
    point
    Encoding
    form
    Code unit
    sequence
    A U+0041
    UTF-8 41
    UTF-16 0041
    UTF-32 00000041
    ឩ U+17A9
    UTF-8 E1 9E A9
    UTF-16 17A9
    UTF-32 000017A9
    U+1F60A
    UTF-8 F0 9F 98 8A
    UTF-16 D83D DE0A
    UTF-32 0001F60A

    View full-size slide

  36. Character
    Code
    point
    Encoding
    form
    Code unit
    sequence
    A U+0041
    UTF-8 41
    UTF-16 0041
    UTF-32 00000041
    ឩ U+17A9
    UTF-8 E1 9E A9
    UTF-16 17A9
    UTF-32 000017A9
    U+1F60A
    UTF-8 F0 9F 98 8A
    UTF-16 D83D DE0A
    UTF-32 0001F60A

    View full-size slide

  37. ENCONDINGS POPULARES,
    MAS INCOMPLETOS!
    ○ Windows-1252
    ● padrão Window 9x para idiomas da europa ocidental
    ○ ISO-8859-1 (ou Latin-1)
    ● Outro padrão para idiomas da europa ocidental
    ○ Experimente Russo, Grego ou Ídiche nestes
    ● Você vai receber vários ��� �� ����
    UTF-n resolve todos os code points!

    View full-size slide

  38. EXEMPLO:
    UTF-8 NO PHP

    View full-size slide

  39. UTF-8 EM PHP É RUIM
    ○ PHP 6: tentativa de suporte nativo
    ○ PHP: suporta Unicode, não nativamente
    ○ Concatenar, atribuir (operadores básicos) ✔
    ○ Posição da ocorrência de uma string ❌
    ○ Tamanho de uma string ❌
    ○ Funções multibyte de strings (incompleto)
    ○ Sistemas Operacionais, banco de dados

    View full-size slide

  40. STRPOS X MB_STRPOS
    PHP 7.2.4
    php > print strpos('文字', '字');
    3
    php > print mb_strpos('文字', '字');
    1

    View full-size slide

  41. STRLEN X MB_STRLEN
    PHP 7.2.4
    php > print strlen('文字');
    6
    php > print mb_strlen('文字');
    2

    View full-size slide

  42. Unicode Codepoint Escape
    Syntax (PHP 7.0)
    PHP 7.2.4
    php > print "\u{1f60a}";

    php > print "\u{17a9}";

    Unicode codepoint escape syntax

    View full-size slide

  43. COMO SABEMOS
    O CHARACTER
    ENCODING DE
    UM TEXTO?
    ARQUIVO
    S.O.
    ADIVINHAÇÃO

    View full-size slide

  44. HTML 5




    title
    ...

    View full-size slide

  45. OUTROS ARQUIVOS
    ESTRUTURADOS (EX.: .docx)


    ContentType="application/vnd.openxml..."/>
    ...

    View full-size slide

  46. SE VOCÊ NÃO INFORMAR,
    VÃO TENTAR ADIVINHAR
    $ cat a.txt
    a
    $ file -i a.txt
    a.txt: text/plain; charset=us-ascii

    View full-size slide

  47. SE VOCÊ NÃO INFORMAR,
    VÃO TENTAR ADIVINHAR
    $ cat a.txt
    ã
    $ file -i a.txt
    a.txt: text/plain; charset=utf-8

    View full-size slide

  48. NAVEGADORES
    MODERNOS
    O Google Chrome removeu
    o “menu de Encoding” na versão 55

    View full-size slide

  49. ARQUIVO SALVO EM UTF-8

    ...
    Conteúdo em português!
    Conteúdo em português!
    > document.characterSet
    < "UTF-8"
    index.html
    Console (JS)
    Viewport

    View full-size slide

  50. ARQUIVO SALVO EM UTF-8

    ...
    Conteúdo em português!
    Conteúdo em português!
    > document.characterSet
    < "UTF-8"
    index.html
    Console (JS)
    Viewport

    View full-size slide

  51. ARQUIVO SALVO EM UTF-8

    ...
    Sem usar acentos
    Sem usar acentos
    > document.characterSet
    < "windows-1252"
    index.html
    Console (JS)
    Viewport

    View full-size slide

  52. ARQUIVO SALVO EM ISO-8859-1

    ...
    Conteúdo em português!
    Conte�do em portugu�s!
    > document.characterSet
    < "UTF-8"
    index.html
    Console (JS)
    Viewport

    View full-size slide

  53. ARQUIVO SALVO EM ISO-8859-1

    ...
    Conteúdo em português!
    Conteúdo em português!
    > document.characterSet
    < "windows-1252" // Diferente de ISO-8859-1
    index.html
    Console (JS)
    Viewport

    View full-size slide

  54. SEM DESCULPAS!
    ○ Controle o character encoding do editor
    ○ Informe o character encoding no arquivo
    ○ Use UTF-8
    ● Tem mais de 20 anos de amadurecimento
    ● Padrão em linguagens e sistemas modernos
    ● 94% dos top 1MM web sites usam (2019)
    ○ Domine as ferramentas que você usa!
    Foto de Glenn Carstens-Peters em Unsplash

    View full-size slide


  55. “SÓ SENTIMOS FALTA
    DAQUILO QUE
    CONHECEMOS”
    ― Luciano Ramalho, em “Python Fluente”
    Foto de Andrew Neel em Unsplash

    View full-size slide

  56. OBRIGADO!
    Any questions?
    Thiago Colares
    Onde me encontrar?
    thicolares.com

    View full-size slide

  57. REFERÊNCIA
    ○ The Unicode Consortium
    ○ Endianness
    ○ Character Sets And Code Pages At The Push Of A Button
    ○ Document.characterSet
    ○ Entendendo Unicode e os Character Encodings
    ○ What Every Programmer Absolutely, Positively Needs To Know About
    Encodings And Character Sets To Work With Text
    ○ PHP não possui suporte nativo ao Unicode
    ○ The Absolute Minimum Every Software Developer Absolutely, Positively
    Must Know About Unicode and Character Sets (No Excuses!)
    ○ The Text Content-Type
    ○ Experimentações e vivência :)

    View full-size slide