Aby odróżnić automatyczne zawijanie od zapisanego znaku nowej linii, wyłącz zawijanie wierszy w edytorze tekstu i sprawdź oryginalny tekst. Ten przewodnik dla Maca wyjaśnia, jak to sprawdzić, jak układ strony w przeglądarce może wprowadzać w błąd i co faktycznie można ustalić na podstawie skopiowanego kodu.

Czym różni się automatyczne zawijanie od znaku nowej linii?

Automatyczne zawijanie występuje, gdy przeglądarka lub edytor przenosi tekst do kolejnego wiersza na ekranie, aby dopasować go do dostępnej szerokości. Zapisany znak nowej linii jest częścią samego tekstu. W3C rozróżnia podziały wiersza wynikające z zawijania od wymuszonych podziałów, które mogą wynikać z zachowanych znaków nowej linii lub granic bloków. Przetwarzanie białych znaków przez CSS zmienia sposób prezentacji, ale nie zmienia danych dokumentu. CSS Text Module Level 3

Gdy kod jest wyświetlany w kilku wierszach, możliwe są trzy sytuacje: jeden logiczny wiersz został zawinięty; tekst zawiera osobne wiersze logiczne; albo struktura strony wymusza podział wizualny. Na podstawie samego zrzutu ekranu nie da się wiarygodnie ustalić, która z tych sytuacji ma miejsce.

W tym tekście „ręcznie wstawiony znak nowej linii” oznacza znak nowej linii obecny w badanym źródle. Jego obecność nie wskazuje, kto go dodał: mógł powstać w wyniku formatowania, eksportu lub innego przekształcenia. Praktycznym celem jest ustalenie, czy granica należy do tekstu, czy tylko do jego bieżącej prezentacji.

Jak sprawdzić kod w edytorze na Macu?

W tym celu użyj Visual Studio Code. Jeśli to możliwe, zacznij od oryginalnego pliku z kodem. Jeśli masz tylko publiczną stronę, skopiuj odpowiedni kod do osobnego dokumentu w edytorze, ale dopóki nie porównasz go z oryginałem, traktuj ten dokument jako dowód dotyczący skopiowanego tekstu.

Wyłącz zawijanie bez ponownego formatowania tekstu

  1. Otwórz plik lub skopiowany fragment w VS Code.
  2. Gdy edytor jest aktywny, naciśnij Option+Z, aby uruchomić Toggle Word Wrap.
  3. Sprawdź, czy pozornie dalsza część tekstu łączy się z poprzednim wierszem i ciągnie poziomo.
  4. Jeśli zawijanie było już wyłączone, przełącz je ponownie, aby porównać oba widoki. Najważniejsza jest różnica między nimi.

Microsoft podaje Option+Z jako domyślny skrót w macOS do polecenia Toggle Word Wrap o identyfikatorze editor.action.toggleWordWrap. Jeśli skróty masz ustawione inaczej, znajdź to polecenie w edytorze Keyboard Shortcuts. Dokumentacja domyślnych skrótów klawiszowych

Gdy editor.wordWrap ma wartość on, VS Code zawija tekst przy szerokości obszaru edytora. Wyłączenie zawijania usuwa więc te wizualne kontynuacje. Granica, która pozostaje w niezmienionym tekście, jest granicą wiersza logicznego, a nie automatycznym zawinięciem w tym edytorze. Podstawy edycji

Podczas porównywania widoków skorzystaj z tej tabeli:

Obserwacja Co wskazuje Następne działanie
Kontynuacja łączy się z poprzednim wierszem po wyłączeniu zawijania Było to automatyczne zawinięcie w edytorze Pozostaw tekst bez zmian
Po wyłączeniu zawijania nadal widoczne są dwa osobne wiersze Badany tekst zawiera granicę wiersza Jeśli sprawdzasz kopię, porównaj ją z oryginałem
Granica ze strony znika w skopiowanym tekście Strona i skopiowana reprezentacja różnią się Sprawdź tekst i strukturę strony
Skopiowana granica pozostaje, ale oryginał jest niedostępny Skopiowany tekst zawiera tę granicę Nie przesądzaj o jej pochodzeniu

Wypróbuj przykład

Wklej poniższy jednoliniowy fragment do osobnego dokumentu. To przykładowy tekst w języku JavaScript; nie trzeba go uruchamiać.

const labels = ["Amber", "Birch", "Cedar", "Dune", "Elm", "Fern", "Grove", "Harbor"];

Zwęź edytor na tyle, by tekst się zawijał. Gdy zawijanie jest włączone, instrukcja może zajmować kilka wierszy na ekranie. Wyłącz zawijanie: instrukcja powinna znów mieścić się w jednym wierszu logicznym, choć może być konieczne poziome przewijanie, aby odczytać jej koniec.

Teraz porównaj z tą celowo wielowierszową wersją:

const labels = [
  "Amber", "Birch", "Cedar", "Dune",
  "Elm", "Fern", "Grove", "Harbor"
];

Te cztery wiersze logiczne pozostają rozdzielone po wyłączeniu zawijania. Przy wąskim edytorze każdy z nich również może się zawinąć. Na tym polega istotna różnica: zapisane znaki nowej linii i automatyczne zawinięcia mogą występować jednocześnie w tym samym fragmencie kodu.

Podczas porównywania nie formatuj dokumentu. Celem jest zmiana widoku przy zachowaniu badanego tekstu bez zmian. W przeciwnym razie zmieniona granica wiersza może wynikać z edycji, a nie z ustawienia wyświetlania.

Dlaczego zmiana rozmiaru okna przeglądarki to tylko wstępny test?

Wyobraź sobie abstrakcyjną stronę publiczną z kolumną nawigacyjną i panelem kodu. Poszerzenie okna przeglądarki może dać panelowi więcej miejsca. Jeśli granica przesunie się do innego słowa, przemawia to za wyjaśnieniem związanym z zawijaniem. Jeśli jednak panel ma stałą szerokość, zmiana rozmiaru zewnętrznego okna może niczego w nim nie zmienić.

Granica, która pozostaje w tym samym miejscu, nie daje więc rozstrzygającej odpowiedzi. Przeglądarka może zachowywać znak nowej linii, napotykać podział strukturalny albo zawijać tekst w panelu, którego użyteczna szerokość się nie zmieniła. Potwierdź wynik na podstawie tekstowej reprezentacji, zamiast traktować zmianę rozmiaru okna jako dowód.

CSS określa również, czy zapisane znaki nowej linii są widoczne. MDN opisuje następujące typowe wartości: właściwość CSS white-space

Wartość CSS Sposób traktowania znaków nowej linii w źródle Automatyczne zawijanie
normal Zwijane razem z innymi białymi znakami Dozwolone
pre Zachowywane Wyłączone
pre-wrap Zachowywane Dozwolone
pre-line Zachowywane; spacje i tabulatory są zwijane Dozwolone

W rezultacie pre-wrap może wyświetlać jednocześnie oba rodzaje granic, a normal może ukrywać znaki nowej linii w źródle. Wyłączenie zawijania za pomocą nowrap nie wystarcza do sprawdzenia, czy źródłowe białe znaki są zachowane, ponieważ powoduje też ich zwijanie. W przypadku prostego bloku tekstu, nad którym masz kontrolę, odpowiednim punktem odniesienia jest pre, gdy potrzebujesz zachować białe znaki bez automatycznego zawijania. właściwość CSS white-space

Czy skopiowany tekst ujawnia oryginalne znaki nowej linii?

Skopiowany tekst jest przydatny, ale stanowi osobną reprezentację. MDN opisuje innerText jako tekst renderowany, który w przybliżeniu odpowiada temu, co uzyskałoby się po zaznaczeniu i skopiowaniu elementu. Uwzględnia on wygląd po renderowaniu, w tym jawne podziały, takie jak elementy br. Znak nowej linii w wklejonym fragmencie sam w sobie nie dowodzi więc, że oryginalny ciąg kodu go zawierał. HTMLElement: właściwość innerText

W przypadku prostego, statycznego kontenera kodu textContent odpowiada na inne pytanie: zwraca tekst węzła i jego elementów potomnych, łącząc ich tekst bez uwzględniania wyglądu po renderowaniu. Przydaje się to do sprawdzania tekstu w DOM, o ile kontener rzeczywiście zawiera interesujący Cię kod. Node: właściwość textContent

Tych właściwości nie można używać zamiennie do odzyskiwania tekstu. Podział strukturalny nie musi być znakiem nowej linii w textContent; z kolei w źródle mogą istnieć białe znaki, które nie są widoczne jako podział po renderowaniu. Gdy tekst strony i jej układ się różnią, opisz wynik precyzyjnie: „tekst DOM zawiera znak nowej linii”, „układ wymusza podział” albo „skopiowana wersja zawiera znak nowej linii”. Nie wyciągaj wniosków wykraczających poza to, co potwierdza sprawdzona reprezentacja.

Co się zmienia w edytorze kodu działającym w przeglądarce?

Edytor przeglądarkowy może przechowywać dokument niezależnie od wyświetlanych elementów. Na przykład oficjalna dokumentacja źródłowa CodeMirror opisuje wiersze dokumentu za pomocą modelu Text: lines zlicza wiersze logiczne, a line(n) pobiera wiersz o podanym numerze. Pozycja to wiersza znajduje się przed następującym po nim znakiem nowej linii albo na końcu dokumentu. Dokumentacja API tekstu dokumentu CodeMirror

CodeMirror dokumentuje również, że jego widok umieszcza w DOM tylko widoczny kod i otaczający go margines. Właściwość lineWrapping opisuje zawijanie w widoku. Z tego powodu samo zliczenie wyświetlanych wierszy lub wyodrębnienie widocznego DOM edytora nie wystarcza, by ustalić, jakie wiersze zawiera cały dokument. Dokumentacja API widoku edytora CodeMirror

Przy zwykłym sprawdzaniu na komputerze użyj udokumentowanego polecenia pobierania pliku, eksportu lub kopiowania w aplikacji hostującej, jeśli jest dostępne, a następnie sprawdź wynik przy wyłączonym zawijaniu. Jeśli obsługujesz integrację z CodeMirror, użyj jego modelu dokumentu, aby ustalić wiersze logiczne. API biblioteki nie dowodzi, że każda aplikacja udostępnia równoważne polecenie użytkownikowi.

Czy formularz może dodać znaki nowej linii, których nigdy nie wpisano?

Tak. Standard HTML WHATWG rozróżnia bieżącą wartość API pola textarea od reprezentacji używanej przy wysyłaniu formularza. Przy wrap="soft" tekst może być zawijany wizualnie bez dodatkowego zawijania w reprezentacji przesyłanej w formularzu. Przy wrap="hard" reprezentacja przesyłana w formularzu może otrzymać znaki nowej linii; ten tryb wymaga określenia cols. Wartość API normalizuje końce wierszy do LF. Standard HTML: element textarea

Ma to znaczenie przy porównywaniu tekstu przed i po użyciu formularza. Granica pojawiająca się dopiero w przesłanym lub wyeksportowanym wyniku może pochodzić z tego etapu przetwarzania. Sprawdź reprezentację istotną dla Twojego zadania: bieżący tekst edytora, gdy ustalasz, które granice zostały wpisane, albo wynikowy plik, gdy chcesz określić, co faktycznie wyeksportowano.

Jak zachować podziały wynikające z przeglądarki i kształtowania tekstu?

Pozostaw wizualne zawijanie przeglądarce lub edytorowi. W3C określa, że overflow-wrap: anywhere zachowuje razem klastry grafemów i kształtowanie tekstu przy wprowadzonych zawinięciach. Ręczne przebudowywanie wierszy przez wstawianie znaków nowej linii po stałej liczbie znaków nie odtwarza tych reguł układu. CSS Text Module Level 3

Jeśli chcesz ponownie użyć fragmentu kodu, najpierw zdobądź najlepsze dostępne źródło, porównaj widoki z włączonym i wyłączonym zawijaniem, a zapisane granice wierszy pozostaw bez zmian, chyba że chcesz edytować tekst. Jeśli dostępna jest tylko strona po renderowaniu, zapisz to, co udało się ustalić na temat tej reprezentacji, a niepewne granice pozostaw nierozstrzygnięte. Dzięki temu możesz przeprowadzić powtarzalne sprawdzenie bez przypadkowej zmiany tekstu podczas modyfikowania jego wyglądu.

Źródła