Почему мой текст не отображается правильно в браузере?

Question

У меня в основном это:

const text = `וַיֹּאמֶר אֲבִימֶלֶךְ וּפִיכֹל שַׂר־צְבָאוֹ אֶל־אַבְרָהָם לֵאמֹר אֱלֹהִים עִמְּךָ בְּכֹל אֲשֶׁר־אַתָּה עֹשֶׂה׃  וְעַתָּה הִשָּׁבְעָה לִּי בֵאלֹהִים הֵנָּה אִם־תִּשְׁקֹר לִי וּלְנִינִי וּלְנֶכְדִּי כַּחֶסֶד אֲשֶׁר־עָשִׂיתִי עִמְּךָ תַּעֲשֶׂה עִמָּדִי וְעִם־הָאָרֶץ אֲשֶׁר־גַּרְתָּה בָּהּ׃  וַיֹּאמֶר אַבְרָהָם אָנֹכִי אִשָּׁבֵעַ׃  וְהוֹכִחַ אַבְרָהָם אֶת־אֲבִימֶלֶךְ עַל־אֹדוֹת בְּאֵר הַמַּיִם אֲשֶׁר גָּזְלוּ עַבְדֵי אֲבִימֶלֶךְ׃  וַיֹּאמֶר אֲבִימֶלֶךְ לֹא יָדַעְתִּי מִי עָשָׂה אֶת־הַדָּבָר הַזֶּה וְגַם־אַתָּה לֹא־הִגַּדְתָּ לִּי וְגַם אָנֹכִי לֹא שָׁמַעְתִּי בִּלְתִּי הַיּוֹם׃  וַיִּקַּח אַבְרָהָם צֹאן וּבָקָר וַיִּתֵּן לַאֲבִימֶלֶךְ וַיִּכְרְתוּ שְׁנֵיהֶם בְּרִית׃  וַיַּצֵּב אַבְרָהָם אֶת־שֶׁבַע כִּבְשֹׂת הַצֹּאן לְבַדְּהֶן׃  וַיֹּאמֶר אֲבִימֶלֶךְ אֶל־אַבְרָהָם מָה הֵנָּה שֶׁבַע כְּבָשֹׂת הָאֵלֶּה אֲשֶׁר הִצַּבְתָּ לְבַדָּנָה׃  וַיֹּאמֶר כִּי אֶת־שֶׁבַע כְּבָשֹׂת תִּקַּח מִיָּדִי בַּעֲבוּר תִּהְיֶה־לִּי לְעֵדָה כִּי חָפַרְתִּי אֶת־הַבְּאֵר הַזֹּאת׃  עַל־כֵּן קָרָא לַמָּקוֹם הַהוּא בְּאֵר שָׁבַע כִּי שָׁם נִשְׁבְּעוּ שְׁנֵיהֶם׃  וַיִּכְרְתוּ בְרִית בִּבְאֵר שָׁבַע וַיָּקָם אֲבִימֶלֶךְ וּפִיכֹל שַׂר־צְבָאוֹ וַיָּשֻׁבוּ אֶל־אֶרֶץ פְּלִשְׁתִּים׃  וַיִּטַּע אֶשֶׁל בִּבְאֵר שָׁבַע וַיִּקְרָא־שָׁם בְּשֵׁם יְהוָה אֵל עוֹלָם׃  וַיָּגָר אַבְרָהָם בְּאֶרֶץ פְּלִשְׁתִּים יָמִים רַבִּים׃     וַיְהִי אַחַר הַדְּבָרִים הָאֵלֶּה וְהָאֱלֹהִים נִסָּה אֶת־אַבְרָהָם וַיֹּאמֶר אֵלָיו אַבְרָהָם וַיֹּאמֶר הִנֵּנִי׃  וַיֹּאמֶר קַח־נָא אֶת־בִּנְךָ אֶת־יְחִידְךָ אֲשֶׁר־אָהַבְתָּ אֶת־יִצְחָק וְלֶךְ־לְךָ אֶל־אֶרֶץ הַמֹּרִיָּה וְהַעֲלֵהוּ שָׁם לְעֹלָה עַל אַחַד הֶהָרִים אֲשֶׁר אֹמַר אֵלֶיךָ׃  וַיַּשְׁכֵּם אַבְרָהָם בַּבֹּקֶר וַיַּחֲבֹשׁ אֶת־חֲמֹרוֹ וַיִּקַּח אֶת־שְׁנֵי נְעָרָיו אִתּוֹ וְאֵת יִצְחָק בְּנוֹ וַיְבַקַּע עֲצֵי עֹלָה וַיָּקָם וַיֵּלֶךְ אֶל־הַמָּקוֹם אֲשֶׁר־אָמַר־לוֹ הָאֱלֹהִים׃  בַּיּוֹם הַשְּׁלִישִׁי וַיִּשָּׂא אַבְרָהָם אֶת־עֵינָיו וַיַּרְא אֶת־הַמָּקוֹם מֵרָחֹק׃  וַיֹּאמֶר אַבְרָהָם אֶל־נְעָרָיו שְׁבוּ־לָכֶם פֹּה עִם־הַחֲמוֹר וַאֲנִי וְהַנַּעַר נֵלְכָה עַד־כֹּה וְנִשְׁתַּחֲוֶה וְנָשׁוּבָה אֲלֵיכֶם׃  וַיִּקַּח אַבְרָהָם אֶת־עֲצֵי הָעֹלָה וַיָּשֶׂם עַל־יִצְחָק בְּנוֹ וַיִּקַּח בְּיָדוֹ אֶת־הָאֵשׁ וְאֶת־הַמַּאֲכֶלֶת וַיֵּלְכוּ שְׁנֵיהֶם יַחְדָּו׃  וַיֹּאמֶר יִצְחָק אֶל־אַבְרָהָם אָבִיו וַיֹּאמֶר אָבִי וַיֹּאמֶר הִנֶּנִּי בְנִי וַיֹּאמֶר הִנֵּה הָאֵשׁ וְהָעֵצִים וְאַיֵּה הַשֶּׂה לְעֹלָה׃  וַיֹּאמֶר אַבְרָהָם אֱלֹהִים יִרְאֶה־לּוֹ הַשֶּׂה לְעֹלָה בְּנִי וַיֵּלְכוּ שְׁנֵיהֶם יַחְדָּו׃  וַיָּבֹאוּ אֶל־הַמָּקוֹם אֲשֶׁר אָמַר־לוֹ הָאֱלֹהִים וַיִּבֶן שָׁם אַבְרָהָם אֶת־הַמִּזְבֵּחַ וַיַּעֲרֹךְ אֶת־הָעֵצִים וַיַּעֲקֹד אֶת־יִצְחָק בְּנוֹ וַיָּשֶׂם אֹתוֹ עַל־הַמִּזְבֵּחַ מִמַּעַל לָעֵצִים׃  וַיִּשְׁלַח אַבְרָהָם אֶת־יָדוֹ וַיִּקַּח אֶת־הַמַּאֲכֶלֶת לִשְׁחֹט אֶת־בְּנוֹ׃  וַיִּקְרָא אֵלָיו מַלְאַךְ יְהוָה מִן־הַשָּׁמַיִם וַיֹּאמֶר אַבְרָהָם אַבְרָהָם וַיֹּאמֶר הִנֵּנִי׃  וַיֹּאמֶר אַל־תִּשְׁלַח יָדְךָ אֶל־הַנַּעַר וְאַל־תַּעַשׂ לוֹ מְאוּמָּה כִּי עַתָּה יָדַעְתִּי כִּי־יְרֵא אֱלֹהִים אַתָּה וְלֹא חָשַׂכְתָּ אֶת־בִּנְךָ אֶת־יְחִידְךָ מִמֶּנִּי׃  וַיִּשָּׂא אַבְרָהָם אֶת־עֵינָיו וַיַּרְא וְהִנֵּה־אַיִל אַחַר נֶאֱחַז בַּסְּבַךְ בְּקַרְנָיו וַיֵּלֶךְ אַבְרָהָם וַיִּקַּח אֶת־הָאַיִל וַיַּעֲלֵהוּ לְעֹלָה תַּחַת בְּנוֹ׃  וַיִּקְרָא אַבְרָהָם שֵׁם־הַמָּקוֹם הַהוּא יְהוָה יִרְאֶה אֲשֶׁר יֵאָמֵר הַיּוֹם בְּהַר יְהוָה יֵרָאֶה׃  וַיִּקְרָא מַלְאַךְ יְהוָה אֶל־אַבְרָהָם שֵׁנִית מִן־הַשָּׁמָיִם׃  וַיֹּאמֶר בִּי נִשְׁבַּעְתִּי נְאֻם־יְהוָה כִּי יַעַן אֲשֶׁר עָשִׂיתָ אֶת־הַדָּבָר הַזֶּה וְלֹא חָשַׂכְתָּ אֶת־בִּנְךָ אֶת־יְחִידֶךָ׃  כִּי־בָרֵךְ אֲבָרֶכְךָ וְהַרְבָּה אַרְבֶּה אֶת־זַרְעֲךָ כְּכוֹכְבֵי הַשָּׁמַיִם וְכַחוֹל אֲשֶׁר עַל־שְׂפַת הַיָּם וְיִרַשׁ זַרְעֲךָ אֵת שַׁעַר אֹיְבָיו׃  וְהִתְבָּרֲכוּ בְזַרְעֲךָ כֹּל גּוֹיֵי הָאָרֶץ עֵקֶב אֲשֶׁר שָׁמַעְתָּ בְּקֹלִי׃  וַיָּשָׁב אַבְרָהָם אֶל־נְעָרָיו וַיָּקֻמוּ וַיֵּלְכוּ יַחְדָּו אֶל־בְּאֵר שָׁבַע וַיֵּשֶׁב אַבְרָהָם בִּבְאֵר שָׁבַע׃  וַיְהִי אַחֲרֵי הַדְּבָרִים הָאֵלֶּה וַיֻּגַּד לְאַבְרָהָם לֵאמֹר הִנֵּה יָלְדָה מִלְכָּה גַם־הִוא בָּנִים לְנָחוֹר אָחִיךָ׃  אֶת־עוּץ בְּכֹרוֹ וְאֶת־בּוּז אָחִיו וְאֶת־קְמוּאֵל אֲבִי אֲרָם׃  וְאֶת־כֶּשֶׂד וְאֶת־חֲזוֹ וְאֶת־פִּלְדָּשׁ וְאֶת־יִדְלָף וְאֵת בְּתוּאֵל׃  וּבְתוּאֵל יָלַד אֶת־רִבְקָה שְׁמֹנָה אֵלֶּה יָלְדָה מִלְכָּה לְנָחוֹר אֲחִי אַבְרָהָם׃  וּפִילַגְשׁוֹ וּשְׁמָהּ רְאוּמָה וַתֵּלֶד גַּם־הִוא אֶת־טֶבַח וְאֶת־גַּחַם וְאֶת־תַּחַשׁ וְאֶת־מַעֲכָה׃     וַיִּהְיוּ חַיֵּי שָׂרָה מֵאָה שָׁנָה וְעֶשְׂרִים שָׁנָה וְשֶׁבַע שָׁנִים שְׁנֵי חַיֵּי שָׂרָה׃  וַתָּמָת שָׂרָה בְּקִרְיַת אַרְבַּע הִוא חֶבְרוֹן בְּאֶרֶץ כְּנָעַן וַיָּבֹא אַבְרָהָם לִסְפֹּד לְשָׂרָה וְלִבְכֹּתָהּ׃  וַיָּקָם אַבְרָהָם מֵעַל פְּנֵי מֵתוֹ וַיְדַבֵּר אֶל־בְּנֵי־חֵת לֵאמֹר׃  גֵּר־וְתוֹשָׁב אָנֹכִי עִמָּכֶם תְּנוּ לִי אֲחֻזַּת־קֶבֶר עִמָּכֶם וְאֶקְבְּרָה מֵתִי מִלְּפָנָי׃  וַיַּעֲנוּ בְנֵי־חֵת אֶת־אַבְרָהָם לֵאמֹר לוֹ׃  שְׁמָעֵנוּ אֲדֹנִי נְשִׂיא אֱלֹהִים אַתָּה בְּתוֹכֵנוּ בְּמִבְחַר קְבָרֵינוּ קְבֹר אֶת־מֵתֶךָ אִישׁ מִמֶּנּוּ אֶת־קִבְרוֹ לֹא־יִכְלֶה מִמְּךָ מִקְּבֹר מֵתֶךָ׃  וַיָּקָם אַבְרָהָם וַיִּשְׁתַּחוּ לְעַם־הָאָרֶץ לִבְנֵי־חֵת׃  וַיְדַבֵּר אִתָּם לֵאמֹר אִם־יֵשׁ אֶת־נַפְשְׁכֶם לִקְבֹּר אֶת־מֵתִי מִלְּפָנַי שְׁמָעוּנִי וּפִגְעוּ־לִי בְּעֶפְרוֹן בֶּן־צֹחַר׃  וְיִתֶּן־לִי אֶת־מְעָרַת הַמַּכְפֵּלָה אֲשֶׁר־לוֹ אֲשֶׁר בִּקְצֵה שָׂדֵהוּ בְּכֶסֶף מָלֵא יִתְּנֶנָּה לִי בְּתוֹכְכֶם לַאֲחֻזַּת־קָבֶר׃  וְעֶפְרוֹן יֹשֵׁב בְּתוֹךְ בְּנֵי־חֵת וַיַּעַן עֶפְרוֹן הַחִתִּי אֶת־אַבְרָהָם בְּאָזְנֵי בְנֵי־חֵת לְכֹל בָּאֵי שַׁעַר־עִירוֹ לֵאמֹר׃  לֹא־אֲדֹנִי שְׁמָעֵנִי הַשָּׂדֶה נָתַתִּי לָךְ וְהַמְּעָרָה אֲשֶׁר־בּוֹ לְךָ נְתַתִּיהָ לְעֵינֵי בְנֵי־עַמִּי נְתַתִּיהָ לָּךְ קְבֹר מֵתֶךָ׃  וַיִּשְׁתַּחוּ אַבְרָהָם לִפְנֵי עַם הָאָרֶץ׃  וַיְדַבֵּר אֶל־עֶפְרוֹן בְּאָזְנֵי עַם־הָאָרֶץ לֵאמֹר אַךְ אִם־אַתָּה לוּ שְׁמָעֵנִי נָתַתִּי כֶּסֶף הַשָּׂדֶה קַח מִמֶּנִּי וְאֶקְבְּרָה אֶת־מֵתִי שָׁמָּה׃  וַיַּעַן עֶפְרוֹן אֶת־אַבְרָהָם לֵאמֹר לוֹ׃  אֲדֹנִי שְׁמָעֵנִי אֶרֶץ אַרְבַּע מֵאֹת שֶׁקֶל־כֶּסֶף בֵּינִי וּבֵינְךָ מַה־הִוא וְאֶת־מֵתְךָ קְבֹר׃  וַיִּשְׁמַע אַבְרָהָם אֶל־עֶפְרוֹן וַיִּשְׁקֹל אַבְרָהָם לְעֶפְרֹן אֶת־הַכֶּסֶף אֲשֶׁר דִּבֶּר בְּאָזְנֵי בְנֵי־חֵת אַרְבַּע מֵאוֹת שֶׁקֶל כֶּסֶף עֹבֵר לַסֹּחֵר׃  וַיָּקָם שְׂדֵה עֶפְרוֹן אֲשֶׁר בַּמַּכְפֵּלָה אֲשֶׁר לִפְנֵי מַמְרֵא הַשָּׂדֶה וְהַמְּעָרָה אֲשֶׁר־בּוֹ וְכָל־הָעֵץ אֲשֶׁר בַּשָּׂדֶה אֲשֶׁר בְּכָל־גְּבֻלוֹ סָבִיב׃  לְאַבְרָהָם לְמִקְנָה לְעֵינֵי בְנֵי־חֵת בְּכֹל בָּאֵי שַׁעַר־עִירוֹ׃  וְאַחֲרֵי־כֵן קָבַר אַבְרָהָם אֶת־שָׂרָה אִשְׁתּוֹ אֶל־מְעָרַת שְׂדֵה הַמַּכְפֵּלָה עַל־פְּנֵי מַמְרֵא הִוא חֶבְרוֹן בְּאֶרֶץ כְּנָעַן׃  וַיָּקָם הַשָּׂדֶה וְהַמְּעָרָה אֲשֶׁר־בּוֹ לְאַבְרָהָם לַאֲחֻזַּת־קָבֶר מֵאֵת בְּנֵי־חֵת׃     וְאַבְרָהָם זָקֵן בָּא בַּיָּמִים וַיהוָה בֵּרַךְ אֶת־אַבְרָהָם בַּכֹּל׃  וַיֹּאמֶר אַבְרָהָם אֶל־עַבְדּוֹ זְקַן בֵּיתוֹ הַמֹּשֵׁל בְּכָל־אֲשֶׁר־לוֹ שִׂים־נָא יָדְךָ תַּחַת יְרֵכִי׃  וְאַשְׁבִּיעֲךָ בַּיהוָה אֱלֹהֵי הַשָּׁמַיִם וֵאלֹהֵי הָאָרֶץ אֲשֶׁר לֹא־תִקַּח אִשָּׁה לִבְנִי מִבְּנוֹת הַכְּנַעֲנִי אֲשֶׁר אָנֹכִי יוֹשֵׁב בְּקִרְבּוֹ׃  כִּי אֶל־אַרְצִי וְאֶל־מוֹלַדְתִּי תֵּלֵךְ וְלָקַחְתָּ אִשָּׁה לִבְנִי לְיִצְחָק׃  וַיֹּאמֶר אֵלָיו הָעֶבֶד אוּלַי לֹא־תֹאבֶה הָאִשָּׁה לָלֶכֶת אַחֲרַי אֶל־הָאָרֶץ הַזֹּאת הֶהָשֵׁב אָשִׁיב אֶת־בִּנְךָ אֶל־הָאָרֶץ אֲשֶׁר־יָצָאתָ מִשָּׁם׃  וַיֹּאמֶר אֵלָיו אַבְרָהָם הִשָּׁמֶר לְךָ פֶּן־תָּשִׁיב אֶת־בְּנִי שָׁמָּה׃  יְהוָה אֱלֹהֵי הַשָּׁמַיִם אֲשֶׁר לְקָחַנִי מִבֵּית אָבִי וּמֵאֶרֶץ מוֹלַדְתִּי וַאֲשֶׁר דִּבֶּר־לִי וַאֲשֶׁר נִשְׁבַּע־לִי לֵאמֹר לְזַרְעֲךָ אֶתֵּן אֶת־הָאָרֶץ הַזֹּאת הוּא יִשְׁלַח מַלְאָכוֹ לְפָנֶיךָ וְלָקַחְתָּ אִשָּׁה לִבְנִי מִשָּׁם׃  וְאִם־לֹא תֹאבֶה הָאִשָּׁה לָלֶכֶת אַחֲרֶיךָ וְנִקִּיתָ מִשְּׁבֻעָתִי זֹאת רַק אֶת־בְּנִי לֹא תָשֵׁב שָׁמָּה׃  וַיָּשֶׂם הָעֶבֶד אֶת־יָדוֹ תַּחַת יֶרֶךְ אַבְרָהָם אֲדֹנָיו וַיִּשָּׁבַע לוֹ עַל־הַדָּבָר הַזֶּה׃  וַיִּקַּח הָעֶבֶד עֲשָׂרָה גְמַלִּים מִגְּמַלֵּי אֲדֹנָיו וַיֵּלֶךְ וְכָל־טוּב אֲדֹנָיו בְּיָדוֹ וַיָּקָם וַיֵּלֶךְ אֶל־אֲרַם נַהֲרַיִם אֶל־עִיר נָחוֹר׃  וַיַּבְרֵךְ הַגְּמַלִּים מִחוּץ לָעִיר אֶל־בְּאֵר הַמָּיִם לְעֵת עֶרֶב לְעֵת צֵאת הַשֹּׁאֲבֹת׃  וַיֹּאמַר יְהוָה אֱלֹהֵי אֲדֹנִי אַבְרָהָם הַקְרֵה־נָא לְפָנַי הַיּוֹם וַעֲשֵׂה־חֶסֶד עִם אֲדֹנִי אַבְרָהָם׃  הִנֵּה אָנֹכִי נִצָּב עַל־עֵין הַמָּיִם וּבְנוֹת אַנְשֵׁי הָעִיר יֹצְאֹת לִשְׁאֹב מָיִם׃  וְהָיָה הַנַּעֲרָ אֲשֶׁר אֹמַר אֵלֶיהָ הַטִּי־נָא כַדֵּךְ וְאֶשְׁתֶּה וְאָמְרָה שְׁתֵה וְגַם־גְּמַלֶּיךָ אַשְׁקֶה אֹתָהּ הֹכַחְתָּ לְעַבְדְּךָ לְיִצְחָק וּבָהּ אֵדַע כִּי־עָשִׂיתָ חֶסֶד עִם־אֲדֹנִי׃  וַיְהִי־הוּא טֶרֶם כִּלָּה לְדַבֵּר וְהִנֵּה רִבְקָה יֹצֵאת אֲשֶׁר יֻלְּדָה לִבְתוּאֵל בֶּן־מִלְכָּה אֵשֶׁת נָחוֹר אֲחִי אַבְרָהָם וְכַדָּהּ עַל־שִׁכְמָהּ׃  וְהַנַּעֲרָ טֹבַת מַרְאֶה מְאֹד בְּתוּלָה וְאִישׁ לֹא יְדָעָהּ וַתֵּרֶד הָעַיְנָה וַתְּמַלֵּא כַדָּהּ וַתָּעַל׃  וַיָּרָץ הָעֶבֶד לִקְרָאתָהּ וַיֹּאמֶר הַגְמִיאִינִי נָא מְעַט־מַיִם מִכַּדֵּךְ׃  וַתֹּאמֶר שְׁתֵה אֲדֹנִי וַתְּמַהֵר וַתֹּרֶד כַּדָּהּ עַל־יָדָהּ וַתַּשְׁקֵהוּ׃  וַתְּכַל לְהַשְׁקֹתוֹ וַתֹּאמֶר גַּם לִגְמַלֶּיךָ אֶשְׁאָב עַד אִם־כִּלּוּ לִשְׁתֹּת׃  וַתְּמַהֵר וַתְּעַר כַּדָּהּ אֶל־הַשֹּׁקֶת וַתָּרָץ עוֹד אֶל־הַבְּאֵר לִשְׁאֹב וַתִּשְׁאַב לְכָל־גְּמַלָּיו׃  וְהָאִישׁ מִשְׁתָּאֵה לָהּ מַחֲרִישׁ לָדַעַת הַהִצְלִיחַ יְהוָה דַּרְכּוֹ אִם־לֹא׃  וַיְהִי כַּאֲשֶׁר כִּלּוּ הַגְּמַלִּים לִשְׁתּוֹת וַיִּקַּח הָאִישׁ נֶזֶם זָהָב בֶּקַע מִשְׁקָלוֹ וּשְׁנֵי צְמִידִים עַל־יָדֶיהָ עֲשָׂרָה זָהָב מִשְׁקָלָם׃  וַיֹּאמֶר בַּת־מִי אַתְּ הַגִּידִי נָא לִי הֲיֵשׁ בֵּית־אָבִיךְ מָקוֹם לָנוּ לָלִין׃  וַתֹּאמֶר אֵלָיו בַּת־בְּתוּאֵל אָנֹכִי בֶּן־מִלְכָּה אֲשֶׁר יָלְדָה לְנָחוֹר׃  וַתֹּאמֶר אֵלָיו גַּם־תֶּבֶן גַּם־מִסְפּוֹא רַב עִמָּנוּ גַּם־מָקוֹם לָלוּן׃  וַיִּקֹּד הָאִישׁ וַיִּשְׁתַּחוּ לַיהוָה׃  וַיֹּאמֶר בָּרוּךְ יְהוָה אֱלֹהֵי אֲדֹנִי אַבְרָהָם אֲשֶׁר לֹא־עָזַב חַסְדּוֹ וַאֲמִתּוֹ מֵעִם אֲדֹנִי אָנֹכִי בַּדֶּרֶךְ נָחַנִי יְהוָה בֵּית אֲחֵי אֲדֹנִי׃  וַתָּרָץ הַנַּעֲרָ וַתַּגֵּד לְבֵית אִמָּהּ כַּדְּבָרִים הָאֵלֶּה׃  וּלְרִבְקָה אָח וּשְׁמוֹ לָבָן וַיָּרָץ לָבָן אֶל־הָאִישׁ הַחוּצָה אֶל־הָעָיִן׃  וַיְהִי כִּרְאֹת אֶת־הַנֶּזֶם וְאֶת־הַצְּמִדִים עַל־יְדֵי אֲחֹתוֹ וּכְשָׁמְעוֹ אֶת־דִּבְרֵי רִבְקָה אֲחֹתוֹ לֵאמֹר כֹּה־דִבֶּר אֵלַי הָאִישׁ וַיָּבֹא אֶל־הָאִישׁ וְהִנֵּה עֹמֵד עַל־הַגְּמַלִּים עַל־הָעָיִן׃  וַיֹּאמֶר בּוֹא בְּרוּךְ יְהוָה לָמָּה תַעֲמֹד בַּחוּץ וְאָנֹכִי פִּנִּיתִי הַבַּיִת וּמָקוֹם לַגְּמַלִּים׃  וַיָּבֹא הָאִישׁ הַבַּיְתָה וַיְפַתַּח הַגְּמַלִּים וַיִּתֵּן תֶּבֶן וּמִסְפּוֹא לַגְּמַלִּים וּמַיִם לִרְחֹץ רַגְלָיו וְרַגְלֵי הָאֲנָשִׁים אֲשֶׁר אִתּוֹ׃  ויישם  וַיּוּשַׂם  לְפָנָיו לֶאֱכֹל וַיֹּאמֶר לֹא אֹכַל עַד אִם־דִּבַּרְתִּי דְּבָרָי וַיֹּאמֶר דַּבֵּר׃  וַיֹּאמַר עֶבֶד אַבְרָהָם אָנֹכִי׃  וַיהוָה בֵּרַךְ אֶת־אֲדֹנִי מְאֹד וַיִּגְדָּל וַיִּתֶּן־לוֹ צֹאן וּבָקָר וְכֶסֶף וְזָהָב וַעֲבָדִם וּשְׁפָחֹת וּגְמַלִּים וַחֲמֹרִים׃  וַתֵּלֶד שָׂרָה אֵשֶׁת אֲדֹנִי בֵן לַאדֹנִי אַחֲרֵי זִקְנָתָהּ וַיִּתֶּן־לּוֹ אֶת־כָּל־אֲשֶׁר־לוֹ׃  וַיַּשְׁבִּעֵנִי אֲדֹנִי לֵאמֹר לֹא־תִקַּח אִשָּׁה לִבְנִי מִבְּנוֹת הַכְּנַעֲנִי אֲשֶׁר אָנֹכִי יֹשֵׁב בְּאַרְצוֹ׃  אִם־לֹא אֶל־בֵּית־אָבִי תֵּלֵךְ וְאֶל־מִשְׁפַּחְתִּי וְלָקַחְתָּ אִשָּׁה לִבְנִי׃  וָאֹמַר אֶל־אֲדֹנִי אֻלַי לֹא־תֵלֵךְ הָאִשָּׁה אַחֲרָי׃  וַיֹּאמֶר אֵלָי יְהוָה אֲשֶׁר־הִתְהַלַּכְתִּי לְפָנָיו יִשְׁלַח מַלְאָכוֹ אִתָּךְ וְהִצְלִיחַ דַּרְכֶּךָ וְלָקַחְתָּ אִשָּׁה לִבְנִי מִמִּשְׁפַּחְתִּי וּמִבֵּית אָבִי׃  אָז תִּנָּקֶה מֵאָלָתִי כִּי תָבוֹא אֶל־מִשְׁפַּחְתִּי וְאִם־לֹא יִתְּנוּ לָךְ וְהָיִיתָ נָקִי מֵאָלָתִי׃  וָאָבֹא הַיּוֹם אֶל־הָעָיִן וָאֹמַר יְהוָה אֱלֹהֵי אֲדֹנִי אַבְרָהָם אִם־יֶשְׁךָ־נָּא מַצְלִיחַ דַּרְכִּי אֲשֶׁר אָנֹכִי הֹלֵךְ עָלֶיהָ׃  הִנֵּה אָנֹכִי נִצָּב עַל־עֵין הַמָּיִם וְהָיָה הָעַלְמָה הַיֹּצֵאת לִשְׁאֹב וְאָמַרְתִּי אֵלֶיהָ הַשְׁקִינִי־נָא מְעַט־מַיִם מִכַּדֵּךְ׃  וְאָמְרָה אֵלַי גַּם־אַתָּה שְׁתֵה וְגַם לִגְמַלֶּיךָ אֶשְׁאָב הִוא הָאִשָּׁה אֲשֶׁר־הֹכִיחַ יְהוָה לְבֶן־אֲדֹנִי׃  אֲנִי טֶרֶם אֲכַלֶּה לְדַבֵּר אֶל־לִבִּי וְהִנֵּה רִבְקָה יֹצֵאת וְכַדָּהּ עַל־שִׁכְמָהּ וַתֵּרֶד הָעַיְנָה וַתִּשְׁאָב וָאֹמַר אֵלֶיהָ הַשְׁקִינִי נָא׃  וַתְּמַהֵר וַתּוֹרֶד כַּדָּהּ מֵעָלֶיהָ וַתֹּאמֶר שְׁתֵה וְגַם־גְּמַלֶּיךָ אַשְׁקֶה וָאֵשְׁתְּ וְגַם הַגְּמַלִּים הִשְׁקָתָה׃  וָאֶשְׁאַל אֹתָהּ וָאֹמַר בַּת־מִי אַתְּ וַתֹּאמֶר בַּת־בְּתוּאֵל בֶּן־נָחוֹר אֲשֶׁר יָלְדָה־לּוֹ מִלְכָּה וָאָשִׂם הַנֶּזֶם עַל־אַפָּהּ וְהַצְּמִידִים עַל־יָדֶיהָ׃  וָאֶקֹּד וָאֶשְׁתַּחֲוֶה לַיהוָה וָאֲבָרֵךְ אֶת־יְהוָה אֱלֹהֵי אֲדֹנִי אַבְרָהָם אֲשֶׁר הִנְחַנִי בְּדֶרֶךְ אֱמֶת לָקַחַת אֶת־בַּת־אֲחִי אֲדֹנִי לִבְנוֹ׃  וְעַתָּה אִם־יֶשְׁכֶם עֹשִׂים חֶסֶד וֶאֱמֶת אֶת־אֲדֹנִי הַגִּידוּ לִי וְאִם־לֹא הַגִּידוּ לִי וְאֶפְנֶה עַל־יָמִין אוֹ עַל־שְׂמֹאל׃  וַיַּעַן לָבָן וּבְתוּאֵל וַיֹּאמְרוּ מֵיְהוָה יָצָא הַדָּבָר לֹא נוּכַל דַּבֵּר אֵלֶיךָ רַע אוֹ־טוֹב׃  הִנֵּה־רִבְקָה לְפָנֶיךָ קַח וָלֵךְ וּתְהִי אִשָּׁה לְבֶן־אֲדֹנֶיךָ כַּאֲשֶׁר דִּבֶּר יְהוָה׃  וַיְהִי כַּאֲשֶׁר שָׁמַע עֶבֶד אַבְרָהָם אֶת־דִּבְרֵיהֶם וַיִּשְׁתַּחוּ אַרְצָה לַיהוָה׃  וַיּוֹצֵא הָעֶבֶד כְּלֵי־כֶסֶף וּכְלֵי זָהָב וּבְגָדִים וַיִּתֵּן לְרִבְקָה וּמִגְדָּנֹת נָתַן לְאָחִיהָ וּלְאִמָּהּ׃  וַיֹּאכְלוּ וַיִּשְׁתּוּ הוּא וְהָאֲנָשִׁים אֲשֶׁר־עִמּוֹ וַיָּלִינוּ וַיָּקוּמוּ בַבֹּקֶר וַיֹּאמֶר שַׁלְּחֻנִי לַאדֹנִי׃  וַיֹּאמֶר אָחִיהָ וְאִמָּהּ תֵּשֵׁב הַנַּעֲרָ אִתָּנוּ יָמִים אוֹ עָשׂוֹר אַחַר תֵּלֵךְ׃  וַיֹּאמֶר אֲלֵהֶם אַל־תְּאַחֲרוּ אֹתִי וַיהוָה הִצְלִיחַ דַּרְכִּי שַׁלְּחוּנִי וְאֵלְכָה לַאדֹנִי׃  וַיֹּאמְרוּ נִקְרָא לַנַּעֲרָ וְנִשְׁאֲלָה אֶת־פִּיהָ׃  וַיִּקְרְאוּ לְרִבְקָה וַיֹּאמְרוּ אֵלֶיהָ הֲתֵלְכִי עִם־הָאִישׁ הַזֶּה וַתֹּאמֶר אֵלֵךְ׃  וַיְשַׁלְּחוּ אֶת־רִבְקָה אֲחֹתָם וְאֶת־מֵנִקְתָּהּ וְאֶת־עֶבֶד אַבְרָהָם וְאֶת־אֲנָשָׁיו׃  וַיְבָרֲכוּ אֶת־רִבְקָה וַיֹּאמְרוּ`

let words = text.split(/\s+/)

const MAXWIDTH = 500

measurer = document.createElement('span')
measurer.setAttribute('id', 'Test')
document.body.appendChild(measurer)

start()

async function start() {
  let line = []
  let lines = [line]

  for (let i = 0, n = words.length; i < n; i++) {
    await appendToLines(lines, words[i], ' ', 1.0)
  }

  var result = []

  lines.forEach(line => {
    result.push(`<div>${line.join(line.joiner)}</div>`)
  })

  document.querySelector('#box').innerHTML = result.join('\n')
}

async function appendToLines(lines, next, join, grow = 1.1) {
  return new Promise((res, rej) => {
    let line = lines[lines.length - 1]
    line.joiner = join
    let text = line.concat([next]).join(join)
    const size = measure(text, function(size){
      if (size * grow >= MAXWIDTH) {
        if (line[line.length - 1].match('class="s')) {
          line = [line.pop(), next]
        } else {
          line = [next]
        }
        lines.push(line)
      } else {
        line.push(next)
      }
      res()
    })
  })
}

function measure(string, fn) {
  measurer.innerHTML = string
  var a = measurer.offsetWidth
  setTimeout(function(){
    var b = measurer.offsetWidth
    fn(b)
  }, 1)
}

#Test {
  position: absolute;
  height: auto;
  width: auto;
  white-space: nowrap; /* Thanks to Herb Caudill comment */
}

#box {
  width: 500px;
  height: 500px;
  background: red;
}

<div id="box">

</div>

Вы заметите, что текст быстро добавляется к DOM, измеряется, ждет тайм-аут, затем измеряется снова, и когда он наконец готово, он выкладывает текст. Каждая строка должна иметь рассчитанную ширину.

Но происходит так, что измеренный текст больше , чем MAXWIDTH. Проверьте отрисованный текст, местами он выходит за пределы следующей строки. Мне пришлось добавить параметр grow в качестве множителя, чтобы заставить его работать разумно. С этим коэффициентом он измеряет: «О, это плюс некоторый буфер длиннее MAXWIDTH, поэтому создайте новую строку». Он не работает без этого буфера.

Что еще хуже, если вы удалите асинхронность функции measure и сделаете ее синхронной, это даст еще худшие результаты. Почему это? Это зависит от шрифта, который я использую? Если это важно, я использую шрифты Noto.

Как правильно рассчитать ширину текста заранее, чтобы я мог рассчитывать отдельные строки, не оборачиваясь вокруг?

Answer 1

У меня была аналогичная проблема в одном из моих приложений, и я довольно много исследовал измерение текста.

Есть только 2 способа сделать это, которые действительно совместимы с обычными браузерами:

1. То, как вы это делаете, измеряя элемент HTML: это очень плохой способ сделать это, потому что он заставляет перекомпоновку / компоновку каждый раз, когда вы вызываете offsetWidth или аналогичную функцию (см. https://gist.github.com/paulirish/5d52fb081b3570c81e3a ). Это также может быть причиной проблем с вашим кодом (ваш пример действительно работает для меня, или я действительно не понимаю, что не работает из примера).

2. Другой способ для этого (что я предпочитаю) используется метод measureText для 2d-контекста холста (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText). Проблема здесь в том, что метод measureText () не может вычислять разрывы строк (он будет использовать \ n, если он есть, но не может разрывать строки сам по себе). Придется делать это самому. Это также имеет проблему, заключающуюся в том, что холст measureText().width дает немного другие значения, чем фактическая ширина html элементов с тем же текстом. Современные браузеры поддерживают .actualBoundingBoxRight вместо .width, что более точно, но все же не идеально. Чтобы отрегулировать это, вам нужно будет вычислить с немного другим maxWidth, чем фактически требуется (в моем случае выше). Если вас не волнует выбор текста, вы также можете просто отобразить текст прямо на холсте, тогда вычисления будут точными.

Я предполагаю из вашего кода, что вы хотите разбивать слова целиком. Это простой пример, который не учитывает проблему, когда одно слово на самом деле шире, чем желаемая ширина. Вам нужно будет внести коррективы для этого, если это возможная проблема.

Производительность также можно оптимизировать в зависимости от сценария использования. Здесь я измеряю отдельные слова, что может быть неоптимальным, если в строке много слов. Вы также можете оценить количество слов / символов в строке, а затем попробовать оттуда. Примерно так: примерное количество слов в строке - 10, поэтому попробуйте измерить первые 10 слов, если оно> maxWidth, уберите одно слово (или несколько, если смещение большое) и измерьте снова. Если это

const text = "וַיּוֹצֵא הָעֶבֶד כְּלֵי־כֶסֶף וּכְלֵי זָהָב וּבְגָדִים וַיִּתֵּן לְרִבְקָה וּמִגְדָּנֹת נָתַן לְאָחִיהָ וּלְאִמָּהּ׃  וַיֹּאכְלוּ וַיִּשְׁתּוּ הוּא וְהָאֲנָשִׁים אֲשֶׁר־עִמּוֹ וַיָּלִינוּ וַיָּקוּמוּ בַבֹּקֶר וַיֹּאמֶר שַׁלְּחֻנִי לַאדֹנִי׃  וַיֹּאמֶר אָחִיהָ וְאִמָּהּ תֵּשֵׁב הַנַּעֲרָ אִתָּנוּ יָמִים אוֹ עָשׂוֹר אַחַר תֵּלֵךְ׃  וַיֹּאמֶר אֲלֵהֶם אַל־תְּאַחֲרוּ אֹתִי וַיהוָה הִצְלִיחַ דַּרְכִּי שַׁלְּחוּנִי וְאֵלְכָה לַאדֹנִי׃  וַיֹּאמְרוּ נִקְרָא לַנַּעֲרָ וְנִשְׁאֲלָה אֶת־פִּיהָ׃  וַיִּקְרְאוּ לְרִבְקָה וַיֹּאמְרוּ אֵלֶיהָ הֲתֵלְכִי עִם־הָאִישׁ הַזֶּה וַתֹּאמֶר אֵלֵךְ׃  וַיְשַׁלְּחוּ אֶת־רִבְקָה אֲחֹתָם וְאֶת־מֵנִקְתָּהּ וְאֶת־עֶבֶד אַבְרָהָם וְאֶת־אֲנָשָׁיו׃  וַיְבָרֲכוּ אֶת־רִבְקָה וַיֹּאמְרוּ";
const words = text.split(/\s+/);
const canvas = document.createElement("canvas");
const ctx = canvas.getContext('2d');
// font size, style and family of context and target html element must be the same
ctx.font = "15px sans-serif";
document.body.style = "font-size: 15px; font-family: sans-serif";
const spaceWidth = ctx.measureText(" ").width
// the measure text seems to slightly differs from how the browser actually renders the text outside a canvas. using actualBoundingBoxRight instead of width gives better results but is not supported by any IE. see https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics
const wordWidths = words.map(w => ctx.measureText(w).width);
// const wordWidths = words.map(w => ctx.measureText(w).actualBoundingBoxRight);

let currentLine = '';
let currentWidth = 0;
let line = 0;
const maxWidth = 300;
words.forEach((word, i) => {
  let width = wordWidths[i];
  if (currentWidth > 0) width += spaceWidth;
  // this goes wrong if a single word has a width > maxWidth -> can be broken up hear by measuring the 
  if (currentWidth + width > maxWidth) {
    // console.log(currentWidth); for reference, this differs slightly from the actual rendered content
    appendLine(currentLine, line);
    currentLine = '';
    currentWidth = 0;
    line++;
  }
  if(currentWidth > 0) currentLine += ' ';
  currentLine += word;
  currentWidth += width;
});
if(currentWidth > 0) appendLine(currentLine, line);

function appendLine(text, index) {
  const div = document.createElement("div");
  div.innerText = text;
  // for testing a line height of 20 is used here, but it could also be calculated using the font-size
  div.style = `position:absolute;top:${index * 20}px;left:0`;
  document.body.appendChild(div);
}